/*
 * ОФОРМЛЕНИЕ КАБИНЕТА.
 *
 * Своих цветов здесь НЕТ — только токены `--sk-*` из дизайн-системы
 * (cl-calculators/includes/ui/tokens.php). Второго набора цветов на сайте не
 * заводится: правка токена обязана менять и калькулятор, и кабинет.
 *
 * Карточкам добавлены ОТСТУПЫ: у `.sk-card` их нет вовсе — внутри калькулятора
 * их задаёт содержимое (лист чертежа лежит в карточке без полей). Правило
 * ограничено `.cl-cab`, поэтому карточек калькулятора не касается.
 */

/* ——— Раскладка страницы кабинета ————————————————————————————————————— */

.cl-cab {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	gap: 26px;
	align-items: start;
	max-width: var(--sk-wrap-lite);
	margin: 0 auto;
	font-family: var(--sk-font-sans);
	color: var(--sk-ink);
}

/* Вход, регистрация, восстановление, публичные тарифы — без бокового меню. */
.cl-cab--bare { grid-template-columns: minmax(0, 1fr); }
.cl-cab--wide { max-width: var(--sk-wrap); }

.cl-cab .sk-card { padding: 20px 22px; }
.cl-cab a.sk-btn { text-decoration: none; }
.cl-cab .sk-cap { display: block; margin-bottom: 12px; }
.cl-cab .sk-cap.cl-sub { margin-top: 22px; }
.cl-cab p { margin: 0 0 10px; }
.cl-cab p:last-child { margin-bottom: 0; }

.cl-note { font-size: 13px; color: var(--sk-muted); }
.cl-note--warn {
	padding: 10px 12px;
	background: var(--sk-warn-bg);
	border-left: 3px solid var(--sk-warn);
	color: var(--sk-ink-soft);
}
.cl-note--lock {
	padding: 12px 14px;
	background: var(--sk-wash);
	border-left: 3px solid var(--sk-pro);
}

.cl-link { color: var(--sk-link); text-decoration: underline; text-underline-offset: 2px; }
.cl-link:hover { color: var(--sk-ink); }

.cl-list { margin: 0 0 10px; padding-left: 0; list-style: none; font-size: 14px; color: var(--sk-ink-soft); }
.cl-list li { position: relative; padding: 4px 0 4px 20px; }
.cl-list li::before {
	content: '·';
	position: absolute; left: 6px; top: 2px;
	font-weight: 700; color: var(--sk-accent);
}
.cl-list li.yes::before { content: '✔'; font-size: 11px; top: 5px; left: 2px; color: var(--sk-ok); }
.cl-list li.no::before  { content: '—'; top: 4px; left: 2px; color: var(--sk-faint-2); }
.cl-list li.no { color: var(--sk-faint); }

/* ——— Полоса сообщения ————————————————————————————————————————————— */

.cl-msg {
	padding: 12px 16px;
	margin-bottom: 18px;
	font-size: 14px;
	border-left: 3px solid var(--sk-ok);
	background: var(--sk-ok-bg);
}
.cl-msg--err { border-left-color: var(--sk-bad); background: var(--sk-bad-bg); }
/* Кнопка в полосе: после оплаты она доводит человека до кнопки PDF на той же
   странице, куда его вернули. */
.cl-msg__go { display: inline-block; margin: 10px 0 0; }

/* ——— Боковое меню ————————————————————————————————————————————————— */

.cl-side {
	position: sticky;
	top: calc(var(--sk-sticky-top, 0px) + 16px);
	background: var(--sk-paper);
	border: 1px solid var(--sk-line);
}

.cl-side__group { padding: 14px 0; border-bottom: 1px solid var(--sk-line-2); }
.cl-side__group:last-of-type { border-bottom: 0; }

.cl-side__cap {
	padding: 0 16px 8px;
	font-family: var(--sk-font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sk-faint);
}

.cl-side__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 16px;
	font-size: 14px;
	color: var(--sk-ink-soft);
	text-decoration: none;
	border-left: 2px solid transparent;
}
.cl-side__link:hover { background: var(--sk-wash); color: var(--sk-ink); }
.cl-side__link.is-active {
	border-left-color: var(--sk-accent);
	background: var(--sk-tint);
	color: var(--sk-ink);
	font-weight: 600;
}

