/*
 * Язык кабинета: детали, из которых собираются все игровые экраны.
 *
 * ЗАЧЕМ ОТДЕЛЬНЫЙ НАБОР
 * Прежние экраны собирались каждый из своих кусков, и после трёх правок
 * кабинет всё равно читался как отчёт: одинаковые серые карточки, числа
 * вместо действия. Дом, карта курса, награда за урок и практика собираются
 * из одного набора деталей — как главная страница, у которой этот язык уже
 * есть: клавиши с нижней гранью, мягкие карточки, тона разделов, маскот.
 *
 * ЦВЕТА НЕ СВОИ
 * Поверхности берутся из переменных темы (--card-bg, --bg-secondary и т.д.),
 * тона — из --cw-sun / --cw-coral / --cw-mint / --cw-sky / --cw-grape, которые
 * уже объявлены в app.css для светлой и тёмной темы. Поэтому набор работает в
 * обеих темах и не заводит третью палитру.
 *
 * ОТДЕЛЬНЫМ ФАЙЛОМ
 * app.css собирает Vite, и правка стиля потребовала бы сборки. Этот файл
 * подключается напрямую, как cw-crumbs.css и cw-sidebar.css.
 *
 * Префикс cwk- (cabinet kit), чтобы не столкнуться с cw-* из app.css.
 */

