/* Единая система внутренних страниц. Источник: «Система безтерапевта.ру». */
/* Здесь лежала вторая копия всего набора — двадцать шесть объявлений следом за
   tokens.css. Двадцать четыре совпадали в точности, а два успели разъехаться:
   --sand стоял #f3e9e4 (это цвет --rose, копипаста), --peach — #f1e7d4. Файл
   подключается после tokens.css, поэтому на всех страницах кабинета побеждали
   именно эти два. Копия убрана, значения приходят из набора. Свои остались
   только --cab-*: это роли кабинета, а не цвета. */
:root{
  --cab-bg:var(--sand);--cab-surface:var(--neutral-surface);--cab-control:var(--peach);
  --cab-border:rgba(80,118,101,.12);--cab-shell:#E7DECC;
  --cab-ink:var(--ink);--cab-muted:rgba(36,35,31,.62);--cab-accent:var(--accent);
}
html[data-theme="dark"]{
  --cab-bg:var(--dark-bg);--cab-surface:var(--dark-surface);--cab-control:var(--dark-control);--cab-border:var(--dark-line);--cab-shell:var(--dark-shell);
  --cab-ink:var(--dark-ink);--cab-muted:var(--dark-muted);--cab-accent:var(--dark-accent);
}

/* Фон — только однотонный. Заголовки всех внутренних разделов — из одной гарнитуры. */
body.has-side{--display:var(--sans);background:var(--cab-shell)!important;color:var(--cab-ink)!important;overflow-x:clip!important}
/* Сайдбар — стекло, как шапка публичных страниц. Сплошная заливка --cab-bg делала
   панель деталью от другого экрана везде, где фон страницы уходит от песочного
   (лендинги курсов с бело-сиреневым градиентом). У стекла своего цвета нет: оно
   принимает оттенок подложки, поэтому странице достаточно задать свой фон.
   ⚠️ Сайдбар лежит на body, а не на main: цвет он берёт с --cab-shell. */
/* Сайдбар и рабочая область — две панели одного уровня, поэтому поверхность у них
   общая: --cab-bg. Между ними и по краям видна подложка --cab-shell, она темнее.
   Стекло здесь пробовали (белый с прозрачностью поверх подложки) — и получили
   расхождение: панель выходила светлее и холоднее main, два соседних блока читались
   разными материалами. Стекло уместно там, где элемент лежит ПОВЕРХ контента
   (шапка, мобильное меню), а не в ряду с ним. */
body.has-side>.app-side{
  background:var(--cab-bg)!important;
  background-image:none!important;
  border:1px solid var(--cab-border)!important;
  border-radius:var(--radius-card)!important;
  box-shadow:none!important}

/* Единая высота заголовка на всех страницах кабинета. Отступ до h1 задаёт общий
   padding панели, но «Курсы» и «Упражнения» добавляли к нему свои 8 пикселей —
   и их заголовки стояли ниже, чем на «Тестах» или в дневнике. */
body.has-side .hub-hero,body.has-side .ex-hero{padding-top:0!important}

/* Подложка под лендингами курсов. Сайдбар стал стеклом, но стекло показывает то,
   что под ним, а под ним body с песочным --cab-shell. На бело-сиреневом лендинге
   панель из-за этого оставалась песочной полосой. Подложка страницы переводится
   в её же гамму, и сайдбар принимает нужный оттенок сам.
   :has() — чтобы правило жило в общем файле, а не копией в каждом лендинге. */