.cl-side__n {
	flex: none;
	min-width: 20px;
	padding: 1px 6px;
	font-family: var(--sk-font-mono);
	font-size: 11px;
	text-align: center;
	color: var(--sk-accent-code);
	background: var(--sk-tint);
	border: 1px solid var(--sk-line);
}
/* СПРАВКА, А НЕ СЧЁТ. У «Уведомлений» число значит «сделай что-то», у
   «Подписки» — сколько дней осталось; одинаковые бейджи с разным смыслом
   читаются одинаково, поэтому срок печатается приглушённым и без рамки. */
.cl-side__n--soft {
	color: var(--sk-faint);
	background: transparent;
	border-color: transparent;
}

.cl-side__ask {
	padding: 12px 16px 0;
	font-size: 13px;
}

.cl-side__out {
	display: block;
	padding: 12px 16px;
	font-size: 13px;
	color: var(--sk-muted-2);
	text-decoration: none;
	border-top: 1px solid var(--sk-line-2);
}
.cl-side__out:hover { color: var(--sk-bad); }

/* ——— Поля формы ——————————————————————————————————————————————————— */

.cl-f { margin-bottom: 14px; }
.cl-f__lab {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sk-ink);
}
.cl-f__lab i { color: var(--sk-bad); font-style: normal; }

.cl-f__in {
	width: 100%;
	height: var(--sk-input-h);
	padding: 0 11px;
	font-family: var(--sk-font-sans);
	font-size: 14px;
	color: var(--sk-ink);
	background: var(--sk-paper);
	border: 1px solid var(--sk-line-input);
	border-radius: var(--sk-radius);
}
.cl-f__in:focus { outline: 0; border-color: var(--sk-ink); }
.cl-f__in:disabled { background: var(--sk-wash); color: var(--sk-faint); }

.cl-f__ro {
	padding: 7px 11px;
	font-family: var(--sk-font-mono);
	font-size: 13px;
	background: var(--sk-wash);
	border: 1px solid var(--sk-line-2);
}

.cl-f__file { display: block; font-size: 13px; margin-top: 6px; }
.cl-f__hint { margin-top: 5px; font-size: 12px; color: var(--sk-muted-2); }

.cl-chk {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 10px 0;
	font-size: 14px;
	color: var(--sk-ink-soft);
	cursor: pointer;
}
.cl-chk input { margin-top: 3px; flex: none; }

.cl-chk--pay {
	padding: 12px 14px;
	border: 1px solid var(--sk-line);
	background: var(--sk-wash);
}
.cl-chk--pay b { display: block; font-size: 14px; color: var(--sk-ink); }
.cl-chk--pay i { display: block; margin-top: 3px; font-size: 12px; font-style: normal; color: var(--sk-muted-2); }

/* ——— Вход и регистрация ——————————————————————————————————————————— */

.cl-auth {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: 22px;
	max-width: 780px;
	margin: 0 auto;
	align-items: start;
}
.cl-auth--one { max-width: 440px; grid-template-columns: minmax(0, 1fr); }

.cl-auth__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 18px;
}
.cl-auth__side { background: var(--sk-wash); }

/* ——— Первый экран кабинета ————————————————————————————————————————— */

