/**
 * Экраны кабинета, переодетые в язык главной.
 *
 * ЗАЧЕМ ОТДЕЛЬНЫЙ ФАЙЛ
 * Разметка этих страниц сложилась раньше и менять её целиком незачем: числа,
 * подписи и логика в ней правильные. Неправильной была подача — ровные белые
 * карточки, синяя кнопка и красные полосы, то есть язык отчёта. Здесь лежат
 * правила, которые переодевают уже существующие классы (.ws-*, .cp-* и так
 * далее) в набор кабинета: клавиши с нижней гранью, тёплые тона, крупные
 * числа.
 *
 * ПОЧЕМУ НЕ ПРАВКА app.css
 * Его собирает Vite, и каждая правка потребовала бы сборки на сервере. Этот
 * файл подключается напрямую, как cw-cabinet.css.
 *
 * ПОЧЕМУ СЕЛЕКТОРЫ НАЧИНАЮТСЯ С .cwk
 * Правила из app.css написаны одним классом; пара «.cwk .ws-row» весит
 * больше и перебивает их без единого !important. Заодно это граница: без
 * обёртки .cwk страница остаётся такой, какой была.
 */

/* ==========================================================================
   Общее
   ========================================================================== */

.cwk .cwk-hello__txt h1 { font-size: 23px; font-weight: 900; letter-spacing: -.02em; }

/* Полоска показателей в шапке. Числа как достижения, а не как строка
   отчёта: подпись внутри самой плашки, а не под ней мелким серым. */
.ws-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-left: auto; }

@media (max-width: 700px) {
    .ws-chips { margin-left: 0; flex-basis: 100%; }
}

/* ==========================================================================
   Слабые места
   ========================================================================== */

.cwk.ws-wrap { display: grid; gap: 14px; align-content: start; }

.ws-hello { align-items: center; }

/* Главное действие: клавиша с буквой вместо значка. */
.cwk .ws-go-big { align-items: center; }
.cwk .ws-go-big__k {
    font-size: 26px;
    font-weight: 900;
    font-family: ui-monospace, Consolas, monospace;
    color: #2E1108;
}

/* Две колонки — только когда обе помещаются целиком.

   Карте клавиатуры нужно 650 пикселей даже в узком виде (min-width у .km-board
   в keyboard-map.css), а строке буквы — 404 на её четыре дорожки. Это 1070 плюс
   отступы, то есть окно шире 1400. Раньше колонки стояли рядом всегда, и на
   обычном ноутбуке правый край клавиатуры просто срезало: BackSpace, Enter и
   правый Shift были не видны. Ниже порога колонки идут друг под другом. */
.cwk .ws-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }

@media (min-width: 1401px) {
    .cwk .ws-cols { grid-template-columns: minmax(0, 680px) minmax(0, 1fr); }
}
/* Без этого карта клавиатуры распирает колонку: у элемента сетки min-width
   по умолчанию auto, и собственная ширина клавиатуры перебивает дорожку. */
.cwk .ws-cols > * { min-width: 0; }



.cwk .ws-side { width: auto; display: grid; gap: 14px; }


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

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

.cwk .ws-key {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--cw-sun) 18%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--cw-sun) 40%, var(--border-primary));
    box-shadow: 0 3px 0 color-mix(in srgb, var(--cw-sun) 30%, var(--border-primary));
    color: var(--text-primary);
    font-family: ui-monospace, Consolas, monospace;
    font-size: 17px;
    font-weight: 800;
    text-transform: uppercase;
}
.cwk .ws-key.is-hot {
    background: color-mix(in srgb, var(--cw-coral) 20%, var(--card-bg));
    border-color: color-mix(in srgb, var(--cw-coral) 50%, var(--border-primary));
    box-shadow: 0 3px 0 color-mix(in srgb, var(--cw-coral) 38%, var(--border-primary));
    color: color-mix(in srgb, var(--cw-coral) 78%, var(--text-primary));
}
[data-theme="dark"] .cwk .ws-key.is-hot { color: var(--cw-coral); }

/* ------------------------------------------------------------------- список */

/* minmax(0,1fr), а не просто grid: у элемента сетки min-width по умолчанию
   auto, и строка буквы с её 40+148+230+1fr переставала сжиматься — страница
   уезжала вбок. */
.cwk .ws-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 16px; }
.cwk .ws-list__head { padding: 0 0 10px; }
.cwk .ws-list__sub { font-size: 12.5px; color: var(--text-muted); }