body.has-side:has(main.anx-lp){background:var(--course-shell)!important}
html[data-theme="dark"] body.has-side:has(main.anx-lp){background:var(--dark-shell)!important}
body.has-side:has(main.soc-lp){background:var(--course-shell)!important}
html[data-theme="dark"] body.has-side:has(main.soc-lp){background:var(--dark-shell)!important}
body.has-side>main{background:var(--cab-bg)!important;border:1px solid var(--cab-border)!important;border-radius:var(--radius-card)!important;box-shadow:none!important;margin:14px 14px 14px 0!important;box-sizing:border-box!important;max-width:none!important}
body.has-side>footer{background:var(--cab-bg)!important;border:1px solid var(--cab-border)!important;border-radius:var(--radius-card)!important;box-shadow:none!important;overflow:hidden!important;margin:14px 14px 14px 0!important}
/* Футер на сайте один (gen/footer.html). В кабинете человек уже внутри продукта,
   поэтому тот же блок показываем плотнее: меньше воздуха сверху и снизу. */
body.has-side>footer>div{padding:38px 28px 26px!important}
body.has-side>footer .ft-grid{gap:28px!important}
/* ЕДИНАЯ СИСТЕМА ПОВЕРХНОСТЕЙ: страницы кабинета берут цвета из общих cab-токенов,
   а не из своих локальных переменных. Один источник правды на весь кабинет.
   Подложка между панелями = --cab-shell; панели = --cab-bg;
   карточки/плашки = --cab-surface; границы = --cab-border. */
body.has-side{--bg:var(--cab-bg);--card:var(--cab-surface);--surface:var(--cab-surface);--glass:var(--cab-surface);--card-br:var(--cab-border);--border:var(--cab-border);--line:var(--cab-border);--glass-border:var(--cab-border)}
/* Заголовки внутренних страниц — ровно по эталону cabinet pages. */
body.has-side main h1,body.has-side main h2,body.has-side main h3,body.has-side main h4{font-family:"Merriweather",Georgia,serif!important;font-weight:300!important;color:var(--cab-ink)!important}
body.has-side>main h1,body.has-side .page-head h1{font-size:var(--text-h1)!important;letter-spacing:-.018em!important;line-height:var(--lh-h1)!important}
/* Заголовки в старых шаблонах были заданы inline, поэтому их фиксируем тем же
   эталонным размером, что и page-head. */
body.has-side .j-head #pageTitle,
body.has-side .doc>#pageTitle,
body.has-side .ex-hero #h1,
body.has-side .hub>.wrap>h1,
body.has-side .course-hub .hub-hero h1{
  font-family:"Merriweather",Georgia,serif!important;
  font-size:var(--text-h1)!important;
  font-weight:300!important;
  letter-spacing:-.018em!important;
  line-height:var(--lh-h1)!important;
  color:var(--cab-ink)!important;
}
body.has-side main .ex2-ft h3,body.has-side main .ch-body h3,body.has-side main .set-row h3,body.has-side main .action-card h3{font-family:var(--sans)!important;font-weight:400!important}
/* Лендинги курсов (.anx-lp, .soc-lp) — самостоятельные макеты со своими тёмными
   панелями и кремовым текстом на них. Чернила кабинета им навязывать нельзя:
   абзац на коричневой панели становился нечитаемым. */
body.has-side main:not(.anx-lp):not(.soc-lp) p,
body.has-side main:not(.anx-lp):not(.soc-lp) .muted{color:var(--cab-muted)!important}

/* Навигация: единый активный пункт-плашка, в обеих темах. */
body.has-side .app-side .as-item.active{background:var(--sage)!important;color:var(--accent)!important}
body.has-side .as-theme-seg{background:var(--cab-surface)!important;border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)!important;box-shadow:none!important}
/* В палитре сайта --border = transparent во всех темах, поэтому обводка, заданная
   в app-shell.css как `.5px solid var(--border)`, не рисовалась вовсе. Для тёмной
   темы её возвращает правило ниже, для светлой не возвращал никто. Плюс .5px —
   субпиксель, который часть экранов не отображает. Задаём явно, 1px. */
/* Единый источник обводки рельса — здесь, а не в page.css (он подключён не на
   всех страницах, из-за чего кнопка сворачивания выглядела по-разному). cabinet-
   design.css грузится на каждой странице с сайдбаром, поэтому вид одинаков везде.
   Кнопка сворачивания — рамка в ОБОИХ состояниях; аватар — только в развёрнутом
   (в свёрнутом столбце рамка вокруг аватара ломала ритм). */