.cl-plan { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.cl-plan--on { border-left: 3px solid var(--sk-ok); }
.cl-plan__main { flex: 1 1 320px; }
.cl-plan__act { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cl-plan__name { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.cl-plan__till { font-size: 14px; color: var(--sk-ink-soft); }

.cl-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 14px;
	margin-top: 22px;
}
/* Отступ между плитками даёт САМА СЕТКА (`gap`). Общее правило дизайн-системы
   `.sk-card + .sk-card { margin-top }` опускало каждую следующую плитку, и ряд
   плясал по вертикали — тот же случай, для которого у `.sk-grid` сброс уже
   написан (layout.css). */
.cl-tiles > .sk-card + .sk-card { margin-top: 0; }

.cl-tile { text-decoration: none; }
.cl-tile:hover { border-color: var(--sk-ink); }
.cl-tile__t { display: block; font-size: 15px; font-weight: 700; color: var(--sk-ink); }
.cl-tile__d { display: block; margin-top: 5px; font-size: 13px; color: var(--sk-muted); }

.cl-facts { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; margin-top: 22px; }
/* «Продолжить» прижата вправо: это ДЕЙСТВИЕ, а слева от него — справка. */
.cl-facts__go { margin-left: auto; }
.cl-facts b { display: block; font-family: var(--sk-font-mono); font-size: 20px; color: var(--sk-accent-num); }
.cl-facts span { font-size: 12px; color: var(--sk-muted-2); }

/* ——— Тарифы ——————————————————————————————————————————————————————— */

.cl-per { display: flex; gap: 8px; margin-bottom: 18px; }
.cl-per__b {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 15px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sk-muted);
	text-decoration: none;
	background: var(--sk-paper);
	border: 1px solid var(--sk-line);
}
.cl-per__b.is-on { color: var(--sk-paper); background: var(--sk-ink); border-color: var(--sk-ink); }
.cl-per__b i { font-style: normal; font-family: var(--sk-font-mono); font-size: 11px; color: var(--sk-ok); }
.cl-per__b.is-on i { color: var(--sk-warn); }

.cl-plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 18px;
}
.cl-plans .sk-card + .sk-card { margin-top: 0; }
.cl-pc--on { border-color: var(--sk-ok); box-shadow: inset 0 0 0 1px var(--sk-ok); }
.cl-pc__name { font-size: 18px; font-weight: 700; }
.cl-pc__price { font-family: var(--sk-font-mono); font-size: 30px; font-weight: 700; margin-top: 8px; color: var(--sk-accent-num); }
.cl-pc__per { font-size: 13px; color: var(--sk-muted-2); }
.cl-pc__mon { font-size: 12px; color: var(--sk-ok); margin-top: 3px; }
.cl-pc__note { margin: 12px 0; font-size: 13px; color: var(--sk-ink-soft); }
.cl-pc__list { margin: 0 0 16px; padding: 0; list-style: none; font-size: 13px; }
.cl-pc__list li { position: relative; padding: 4px 0 4px 20px; }
.cl-pc__list li::before { position: absolute; left: 2px; }
.cl-pc__list li.yes::before { content: '✔'; color: var(--sk-ok); font-size: 11px; top: 5px; }
.cl-pc__list li.no::before { content: '—'; color: var(--sk-faint-2); }
.cl-pc__list li.no { color: var(--sk-faint); }
.cl-pc__cur { margin-top: 8px; font-size: 12px; color: var(--sk-ok); }

/* ——— Таблица сравнения на публичной странице ————————————————————————— */

.cl-pr__intro { background: var(--sk-wash); font-size: 15px; }
.cl-pr .cl-pr__c { text-align: center; }
.cl-pr th.is-cur { color: var(--sk-ok); }
.cl-tick { color: var(--sk-ok); font-size: 15px; }
.cl-dash { color: var(--sk-faint-2); }
.cl-pr__price td { vertical-align: top; }
.cl-pr__price b { display: block; font-family: var(--sk-font-mono); font-size: 17px; color: var(--sk-accent-num); }
.cl-pr__buy { margin-top: 8px; }
.cl-pr__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: 18px;
	margin-top: 22px;
}
.cl-pr__cols .sk-card + .sk-card { margin-top: 0; }

/* ——— Оформление заказа ————————————————————————————————————————————— */

.cl-co {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}
.cl-co .sk-card + .sk-card { margin-top: 0; }
.cl-co__sum {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin: 18px 0;
	padding-top: 14px;
	border-top: 1px solid var(--sk-line);
}
.cl-co__sum b { font-family: var(--sk-font-mono); font-size: 26px; color: var(--sk-accent-num); }
.cl-co__go { margin-top: 16px; }
.cl-co__side { background: var(--sk-wash); }
.cl-co__once { margin-top: 12px; }

/* Выход со страницы оплаты — один и наверху. Бокового меню тут нет намеренно
   (cl_cabinet_bare), и без этой строки уйти можно только кнопкой «назад». */
.cl-co__back {
	display: inline-block;
	margin-bottom: 14px;
	font-size: 14px;
	color: var(--sk-muted);
	text-decoration: none;
}
.cl-co__back:hover { color: var(--sk-ink); }

/* ШАГИ. Нумерация своя (счётчиком), а не маркерами списка: номер стоит в
   кружке и гасится вместе с шагом. */