.cwk .ws-row {
    padding: 11px 12px;
    border-radius: 16px;
    border: 1px solid transparent;
    column-gap: 14px;
}
.cwk .ws-row:hover {
    background: color-mix(in srgb, var(--cw-sun) 9%, var(--card-bg));
    border-color: color-mix(in srgb, var(--cw-sun) 30%, var(--border-primary));
}
.cwk .ws-row.is-picked {
    background: color-mix(in srgb, var(--cw-sun) 14%, var(--card-bg));
    border-color: color-mix(in srgb, var(--cw-sun) 45%, var(--border-primary));
    box-shadow: none;
}

.cwk .ws-row__sev b { font-size: 14px; font-weight: 800; }

.cwk .ws-bar__track { height: 8px; background: color-mix(in srgb, var(--text-muted) 14%, transparent); }
.cwk .ws-bar__track i { height: 8px; background: var(--cw-sun); }
.cwk .ws-bar__track i.is-hot { background: var(--cw-coral); }
.cwk .ws-bar__track i.is-ref { background: color-mix(in srgb, var(--text-muted) 45%, transparent); }
.cwk .ws-legend__hot { background: var(--cw-coral); }
.cwk .ws-legend__ref { background: color-mix(in srgb, var(--text-muted) 45%, transparent); }

/* Шаг отработки — жетон, а не серая приписка: это состояние, и его видно
   раньше, чем читаешь. */
.cwk .ws-row__step {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    background: color-mix(in srgb, var(--text-muted) 12%, transparent);
    color: var(--text-muted);
}
.cwk .ws-row__step.is-on {
    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 .ws-row__step.is-on { color: var(--cw-mint); }

.cwk .ws-row__why kbd,
.cwk .ws-thin__i kbd {
    border-radius: 7px;
    background: color-mix(in srgb, var(--cw-sun) 16%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--cw-sun) 34%, var(--border-primary));
    box-shadow: 0 2px 0 color-mix(in srgb, var(--cw-sun) 26%, var(--border-primary));
    color: var(--text-primary);
}

/* ------------------------------------------------------------------ освоено

   Медали, а не список ссылок: освоенная буква — это награда, и выглядеть она
   должна как награда. */

.cwk .ws-grad { display: grid; gap: 10px; }
.cwk .ws-grad__list { gap: 9px; }
.cwk .ws-grad__i {
    flex-direction: column;
    gap: 2px;
    padding: 9px 12px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--cw-mint) 13%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--cw-mint) 32%, var(--border-primary));
    box-shadow: 0 3px 0 color-mix(in srgb, var(--cw-mint) 24%, var(--border-primary));
    text-align: center;
}
.cwk .ws-grad__i b { font-size: 16px; font-weight: 900; color: color-mix(in srgb, var(--cw-mint) 75%, var(--text-primary)); }
[data-theme="dark"] .cwk .ws-grad__i b { color: var(--cw-mint); }
.cwk .ws-grad__i span { font-size: 10.5px; color: var(--text-muted); }
.cwk .ws-grad__i:hover { border-color: var(--cw-mint); }

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

.cwk .ws-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 38px 24px;
    border-style: solid;
    text-align: center;
}
.cwk .ws-empty b { font-size: 19px; font-weight: 900; }

.cwk .ws-thin { border-top-color: var(--border-primary); }

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

   Саму тепловую шкалу не трогаем: красный там означает «здесь вы промахиваетесь»,
   и менять его на тёплый значило бы стереть смысл. Переодевается только оправа:
   скругления карточки и переключатели раскладки. */

.cwk #keyboard-map {
    border-radius: var(--cwk-radius);
    border-width: 1px;
    border-color: var(--border-primary);
    background: var(--card-bg);
    /* Клавиатуре нужно 470 пикселей даже в узком виде, и на телефоне карточка
       растягивалась под неё, утаскивая вбок всю страницу. Прокручивается
       теперь только сама клавиатура (overflow-x у .km-board). */
    min-width: 0;
    overflow: hidden;
}
.cwk .km-key { border-radius: 8px; }
.cwk .km-tab.is-active {
    background: color-mix(in srgb, var(--cw-sun) 20%, transparent);
    color: color-mix(in srgb, var(--cw-sun-edge) 80%, var(--text-primary));
}
[data-theme="dark"] .cwk .km-tab.is-active { background: color-mix(in srgb, var(--cw-sun) 22%, transparent); color: var(--cw-sun); }

/* ==========================================================================
   Слабые места: карточка буквы
   ========================================================================== */

.cwk.wl { display: grid; gap: 14px; align-content: start; }