body.has-side .app-side .as-collapse{border:1px solid color-mix(in srgb,var(--accent) 26%,transparent)!important}
body.has-side:not(.side-collapsed) .app-side .as-user{border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)!important}
body.has-side .as-tbtn.on{background:var(--sand)!important;color:var(--accent)!important;box-shadow:none!important}
html[data-theme="dark"] .app-side .as-item{color:var(--dark-muted)!important}
html[data-theme="dark"] .app-side .as-item:hover{background:transparent!important;color:var(--dark-ink)!important}
html[data-theme="dark"] .app-side .as-item.active{background:#253B36!important;color:#9BC8B2!important}
html[data-theme="dark"] .app-side .as-collapse,html[data-theme="dark"] .app-side .as-theme-seg,html[data-theme="dark"] .app-side .as-user{background:var(--dark-surface)!important;border-color:var(--cab-border)!important}
html[data-theme="dark"] .app-side .as-tbtn.on{background:var(--dark-bg)!important;color:#9BC8B2!important}

/* Обычные карточки не получают теней; граница и фон дают иерархию. */
#dash .card,#dash .nc,#dash .course,#dash .artcard,#dash .buy-card,.set-group,.hps-card,.plan,.ch-card,.ex2-card{box-shadow:none!important}
.set-group,.hps-card,.plan{background:var(--cab-surface)!important;border:1px solid var(--cab-border)!important;border-radius:var(--radius-card)!important}
.set-row{border-color:var(--cab-border)!important}
.set-input,select.set-select{background:var(--cab-control)!important;border:1.5px solid rgba(80,118,101,.48)!important;border-radius:var(--radius-control)!important;color:var(--cab-ink)!important;box-shadow:none!important}
.set-input:focus,select.set-select:focus{border-color:var(--cab-accent)!important;outline:none!important;box-shadow:var(--ring-focus)!important}
.set-btn.ghost,.set-btn.danger{background:var(--cab-surface)!important;border:1px solid var(--cab-border)!important}.set-btn{box-shadow:none!important}
.hps-free{background:var(--sand)!important}.hps-paid{background:var(--sage)!important;border-color:var(--accent)!important}
.hps-badge,.hps-btn,.plan-buy{background:var(--accent)!important;box-shadow:none!important}.hps-btn,.plan-buy{border:1px solid var(--accent)!important;color:var(--cream)!important}
/* ⚠️ Тут стоял тёмно-зелёный фон .hps-paid БЕЗ привязки к теме: он применялся и
   в светлой, а текст оставался тёмным — контраст 1.19, карточка с ценой и кнопкой
   покупки была нечитаема в обеих темах. Разводим по темам и красим текст. */
body.has-side .hps-paid{background:var(--sage)!important;border-color:var(--accent)!important}
body.has-side .hps-paid .hps-plan,body.has-side .hps-paid .hps-plan small,
body.has-side .hps-paid .hps-price b,body.has-side .hps-paid .hps-feat li,
body.has-side .hps-paid .hps-cur{color:var(--cab-ink)!important}
html[data-theme="dark"] .hps-free{background:#222D3A!important}
html[data-theme="dark"] .hps-paid{background:#20352F!important;border-color:#78A895!important}
html[data-theme="dark"] .hps-paid .hps-plan,html[data-theme="dark"] .hps-paid .hps-plan small,
html[data-theme="dark"] .hps-paid .hps-price b,html[data-theme="dark"] .hps-paid .hps-feat li,
html[data-theme="dark"] .hps-free .hps-plan,html[data-theme="dark"] .hps-free .hps-plan small,
html[data-theme="dark"] .hps-free .hps-price b,html[data-theme="dark"] .hps-free .hps-feat li,
html[data-theme="dark"] .hps-free .usg-info b,html[data-theme="dark"] .hps-free .usg-c{color:var(--dark-ink)!important}
html[data-theme="dark"] .hps-free .hps-tail,
html[data-theme="dark"] .hps-free .hps-usage-h,
html[data-theme="dark"] .hps-free .hps-sub,
html[data-theme="dark"] .hps-free .usg-c{color:var(--dark-muted)!important}
html[data-theme="dark"] .hps-cur{color:var(--dark-bg)!important}

/* Заголовок раздела — Merriweather независимо от того, вошёл человек или нет.
   Кабинетные страницы переопределяют --display на Manrope у себя в <style>, а
   правило ниже в этом файле возвращает засечки только для body.has-side: гость
   на «Тестах» и «Упражнениях» видел заголовок другим шрифтом, чем на «Курсах»,
   где такое исключение уже было. */
main.doc.app>.wrap>h1,
.ex-hub .ex-hero h1{font-family:"Merriweather",Georgia,serif!important;font-weight:300!important;letter-spacing:-.018em!important}

/* Курсы. */
.course-hub,.hub-hero,.hub-grid-wrap{background:var(--cab-bg)!important}
/* Гостю страница курсов показывается вне кабинета, и песочная заливка выглядела
   чужой рядом с остальными публичными разделами — им фон даёт --cream. */
body:not(.has-side) .course-hub,
body:not(.has-side) .hub-hero,
body:not(.has-side) .hub-grid-wrap{background:var(--cream)!important}
/* В тёмной теме кремовая заливка оставалась: --cream всегда светлый, а правило
   выше шло с !important. Гость получал светлый разворот со светлым же текстом. */
html[data-theme="dark"] body:not(.has-side) .course-hub,
html[data-theme="dark"] body:not(.has-side) .hub-hero,
html[data-theme="dark"] body:not(.has-side) .hub-grid-wrap{background:var(--dark-bg)!important}.ch-card{background:var(--cab-surface)!important;border:1px solid var(--cab-border)!important;border-radius:var(--radius-card)!important;box-shadow:none!important}.ch-cover{background:var(--peach)!important}.course-hub .hub-hero,.course-hub .hub-hero .wrap{display:block!important;text-align:left!important;align-items:flex-start!important;justify-content:flex-start!important}/* Прижимаем влево ТЕКСТ, но не сам контейнер: .wrap центрируется своим margin:0 auto,
   и обнуление margin-left сдвигало заголовок левее карточной сетки на 29px. */
.course-hub .hub-hero .wrap{text-align:left!important}
.course-hub .hub-hero h1,.course-hub .hub-sub{text-align:left!important;margin-left:0!important;margin-right:auto!important}.course-hub .hub-hero h1{font-family:"Merriweather",Georgia,serif!important;font-size:var(--text-h1)!important;line-height:var(--lh-h1)!important;letter-spacing:-.018em!important}
html[data-theme="dark"] .ch-card{background:var(--dark-surface)!important;border-color:var(--cab-border)!important}.ch-card:hover{box-shadow:none!important}

/* Цвет превью задаёт сама карточка упражнения; здесь его не переопределяем. */
.ex2-card{background:var(--cab-surface)!important;border:1px solid var(--cab-border)!important;border-radius:var(--radius-card)!important}.ex2-card:hover{box-shadow:none!important}.ex2-card .ex2-img{background-color:var(--blue-soft)!important;background-blend-mode:normal!important}
.ex-hub .ex-chip{background:var(--cab-surface)!important;border:1px solid var(--cc,var(--cab-border))!important;border-radius:var(--radius-pill)!important;box-shadow:none!important}.ex-hub .ex-chip.on{background:var(--cab-accent)!important;border-color:var(--cab-accent)!important;color:var(--cream)!important}

/* В тёмной теме заливка активного чипа берётся из --dark-accent, то есть
   светло-зелёная, а текст оставался кремовым: светлое на светлом, 2.53 при
   норме 4.5. Тёмные буквы на этой заливке читаются уверенно. */
html[data-theme="dark"] .ex-hub .ex-chip.on{color:#15201A!important}

/* Чек-ин: обводка повторяет цвет точки. */
#dash{--card-sh:none!important}#dash .checkin:not(.pulse){box-shadow:none!important}#dash .checkin.pulse{animation:ciPulse 3.2s ease-in-out infinite!important}#dash .cc,#dash .intb{box-shadow:none!important}#dash .cc.on{box-shadow:inset 0 0 0 1px var(--c)!important}#dash .intb.on{box-shadow:inset 0 0 0 1px var(--cur,var(--accent))!important}#dash .ci-mark,#dash #ciDoneMark{box-shadow:none!important;border:1px solid var(--cab-accent)!important}@media(prefers-reduced-motion:reduce){#dash .checkin.pulse{animation:none!important}}

/* Чат: свечение и неон при печати задаёт сама страница (chatNeon); здесь только тёмные поверхности. */
html[data-theme="dark"] .chat.is-thinking{background:var(--dark-surface)!important}
/* Свечение вокруг чата — намеренный эффект, а не уровень тени. */
html[data-theme="dark"] .chat:not(.is-thinking){background:var(--dark-surface)!important;border-color:rgba(135,177,214,.42)!important;box-shadow:0 0 0 1px rgba(135,177,214,.23),0 16px 42px -26px rgba(77,129,181,.65),0 0 38px -12px rgba(77,129,181,.35)!important}html[data-theme="dark"] .chat-head,html[data-theme="dark"] .chat-tabs{background:var(--dark-surface)!important;border-color:var(--cab-border)!important}html[data-theme="dark"] .chat-body{background:var(--dark-bg)!important}html[data-theme="dark"] .chat-input{background:var(--dark-surface)!important;border-color:var(--cab-border)!important}html[data-theme="dark"] .chat-input input,html[data-theme="dark"] .voice-viz{background:var(--dark-bg)!important;border-color:var(--cab-border)!important;color:var(--dark-ink)!important}html[data-theme="dark"] .msg.ai,html[data-theme="dark"] .typing,html[data-theme="dark"] .ex-card{background:var(--dark-surface)!important;border-color:var(--cab-border)!important;color:var(--dark-ink)!important;box-shadow:none!important}html[data-theme="dark"] .msg.ai strong,html[data-theme="dark"] .ex-t{color:var(--dark-ink)!important}html[data-theme="dark"] .suggest{background:var(--dark-surface)!important}html[data-theme="dark"] .s-chip{background:#20352F!important;border-color:rgba(120,168,149,.36)!important;color:#B7DDC9!important}

body.has-side main .btn-ghost,body.has-side main .ghost,body.has-side main .answer,body.has-side main .option{border:1px solid var(--cab-border)!important;box-shadow:none!important}
/* Справка остаётся текстовой ссылкой без декоративной стрелки. */
body.has-side .j-help::after{content:none!important}
@media(max-width:760px){body.has-side>main,body.has-side>footer{border-radius:var(--radius-inner)!important}/* Меню на телефоне выезжает от края экрана: скругляем только сторону контента, иначе оно висит отдельной карточкой и не связано с сайтом. */body.has-side>.app-side{border-radius:0 20px 20px 0!important;border-left:0!important}
/* Высота чата на телефоне живёт в самой странице чата: здесь стояло
   min(660px,76dvh) с !important, и переписка помещалась в три реплики,
   а под карточкой оставалась пустая половина экрана. */}

/* Единая сетка кабинета: значения из «Система безтерапевта.ру». */
:root{--page-bg:var(--cab-bg);--shell-bg:var(--cab-shell);--paper:var(--cab-surface);}
body.has-side{background:var(--cab-shell)!important}
/* Сайдбар здесь НЕ заливаем: его фон задан выше как стекло. Прежняя строка
   ставила сплошной --cab-bg и, находясь ниже по файлу, побеждала. */
body.has-side>.app-side{background-image:none!important}
body.has-side>main{background:var(--cab-bg)!important}
body.has-side>footer{background:var(--cab-bg)!important}
body.has-side #dash h1.hello,
body.has-side .course-hub .hub-hero h1,
body.has-side .ex-hub .ex-hero h1,
body.has-side .j-head #pageTitle,
body.has-side .doc #pageTitle,
body.has-side .chat-hero h1{
  font-family:"Merriweather",Georgia,serif!important;
  font-weight:300!important;
  font-size:var(--text-h1)!important;
  line-height:var(--lh-h1)!important;
  letter-spacing:-.018em!important;
  margin-top:0!important;
}
/* order:-1 для course-anxiety убран: порядок задаётся разметкой */

/* Подложка отделена от панелей в обеих темах; панели сохраняют общий фон. */
html[data-theme="dark"] body.has-side{background:var(--cab-shell)!important}
html[data-theme="dark"] body.has-side>main{background:var(--cab-bg)!important}
html[data-theme="dark"] body.has-side>.app-side{background:var(--cab-bg)!important}
html[data-theme="dark"] body.has-side>footer{background:var(--cab-bg)!important}
body.has-side .page-head,body.has-side .ex-hub,body.has-side .course-hub{max-width:1280px!important}
/* Одна высота шапки на всех экранах кабинета: единый верхний отступ у контейнеров заголовков. */
body.has-side :is(#dash,.chat-hero,.j-head,.ex-hero,.hub-hero){padding-top:10px!important;margin-top:0!important}

/* Разделы в кабинете вели себя по-разному: ширину 1280 получал только .course-hub,
   а .doc (Тесты) и .hub (Статьи) оставались уже. Из-за этого заголовки разделов
   стояли на разной высоте и с разным отступом слева, хотя правило общей шапки
   в page.css уже одно на всех. Доводим и внешний контейнер. */
body.has-side main.doc,body.has-side main.hub{max-width:1280px;margin-left:auto;margin-right:auto}
/* Единый верхний отступ для ВСЕХ разделов кабинета. Раньше тут было 10px,
   а ниже отдельное правило обнуляло его для курсов — заголовок прилипал к краю. */
/* Кабинет задаёт СВОЁ значение общего токена — правило одно, без !important. */
body.has-side main{--page-top:36px}
/* У курсов отступ сверху набегал дважды: 10px у контейнера и ещё 10px у секции-шапки,
   поэтому заголовок стоял ниже, чем на «Тестах» и «Статьях». Снять его у секции нельзя:
   там правило с :is(#dash,…), а идентификатор внутри :is перебивает по специфичности.
   Поэтому обнуляем у контейнера — итог те же 10px, что у остальных разделов. */

/* Лендинги курсов внутри кабинета: шапка и первый экран жили по своим правилам
   (28px у шапки + 62px у hero), поэтому при переходе с /courses высота шапки
   прыгала, а заголовок уезжал вниз. Приводим к тем же величинам, что в каталоге. */
body.has-side header.mnav{padding:0!important}
/* Лендинги курсов исключены: у них своя утверждённая геометрия первого экрана
   (симметричные поля, растущие с высотой окна). Кабинетное правило по
   специфичности било её — 10px сверху прижимали контент к шапке, а снизу
   оставалась пустая полоса. */
body.has-side main:not(.anx-lp):not(.soc-lp) .hero{padding-top:10px!important}
body.has-side main.anx-lp .course-head{padding-top:10px!important}

/* Подложка лендингов курсов повторно: блок «единой сетки» выше возвращает
   --cab-shell всем страницам с сайдбаром, включая эти. */
body.has-side:has(main.anx-lp),body.has-side:has(main.soc-lp){background:var(--course-shell)!important}
html[data-theme="dark"] body.has-side:has(main.anx-lp),
html[data-theme="dark"] body.has-side:has(main.soc-lp){background:var(--dark-shell)!important}