.cwk {
    --cwk-radius: 22px;
    --cwk-edge: color-mix(in srgb, var(--tone, var(--cw-sky)) 55%, #000);
    display: grid;
    gap: 18px;
    align-content: start;
}

/* ------------------------------------------------------------------ тона */

.cwk [data-cwk-tone="sun"], .cwk-tone--sun { --tone: var(--cw-sun); --tone-edge: var(--cw-sun-edge); }
.cwk [data-cwk-tone="coral"], .cwk-tone--coral { --tone: var(--cw-coral); --tone-edge: var(--cw-coral-edge); }
.cwk [data-cwk-tone="mint"], .cwk-tone--mint { --tone: var(--cw-mint); --tone-edge: color-mix(in srgb, var(--cw-mint) 62%, #000); }
.cwk [data-cwk-tone="sky"], .cwk-tone--sky { --tone: var(--cw-sky); --tone-edge: color-mix(in srgb, var(--cw-sky) 62%, #000); }
.cwk [data-cwk-tone="grape"], .cwk-tone--grape { --tone: var(--cw-grape); --tone-edge: color-mix(in srgb, var(--cw-grape) 62%, #000); }

/* ---------------------------------------------------------------- клавиша

   Кнопка-клавиша: тот же предмет, что и на главной. Нажатие проседает вниз,
   как настоящая клавиша, поэтому под ней плотная грань, а не мягкая тень. */

.cwk-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 50px;
    padding: 0 26px;
    border: 0;
    border-radius: 17px;
    background: var(--cw-sun);
    color: #2E2118;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 5px 0 var(--cw-sun-edge);
    transition: transform .09s, box-shadow .09s;
}
.cwk-key:hover { color: #2E2118; }
.cwk-key:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--cw-sun-edge); }
.cwk-key:focus-visible { outline: 3px solid var(--cw-sky); outline-offset: 3px; }

.cwk-key--mint { background: var(--cw-mint); color: #07301C; box-shadow: 0 5px 0 color-mix(in srgb, var(--cw-mint) 62%, #000); }
.cwk-key--mint:hover { color: #07301C; }
.cwk-key--mint:active { box-shadow: 0 2px 0 color-mix(in srgb, var(--cw-mint) 62%, #000); }

.cwk-key--sky { background: var(--cw-sky); color: #06203D; box-shadow: 0 5px 0 color-mix(in srgb, var(--cw-sky) 62%, #000); }
.cwk-key--sky:hover { color: #06203D; }

/* Тихая клавиша: тот же предмет, но из материала страницы. */
.cwk-key--ghost {
    background: var(--card-bg);
    color: var(--text-primary);
    box-shadow: 0 4px 0 var(--border-primary);
}
.cwk-key--ghost:hover { color: var(--text-primary); background: var(--hover-bg); }
.cwk-key--ghost:active { box-shadow: 0 2px 0 var(--border-primary); }

.cwk-key--sm { height: 40px; padding: 0 16px; border-radius: 13px; font-size: 14px; box-shadow: 0 4px 0 var(--cw-sun-edge); }
.cwk-key--ghost.cwk-key--sm { box-shadow: 0 3px 0 var(--border-primary); }
.cwk-key--wide { width: 100%; }

/* ---------------------------------------------------------------- карточка */

.cwk-card {
    padding: 18px;
    border: 1px solid var(--border-primary);
    border-radius: var(--cwk-radius);
    background: var(--card-bg);
}
.cwk-card--tone { border-bottom: 3px solid color-mix(in srgb, var(--tone) 55%, var(--border-primary)); }
.cwk-card--tint {
    background: linear-gradient(135deg, color-mix(in srgb, var(--tone) 16%, var(--card-bg)), var(--card-bg));
    border-color: color-mix(in srgb, var(--tone) 35%, var(--border-primary));
}

.cwk-h { margin: 0; font-size: 15.5px; font-weight: 800; color: var(--text-primary); letter-spacing: -.01em; }
.cwk-sub { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.cwk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cwk-head a { font-size: 12.5px; font-weight: 700; color: var(--accent-primary); text-decoration: none; }
.cwk-head a:hover { text-decoration: underline; }

.cwk-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    background: color-mix(in srgb, var(--tone, var(--cw-sky)) 16%, transparent);
    color: color-mix(in srgb, var(--tone, var(--cw-sky)) 72%, var(--text-primary));
}
[data-theme="dark"] .cwk-chip { color: var(--tone, var(--cw-sky)); }

/* ------------------------------------------------------------------ Клава

   Маскот с главной: на первом экране кабинета он здоровается, на экране
   награды радуется. Рисуется на CSS, картинка не грузится. */

.cwk-klava { --s: 64px; width: var(--s); height: var(--s); position: relative; flex-shrink: 0; }
.cwk-klava__cap {
    position: absolute; inset: 0;
    border-radius: calc(var(--s) * .22);
    background: var(--cw-sun);
    box-shadow: 0 calc(var(--s) * .07) 0 var(--cw-sun-edge);
}
.cwk-klava__cap::before {
    content: "";
    position: absolute; left: 8%; right: 8%; top: 8%; height: 34%;
    border-radius: calc(var(--s) * .17);
    background: rgba(255, 255, 255, .34);
}
.cwk-klava__eyes {
    position: absolute; left: 0; right: 0; top: calc(var(--s) * .34);
    display: flex; justify-content: center; gap: calc(var(--s) * .16);
}
.cwk-klava__eyes i {
    width: calc(var(--s) * .11);
    height: calc(var(--s) * .15);
    border-radius: calc(var(--s) * .06);
    background: #2E2118;
}
.cwk-klava__smile {
    position: absolute; left: 50%; top: calc(var(--s) * .58);
    transform: translateX(-50%);
    width: calc(var(--s) * .2); height: calc(var(--s) * .1);
    border-bottom: max(2px, calc(var(--s) * .035)) solid #2E2118;
    border-radius: 0 0 var(--s) var(--s);
}

/* ---------------------------------------------------------------- приветствие */

.cwk-hello { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cwk-hello__txt { flex: 1 1 260px; min-width: 0; }
.cwk-hello__txt h1 { margin: 0; font-size: clamp(21px, 3vw, 27px); font-weight: 850; letter-spacing: -.02em; color: var(--text-primary); }
.cwk-hello__txt p { margin: 4px 0 0; font-size: 13.5px; color: var(--text-secondary); }

/* Серия: единственное место, где уместен огонь — он и есть предмет разговора. */
.cwk-streak {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 16px 9px 12px;
    border-radius: 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--cw-coral) 22%, transparent), color-mix(in srgb, var(--cw-sun) 18%, transparent));
    border: 1px solid color-mix(in srgb, var(--cw-coral) 32%, transparent);
}
.cwk-streak__n { font-size: 22px; font-weight: 900; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.cwk-streak__t { font-size: 11.5px; color: var(--text-secondary); }
.cwk-streak__fire { font-size: 23px; line-height: 1; }

/* ---------------------------------------------------------------- уровень */

.cwk-lvl { display: grid; gap: 6px; flex: 1 1 240px; min-width: 200px; }
.cwk-lvl__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--text-muted); }
.cwk-lvl__top b { font-size: 14px; font-weight: 800; color: var(--text-primary); }
.cwk-lvl__bar { height: 10px; border-radius: 999px; background: var(--bg-tertiary); overflow: hidden; }
.cwk-lvl__bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cw-sun), var(--cw-coral)); }

/* ---------------------------------------------------------------- продолжить

   Главное действие экрана. Не строка в списке, а карточка во всю ширину:
   человек приходит продолжать, а не выбирать. */

.cwk-go {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    border-radius: var(--cwk-radius);
    text-decoration: none;
    color: inherit;
    background: linear-gradient(135deg, color-mix(in srgb, var(--tone) 18%, var(--card-bg)), var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--tone) 35%, var(--border-primary));
}
.cwk-go:hover { border-color: color-mix(in srgb, var(--tone) 55%, var(--border-primary)); }
.cwk-go__ico {
    width: 56px; height: 56px; flex-shrink: 0;
    border-radius: 18px;
    display: grid; place-items: center;
    background: var(--tone);
    color: #0B1220;
    box-shadow: 0 5px 0 var(--tone-edge);
}
.cwk-go__t { min-width: 0; }
.cwk-go__kicker { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--tone) 70%, var(--text-primary)); }
[data-theme="dark"] .cwk-go__kicker { color: var(--tone); }
.cwk-go__name { display: block; margin-top: 3px; font-size: 18px; font-weight: 800; color: var(--text-primary); overflow-wrap: anywhere; }
.cwk-go__meta { margin: 6px 0 0; font-size: 12.5px; color: var(--text-secondary); }
@media (max-width: 700px) {
    .cwk-go { grid-template-columns: auto minmax(0, 1fr); }
    .cwk-go .cwk-key { grid-column: 1 / -1; width: 100%; }
}

/* ------------------------------------------------------------- час разлома

   Единственное в проекте событие, которое происходит в конкретное время в
   конкретном месте. Плашка появляется, только пока оно идёт, поэтому может
   позволить себе быть заметнее остальных блоков: не карточка среди карточек,
   а строка с пульсирующей точкой.
   -------------------------------------------------------------------------- */

.cwk-rift {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
    border-radius: var(--cwk-radius);
    text-decoration: none;
    color: inherit;
    background: linear-gradient(135deg, color-mix(in srgb, #FF6B4A 14%, var(--card-bg)), var(--card-bg));
    border: 1px solid color-mix(in srgb, #FF6B4A 40%, var(--border-primary));
}
.cwk-rift:hover { border-color: color-mix(in srgb, #FF6B4A 65%, var(--border-primary)); }

.cwk-rift__dot {
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #FF6B4A;
    box-shadow: 0 0 0 0 rgba(255, 107, 74, .55);
    animation: cwk-rift-pulse 1.9s ease-out infinite;
}

.cwk-rift__t { min-width: 0; }
.cwk-rift__t b {
    display: block;
    font-size: 15px; font-weight: 800;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}
.cwk-rift__t span {
    display: block; margin-top: 2px;
    font-size: 12.5px;
    color: var(--text-secondary);
}

@keyframes cwk-rift-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 107, 74, .55); }
    70%  { box-shadow: 0 0 0 11px rgba(255, 107, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 107, 74, 0); }
}

/* Мигающая точка — украшение, и в режиме пониженной анимации ей незачем
   отвлекать: событие читается по тексту ровно так же */
@media (prefers-reduced-motion: reduce) {
    .cwk-rift__dot { animation: none; }
}

@media (max-width: 640px) {
    .cwk-rift { grid-template-columns: auto minmax(0, 1fr); }
    .cwk-rift .cwk-key { grid-column: 1 / -1; width: 100%; }
}

/* ---------------------------------------------------------------- задачи дня */

.cwk-quests { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.cwk-quest {
    display: grid; gap: 9px;
    padding: 14px 16px;
    border: 1px solid var(--border-primary);
    border-radius: 18px;
    background: var(--card-bg);
}
.cwk-quest.is-done { border-color: color-mix(in srgb, var(--cw-mint) 45%, transparent); }
.cwk-quest__top { display: flex; align-items: center; gap: 10px; }
.cwk-quest__ico {
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 10px;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--tone) 18%, transparent);
    color: color-mix(in srgb, var(--tone) 75%, var(--text-primary));
}
[data-theme="dark"] .cwk-quest__ico { color: var(--tone); }
.cwk-quest__name { font-size: 13.5px; font-weight: 800; color: var(--text-primary); }
.cwk-quest.is-done .cwk-quest__name { color: color-mix(in srgb, var(--cw-mint) 70%, var(--text-primary)); }
[data-theme="dark"] .cwk-quest.is-done .cwk-quest__name { color: var(--cw-mint); }
.cwk-quest__xp { margin-left: auto; font-size: 12px; font-weight: 900; color: color-mix(in srgb, var(--tone) 75%, var(--text-primary)); }
[data-theme="dark"] .cwk-quest__xp { color: var(--tone); }
.cwk-quest__bar { height: 7px; border-radius: 999px; background: var(--bg-tertiary); overflow: hidden; }
.cwk-quest__bar i { display: block; height: 100%; border-radius: 999px; background: var(--tone); }
.cwk-quest__note { font-size: 11.5px; color: var(--text-muted); }

/* ---------------------------------------------------------------- карта пути */

.cwk-map { display: grid; justify-items: center; gap: 4px; }
.cwk-map__row { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }
.cwk-node {
    width: 54px; height: 54px;
    border-radius: 18px;
    display: grid; place-items: center;
    font-size: 15px; font-weight: 900;
    text-decoration: none;
    position: relative;
    font-variant-numeric: tabular-nums;
}
.cwk-node--done { background: var(--cw-mint); color: #07301C; box-shadow: 0 4px 0 color-mix(in srgb, var(--cw-mint) 62%, #000); }
.cwk-node--now {
    background: var(--cw-sun); color: #2E2118;
    box-shadow: 0 5px 0 var(--cw-sun-edge), 0 0 0 6px color-mix(in srgb, var(--cw-sun) 20%, transparent);
}
.cwk-node--lock { background: var(--bg-tertiary); color: var(--text-muted); box-shadow: 0 4px 0 var(--border-primary); }
.cwk-node--chest { background: var(--cw-grape); color: #1B0E3D; box-shadow: 0 4px 0 color-mix(in srgb, var(--cw-grape) 62%, #000); }
.cwk-node--boss { width: 62px; height: 62px; border-radius: 20px; background: var(--cw-coral); color: #3D1206; box-shadow: 0 4px 0 var(--cw-coral-edge); }
.cwk-node__stars { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; }
.cwk-node__stars i { width: 7px; height: 7px; border-radius: 2px; background: var(--cw-sun); transform: rotate(45deg); }
.cwk-node__stars i.is-off { background: var(--border-secondary); }
.cwk-map__note { margin-top: 12px; font-size: 11.5px; color: var(--text-muted); }

/* ---------------------------------------------------------------- звёзды и числа */

.cwk-stars { display: flex; gap: 7px; justify-content: center; }
.cwk-stars i {
    width: 24px; height: 24px;
    background: var(--cw-sun);
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.cwk-stars i.is-off { background: var(--border-secondary); }

.cwk-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.cwk-num { padding: 11px 12px; border: 1px solid var(--border-primary); border-radius: 16px; background: var(--card-bg); text-align: center; }
.cwk-num b { display: block; font-size: 21px; font-weight: 900; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.15; }
.cwk-num span { font-size: 11.5px; color: var(--text-muted); }

/* ---------------------------------------------------------------- полка наград */

.cwk-shelf { display: flex; flex-wrap: wrap; gap: 10px; }
.cwk-medal { width: 70px; display: grid; justify-items: center; gap: 6px; text-decoration: none; }
.cwk-medal__box {
    width: 52px; height: 52px;
    border-radius: 17px;
    display: grid; place-items: center;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    box-shadow: 0 3px 0 var(--border-primary);
}
.cwk-medal.is-got .cwk-medal__box { background: var(--tone); color: #14181F; box-shadow: 0 3px 0 var(--tone-edge); }
.cwk-medal__t { font-size: 10.5px; line-height: 1.2; text-align: center; color: var(--text-secondary); }
.cwk-medal svg { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- витрина практики */

.cwk-arcade { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.cwk-game {
    display: grid; gap: 8px;
    padding: 15px 16px;
    border: 1px solid var(--border-primary);
    border-bottom: 3px solid color-mix(in srgb, var(--tone) 55%, var(--border-primary));
    border-radius: 18px;
    background: var(--card-bg);
    text-decoration: none;
    color: inherit;
}
.cwk-game:hover { border-color: color-mix(in srgb, var(--tone) 45%, var(--border-primary)); }
.cwk-game__ico {
    width: 38px; height: 38px;
    border-radius: 13px;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--tone) 18%, transparent);
    color: color-mix(in srgb, var(--tone) 75%, var(--text-primary));
}
[data-theme="dark"] .cwk-game__ico { color: var(--tone); }
.cwk-game__name { font-size: 14.5px; font-weight: 800; color: var(--text-primary); }
.cwk-game__meta { font-size: 12px; color: var(--text-secondary); }
.cwk-game__go { font-size: 12px; font-weight: 800; color: color-mix(in srgb, var(--tone) 75%, var(--text-primary)); }
[data-theme="dark"] .cwk-game__go { color: var(--tone); }

/* ---------------------------------------------------------------- две колонки */

.cwk-two { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .cwk-two { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- пустое место */

.cwk-empty {
    display: grid; justify-items: center; gap: 12px;
    padding: 30px 22px;
    border: 1px dashed var(--border-secondary);
    border-radius: var(--cwk-radius);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .cwk-key { transition: none; }
}

/* ==========================================================================
   ЭКРАН УРОКА

   Разметку урока не трогаем: за #training_text, #keyboard, .keyboard-key,
   .letter-item, #game_completed и десяток идентификаторов держатся main.js и
   мост общего движка. Здесь только вид, и только когда включён новый
   кабинет — класс cwk-lesson ставит сама вьюха рядом с cw-typing.
   ========================================================================== */

/* ------------------------------------------------------------ цели урока */

.cwk-goals {
    flex: 0 0 auto;
    display: grid;
    gap: 8px;
    max-width: 1040px;
    width: 100%;
    margin: 0 auto 10px;
    padding: 12px 16px;
    border: 1px solid var(--border-primary);
    border-radius: 16px;
    background: var(--card-bg);
    transition: opacity .18s, transform .18s;
}

/* Уезжают с первого символа: во время набора правила уже не нужны, а место
   нужно — по высоте экран урока и так впритык. */
.cwk-goals.is-gone {
    opacity: 0;
    transform: translateY(-6px);
    height: 0;
    margin: 0;
    padding: 0;
    border-width: 0;
    overflow: hidden;
}

.cwk-goals__t { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cwk-goals__t b { font-size: 15px; font-weight: 800; color: var(--text-primary); }
.cwk-goals__t span { font-size: 12.5px; color: var(--text-muted); }

.cwk-goals__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.cwk-goal {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12.5px;
    background: color-mix(in srgb, var(--tone) 14%, transparent);
    color: color-mix(in srgb, var(--tone) 72%, var(--text-primary));
}
[data-theme="dark"] .cwk-goal { color: var(--tone); }
.cwk-goal b { font-weight: 800; }

.cwk-goals__go { margin-left: auto; font-size: 12px; color: var(--text-muted); }

@media (max-height: 679px) {
    .cwk-goals { padding: 9px 14px; gap: 6px; }
    .cwk-goals__t span { display: none; }
}

/* --------------------------------------------------------- поле и текст */

/* Поле теряет градиент и толстую рамку: на экране, где смотрят в буквы,
   фон должен молчать. */
.cwk-lesson .cwt-field {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}
.cwk-lesson .cwt-field:focus-within {
    border-color: color-mix(in srgb, var(--cw-sky) 50%, var(--border-primary)) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cw-sky) 14%, transparent) !important;
}

/* Текущая буква — клавиша, а не синяя подсветка с тенью: тот же предмет,
   что кнопки и клавиатура. Пульсацию убираем, она дёргает строку. */
.cwk-lesson .tp-text .letter-item.active,
.cwk-lesson #training_text .letter-item.active {
    background: var(--cw-sun);
    color: #2E2118;
    border-bottom-color: transparent;
    border-radius: 7px;
    box-shadow: 0 3px 0 var(--cw-sun-edge);
    transform: none;
    animation: none;
}

.cwk-lesson #training_text .letter-item.correct,
.cwk-lesson #training_text .letter-item.success {
    background: none;
    color: var(--cw-mint);
}

.cwk-lesson #training_text .letter-item.error {
    background: color-mix(in srgb, var(--cw-coral) 18%, transparent);
    color: var(--cw-coral);
    border-radius: 5px;
}

/* Полоса прогресса: ровная заливка вместо градиента с бликом. */
.cwk-lesson .cwt-field + div { background: var(--bg-tertiary); }
.cwk-lesson #typing_progress_bar {
    background: linear-gradient(90deg, var(--cw-sky), var(--cw-mint)) !important;
    box-shadow: none !important;
}
.cwk-lesson #typing_progress_bar > div { display: none; }

/* ----------------------------------------------------------- клавиатура */

/* Клавиша становится клавишей: объём и нижняя грань, как у кнопок сайта.
   Цвет зоны пальца приходит из классов finger-* и остаётся нетронутым —
   он кодирует смысл. */
.cwk-lesson #keyboard {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 6px 0 !important;
}
.cwk-lesson .keyboard-key {
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 0 rgba(15, 23, 42, .22) !important;
    font-weight: 700;
    transition: transform .06s, box-shadow .06s;
}
[data-theme="dark"] .cwk-lesson .keyboard-key { box-shadow: 0 3px 0 rgba(0, 0, 0, .5) !important; }

/* Куда тянуться сейчас: клавиша поднимается и обводится, как в макете.

   Урок называет это состояние .current-key-active (его ставит main.js),
   разминка и заезды — .is-next. Пока здесь стояло только второе имя, правило
   клавиши выше со своим box-shadow !important гасило синюю рамку урока
   (она встроенным стилем, без !important), и следующая клавиша ничем не
   отличалась от соседних. Ученики так и написали в поддержку.

   Обводка сплошная, а не полупрозрачная: на цветных зонах пальцев бледное
   кольцо терялось. */
.cwk-lesson .keyboard-key.is-next,
.cwk-lesson .keyboard-key.current-key-active {
    outline: 0 !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 0 rgba(15, 23, 42, .22), 0 0 0 3px var(--cw-sun), 0 0 0 7px color-mix(in srgb, var(--cw-sun) 34%, transparent) !important;
}

/* Нажатие проседает — ровно как настоящая клавиша. */
.cwk-lesson .keyboard-key.is-hit {
    background: var(--cw-mint) !important;
    color: #07301C !important;
    transform: translateY(2px);
    box-shadow: 0 1px 0 rgba(15, 23, 42, .22) !important;
}
.cwk-lesson .keyboard-key.is-wrong {
    background: var(--cw-coral) !important;
    color: #3D1206 !important;
    transform: translateY(2px);
    box-shadow: 0 1px 0 rgba(15, 23, 42, .22) !important;
}

/* Руки над клавиатурой. Место и размер ставит public/js/lesson-hands.js по
   клавишам домашнего ряда, поэтому здесь только слой.

   display: block перебивает `.cw-typing #keyboard > img { display: none }`
   из app.css — там руки были сняты 9 сентября, пока стояли на прибитых
   координатах. max-width: none — иначе сброс стилей для картинок
   (max-width: 100%) сжал бы руки уже клавиатуры, и они разъехались бы с
   клавишами. До расстановки картинка невидима: без размеров она на миг
   встала бы в угол во весь свой рост. */
.cwk-lesson #keyboard > img.cwt-hands {
    display: block;
    position: absolute;
    max-width: none;
    pointer-events: none;
    user-select: none;
    z-index: 20;
}
.cwk-lesson #keyboard > img.cwt-hands:not(.is-placed) { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
    .cwk-lesson .keyboard-key { transition: none; }
    .cwk-goals { transition: none; }
}

/* ------------------------------------------------------ экран результата */

/* Кнопки результата — клавиши сайта, а не рамки с текстом. */
.cwk-lesson .cwd__next {
    background: var(--cw-mint) !important;
    color: #07301C !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 5px 0 color-mix(in srgb, var(--cw-mint) 62%, #000) !important;
    font-weight: 800;
}
.cwk-lesson .cwd__ico {
    border-radius: 14px !important;
    box-shadow: 0 4px 0 var(--border-primary);
}
.cwk-lesson .cwd__xp b { color: var(--cw-sun); }

/* Повтор урока. В app.css он меняет роль: пока следующий урок есть — это
   значок рядом с главной кнопкой, а когда урока нет или урок не сдан,
   становится главной кнопкой сам. Обе роли переводим на клавиши, иначе
   рядом с мятной клавишей «Следующий урок» остаётся синяя рамка. */
.cwk-lesson .cwd__ico {
    border: 0 !important;
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 0 var(--border-primary) !important;
}
.cwk-lesson .cwd__ico:hover { background: var(--hover-bg) !important; }

.cwk-lesson .cwd__next.hidden + .cwd__ico {
    background: var(--cw-sun) !important;
    color: #2E2118 !important;
    box-shadow: 0 5px 0 var(--cw-sun-edge) !important;
    font-weight: 800;
}
.cwk-lesson .cwd__next.hidden + .cwd__ico:hover {
    background: var(--cw-sun) !important;
    color: #2E2118 !important;
}

/* Нажатие проседает — как у всех клавиш сайта. */
.cwk-lesson .cwd__next:active,
.cwk-lesson .cwd__ico:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--border-primary) !important; }

