/* cabinet.css — ОБОЛОЧКА КАБИНЕТА: шапка, колонка контента, левое меню, карточка.
 *
 * ⚠ ОДИН ИСТОЧНИК НА ВСЕ СТРАНИЦЫ КАБИНЕТА. Замечание владельца 2026-09-15:
 * «вкладка „Мои боты" осталась другой + лого не до конца сделано — почему не
 * переиспользуешь общие компоненты, а делаешь фигню с нуля». Ровно так и было:
 * /my-bots несла РУЧНУЮ КОПИЮ этих правил, и копия разошлась с оригиналом в
 * шести местах сразу — колонка 1200 вместо 1000 (страница шире всего кабинета),
 * логотип без «.AI», порог телефона 860 вместо 720, свои размеры карточки,
 * заголовок <h1>/.lede вместо .title/.subtitle, и <main> элементом вместо
 * .main — из-за чего к ней не применялись ОБЩИЕ мобильные правила mobile.css,
 * которые адресуют класс.
 *
 * ⚠ Копия расходится ВСЕГДА, и расходится молча: правят ту страницу, которую
 * открывают чаще, а вторая тихо остаётся прежней. Тот же класс, что список
 * пунктов меню — он поэтому и живёт в одном cabinet-sidebar.js.
 *
 * ⚠ Подключается ПЕРЕД собственным <style> страницы: страница вправе уточнить
 * оболочку под себя, а не наоборот. mobile.css остаётся последним — он по
 * устройству перекрывает всё под своим порогом.
 *
 * Пункты меню рисует /cabinet-sidebar.js, токены цвета — /theme.css.
 */

/* Шапка сайта. Ширина шапки и контента ОДНА: разъедься они, логотип стоял бы
   левее края карточек. */
.nav{border-bottom:0.5px solid var(--border);background:var(--bg)}.nav-inner{max-width:1000px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px}
.nav-logo{font-size:18px;font-weight:600;color:var(--purple)}

.main{max-width:1000px;margin:0 auto;padding:24px 20px}
.title{font-size:20px;font-weight:600;margin-bottom:4px}
.subtitle{font-size:13px;color:var(--muted);margin-bottom:20px}

/* Layout: sidebar + content */
.ps-layout{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:start}
/* Фокус-режим: человек пришёл ПО ОДНОРАЗОВОЙ ССЫЛКЕ ИЗ БОТА, чтобы заплатить.
   Он не «зашёл в настройки» — у него одно дело, и всё остальное на экране
   уводит от него: заголовок раздела, подзаголовок про управление аккаунтом и
   полоса вкладок (Профиль / Безопасность / Уведомления / …). На телефоне они
   занимают верхний экран целиком, и тариф с кнопкой оплаты оказываются ниже
   сгиба. Навигацию сайта не трогаем — шапка и таб-бар остаются, иначе человек
   окажется заперт на странице оплаты. */
html.ps-focus .main > .title,
html.ps-focus .main > .subtitle,
html.ps-focus .ps-sidebar{display:none}
html.ps-focus .ps-layout{grid-template-columns:1fr}
html.ps-focus .ps-focus-hint{display:block}
.ps-focus-hint{display:none;font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:14px}
.ps-sidebar{display:flex;flex-direction:column;gap:2px;position:sticky;top:24px}
.ps-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:14px;font-size:13px;color:var(--muted);cursor:pointer;transition:background .12s,color .12s}
.ps-item:hover{background:var(--bg);color:var(--text)}
.ps-item.active{background:var(--c-info-bg);color:var(--c-info-fg);font-weight:500}
.ps-item .pi-soon{font-size:9px;font-weight:500;padding:1px 6px;border-radius:99px;background:var(--bg2);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.ps-item.active .pi-soon{background:rgba(60,52,137,.12);color:var(--c-info-fg)}
.ps-item-logout{margin-top:8px;padding-top:14px;border:none;border-top:0.5px solid var(--border);background:transparent;color:var(--c-err-fg);text-align:left;width:100%;font-family:inherit;font-size:13px}
.ps-item-logout:hover{background:var(--c-err-bg);color:var(--c-err-fg)}

.ps-main{min-width:0}
.ps-panel{display:none}
.ps-panel.active{display:block}

/* Карточка раздела — основной блок контента в кабинете. */
.card{background:var(--bg);border:0.5px solid var(--border);border-radius:22px;padding:24px 28px;margin-bottom:14px}
.card-title{font-size:16px;font-weight:500;margin-bottom:4px}
.card-sub{font-size:13px;color:var(--muted);margin-bottom:18px;line-height:1.55}

@media (max-width:720px){
  .ps-layout{grid-template-columns:1fr;gap:14px}
  .ps-sidebar{position:static;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;padding:6px 0;border-bottom:0.5px solid var(--border)}
  .ps-item{flex-shrink:0}
  .card{padding:18px 20px}
}