.cl-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	counter-reset: cl-step;
	font-size: 13px;
	color: var(--sk-faint);
}
.cl-steps li { display: flex; align-items: center; gap: 8px; counter-increment: cl-step; }
.cl-steps li::before {
	content: counter(cl-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	font-family: var(--sk-font-mono);
	font-size: 11px;
	color: var(--sk-faint);
	border: 1px solid var(--sk-line);
	border-radius: 50%;
}
.cl-steps li.is-now { color: var(--sk-ink); font-weight: 600; }
.cl-steps li.is-now::before { color: var(--sk-paper); background: var(--sk-ink); border-color: var(--sk-ink); }
.cl-steps li.is-done { color: var(--sk-muted); }
.cl-steps li.is-done::before { content: '✔'; color: var(--sk-ok); border-color: var(--sk-ok); }

/* ПЕРЕКЛЮЧАТЕЛЬ СРОКА. Две карточки, а не select: сравнивают их глазами, и
   выгода года должна быть видна без раскрытия списка. */
.cl-co__per { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.cl-co__per-it {
	flex: 1 1 180px;
	padding: 10px 14px;
	text-decoration: none;
	color: var(--sk-ink-soft);
	border: 1px solid var(--sk-line);
	background: var(--sk-paper);
}
.cl-co__per-it:hover { border-color: var(--sk-ink); }
.cl-co__per-it.is-on { border-color: var(--sk-accent); background: var(--sk-tint); color: var(--sk-ink); }
.cl-co__per-it b { display: block; font-size: 14px; }
.cl-co__per-it span { display: block; margin-top: 2px; font-family: var(--sk-font-mono); font-size: 16px; color: var(--sk-accent-num); }
.cl-co__per-it i { display: block; margin-top: 3px; font-style: normal; font-size: 12px; color: var(--sk-muted); }

/* ——— Панель «почему кнопка закрыта» —————————————————————————————————
 *
 * Живёт ВНУТРИ блока «Скачать расчёт» на странице калькулятора, поэтому
 * оформление у неё тут, а не в дизайн-системе: это виджет кабинета. */

.cl-gate {
	margin-top: 14px;
	padding: 14px 16px;
	border: 1px solid var(--sk-line);
	border-left: 3px solid var(--sk-accent);
	background: var(--sk-wash);
	font-family: var(--sk-font-sans);
	font-size: 14px;
	color: var(--sk-ink-soft);
}
.cl-gate__t { font-size: 15px; font-weight: 700; color: var(--sk-ink); }
.cl-gate__l { margin: 10px 0 0; padding: 0 0 0 18px; }
.cl-gate__l li { margin-bottom: 3px; }
.cl-gate__free { margin: 10px 0 0; font-size: 13px; color: var(--sk-muted); }
.cl-gate__act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cl-gate__act .sk-btn { text-decoration: none; }

/* ——— Таблицы кабинета ————————————————————————————————————————————— */

.cl-tbl__num { text-align: right; font-family: var(--sk-font-mono); }
.cl-tbl__sub { display: block; margin-top: 2px; font-size: 11px; color: var(--sk-faint); font-family: var(--sk-font-sans); }

.cl-st { font-size: 12px; font-weight: 600; }
.cl-st--paid { color: var(--sk-ok); }
.cl-st--pending { color: var(--sk-warn); }
.cl-st--failed, .cl-st--canceled { color: var(--sk-bad); }
.cl-st__pay { display: inline-block; margin-left: 8px; }

/* ——— Закладки ————————————————————————————————————————————————————— */

.cl-bm { display: grid; gap: 12px; }
.cl-bm .sk-card + .sk-card { margin-top: 0; }
.cl-bm__head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; justify-content: space-between; }
.cl-bm__t { font-size: 16px; font-weight: 700; color: var(--sk-ink); text-decoration: none; }
.cl-bm__t:hover { color: var(--sk-accent); }
.cl-bm__when { font-size: 12px; color: var(--sk-faint); }
.cl-bm__calc { margin-top: 3px; font-size: 13px; color: var(--sk-muted); }
.cl-bm__params {
	margin-top: 8px;
	padding: 7px 10px;
	font-family: var(--sk-font-mono);
	font-size: 12px;
	color: var(--sk-ink-soft);
	background: var(--sk-wash);
	overflow-wrap: anywhere;
}
.cl-bm__form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.cl-bm__name { flex: 1 1 260px; width: auto; }

/* ——— Уведомления ————————————————————————————————————————————————— */

.cl-nt { display: grid; gap: 10px; }
.cl-nt .sk-card + .sk-card { margin-top: 0; }
.cl-nt__it.is-new { border-left: 3px solid var(--sk-accent); }
.cl-nt__head { display: flex; gap: 10px; align-items: baseline; }
.cl-nt__t { font-size: 15px; font-weight: 700; }
.cl-nt__new {
	font-family: var(--sk-font-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sk-accent-code);
	background: var(--sk-tint);
	padding: 1px 6px;
}
.cl-nt__x { margin-top: 6px; font-size: 14px; color: var(--sk-ink-soft); }
.cl-nt__when { margin-top: 8px; font-size: 12px; color: var(--sk-faint); }

/* ——— Учётная запись ————————————————————————————————————————————— */

.cl-acc .sk-card + .sk-card { margin-top: 18px; }

/* ЛИПКАЯ ПОЛОСА СОХРАНЕНИЯ. Форма длинная, и кнопка внизу заставляла
   прокручивать весь экран ради одной правки. Липкой полоса становится ТОЛЬКО
   после первого изменения (класс ставит account.js): пока ничего не меняли,
   она обычная строка в конце формы, как и была. */
.cl-acc__save { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.cl-acc__hint { font-size: 13px; color: var(--sk-muted); visibility: hidden; }
.cl-acc__save.is-on {
	position: sticky;
	bottom: 0;
	z-index: 2;
	padding: 12px 0;
	background: var(--sk-paper);
	border-top: 1px solid var(--sk-line);
}
.cl-acc__save.is-on .cl-acc__hint { visibility: visible; }
.cl-locked .cl-f__in:disabled, .cl-locked .cl-f__file { opacity: 0.6; }
.cl-logo { margin-bottom: 8px; }
.cl-logo img { max-width: 260px; height: auto; border: 1px solid var(--sk-line); background: var(--sk-wash); padding: 8px; }

.cl-danger { margin-top: 26px; border-color: var(--sk-bad); }
.cl-btn-danger { color: var(--sk-bad); }
.cl-btn-danger:hover { border-color: var(--sk-bad); }

.cl-empty { text-align: center; color: var(--sk-muted); }

/* ——— Блок пользователя в шапке сайта ————————————————————————————————— */

.cl-user { position: relative; }

.cl-user__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 9px 5px 5px;
	font-family: var(--sk-font-sans);
	font-size: 13px;
	color: var(--sk-ink);
	background: none;
	border: 1px solid var(--sk-line);
	cursor: pointer;
}
.cl-user__btn:hover { border-color: var(--sk-ink); }

.cl-user__pic {
	display: grid;
	place-items: center;
	width: 24px; height: 24px;
	font-size: 12px; font-weight: 700;
	color: var(--sk-paper);
	background: var(--sk-accent);
}
/* В кнопке стоит ПОЧТА, а она длиннее имени: ширину держим прежнюю, длинный
   адрес обрезается многоточием — шапка от него разъезжаться не должна. */
.cl-user__name { max-width: 148px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-user__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sk-bad); }
.cl-user__arr {
	width: 0; height: 0;
	border: 4px solid transparent;
	border-top-color: var(--sk-muted-2);
	margin-top: 3px;
}