/* ==========================================================================
   КАРТА КУРСА

   Карта уже нарисована клавиатурой (km-*) — курс слепой печати и есть обход
   клавиатуры, лучшей карты не придумать. Здесь она только переводится на
   язык кабинета: клавиша получает ту же нижнюю грань и тот же объём, что
   кнопки сайта и клавиши на уроке.

   Класс cwk-course ставит вьюха рядом с остальными — только при включённом
   новом кабинете.
   ========================================================================== */

.cwk-course .km-key {
    border-bottom: 0;
    border-radius: 12px;
    box-shadow: 0 3px 0 var(--border-primary);
}
.cwk-course .km-key.is-done {
    box-shadow: 0 3px 0 color-mix(in srgb, var(--cw-mint) 62%, #000);
}
.cwk-course .km-key.is-now {
    box-shadow: 0 5px 0 var(--cw-sun-edge), 0 0 0 5px color-mix(in srgb, var(--cw-sun) 20%, transparent);
}
.cwk-course .km-key.is-soon {
    box-shadow: 0 3px 0 var(--cw-sun), inset 0 0 0 2px color-mix(in srgb, var(--cw-sun) 30%, transparent);
}

/* Урок в разделе — тот же узел дорожки: клавиша с номером и звёздами под ней. */
.cwk-course .km-lesson__k {
    border-bottom: 0;
    border-radius: 14px;
    box-shadow: 0 3px 0 var(--border-primary);
    transition: transform .08s, box-shadow .08s;
}
.cwk-course .km-lesson.is-done .km-lesson__k { box-shadow: 0 3px 0 color-mix(in srgb, var(--cw-mint) 55%, #000); }
.cwk-course .km-lesson.is-now .km-lesson__k {
    box-shadow: 0 5px 0 var(--cw-sun-edge), 0 0 0 5px color-mix(in srgb, var(--cw-sun) 20%, transparent);
}
.cwk-course .km-lesson:not(.is-future):hover .km-lesson__k { transform: translateY(-2px); }
.cwk-course .km-lesson:not(.is-future):active .km-lesson__k { transform: translateY(2px); box-shadow: 0 1px 0 var(--border-primary); }

/* Переключатель «карта / список» — сегменты того же вида, что и всюду. */
.cwk-course .km-switch { border-radius: 14px; padding: 4px; }
.cwk-course .km-switch__b { border-radius: 10px; font-weight: 700; }

/* Строка урока в списке: номер становится клавишей, чтобы список и карта
   говорили на одном языке. */
.cwk-course .cp-row__mark { border-radius: 10px; }
.cwk-course .cp-row.is-now { background: color-mix(in srgb, var(--cw-sun) 10%, transparent); }
.cwk-course .cp-row__here {
    background: var(--cw-sun);
    color: #2E2118;
    font-weight: 800;
}

/* ==========================================================================
   ПЛИТКИ ТРЕНАЖЁРОВ

   Страница тренажёров уже собрана аккуратно — поиск, отбор по сложности,
   переходы по категориям. Переделывать её незачем, поэтому плитки просто
   получают язык кабинета: мягкий край и объём, как у карточек дома.
   ========================================================================== */

.cwk-tiles .cw-tile {
    border-radius: 18px;
    transition: transform .1s, border-color .15s, box-shadow .15s;
}
.cwk-tiles a.cw-tile:hover,
.cwk-tiles .cw-tile:has(a:hover) {
    border-color: color-mix(in srgb, var(--cw-sky) 45%, var(--border-primary));
    box-shadow: 0 3px 0 color-mix(in srgb, var(--cw-sky) 30%, var(--border-primary));
    transform: translateY(-2px);
}

/* Плитка каталога кликабельна целиком, но сама не ссылка: внутри лежит вторая
   ссылка — на историю прохождений. Ссылка на тренажёр растянута на всю плитку
   псевдоэлементом, а чип истории поднят над ним и нажимается отдельно. */
.cwk-tiles .tr-card--link { position: relative; cursor: pointer; }
.cwk-tiles .tr-card__cover { color: inherit; text-decoration: none; }
.cwk-tiles .tr-card__cover::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}
.cwk-tiles .tr-card__cover:focus-visible { outline: none; }
.cwk-tiles .tr-card--link:has(.tr-card__cover:focus-visible) {
    outline: 2px solid var(--cw-sky);
    outline-offset: 2px;
}
.cwk-tiles .tr-card__hist {
    position: relative;
    z-index: 1;
    text-decoration: none;
    white-space: nowrap;
}
.cwk-tiles .tr-card__hist:hover { text-decoration: underline; }

/* Значок «пройден N раз» — тем же чипом, что на доме. */
.cwk-tiles .cw-chip--good {
    background: color-mix(in srgb, var(--cw-mint) 16%, transparent);
    color: color-mix(in srgb, var(--cw-mint) 72%, var(--text-primary));
}
[data-theme="dark"] .cwk-tiles .cw-chip--good { color: var(--cw-mint); }

/* Кнопка запуска на плитке: маленькая клавиша вместо плоского значка. */
.cwk-tiles .tr-card__go {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cw-sun);
    color: #2E2118;
    box-shadow: 0 3px 0 var(--cw-sun-edge);
}

/* ==========================================================================
   ТЕСТ СКОРОСТИ

   Экран открытый: сюда приходят из поиска, и для многих это первое касание к
   сайту. Поэтому здесь ничего не убирается и не переставляется — заголовок,
   тексты и рейтинг остаются на местах, — меняется только материал:
   градиентные плитки становятся спокойными табличками, подсветка буквы —
   клавишей, кнопки — клавишами сайта.

   Клавиатуры на этом экране нет и не было: тест меряет скорость, а не учит.
   Добавить её здесь значило бы поменять назначение страницы.

   Класс cwk-speed вьюха ставит на оба блока сразу — десктопный #training и
   мобильный #mst: одеть половину экрана хуже, чем не одевать вовсе.
   ========================================================================== */

/* ------------------------------------------------------------ показатели */

.cwk-speed .cwk-stat {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
/* Подложка-градиент лежит в разметке отдельным слоем поверх плитки. */
.cwk-speed .cwk-stat > .absolute { display: none !important; }

.cwk-speed .cwk-stat__ico {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    background: color-mix(in srgb, var(--cw-sky) 16%, transparent) !important;
    background-image: none !important;
    color: color-mix(in srgb, var(--cw-sky) 78%, var(--text-primary)) !important;
    box-shadow: none !important;
}
[data-theme="dark"] .cwk-speed .cwk-stat__ico { color: var(--cw-sky) !important; }
.cwk-speed .cwk-stat__ico svg { width: 22px !important; height: 22px !important; }

.cwk-speed .cwk-stat .uppercase { color: var(--text-muted) !important; }

.cwk-speed #typing_speed,
.cwk-speed #typing_accuracy,
.cwk-speed #speed_test_time,
.cwk-speed #game_completed_typing_speed,
.cwk-speed #game_completed_accuracy,
.cwk-speed #game_completed_time {
    color: var(--text-primary) !important;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ поле и буквы */

.cwk-speed #training_text {
    background: var(--card-bg) !important;
    background-image: none !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}
.cwk-speed #training_text:focus-within {
    border-color: color-mix(in srgb, var(--cw-sky) 50%, var(--border-primary)) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cw-sky) 14%, transparent) !important;
}