.wl-head { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.wl-head__k {
    width: 68px;
    height: 68px;
    flex-shrink: 0;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--cw-coral) 20%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--cw-coral) 45%, var(--border-primary));
    box-shadow: 0 5px 0 color-mix(in srgb, var(--cw-coral) 35%, var(--border-primary));
    font-family: ui-monospace, Consolas, monospace;
    font-size: 32px;
    font-weight: 900;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--cw-coral) 80%, var(--text-primary));
}
.wl-head__k.is-done {
    background: color-mix(in srgb, var(--cw-mint) 18%, var(--card-bg));
    border-color: color-mix(in srgb, var(--cw-mint) 42%, var(--border-primary));
    box-shadow: 0 5px 0 color-mix(in srgb, var(--cw-mint) 32%, var(--border-primary));
    color: color-mix(in srgb, var(--cw-mint) 78%, var(--text-primary));
}
[data-theme="dark"] .wl-head__k { color: var(--cw-coral); }
[data-theme="dark"] .wl-head__k.is-done { color: var(--cw-mint); }

.wl-head__t { flex: 1 1 240px; min-width: 0; }
.wl-head__t h1 { margin: 0; font-size: 24px; font-weight: 900; letter-spacing: -.02em; color: var(--text-primary); }
.wl-head__t p { margin: 4px 0 0; font-size: 13.5px; color: var(--text-secondary); }
.wl-head__t b { font-variant-numeric: tabular-nums; color: var(--text-primary); }
.wl-head__t kbd {
    display: inline-block;
    margin: 0 2px;
    padding: 1px 7px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--cw-sun) 16%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--cw-sun) 34%, var(--border-primary));
    box-shadow: 0 2px 0 color-mix(in srgb, var(--cw-sun) 26%, var(--border-primary));
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
    color: var(--text-primary);
}

.wl-cols { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: start; }

@media (max-width: 900px) {
    .wl-cols { grid-template-columns: minmax(0, 1fr); }
}

.wl-prog { display: grid; gap: 9px; }
.wl-side { display: grid; gap: 14px; }

/* Шаг программы: пять уровней, а не пять строк чек-листа. */
.wl-step {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 11px 13px;
    border: 1px solid var(--border-primary);
    border-radius: 16px;
    background: var(--card-bg);
}
.wl-step.is-now {
    background: color-mix(in srgb, var(--cw-sun) 12%, var(--card-bg));
    border-color: color-mix(in srgb, var(--cw-sun) 45%, var(--border-primary));
}
.wl-step.is-lock { opacity: .6; }