.cl-user__menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 60;
	min-width: 252px;
	background: var(--sk-paper);
	border: 1px solid var(--sk-line);
	box-shadow: 0 14px 34px rgba(22, 24, 26, 0.12);
}
.cl-user__menu[hidden] { display: none; }

.cl-user__head { padding: 13px 15px; border-bottom: 1px solid var(--sk-line-2); background: var(--sk-wash); }
.cl-user__head b { display: block; font-size: 14px; }
.cl-user__head span { display: block; font-size: 12px; color: var(--sk-muted-2); }
.cl-user__plan { display: block; margin-top: 6px; font-size: 12px; color: var(--sk-ok); }
.cl-user__plan--no { color: var(--sk-pro); text-decoration: underline; }

.cl-user__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 15px;
	font-size: 13px;
	color: var(--sk-ink-soft);
	text-decoration: none;
}
.cl-user__link:hover { background: var(--sk-wash); color: var(--sk-ink); }
.cl-user__x { font-family: var(--sk-font-mono); font-size: 11px; color: var(--sk-faint); }

.cl-user__out {
	display: block;
	padding: 10px 15px;
	font-size: 13px;
	color: var(--sk-muted-2);
	text-decoration: none;
	border-top: 1px solid var(--sk-line-2);
}
.cl-user__out:hover { color: var(--sk-bad); }