/* Текущая буква — клавиша, а не синяя подсветка с тенью и пульсацией:
   пульсация дёргает строку ровно там, куда человек смотрит. */
#training.cwk-speed #training_text .letter-item.active,
.cwk-speed #training_text .letter-item.active {
    background: var(--cw-sun) !important;
    background-image: none !important;
    color: #2E2118 !important;
    border-bottom-color: transparent !important;
    border-image: none !important;
    border-radius: 7px !important;
    box-shadow: 0 3px 0 var(--cw-sun-edge) !important;
    transform: none !important;
    animation: none !important;
}

#training.cwk-speed #training_text .letter-item.correct,
#training.cwk-speed #training_text .letter-item.success,
.cwk-speed #training_text .letter-item.correct,
.cwk-speed #training_text .letter-item.success {
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--cw-mint) !important;
}

#training.cwk-speed #training_text .letter-item.error,
.cwk-speed #training_text .letter-item.error {
    background: color-mix(in srgb, var(--cw-coral) 18%, transparent) !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 5px !important;
    color: var(--cw-coral) !important;
}

/* Переключатель минуты остаётся тихим, но в тоне страницы. */
.cwk-speed .st-minute__track { background: var(--border-secondary); }
.cwk-speed .st-minute[aria-checked="true"] { color: color-mix(in srgb, var(--cw-sky) 78%, var(--text-primary)); }
.cwk-speed .st-minute[aria-checked="true"] .st-minute__track { background: var(--cw-sky); }
[data-theme="dark"] .cwk-speed .st-minute[aria-checked="true"] { color: var(--cw-sky); }