.wl-step__n {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 15px;
    font-weight: 900;
    background: color-mix(in srgb, var(--text-muted) 12%, transparent);
    color: var(--text-muted);
}
.wl-step.is-done .wl-step__n { background: var(--cw-mint); color: #07301C; box-shadow: 0 3px 0 color-mix(in srgb, var(--cw-mint) 62%, #000); }
.wl-step.is-now .wl-step__n { background: var(--cw-sun); color: #2E2118; box-shadow: 0 3px 0 var(--cw-sun-edge); }

.wl-step__t { min-width: 0; }
.wl-step__t b { display: block; font-size: 14.5px; font-weight: 800; color: var(--text-primary); }
.wl-step__t i {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wl-step__lock { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* Столбики отработки. Число промахов стоит над столбиком: подсказка по
   наведению появляется через секунду, а число нужно сразу. */
.wl-bars { display: flex; align-items: flex-end; gap: 6px; min-height: 108px; margin: 4px 0 10px; }
.wl-bars__i { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; min-width: 0; }
.wl-bars__i i { width: 100%; border-radius: 6px 6px 3px 3px; background: var(--cw-coral); }
.wl-bars__i i.is-good { background: var(--cw-mint); }
.wl-bars__i b { font-size: 11px; font-weight: 800; color: var(--text-secondary); font-variant-numeric: tabular-nums; order: -1; }
.wl-bars__i em { font-style: normal; font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Было и стало. */
.wl-then { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.wl-then__c { flex: 1; text-align: center; }
.wl-then__c em { display: block; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.wl-then__c b { display: block; margin-top: 2px; font-size: 27px; font-weight: 900; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wl-then__c.is-good b { color: color-mix(in srgb, var(--cw-mint) 75%, var(--text-primary)); }
.wl-then__c.is-bad b { color: color-mix(in srgb, var(--cw-coral) 78%, var(--text-primary)); }
[data-theme="dark"] .wl-then__c.is-good b { color: var(--cw-mint); }
[data-theme="dark"] .wl-then__c.is-bad b { color: var(--cw-coral); }
.wl-then__arrow { color: var(--text-muted); display: grid; place-items: center; }

.wl-verdict { margin: 10px 0 0; font-size: 13.5px; color: var(--text-secondary); }
.wl-verdict.is-good { font-weight: 800; color: color-mix(in srgb, var(--cw-mint) 75%, var(--text-primary)); }
[data-theme="dark"] .wl-verdict.is-good { color: var(--cw-mint); }

/* ==========================================================================
   Слабые места: упражнение
   ========================================================================== */

.we-head { margin-bottom: 10px; }
.we-head .wl-head__k { width: 56px; height: 56px; border-radius: 17px; font-size: 26px; }
.we-head .wl-head__t h1 { font-size: 21px; }

.we-rule { margin: 0 0 18px; font-size: 13px; color: var(--text-muted); }

.we-done { display: grid; gap: 14px; }
.we-done__h { display: flex; align-items: center; gap: 13px; }
.we-done__mark {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 17px;
    display: grid;
    place-items: center;
    background: var(--cw-sun);
    color: #2E2118;
    box-shadow: 0 4px 0 var(--cw-sun-edge);
}
.we-done__h b { display: block; font-size: 19px; font-weight: 900; color: var(--text-primary); }
.we-done__h span { display: block; margin-top: 2px; font-size: 13px; color: var(--text-secondary); }

.we-note { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.we-note:empty { display: none; }

.we-acts { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 560px) {
    .we-acts .cwk-key { width: 100%; }
}

/* ==========================================================================
   Тест скорости

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

.st-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 22px 0 18px;
    text-align: left;
}
.st-hero h1 { margin: 0; font-size: clamp(24px, 4vw, 32px); font-weight: 900; letter-spacing: -.02em; color: var(--text-primary); }
.st-hero p { margin: 4px 0 0; font-size: 14px; color: var(--text-secondary); }

@media (max-width: 560px) {
    .st-hero { flex-direction: column; text-align: center; gap: 10px; }
}

/* Значки показателей — тёплые.

   Селекторы с id, а не просто «.cwk-speed .cwk-stat__ico»: страница
   подключает cw-cabinet.css дважды (второй раз — из включаемого блока), и
   при равном весе побеждал бы он, а не этот файл. Тот же приём уже
   использован в самом cw-cabinet.css. */
#training.cwk-speed .cwk-stat__ico,
#mst.cwk-speed .cwk-stat__ico {
    background: color-mix(in srgb, var(--cw-sun) 20%, transparent) !important;
    color: var(--cw-sun-edge) !important;
}
[data-theme="dark"] #training.cwk-speed .cwk-stat__ico,
[data-theme="dark"] #mst.cwk-speed .cwk-stat__ico { color: var(--cw-sun) !important; }

/* Набираемый символ и выключатель минуты — тем же тоном. */
#training.cwk-speed #training_text:focus-within {
    border-color: color-mix(in srgb, var(--cw-sun) 55%, var(--border-primary)) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cw-sun) 16%, transparent) !important;
}
#training.cwk-speed .st-minute[aria-checked="true"],
#mst.cwk-speed .st-minute[aria-checked="true"] { color: var(--cw-sun-edge) !important; }
[data-theme="dark"] #training.cwk-speed .st-minute[aria-checked="true"],
[data-theme="dark"] #mst.cwk-speed .st-minute[aria-checked="true"] { color: var(--cw-sun) !important; }

/* ------------------------------------------------------------- рейтинг

   Таблицу рисует main.js строкой разметки с классами tailwind: синяя шапка
   с белым текстом и голубая подсветка своей строки. Здесь она переодевается
   на месте — переписывать сборку строки в main.js ради цвета незачем. */

#training.cwk-speed #leaderboard_content table { border-collapse: collapse; }

#training.cwk-speed #leaderboard_content thead {
    background: color-mix(in srgb, var(--cw-sun) 18%, var(--card-bg)) !important;
    background-image: none !important;
}
#training.cwk-speed #leaderboard_content thead th {
    color: var(--text-secondary) !important;
    padding: 11px 16px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

#training.cwk-speed #leaderboard_content tbody tr { border-top: 1px solid var(--border-primary); }
#training.cwk-speed #leaderboard_content tbody td { padding: 11px 16px !important; }

/* Своя строка: тёплая подсветка вместо голубой. */
#training.cwk-speed #leaderboard_content tbody tr[class*="blue"] {
    background: color-mix(in srgb, var(--cw-sun) 13%, transparent) !important;
}
/* Призовые места. Первое золотом, дальше спокойнее: иначе вся таблица
   раскрашена и ни одно место ничего не значит. */
#training.cwk-speed #leaderboard_content tbody tr[class*="yellow"],
#training.cwk-speed #leaderboard_content tbody tr[class*="amber"] {
    background: color-mix(in srgb, var(--cw-sun) 10%, transparent) !important;
}
#training.cwk-speed #leaderboard_content tbody tr[class*="orange"] {
    background: color-mix(in srgb, var(--cw-coral) 8%, transparent) !important;
}
#training.cwk-speed #leaderboard_content [class*="text-blue"] { color: var(--text-primary) !important; }

/* ==========================================================================
   Сводка: активность и план на день

   Обе страницы построены правильно, менять в них было нечего, кроме языка:
   зелёный календарь и синие кнопки — это чужая гамма. Календарь работает на
   переменных (--ah-0…4), поэтому достаточно переопределить их внутри .cwk,
   и вся шкала становится тёплой сама.
   ========================================================================== */

.cwk.ah-wrap,
.cwk.dg-wrap {
    --ah-0: color-mix(in srgb, var(--text-muted) 14%, transparent);
    --ah-1: #FFEBC4;
    --ah-2: #FFD488;
    --ah-3: #FFB020;
    --ah-4: #E08A00;
    --ah-bar: var(--cw-sun);

    display: grid;
    /* minmax(0,1fr), а не просто grid: без этого дорожка считается по
       максимальному содержимому, и полоса года на 53 недели растягивала всю
       страницу шире окна. */
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-content: start;
}

[data-theme="dark"] .cwk.ah-wrap,
[data-theme="dark"] .cwk.dg-wrap {
    --ah-1: #3A2A12;
    --ah-2: #6B4A0E;
    --ah-3: #B87700;
    --ah-4: #FFB020;
}

.cwk .ah-card,
.cwk .dg-card { border-radius: var(--cwk-radius); }

.ah-hello { align-items: center; }

.cwk .ah-fig b { font-size: 34px; font-weight: 900; }
.cwk .ah-c--today { box-shadow: 0 0 0 2px var(--cw-sun-edge); }
.cwk .ah-c--live:hover { box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 4px var(--cw-sun-edge); }

.cwk .ah-chip {
    background: color-mix(in srgb, var(--cw-sun) 16%, transparent);
    color: color-mix(in srgb, var(--cw-sun-edge) 80%, var(--text-primary));
    border-color: transparent;
}
[data-theme="dark"] .cwk .ah-chip { color: var(--cw-sun); }

/* ---------------------------------------------------------- план на день */

.cwk .dg-kicker { color: color-mix(in srgb, var(--cw-sun-edge) 85%, var(--text-primary)); }
[data-theme="dark"] .cwk .dg-kicker { color: var(--cw-sun); }

.cwk .dg-today__t { font-size: 23px; font-weight: 900; letter-spacing: -.02em; }
.cwk .dg-bar__track i { background: var(--cw-sun); }

/* Главное действие — клавиша с гранью, как везде. */
.cwk .dg-go {
    background: var(--cw-sun);
    color: #2E2118;
    border: 0;
    border-radius: 17px;
    box-shadow: 0 5px 0 var(--cw-sun-edge);
    font-weight: 800;
}
.cwk .dg-go:hover { background: var(--cw-sun); color: #2E2118; }
.cwk .dg-go:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--cw-sun-edge); }

