/* Единая система внутренних страниц cbtwithai.com.
   Перенос с bezterapevta.ru (cabinet-design.css) с поправками:
   — гарнитура заголовков из var(--display): здесь Manrope, Merriweather не подключён;
   — лендинги курсов помечены .course-lp, а не .anx-lp/.soc-lp;
   — .page-head в разметке EN отсутствует, селектор убран.
   Мёртвые селекторы (blog-head, tests-head, settings-page и др.) вычищены
   в источнике 21.07; .ch-badge здесь ЖИВОЙ и НЕ прячется, в отличие от RU. */
:root{
  --cream:#FFF8E7;--ink:#24231F;--accent:#168AE1;--blue:#4E718F;--blue-soft:#E9F0F5;
  --sage:#E8F3FC;--sage-mid:#276FA5;--sage-dark:#168AE1;
  --mint:#DBEBF7;--mint-mid:#678B84;--mint-dark:#4F726C;
  --mist:#F1F8FD;--mist-mid:#A6D3F4;--mist-dark:#168AE1;
  --rose:#F3E9E4;--rose-mid:#98756B;--rose-dark:#805F56;
  --sand:#F2ECDF;--sand-mid:#9A805B;--sand-dark:#7D6542;
  --mauve:#EEE7E9;--mauve-mid:#8C737B;--mauve-dark:#24231F;
  --peach:#F5E5D8;--peach-mid:#BB7950;--peach-dark:#92583A;
  /* Значения берём из палитры, а не вписываем заново: на светлой теме тут
     стояли #F4EEE1/#FCFAF4/#ECE5D7 — свои оттенки, из-за чего кабинет на
     английском был на полтона другим, чем на русском. */
  /* Shell, workspace and cards share one cream #FBF7EA (owner's value,
     18.08.2026): the shell used to read noticeably yellower than the workspace
     next to it, so the seam looked like two different pages. */
  --cab-bg:#FBF7EA;--cab-surface:#FBF7EA;--cab-control:var(--peach);/* Рамка карточек: было .12 — линия давала контраст 1,14 к кремовому фону и
     не читалась вовсе, карточки сливались в одно пятно. Владелец 19.08.2026:
     «границы всех плашек чуть темнее, сейчас не видно». .28 даёт 1,40 —
     линия видна и не превращается в обводку. */
  --cab-border:rgba(22,138,225,.28);--cab-shell:#FBF7EA;
  --cab-ink:var(--ink);--cab-muted:rgba(36,35,31,.62);--cab-accent:var(--accent);
}
html[data-theme="dark"]{
  --cab-bg:var(--dark-bg,#191F28);--cab-surface:var(--dark-surface,#212934);--cab-control:var(--dark-control,#313B48);--cab-border:rgba(233,240,245,.24);   /* в тёмной теме та же правка: 1,71 -> 2,06 к фону панели */--cab-shell:var(--dark-shell,#131820);
  --cab-ink:var(--dark-ink,#F4F0E8);--cab-muted:var(--dark-muted,#B7C1CD);--cab-accent:var(--dark-accent,#61ADE5);
}

/* Фон — только однотонный. Заголовки всех внутренних разделов — из одной гарнитуры. */
body.has-side{--display:var(--sans);background:var(--cab-shell)!important;color:var(--cab-ink)!important;overflow-x:hidden!important}
/* Sidebar and workspace are one app surface. Keeping the sidebar translucent made
   it pick up --cab-shell and look yellower than the solid workspace beside it. */
body.has-side>.app-side{
  background:var(--cab-bg)!important;
  background-image:none!important;
  border:1px solid color-mix(in srgb,var(--accent) 18%,transparent)!important;
  border-radius:var(--radius-card)!important;
  box-shadow:none!important}
html[data-theme="dark"] body.has-side>.app-side{background:var(--cab-bg)!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.pfoot{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}
/* SINGLE SOURCE OF SURFACES: cabinet pages read colours from the shared cab-* tokens
   instead of their own local variables. Backdrop between panels = --cab-shell,
   panels = --cab-bg, cards = --cab-surface, borders = --cab-border. */
body.has-side{--bg:var(--cab-bg);--card:var(--cab-surface);--surface:var(--cab-surface);--glass:var(--cab-surface);/* --tint кабинет НЕ переопределяет: это бледно-голубая подложка #E8F3FC, ей
     красятся шапка чата и полоса вкладок. Пока она была подменена кремом,
     чат в кабинете выглядел плоским, а на русском — тем же кодом — с голубой
     полосой. Владелец 19.08.2026: «дизайн чата должен быть как на ру».
     Разница между сайтами была ровно в этой одной подмене. */--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:var(--display)!important;font-weight:300!important;color:var(--cab-ink)!important}
body.has-side>main h1{font-size:var(--text-h1)!important;letter-spacing:-.018em!important;line-height:1.12!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:var(--display)!important;
  font-size:var(--text-h1)!important;
  font-weight:300!important;
  letter-spacing:-.018em!important;
  line-height:1.12!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(.course-lp) p,
body.has-side main:not(.course-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 var(--cab-border)!important;box-shadow:none!important}
/* В палитре сайта --border = transparent во всех темах, поэтому обводка, заданная
   в app-shell.css как `.5px solid var(--border)`, не рисовалась вовсе. Для тёмной
   темы её возвращает правило ниже, для светлой не возвращал никто. Плюс .5px —
   субпиксель, который часть экранов не отображает. Задаём явно, 1px. */
body.has-side .app-side .as-collapse,
body.has-side .app-side .as-user{border:1px solid var(--cab-border)!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:#B7C1CD!important}
html[data-theme="dark"] .app-side .as-item:hover{background:transparent!important;color:#F4F0E8!important}
html[data-theme="dark"] .app-side .as-item.active{background:#16344A!important;color:#77B9EC!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:#212934!important;border-color:var(--cab-border)!important}
html[data-theme="dark"] .app-side .as-tbtn.on{background:#191F28!important;color:#77B9EC!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(22,138,225,.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:#313B48!important}
html[data-theme="dark"] .hps-paid{background:#112E44!important;border-color:#61ADE5!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 .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,
html[data-theme="dark"] .hps-free .usg-info b{color:#F4F0E8!important}
html[data-theme="dark"] .hps-cur{color:#191F28!important}

/* Курсы. */
.course-hub,.hub-hero,.hub-grid-wrap{background:var(--cab-bg)!important}
/* Гостю страница курсов показывается вне кабинета, и песочная заливка выглядит
   чужой рядом с остальными публичными разделами: им фон даёт --cream. Так же
   на bezterapevta.ru. */
body:not(.has-side) .course-hub,
body:not(.has-side) .hub-hero,
body:not(.has-side) .hub-grid-wrap{background:var(--cream,#FFF8E7)!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}.course-hub .hub-hero .wrap{text-align:left!important;margin-left:auto!important;margin-right:auto!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:var(--display)!important;font-size:var(--text-h1)!important;line-height:1.12!important;letter-spacing:-.018em!important}
html[data-theme="dark"] .ch-card{background:#212934!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}

/* Чек-ин: обводка повторяет цвет точки. */
#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 .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:#212934!important}
html[data-theme="dark"] .chat:not(.is-thinking){background:#212934!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:#1B2631!important;border-color:var(--cab-border)!important}html[data-theme="dark"] .chat-body{background:#191F28!important}html[data-theme="dark"] .chat-input{background:#212934!important;border-color:var(--cab-border)!important}html[data-theme="dark"] .chat-input input,html[data-theme="dark"] .voice-viz{background:#191F28!important;border-color:rgba(233,240,245,.40)!important;color:#F4F0E8!important}html[data-theme="dark"] .msg.ai,html[data-theme="dark"] .typing,html[data-theme="dark"] .ex-card{background:#212934!important;border-color:var(--cab-border)!important;color:#F4F0E8!important;box-shadow:none!important}html[data-theme="dark"] .msg.ai strong,html[data-theme="dark"] .ex-t{color:#F4F0E8!important}html[data-theme="dark"] .suggest{background:#212934!important}html[data-theme="dark"] .s-chip{background:#112E44!important;border-color:rgba(97,173,229,.36)!important;color:#A8CFEC!important}

/* .ghost здесь — это кнопка-призрак, а не всё подряд с этим классом: на
   дашборде так называется огромная декоративная цифра курса, и общее
   правило рисовало вокруг неё рамку. 19.08.2026, владелец: «цифра 5 в
   каком-то прямоугольнике». */
body.has-side main .btn-ghost,body.has-side main button.ghost,body.has-side main a.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>.app-side,body.has-side>footer.pfoot{border-radius:var(--radius-inner)!important}body.has-side>main h1{font-size:44px!important}.chat{height: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}
/* The sidebar fill used to be repeated here and, being later in the file, it won —
   the glass rule above rendered as a flat sand panel. Same trap the RU site hit. */
body.has-side>main{background:var(--cab-bg)!important}
body.has-side>footer.pfoot{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:var(--display)!important;
  font-weight:300!important;
  font-size:var(--text-h1)!important;
  line-height:1.12!important;
  letter-spacing:-.018em!important;
  margin-top:0!important;
}
body.has-side .hub-grid .ch-card[href="/course-anxiety"]{order:-1!important}

/* У всех экранов кабинета один фон и одинаковая рамка рабочей области. */
html[data-theme="dark"] body.has-side,html[data-theme="dark"] body.has-side>main{background:var(--cab-bg)!important}
/* Dark sidebar fill dropped for the same reason as the light one: it sat below the
   glass rule and overrode it. The dark glass is declared next to the light one. */
html[data-theme="dark"] body.has-side>footer.pfoot{background:var(--cab-surface)!important}
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}

/* Кабинет задаёт своё значение общего токена — одно правило, без !important. */
body.has-side main{--page-top:36px}
body.has-side main.doc,body.has-side main.hub,body.has-side main.course-hub,
body.has-side main.ex-hub{padding-top:var(--page-top);padding-bottom:48px}

/* Мобильная шкала кеглей задаётся токеном --text-h1 (32px до 720px), но эти
   заголовки держат собственный clamp с нижней границей 38px и !important —
   на телефоне они выпадали из системы и занимали пол-экрана. Возвращаем их
   в шкалу, десктопные размеры не трогаем. */
@media (max-width:720px){
  body.has-side>main h1,
  .course-hub .hub-hero h1,
  .ex-hub .ex-hero h1{ font-size:var(--text-h1)!important; line-height:var(--lh-h1,1.15)!important; }
}