/* ---------------------------------------------------------------- клавиши */

.cwk-speed .cwk-b {
    border: 0 !important;
    border-radius: 17px !important;
    background-image: none !important;
    font-weight: 800 !important;
    transform: none !important;
}
.cwk-speed .cwk-b--sun {
    background: var(--cw-sun) !important;
    color: #2E2118 !important;
    box-shadow: 0 5px 0 var(--cw-sun-edge) !important;
}
.cwk-speed .cwk-b--ghost {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 0 var(--border-primary) !important;
}
.cwk-speed .cwk-b--ghost:hover { background: var(--hover-bg) !important; }
.cwk-speed .cwk-b:active { transform: translateY(3px) !important; box-shadow: 0 1px 0 var(--border-primary) !important; }
/* Бегущий блик и вторая подложка — лишние слои прежнего вида. */
.cwk-speed .cwk-b > .absolute { display: none !important; }

/* ------------------------------------------------------- экран результата */

.cwk-speed .cwk-win__box {
    background: var(--cw-sun) !important;
    background-image: none !important;
    color: #2E2118 !important;
    box-shadow: 0 6px 0 var(--cw-sun-edge) !important;
    animation: none !important;
}

.cwk-speed #leaderboard_section > div {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: 22px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* --------------------------------------------------------- мобильный тест */

