/* Личный кабинет Studentix (S22-r, 2026-10-01). Токены и базовые компоненты — css/tokens.css, правила — docs/DESIGN.md §5, «Дизайн-язык проекта».
   Дефект 15 (QA 2026-10-01): стеклянные карточки работ с превью, сегмент-контрол, подписка и оплаты карточками, пустое состояние с иллюстрацией.
   Стекло дозированно: сводка (KPI), карточки работ (решение владельца), липкий сегмент-контрол, меню «Скачать», окно, тост.
   Плоское белое: карточки подписки, оплат и настроек (рабочие зоны, формы).
   Всё под .cab, чтобы не задевать style.min.css (там a { display: block } и шапка position:absolute). */

.cab {
  --cab-w: 1160px;
  position: relative;
  max-width: var(--cab-w);
  margin: 0 auto;
  padding: 112px 20px 72px; /* шапка сайта position:absolute (как у каталога) */
  font-family: var(--stx-font, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--stx-text, #1B2430);
  -webkit-font-smoothing: antialiased;
}
/* фон страницы под стеклом: мягкие блобы на всю ширину, чтобы blur карточек читался */
/* фон — на html: покрывает весь холст, а не только первый экран (иначе ниже 100vh светлый прямоугольник) */
html:has(.cab) { height: auto; min-height: 100%; background: var(--stx-backdrop, #F4F7FE), var(--stx-bg, #F4F7FE); background-repeat: no-repeat; }
body:has(.cab) { background: transparent; min-height: 100vh; }
body:has(.cab) .wrapper { overflow: visible; background: transparent; }
body:has(.cab) .not-main { padding: 0; background: transparent; }
.cab *, .cab *::before, .cab *::after { box-sizing: border-box; }
:where(.cab) :where(h1, h2, h3, p, ul, ol, dl, dd) { margin: 0; }
.cab a { display: inline; color: var(--stx-accent-text, #1F52D9); text-decoration: none; }
.cab a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* ссылки-кнопки: .cab a перебивает цвет .stx-btn — возвращаем цвета иерархии кнопок */
.cab a.stx-btn { display: inline-flex; color: var(--stx-text, #1B2430); text-decoration: none; }
.cab a.stx-btn:hover { text-decoration: none; }
.cab a.stx-btn--primary, .cab a.stx-btn--primary:hover { color: var(--stx-on-accent, #fff); }
.cab a.stx-btn--quiet, .cab a.stx-btn--secondary:hover { color: var(--stx-accent-text, #1F52D9); }
.cab a.stx-btn--quiet.stx-btn--neutral { color: var(--stx-text-2, #566274); }
.cab a.stx-btn--soft, .cab a.stx-btn--soft:hover { color: var(--stx-accent-text, #1F52D9); }
.cab a:focus-visible, .cab button:focus-visible, .cab input:focus-visible {
  outline: 3px solid var(--stx-accent-ring, rgba(47,107,255,.3));
  outline-offset: 2px;
}
.cab [hidden] { display: none !important; }
.cab .stx-i { width: 1em; height: 1em; }
.cab .stx-tag .stx-i { width: 14px; height: 14px; }
/* плитки иконок: .cab .stx-i { 1em } перебивал размеры tokens.css — возвращаем 20/22/28 */
.cab .stx-tile .stx-i { width: 20px; height: 20px; }
.cab .stx-tile--lg .stx-i { width: 22px; height: 22px; }
.cab .stx-tile--xl .stx-i { width: 28px; height: 28px; }

/* ---------- шапка кабинета */
/* сетка: заголовок во всю ширину; ниже одна строка — статус слева, кнопки справа, общий центр по вертикали */
.cab-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 24px;
  margin-bottom: 20px;
}
.cab-head__copy { grid-column: 1 / -1; min-width: 0; }
.cab-head .cab-access { grid-column: 1; margin-top: 0; min-height: var(--stx-tap, 44px); }
.cab-head__actions { grid-column: 2; }
.cab-kicker {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--stx-accent-text, #1F52D9);
}
.cab-h1 {
  font-size: clamp(30px, 3.4vw, 40px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.cab-access {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 10px;
  font-size: var(--stx-fs-body, 17px); /* строка статуса — текст для чтения (DESIGN.md §2: тело 17) */
  color: var(--stx-text-2, #566274);
}
.cab-access .stx-i { width: 18px; height: 18px; color: var(--stx-accent, #2F6BFF); }
.cab-access b { font-weight: 600; color: var(--stx-text, #1B2430); }
.cab-access__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--stx-text-3, #8A94A6); }
.cab-access__cancel {
  display: inline-flex;
  align-items: center;
  min-height: var(--stx-tap, 44px); /* текстовая кнопка, но зона касания 44: отрицательные поля не раздувают строку */
  margin: -12px 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--stx-text-2, #566274);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--stx-line, rgba(27,36,48,.14));
  cursor: pointer;
}
.cab-access__cancel:hover { color: var(--stx-text, #1B2430); text-decoration-color: currentColor; }
.cab-head__actions { display: flex; flex: none; align-items: center; gap: 6px; }

/* ---------- сводка: четыре стеклянные карточки */
.cab-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.cab-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 88px;
  padding: 14px 16px;
  border-radius: var(--stx-r-panel, 18px);
  /* стекло обрезается по скруглению и не смешивается с соседями: без светлых заплаток в углах (замечание 3) */
  isolation: isolate;
  overflow: hidden;
}
.cab-stat .stx-tile { background: var(--stx-surface, #fff); color: var(--stx-accent, #2F6BFF); box-shadow: var(--stx-shadow-sm, 0 1px 2px rgba(20,40,80,.04), 0 4px 12px rgba(20,40,80,.06)); }
.cab-stat__body { flex: 1; min-width: 0; }
.cab-stat__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--stx-text-3, #8A94A6);
}
.cab-stat__value {
  margin-top: 2px;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cab-stat__value--ok { color: var(--stx-success-text, #1A7F45); }
/* подпись — одна строка: ряд сводки одной высоты (замечание 4 design-qa) */
.cab-stat__sub { margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--stx-text-2, #566274); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cab-stat .stx-progress { margin-top: 8px; }
.cab-stat__short { display: none; } /* короткая дата «12.09.2026» — только на телефоне (ставит cabinet.js) */

/* ---------- вкладки: сегмент-контрол, липнет к верху (единственный липкий «хром» — стекло уместно) */
.cab-nav { position: sticky; top: 10px; z-index: 5; margin: 0 0 22px; }
.cab-segment {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 4px;
  border-radius: var(--stx-r-pill, 999px);
  background: linear-gradient(var(--stx-fill, rgba(27,36,48,.05)), var(--stx-fill, rgba(27,36,48,.05))), var(--stx-glass-bg-strong, rgba(255,255,255,.88));
  -webkit-backdrop-filter: var(--stx-glass-blur, blur(20px) saturate(140%));
  backdrop-filter: var(--stx-glass-blur, blur(20px) saturate(140%));
  border: var(--stx-glass-border, 1px solid rgba(255,255,255,.55));
  box-shadow: var(--stx-glass-shadow, 0 8px 30px rgba(20,40,80,.1));
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cab-segment::-webkit-scrollbar { display: none; }
.cab-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  min-height: var(--stx-tap, 44px); /* вкладка — цель касания ≥ 44 */
  padding: 0 16px;
  border: 0;
  border-radius: var(--stx-r-pill, 999px);
  background: transparent;
  color: var(--stx-text-2, #566274);
  font: inherit;
  font-size: var(--stx-fs-ui, 15px);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--stx-dur, 180ms) var(--stx-ease, ease), color var(--stx-dur, 180ms) var(--stx-ease, ease), box-shadow var(--stx-dur, 180ms) var(--stx-ease, ease);
}
.cab-tab .stx-i { width: 18px; height: 18px; }
.cab-tab:hover { color: var(--stx-text, #1B2430); }
.cab-tab[aria-selected="true"], .cab-tab.is-active {
  background: var(--stx-surface, #fff);
  color: var(--stx-text, #1B2430);
  box-shadow: var(--stx-shadow-sm, 0 1px 2px rgba(20,40,80,.04), 0 4px 12px rgba(20,40,80,.06));
}
.cab-tab[aria-selected="true"] .stx-i, .cab-tab.is-active .stx-i { color: var(--stx-accent, #2F6BFF); }
.cab-tab__count {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--stx-accent-soft, rgba(47,107,255,.1));
  color: var(--stx-accent-text, #1F52D9);
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}

.cab-panel { min-width: 0; }
.cab-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.cab-h2 { font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
.cab-hint { font-size: 14px; color: var(--stx-text-2, #566274); }

/* ---------- сетка карточек работ: стекло, превью титульного листа, статус, действия */
.cab-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.cab-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 10px 10px 12px;
  border-radius: var(--stx-r-sheet, 20px);
  background: var(--stx-glass-bg, rgba(255,255,255,.72));
  -webkit-backdrop-filter: var(--stx-glass-blur, blur(20px) saturate(140%));
  backdrop-filter: var(--stx-glass-blur, blur(20px) saturate(140%));
  border: var(--stx-glass-border, 1px solid rgba(255,255,255,.55));
  box-shadow: var(--stx-glass-shadow, 0 8px 30px rgba(20,40,80,.1)), var(--stx-glass-highlight, inset 0 1px 0 rgba(255,255,255,.7));
  isolation: isolate; /* своя группа наложения: тень и blur соседей не дают светлых полос (замечание 13) */
  transition: transform var(--stx-dur, 180ms) var(--stx-ease, ease), box-shadow var(--stx-dur, 180ms) var(--stx-ease, ease), opacity var(--stx-dur, 180ms);
}
.cab-card:has(.cab-dl__menu) { z-index: 2; } /* открытое меню «Скачать» поверх соседней карточки */
.cab-card:hover { transform: translateY(-2px); box-shadow: var(--stx-shadow-card-hover, 0 12px 32px rgba(20,40,80,.12)), var(--stx-glass-highlight, inset 0 1px 0 rgba(255,255,255,.7)); }
.cab-card.is-removing { opacity: 0; transform: scale(.96); }

/* превью: обложка с мини-титулом на нейтрально-голубом фоне, статус слева, замок справа */
.cab-cover {
  position: relative;
  display: block;
  height: 232px; /* лист A4 целиком: от министерства до города и года */
  overflow: hidden;
  border-radius: var(--stx-r-card, 14px);
  background:
    radial-gradient(70% 80% at 50% 0%, var(--stx-accent-soft, rgba(47,107,255,.1)), transparent 70%), /* по центру: правый край обложки не темнее левого */
    linear-gradient(180deg, var(--stx-surface-2, #F8FAFF), var(--stx-bg, #F4F7FE));
  color: inherit;
  text-decoration: none;
}
.cab a.cab-cover { display: block; color: inherit; }
.cab a.cab-cover:hover { text-decoration: none; }
.cab-sheet {
  position: absolute;
  left: 50%;
  top: 42px; /* ниже строки чипов «Готово» и «открыто N из M»; 128×181 — лист виден целиком */
  width: 128px;
  aspect-ratio: 210 / 297;
  transform: translateX(-50%);
  border-radius: 3px;
  background: var(--stx-paper, #fff);
  box-shadow: var(--stx-shadow-paper, 0 1px 2px rgba(20,40,80,.06), 0 12px 40px rgba(20,40,80,.08));
  overflow: hidden;
  pointer-events: none;
  transition: transform var(--stx-dur-slow, 220ms) var(--stx-ease, ease);
}
.cab-card:hover .cab-sheet { transform: translateX(-50%) translateY(-4px); }
/* титул рисуем в двойном размере и уменьшаем вдвое — мелкий текст остаётся чётким */
.cab-sheet__in {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto .8fr auto auto auto 1.2fr auto; /* министерство → вид работы и тема → исполнитель → город и год */
  width: 200%;
  height: 200%;
  padding: 9% 9% 7%;
  transform: scale(.5);
  transform-origin: 0 0;
  text-align: center;
  font-family: var(--stx-font-doc, "Times New Roman", serif);
  font-size: 11px;
  line-height: 1.35;
  color: #333;
}
.cab-sheet__u { font-size: 8.5px; line-height: 1.3; text-transform: uppercase; letter-spacing: .02em; color: #555; }
.cab-sheet__k { align-self: center; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--stx-paper-ink, #111); }
.cab-sheet__s { font-size: 10px; }
.cab-sheet__t {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 6px;
  padding: 0 4%;
  font-size: 11px;
  font-weight: 700;
  color: var(--stx-paper-ink, #111);
}
.cab-sheet__w { align-self: end; justify-self: end; width: 58%; text-align: left; font-size: 9px; line-height: 1.5; color: #444; }
.cab-sheet__c { font-size: 9.5px; color: #444; }
/* закрытые страницы: лёгкая дымка на середине листа, город и год внизу остаются видны */
.cab-card.is-locked .cab-sheet::after {
  content: "";
  position: absolute;
  inset: 56% 0 16%;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--stx-paper, #fff) 45%, var(--stx-paper, #fff) 100%);
}
.cab-chip {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px 0 8px;
  border-radius: var(--stx-r-pill, 999px);
  background: var(--stx-glass-bg-strong, rgba(255,255,255,.88));
  -webkit-backdrop-filter: var(--stx-glass-blur, blur(20px) saturate(140%));
  backdrop-filter: var(--stx-glass-blur, blur(20px) saturate(140%));
  border: var(--stx-glass-border, 1px solid rgba(255,255,255,.55));
  box-shadow: var(--stx-shadow-sm, 0 1px 2px rgba(20,40,80,.04), 0 4px 12px rgba(20,40,80,.06));
  color: var(--stx-text-2, #566274);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.cab-chip .stx-i { width: 14px; height: 14px; }
.cab-chip--ok { color: var(--stx-success-text, #1A7F45); }
.cab-chip--run { color: var(--stx-accent-text, #1F52D9); }
.cab-chip--err { color: var(--stx-danger-text, #C4243E); }
.cab-chip--lock { left: auto; right: 12px; }

.cab-card__body { display: grid; gap: 8px; padding: 12px 8px 4px; }
.cab-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cab-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 24px;
  padding: 0 10px 0 7px;
  border-radius: var(--stx-r-pill, 999px);
  background: var(--stx-tint-doc-bg, #E3EEFF);
  color: var(--stx-tint-doc-fg, #2F6BFF);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}
.cab-pill .stx-i { width: 14px; height: 14px; }
.cab-card__date { font-size: 13px; color: var(--stx-text-2, #566274); white-space: nowrap; }
.cab-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.cab-card__meta { font-size: 13px; color: var(--stx-text-2, #566274); }
.cab-status { display: grid; gap: 6px; font-size: 13px; color: var(--stx-text-2, #566274); }
.cab-status__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cab-status__row > span:last-child:not(:first-child) { flex: none; text-align: right; }
.cab-status__row b { font-weight: 600; color: var(--stx-text, #1B2430); }
.cab-status__row .stx-i { width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; }
.cab-status--ok .cab-status__row { color: var(--stx-success-text, #1A7F45); font-weight: 500; }
.cab-status--err .cab-status__row { color: var(--stx-danger-text, #C4243E); font-weight: 500; }
.cab-status--run .stx-progress__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: cab-shimmer 1.6s linear infinite;
}
@keyframes cab-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.cab-card__foot {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding: 12px 6px 0;
  border-top: 1px solid var(--stx-separator, rgba(27,36,48,.08));
}
/* цели касания ≥ 44×44 (DESIGN.md §1, чеклист S22-r): «Открыть», «Скачать», «Удалить» */
.cab-card__foot .stx-btn--sm { min-height: var(--stx-tap, 44px); padding: 0 16px; border-radius: var(--stx-r-field, 10px); }
.cab-card__foot .stx-iconbtn { width: var(--stx-tap, 44px); height: var(--stx-tap, 44px); color: var(--stx-text-2, #566274); }
.cab-card__foot .stx-iconbtn .stx-i { width: 20px; height: 20px; }
.cab-card__foot .stx-iconbtn--danger { margin-left: auto; }
.cab-card__foot .stx-iconbtn--danger:hover { color: var(--stx-danger-text, #C4243E); background: var(--stx-danger-soft, rgba(224,64,90,.12)); }
@media (hover: hover) and (min-width: 640px) {
  /* действия при наведении (DESIGN.md §5): иконки приглушены, при наведении на карточку — в полный цвет */
  .cab-card__foot .stx-iconbtn { opacity: .55; transition: opacity var(--stx-dur, 180ms) var(--stx-ease, ease), background-color var(--stx-dur, 180ms) var(--stx-ease, ease), color var(--stx-dur, 180ms) var(--stx-ease, ease); }
  .cab-card:hover .stx-iconbtn, .cab-card:focus-within .stx-iconbtn { opacity: 1; }
}
.cab-dl { position: relative; }
/* меню привязано к кнопке: открывается вверх, левый край у кнопки, хвостик указывает на неё; компактное — меньше закрывает карточку */
.cab-dl__menu {
  position: absolute;
  left: -6px;
  bottom: calc(100% + 10px);
  z-index: 6;
  display: flex;
  gap: 2px;
  min-width: 0;
  padding: 4px;
  white-space: nowrap;
  background: var(--stx-surface, #fff); /* плотный фон: текст карточки не просвечивает (меню — белое, DESIGN «Контролы и детали») */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: var(--stx-separator, rgba(27,36,48,.08));
}
.cab-dl__menu::after {
  content: "";
  position: absolute;
  left: 22px; /* центр кнопки 44: 6 + 22 − 6 */
  bottom: -6px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  background: var(--stx-surface, #fff);
  border-right: 1px solid var(--stx-separator, rgba(27,36,48,.08));
  border-bottom: 1px solid var(--stx-separator, rgba(27,36,48,.08));
}
.cab-dl__menu .stx-menu__item { width: auto; min-height: var(--stx-tap, 44px); gap: 6px; padding: 0 10px 0 6px; font-size: 14px; font-weight: 600; }
.cab-dl__menu .stx-tile { width: 28px; height: 28px; }
.cab-dl .stx-iconbtn[aria-expanded="true"] { opacity: 1; background: var(--stx-accent-soft, rgba(47,107,255,.1)); color: var(--stx-accent-text, #1F52D9); }
.cab-dl__menu .stx-tile .stx-i { width: 18px; height: 18px; color: inherit; }
.cab-dl__menu .stx-menu__item .stx-i { color: inherit; }

/* карточка-заглушка «Создать работу» в конце сетки */
.cab-card--new {
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 100%;
  padding: 32px 20px;
  border: 1.5px dashed var(--stx-line, rgba(27,36,48,.14));
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  color: var(--stx-text-2, #566274);
  text-align: center;
}
.cab a.cab-card--new { display: flex; color: var(--stx-text-2, #566274); }
.cab a.cab-card--new:hover { text-decoration: none; background: var(--stx-glass-bg, rgba(255,255,255,.72)); border-color: var(--stx-accent-line, rgba(47,107,255,.28)); color: var(--stx-accent-text, #1F52D9); box-shadow: var(--stx-shadow-sm, 0 1px 2px rgba(20,40,80,.04), 0 4px 12px rgba(20,40,80,.06)); }
.cab-card--new .stx-tile { border-radius: 50%; }
.cab-card--new b { display: block; font-size: 16px; font-weight: 600; color: var(--stx-text, #1B2430); }
.cab-card--new span { font-size: 13px; }

/* скелетоны при загрузке */
.cab-skel { display: inline-block; min-width: 120px; border-radius: 8px; background: var(--stx-fill, rgba(27,36,48,.05)); color: transparent; }
.cab-card--skel { min-height: 380px; pointer-events: none; }
.cab-card--skel .cab-skel { display: block; height: 14px; }
.cab-card--skel .cab-skel--w { width: 40%; }
.cab-card--skel .cab-skel--t { height: 18px; width: 90%; }
@media (prefers-reduced-motion: no-preference) {
  .cab-skel { animation: cab-pulse 1.4s ease-in-out infinite; }
}
@keyframes cab-pulse { 50% { opacity: .55; } }
.cab-access .cab-skel { width: 220px; height: 16px; }
.cab-stat__value .cab-skel { width: 80%; height: 16px; vertical-align: middle; }

/* пустое состояние: иллюстрация, текст, два действия */
.cab-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 44px 24px 48px;
  border-radius: var(--stx-r-sheet, 20px);
  text-align: center;
}
.cab-empty__art { width: 200px; height: 150px; margin-bottom: 4px; color: var(--stx-accent, #2F6BFF); }
.cab-empty__art svg { display: block; width: 100%; height: 100%; }
.cab-empty h3 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.cab-empty p { max-width: 460px; font-size: var(--stx-fs-body, 17px); line-height: 1.47; color: var(--stx-text-2, #566274); }
.cab-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.cab-empty--sm { padding: 36px 24px; }
.cab-empty--sm .stx-tile { margin-bottom: 6px; }
.cab-more { display: flex; justify-content: center; margin-top: 20px; }
.cab-error, .cab-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: var(--stx-r-card, 14px);
  font-size: 14px;
}
.cab-error { background: var(--stx-danger-soft, rgba(224,64,90,.12)); color: var(--stx-danger-text, #C4243E); }
.cab-error__retry { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cab-note { margin: 14px 0 0; background: var(--stx-accent-soft, rgba(47,107,255,.1)); color: var(--stx-text-2, #566274); }
.cab-note .stx-i { flex: none; margin-top: 2px; color: var(--stx-accent, #2F6BFF); }
.cab-error .stx-i { flex: none; margin-top: 2px; }

/* ---------- карточки подписки, оплат и настроек: плоское белое, тонкая рамка, мягкая тень */
.cab-sub {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 16px;
}
.cab-box {
  min-width: 0;
  padding: 22px 24px;
  border: 1px solid var(--stx-separator, rgba(27,36,48,.08));
  border-radius: var(--stx-r-panel, 18px);
  background: var(--stx-surface, #fff);
  box-shadow: var(--stx-shadow-sm, 0 1px 2px rgba(20,40,80,.04), 0 4px 12px rgba(20,40,80,.06));
}
.cab-box__head { display: flex; align-items: center; gap: 14px; }
.cab-box__head > div { flex: 1; min-width: 0; }
.cab-box__head .stx-tag { flex: none; }
.cab-box__label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--stx-text-3, #8A94A6); }
.cab-box__value { margin-top: 2px; font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; }
.cab-box__value--sm { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.cab-box__value--ok { color: var(--stx-success-text, #1A7F45); }
.cab-box__text { margin-top: 10px; font-size: var(--stx-fs-body, 17px); line-height: 1.47; color: var(--stx-text-2, #566274); }
.cab-box__text strong { color: var(--stx-text, #1B2430); font-weight: 600; }
.cab-box__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
/* значения в одну строку («399 ₽ · 22 октября 2026»): колонки по содержимому, при нехватке места — перенос целой колонки */
.cab-kv {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 36px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--stx-separator, rgba(27,36,48,.08));
}
.cab-kv > div { flex: 0 1 auto; min-width: 0; }
.cab-kv dt { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--stx-text-2, #566274); white-space: nowrap; }
.cab-kv dt .stx-i { width: 16px; height: 16px; color: var(--stx-text-3, #8A94A6); }
.cab-kv dd { margin-top: 4px; font-size: 16px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* обе карточки подписки одной высоты, нижний блок прижат к низу */
.cab-sub { align-items: stretch; }
.cab-sub > .cab-box { display: flex; flex-direction: column; }
.cab-sub > .cab-box > .cab-box__fine:last-child { margin-top: auto; padding-top: 14px; }
.cab-refund {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: auto;
  padding: 14px;
  border-radius: var(--stx-r-card, 14px);
  background: var(--stx-surface-2, #F8FAFF);
  border: 1px solid var(--stx-separator, rgba(27,36,48,.08));
}
.cab-sub > .cab-box > .cab-box__list { margin-bottom: 20px; }
.cab-refund .stx-tile { flex: none; width: 36px; height: 36px; background: var(--stx-surface, #fff); color: var(--stx-text-2, #566274); box-shadow: var(--stx-shadow-sm, 0 1px 2px rgba(20,40,80,.04), 0 4px 12px rgba(20,40,80,.06)); }
.cab-refund .stx-tile .stx-i { width: 18px; height: 18px; }
.cab-refund__title { font-size: 15px; font-weight: 600; }
.cab-refund__text { margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--stx-text-2, #566274); }
.cab a.cab-refund__link { display: inline-flex; align-items: center; gap: 4px; min-height: var(--stx-tap, 44px); margin: -6px 0 -12px; font-size: 14px; font-weight: 500; }
.cab-refund__link .stx-i { width: 14px; height: 14px; }
.cab-box--offer { background: radial-gradient(70% 80% at 100% 0%, var(--stx-accent-soft, rgba(47,107,255,.1)), transparent 60%), var(--stx-surface, #fff); }
.cab-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 16px; }
.cab-price__num { font-size: 40px; line-height: 1; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cab-price__per { font-size: 15px; color: var(--stx-text-2, #566274); }
.cab-box__list { display: grid; gap: 10px; margin-top: 18px; padding: 0; list-style: none; font-size: 15px; line-height: 1.45; }
/* не flex: внутри есть текстовые узлы и span[data-stx-cfg], gap разорвал бы фразу */
.cab-box__list li { position: relative; padding-left: 28px; }
.cab-box__list .stx-i { position: absolute; left: 0; top: 2px; width: 18px; height: 18px; color: var(--stx-success, #1F9D55); }
.cab-box__fine { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; font-size: 12.5px; line-height: 1.45; color: var(--stx-text-3, #8A94A6); }
.cab-box__fine .stx-i { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.cab-box__fine a { color: var(--stx-accent-text, #1F52D9); }

/* ---------- оплаты: карточка на каждый платёж */
.cab-pays { display: grid; gap: 10px; }
.cab-pay {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
}
.cab-pay__main { min-width: 0; }
.cab-pay__title { font-size: 15px; font-weight: 600; line-height: 1.3; }
.cab-pay__meta { margin-top: 2px; font-size: 13px; color: var(--stx-text-2, #566274); }
.cab-pay__sum { font-size: 18px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cab-pay--refund .cab-pay__sum { color: var(--stx-text-2, #566274); }
.cab-pay--failed .cab-pay__sum { color: var(--stx-text-3, #8A94A6); text-decoration: line-through; }

/* ---------- настройки (стандартные поля DLE внутри формы userinfo) */
/* одна колонка 760: без пустых половин у карточек разной высоты */
.cab-settings { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 760px; }
.cab-box--danger { margin-top: 16px; }
#cab-settings .cab-panel__head { max-width: 760px; } /* подпись «Вход» у края колонки, а не страницы */
.cab-field { margin-top: 16px; }
.cab-field__hint { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--stx-text-3, #8A94A6); }
.cab-box__text--sm { font-size: 14px; line-height: 1.5; }
.cab-box--danger .cab-box__actions { margin-top: 14px; }
.cab-tile--danger { background: var(--stx-danger-soft, rgba(224,64,90,.12)); color: var(--stx-danger-text, #C4243E); }
.cab a.cab-btn-danger, .cab a.cab-btn-danger:hover { color: var(--stx-danger-text, #C4243E); }
.cab a.cab-btn-danger:hover { background: var(--stx-danger-soft, rgba(224,64,90,.12)); border-color: transparent; }
.cab-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cab .stx-label { margin-bottom: 6px; }
.cab-keep { display: none !important; } /* скрытые поля профиля DLE: не видны, но отправляются с формой */
.cab-settings__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

/* ---------- окно подтверждения (стекло, одно на экран) */
.cab-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  /* затемнение и размытие — как у окна оплаты (stx-pay.css .stx-pay) */
  background: var(--stx-scrim, rgba(27, 36, 48, .32));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--stx-dur-slow, 220ms) var(--stx-ease, ease);
}
.cab-modal.is-open { opacity: 1; }
.cab-modal__box {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: 28px 24px 20px;
  transform: translateY(12px) scale(.98);
  transition: transform .28s var(--stx-spring, cubic-bezier(.34,1.36,.64,1));
}
.cab-modal.is-open .cab-modal__box { transform: none; }
.cab-modal__x {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--stx-tap, 44px);
  height: var(--stx-tap, 44px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--stx-text-2, #566274);
  cursor: pointer;
}
.cab-modal__x .stx-i { width: 20px; height: 20px; }
.cab-modal__x:hover { background: var(--stx-fill, rgba(27,36,48,.05)); color: var(--stx-text, #1B2430); }
.cab-modal__x:focus-visible { outline: 3px solid var(--stx-accent-ring, rgba(47,107,255,.3)); outline-offset: 2px; }
.cab-modal__title { margin-right: 40px; font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
.cab-modal__text { margin-top: 8px; font-size: var(--stx-fs-body, 17px); line-height: 1.47; color: var(--stx-text-2, #566274); }
.cab-modal__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.cab-modal .stx-btn--danger { background: var(--stx-danger, #E0405A); border-color: var(--stx-danger, #E0405A); color: var(--stx-on-accent, #fff); }
.cab-modal .stx-btn--danger:hover { background: var(--stx-danger-text, #C4243E); border-color: var(--stx-danger-text, #C4243E); }

/* всплывающее уведомление (внизу по центру) */
.cab-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 10001;
  max-width: min(480px, calc(100vw - 32px));
  padding: 12px 18px;
  transform: translate(-50%, 16px);
  opacity: 0;
  font-size: 14px;
  transition: opacity var(--stx-dur, 180ms) var(--stx-ease, ease), transform var(--stx-dur, 180ms) var(--stx-ease, ease);
}
.cab-toast.is-open { opacity: 1; transform: translate(-50%, 0); }
.cab-toast--err { color: var(--stx-danger-text, #C4243E); }

/* ---------- чужой профиль: только публичное */
.cab--public .cab-public { display: flex; align-items: center; gap: 20px; padding: 24px; }
.cab-public__avatar { width: 72px; height: 72px; flex: none; border-radius: 50%; object-fit: cover; background: var(--stx-bg, #F4F7FE); }
.cab-public__name { font-size: 24px; font-weight: 700; letter-spacing: -.015em; }
.cab-public__meta { margin-top: 4px; font-size: 14px; color: var(--stx-text-2, #566274); }

/* ---------- адаптив */
@media (max-width: 1023px) {
  .cab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .cab { padding: 108px 16px 64px; }
  .cab-head { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cab-head__actions { grid-column: 1; flex-wrap: wrap; margin-top: 8px; }
  .cab-head__actions .stx-btn--primary { flex: 1 1 auto; }
  .cab-sub, .cab-settings { grid-template-columns: minmax(0, 1fr); }
  .cab-nav { top: 8px; }
  .cab-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .cab-grid { grid-template-columns: minmax(0, 1fr); }
  .cab-stats { gap: 10px; }
  .cab-stat { min-height: 0; padding: 12px 14px; gap: 10px; }
  .cab-stat .stx-tile { width: 40px; height: 40px; }
  .cab-stat .stx-tile .stx-i { width: 20px; height: 20px; }
  .cab-stat__value { font-size: 15px; white-space: normal; }
  .cab-stat__sub { font-size: 12px; white-space: normal; } /* на телефоне две колонки — подпись переносится, а не обрезается */
  .cab-stat__short { display: inline; }
  .cab-stat__short + .cab-stat__long { display: none; }
  .cab-cover { height: 232px; }
  /* строка доступа на телефоне — одна строка с иконкой: дата списания и отмена есть во вкладке «Подписка» */
  .cab-head .cab-access { flex-wrap: nowrap; gap: 8px; min-height: 0; font-size: 15px; white-space: nowrap; }
  .cab-access > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .cab-access .stx-i { flex: none; }
  .cab-access__more { display: none !important; }
  .cab-panel__head { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 14px; }
  /* сегмент-контрол: четыре равные колонки, иконка над подписью */
  .cab-segment { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; border-radius: var(--stx-r-panel, 18px); }
  .cab-tab { position: relative; flex-direction: column; justify-content: center; gap: 4px; min-height: 56px; padding: 6px 2px; border-radius: var(--stx-r-card, 14px); font-size: 12px; }
  .cab-tab .stx-i { width: 20px; height: 20px; }
  .cab-tab__count { position: absolute; top: 4px; right: 6px; min-width: 18px; line-height: 18px; font-size: 11px; }
  .cab-box { padding: 18px 16px; }
  .cab-box__value { font-size: 21px; }
  .cab-box__actions .stx-btn { flex: 1 1 100%; }
  .cab-kv { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cab-fields { grid-template-columns: minmax(0, 1fr); }
  .cab-empty { padding: 32px 16px 36px; }
  .cab-empty__art { width: 160px; height: 120px; }
  .cab-empty__actions .stx-btn { flex: 1 1 100%; }
  /* оплаты: заголовок первой строкой, сумма и статус — вместе второй строкой (сумма слева, чип справа) */
  .cab-pay { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 14px; padding: 14px 16px; }
  .cab-pay > .stx-tile { grid-row: 1 / span 2; align-self: start; }
  .cab-pay__main { grid-column: 2 / -1; }
  .cab-pay__sum { grid-column: 2; grid-row: 2; font-size: 17px; }
  .cab-pay .stx-tag { grid-column: 3; grid-row: 2; justify-self: end; }
  .cab-kv { gap: 12px; }
  .cab-kv > div { flex: 1 1 100%; }
  .cab-modal { align-items: flex-end; padding: 0; }
  .cab-modal__box { max-width: none; border-radius: 22px 22px 0 0; padding: 22px 16px calc(16px + env(safe-area-inset-bottom)); }
  .cab-modal__actions { flex-direction: column-reverse; }
  .cab-modal__actions .stx-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cab-card, .cab-card:hover, .cab-sheet, .cab-card:hover .cab-sheet, .cab-modal, .cab-modal__box, .cab-toast, .cab-tab, .cab-skel { transition: none; transform: none; animation: none; }
  .cab-card:hover .cab-sheet, .cab-sheet { transform: translateX(-50%); }
  .cab-status--run .stx-progress__bar::after { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .cab-card, .cab-stat, .cab-segment, .cab-chip, .cab-empty, .cab-dl__menu, .cab-modal__box, .cab-toast, .cab-public { background: var(--stx-surface, #fff); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* N4a: «Мой тариф» — карточка токенов */
.cab-tariff { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.cab-tokens__num { font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
.cab-tokens__word { font-size: 16px; font-weight: 500; color: var(--stx-text-2, #566274); }
.cab-tokens__day { display: grid; gap: 10px; margin: 4px 0 16px; }
.cab-tokens__row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--stx-text-2, #566274); }
.cab-tokens__row b { color: var(--stx-text, #1B2430); font-weight: 600; }
.cab-tokens__hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--stx-text-3, #8A94A6); }
@media (max-width: 860px) { .cab-tariff { grid-template-columns: 1fr; } }