.sk-hdr__acc { display: flex; align-items: center; gap: 14px; }

.sk-hdr__prem {
	font-size: 13px;
	font-weight: 700;
	color: var(--sk-pro);
	text-decoration: none;
	white-space: nowrap;
}
.sk-hdr__prem:hover { text-decoration: underline; }

.sk-hdr__auth {
	padding: 7px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sk-paper);
	background: var(--sk-ink);
	text-decoration: none;
	white-space: nowrap;
}
.sk-hdr__auth:hover { background: var(--sk-accent); }

/* ——— Кнопка «Сохранить расчёт» и замок на платных кнопках ——————————— */

.sk-btn--lock { color: var(--sk-muted-2); border-style: dashed; }
.sk-btn--lock:hover { color: var(--sk-pro); border-color: var(--sk-pro); }

.cl-toast {
	position: fixed;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	z-index: 200;
	max-width: min(420px, 92vw);
	padding: 12px 18px;
	font-family: var(--sk-font-sans);
	font-size: 14px;
	color: var(--sk-paper);
	background: var(--sk-ink);
	box-shadow: 0 12px 30px rgba(22, 24, 26, 0.24);
}
.cl-toast a { color: #fff; text-decoration: underline; }

/* ——— Телефон ————————————————————————————————————————————————————— */

@media (max-width: 860px) {
	.cl-cab { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.cl-co { grid-template-columns: minmax(0, 1fr); }
	.cl-user__name { display: none; }
	.cl-user__menu { right: auto; left: 0; }

	/* МЕНЮ КАБИНЕТА — ПОЛОСА, А НЕ СТОЛБЕЦ (23.09.2026, разбор юзабилити).
	   Столбцом оно занимало первый экран телефона целиком, и состояние тарифа —
	   то, ради чего в кабинет и заходят, — начиналось со второй прокрутки.
	   Разметка не меняется: меню остаётся первым в потоке (так надо клавиатуре
	   и чтению с экрана), а группы на телефоне не печатаются — на полосе из
	   шести пунктов заголовки групп только отнимают место. */
	.cl-cab__side { position: static; }
	.cl-side {
		position: static;
		display: flex;
		align-items: center;
		gap: 8px;
		overflow-x: auto;
		padding: 4px;
		border: 0;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.cl-side::-webkit-scrollbar { display: none; }
	.cl-side__group { display: contents; }
	.cl-side__cap { display: none; }
	.cl-side__link {
		flex: none;
		padding: 7px 14px;
		white-space: nowrap;
		border: 1px solid var(--sk-line);
		border-left-width: 1px;
		border-radius: 999px;
	}
	.cl-side__link.is-active { border-color: var(--sk-ink); background: var(--sk-tint); }
	.cl-side__ask { flex: none; padding: 0 4px 0 10px; white-space: nowrap; }
	.cl-side__out { flex: none; padding: 7px 4px; border-top: 0; white-space: nowrap; }
}

@media (max-width: 520px) {
	.cl-cab .sk-card { padding: 16px 14px; }
	.cl-plan__act { width: 100%; }
	.cl-bm__form { flex-direction: column; align-items: stretch; }
}

/* ——— Цели касания в шапке на телефоне (29.09.2026, аудит юзабилити,
   spec_usability_lestn.md, п. 17): «Премиум» был ссылкой 59×20. Поднимается
   только зона касания, кегль прежний. */
@media (pointer: coarse) {
	.sk-hdr__prem { padding: 10px 4px; }
	.sk-hdr__auth { padding: 11px 16px; }
}

/* Ссылки на документы в подписи галочки (регистрация, 20.10.2026). */
.cl-chk a { color: var(--sk-ink); text-decoration: underline; text-underline-offset: 2px; }