/* Сплошное правило для табличек мобильного теста. Значок результата из него
   исключён намеренно: он клавиша, а не табличка, и однажды это правило его
   уже проглотило. */
#mst.cwk-speed .rounded-xl:not(.cwk-b):not(.cwk-win__box),
#mst.cwk-speed .rounded-2xl:not(.cwk-b):not(.cwk-win__box) {
    background: var(--card-bg) !important;
    background-image: none !important;
    border: 1px solid var(--border-primary) !important;
    box-shadow: none !important;
}

#mst.cwk-speed #mst-cpm,
#mst.cwk-speed #mst-acc,
#mst.cwk-speed #mst-time,
#mst.cwk-speed #mst-res-cpm,
#mst.cwk-speed #mst-res-acc,
#mst.cwk-speed #mst-res-time { color: var(--text-primary) !important; }

#mst.cwk-speed #mst-progress {
    background: var(--cw-sky) !important;
    background-image: none !important;
}

#mst.cwk-speed .mst-preview { color: var(--text-secondary); }

#mst.cwk-speed .mst-ch.is-cur {
    background: var(--cw-sun);
    color: #2E2118;
    border-radius: 6px;
    box-shadow: 0 3px 0 var(--cw-sun-edge);
}
#mst.cwk-speed .mst-ch.is-ok { color: var(--cw-mint); }
#mst.cwk-speed .mst-ch.is-bad {
    background: color-mix(in srgb, var(--cw-coral) 22%, transparent);
    color: var(--cw-coral);
    border-radius: 5px;
}
[data-theme="dark"] #mst.cwk-speed .mst-ch.is-cur { background: var(--cw-sun); color: #2E2118; }
[data-theme="dark"] #mst.cwk-speed .mst-ch.is-ok { color: var(--cw-mint); }
[data-theme="dark"] #mst.cwk-speed .mst-ch.is-bad {
    background: color-mix(in srgb, var(--cw-coral) 26%, transparent);
    color: var(--cw-coral);
}