.cwk .dg-seg__i.is-on {
    background: var(--cw-sun);
    border-color: var(--cw-sun);
    color: #2E2118;
    box-shadow: 0 3px 0 var(--cw-sun-edge);
}
.cwk .dg-switch input:checked + .dg-switch__box { background: var(--cw-sun); }
.cwk .dg-switch input:focus-visible + .dg-switch__box { outline-color: var(--cw-sun-edge); }

.cwk .dg-save {
    border-radius: 15px;
    font-weight: 800;
    border-color: color-mix(in srgb, var(--cw-sun) 45%, var(--border-primary));
    color: var(--text-primary);
}
.cwk .dg-save:hover { background: var(--cw-sun); color: #2E2118; }

/* Сегодняшний столбик — тёплый; взятая цель остаётся мятной: цвет тут
   означает «получилось», и смешивать его с тоном раздела нельзя. */
.cwk .dg-col--today i { background: var(--cw-sun); }
.cwk .dg-plot__goal { border-top-color: var(--cw-mint); }
.cwk .dg-plot__goal b { color: color-mix(in srgb, var(--cw-mint) 75%, var(--text-primary)); }
[data-theme="dark"] .cwk .dg-plot__goal b { color: var(--cw-mint); }

@media (max-width: 1150px) {
    .cwk .dg-cols { flex-direction: column; }
    .cwk .dg-side { width: auto; }
}