/* ==========================================================================
   ПРАКТИКА: общий слой четырёх экранов

   Разминка, словари, отработка слабых мест и заезды собраны на одном слое —
   public/css/typing-practice.css: у них общие состояния символов
   (.tp-text .letter-item), общая клавиатура (.typing-keyboard .keyboard-key)
   и общая легенда пальцев. Поэтому здесь одевается слой, а не каждый экран
   по отдельности: четыре одинаковые правки однажды разъехались бы.

   Вид тот же, что на уроке: текущая буква — солнечная клавиша, верная —
   мятная, промах — коралловый, клавиша с нижней гранью. Совпадение не
   косметическое: человек ходит между этими экранами, и подсветка должна
   значить одно и то же везде.

   Цвет пальца на клавише (классы finger-*) не трогаем — он кодирует смысл.

   Класс cwk-practice ставит вьюха, а сам файл она подключает только при
   включённом новом кабинете.
   ========================================================================== */

/* ------------------------------------------------------------ поле и буквы */

.cwk-practice .tp-text,
.cwk-practice .dr-field {
    background: var(--card-bg) !important;
    background-image: none !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}
.cwk-practice .tp-text:focus-within,
.cwk-practice .dr-field:focus-within {
    border-color: color-mix(in srgb, var(--cw-sky) 50%, var(--border-primary)) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cw-sky) 14%, transparent) !important;
}
/* Поле внутри обёртки разминки своей рамки уже не рисует. */
.cwk-practice .dr-field .tp-text {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.cwk-practice .tp-text .letter-item.active {
    background: var(--cw-sun) !important;
    background-image: none !important;
    color: #2E2118 !important;
    border-bottom-color: transparent !important;
    border-radius: 7px !important;
    box-shadow: 0 3px 0 var(--cw-sun-edge) !important;
    transform: none !important;
    animation: none !important;
}
.cwk-practice .tp-text .letter-item.correct {
    background: none !important;
    background-image: none !important;
    color: var(--cw-mint) !important;
}
.cwk-practice .tp-text .letter-item.error {
    background: color-mix(in srgb, var(--cw-coral) 18%, transparent) !important;
    background-image: none !important;
    border-radius: 5px !important;
    color: var(--cw-coral) !important;
}
/* Целевая буква отработки остаётся заметной заранее, но в тоне набора. */
.cwk-practice .tp-text .letter-item.target { color: var(--cw-sun-edge) !important; }
[data-theme="dark"] .cwk-practice .tp-text .letter-item.target { color: var(--cw-sun) !important; }

/* ----------------------------------------------------------- клавиатура */

.cwk-practice .typing-keyboard .keyboard-key {
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 0 rgba(15, 23, 42, .22) !important;
    font-weight: 700;
}
[data-theme="dark"] .cwk-practice .typing-keyboard .keyboard-key { box-shadow: 0 3px 0 rgba(0, 0, 0, .5) !important; }

.cwk-practice .typing-keyboard .keyboard-key.is-next {
    outline: 0 !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 0 rgba(15, 23, 42, .22), 0 0 0 5px color-mix(in srgb, var(--cw-sun) 26%, transparent) !important;
}
.cwk-practice .typing-keyboard .keyboard-key.is-hit {
    background: var(--cw-mint) !important;
    color: #07301C !important;
    transform: translateY(2px) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .22) !important;
}
.cwk-practice .typing-keyboard .keyboard-key.is-wrong {
    background: var(--cw-coral) !important;
    color: #3D1206 !important;
    transform: translateY(2px) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .22) !important;
}

/* ------------------------------------------------------------- плитки

   Адресно по контейнерам показателей, а не сплошным правилом: сплошное
   однажды уже проглотило значок результата на тесте скорости. */

.cwk-practice #dp-run > .grid > div,
.cwk-practice #dp-done > .grid > div,
.cwk-practice #rr-typing > .grid > div,
.cwk-practice #ws-run > .grid > div,
.cwk-practice #ws-done > .grid > div {
    background: var(--card-bg) !important;
    background-image: none !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.cwk-practice #dp-run > .grid > div > div:last-child,
.cwk-practice #dp-done > .grid > div > div:first-child,
.cwk-practice #rr-typing > .grid > div > div:last-child,
.cwk-practice #ws-run > .grid > div > div:last-child,
.cwk-practice #ws-done > .grid > div > div:first-child {
    color: var(--text-primary) !important;
}

/* Полосы выполнения: ровная заливка вместо градиента. */
.cwk-practice #dp-bar,
.cwk-practice #ws-bar {
    background: var(--cw-sky) !important;
    background-image: none !important;
}

/* Отрывок текста на первом экране.

   Разминки здесь больше нет: её экран старта (#drill-intro) собран как
   отдельная тёмная сцена и сам задаёт себе всё оформление. */
.cwk-practice #dp-intro > .rounded-2xl {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-primary) !important;
}

/* --------------------------------------------------------------- клавиши */

/* #drill-start сюда не входит: кнопкой разминки стало само кольцо времени,
   и жёлтая клавиша рисовалась квадратом под ним. */
.cwk-practice #dp-start,
.cwk-practice #ws-next,
.cwk-practice #dp-done .max-w-2xl > a:first-child {
    background: var(--cw-sun) !important;
    background-image: none !important;
    color: #2E2118 !important;
    border: 0 !important;
    border-radius: 17px !important;
    box-shadow: 0 5px 0 var(--cw-sun-edge) !important;
    font-weight: 800 !important;
}
.cwk-practice #dp-done .max-w-2xl > a:last-child,
.cwk-practice #ws-done .flex-wrap > a:last-child {
    background: var(--card-bg) !important;
    background-image: none !important;
    color: var(--text-primary) !important;
    border: 0 !important;
    border-radius: 17px !important;
    box-shadow: 0 4px 0 var(--border-primary) !important;
    font-weight: 800 !important;
}

/* Значок результата — клавиша, а не табличка. */
.cwk-practice .cwk-win__box {
    background: var(--cw-sun) !important;
    background-image: none !important;
    color: #2E2118 !important;
    box-shadow: 0 5px 0 var(--cw-sun-edge) !important;
}