/* Кабинет play.slarp.gg — язык магазина: та же сетка, плитки, 3D-арт,
   одна золотая кнопка на экран. Карточки графитовые (лестница #121315 →
   #1b1d20 → #25282c через токены --bg / --surface / --surface-2, решение
   владельца 27.09), без стекла и без золотых обводок. Золото — только
   главная кнопка экрана и подчёркивание текущего раздела; в шапке — плашка
   аватара как метка текущей страницы. Поверхности — только токенами.
   Выбранное (если появится) = rgba(255,255,255,.08) + золотая подпись.
   Оверлеи квитанции и удаления — прямые потомки body, вне .cab: токены и
   кнопки кабинета объявлены и для них, иначе кнопки в диалогах выглядели
   чужими (строчные, прозрачные, Golos). */

.cab,
.cab-receipt-overlay,
.cab-modal-overlay {
  /* --- SLARP PALETTE: START --- */
  --cab-fill: rgba(255, 255, 255, .035);
  --cab-fill-hover: rgba(255, 255, 255, .06);
  --cab-graphite: rgba(255, 255, 255, .06);
  --cab-graphite-hover: rgba(255, 255, 255, .10);
  /* --- SLARP PALETTE: END --- */
  --cab-radius: var(--product-hero-radius, 20px);
  color: var(--text);
}

.cab-rail {
  width: var(--shell-rail, min(calc(100% - 48px), 1320px));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0 32px;
  box-sizing: border-box;
  min-width: 0;
}

.cab-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Фокус — кольцо 2px в цвете текста с отступом 2px, как на всём сайте; не
   золотое и не заливка. Программный фокус на заголовке или заказе
   (tabindex=-1) кольцом не рисуем: у заказа своя подсветка. */
.cab [tabindex="-1"]:focus { outline: none !important; }

.cab :focus-visible:not([tabindex="-1"]),
.cab a:focus-visible,
.cab button:focus-visible,
.cab input:focus-visible,
.cab summary:focus-visible {
  outline: 2px solid var(--text) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* ---------- голова страницы ----------
   Аватар, «Кабинет», под ним строка аккаунта. Тише hero: это подпись
   страницы, а фокус — карточка доступа под ней. */

.cab-head {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 32px;
  min-width: 0;
}

.cab-head-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

/* Hero geometry fix, 2026-09-29: this used to render as a quiet "Кабинет"
   label above the hero — exactly the kind of eyebrow/overline the new hero
   spec removes everywhere. The cabinet keeps it as a real (but now
   sr-only) <h1> for a11y; the visual title is the hero's own
   #overview-title, same as every other page's hero. */
.cab-h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* >=781: the label and the account line share the 32px row instead of
   stacking, so the hero can move up (about y150 at 1440). */
@media (min-width: 781px) {
  .cab-head-copy {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 16px;
  }
}

/* One line, never wrapped: a long nick shrinks with an ellipsis (the full
   name is its title) instead of pushing «Профиль на форуме» to a second
   line and leaving the «·» hanging at the end of the first. */
.cab-who {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0 8px;
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.cab-who[hidden],
.cab-avatar[hidden] { display: none; }

.cab-who .cab-link { flex: none; min-height: 24px; font-size: 14px; }
.cab-who-sep { flex: none; color: var(--muted-2); }

.cab-avatar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 800;
}

.cab-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cab-who-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- кнопки ----------
   A label never leaves its button: a row lays buttons out at their
   one-line width and wraps them onto the next line first; only a button
   wider than its whole column wraps its own label (centred, 1.2 lines,
   6px air top and bottom). The old nowrap pushed «Войти через почту или
   Telegram» and «Скачать для Windows» past the card edge at 320px. */

.cab .cab-btn,
.cab-receipt-overlay .cab-btn,
.cab-modal-overlay .cab-btn {
  min-height: 48px;
  max-width: 100%;
  padding: 6px 22px;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: break-word;
}

.cab .button.secondary,
.cab-receipt-overlay .button.secondary,
.cab-modal-overlay .button.secondary {
  border: 1px solid transparent !important;
  background: var(--cab-graphite) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.cab .button.secondary:hover,
.cab-receipt-overlay .button.secondary:hover,
.cab-modal-overlay .button.secondary:hover {
  background: var(--cab-graphite-hover) !important;
  transform: none !important;
  filter: none !important;
}

/* The destructive confirmation (delete dialog): an outline in the field
   edge tone (--muted-2, 3:1 like the inputs) on no fill, so it never reads
   as the graphite «Не удалять» next to it. No red, no gold (owner: the
   deletion UI is graphite). */
.cab-modal-overlay .button.secondary.is-danger {
  border-color: var(--muted-2) !important;
  background: transparent !important;
}

.cab-modal-overlay .button.secondary.is-danger:hover { background: var(--cab-graphite) !important; }

.cab .cab-btn.is-small {
  min-height: 40px;
  padding: 6px 16px;
  font-size: 12px;
}

.cab-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
  cursor: pointer;
}

.cab-link:hover { text-decoration-color: currentColor; }
.cab-link[disabled] { opacity: .55; cursor: default; }
.cab-link.is-muted { color: var(--muted); }
/* Inside a sentence a link is plain text: the 32/44px inline-flex box of a
   standalone link pushed its line apart («напиши в @SlarpSup» on its own
   line, «Ключ и подключение .» with a gap before the dot). (0,3,2) on
   purpose: it has to beat the site-wide a[href*="t.me/SlarpSup"]
   {min-height:44px; display:inline-flex} (0,3,1) in store.css and the
   critical CSS. The inline padding grows the tap area without moving the
   line (WCAG 2.5.8 exempts inline links anyway). Standalone links keep
   their 44px row. */
:is(.cab, .cab-receipt-overlay, .cab-modal-overlay) p :is(a.cab-link[href], button.cab-link, a.cab-inline-link) {
  display: inline;
  min-height: 0;
  padding: 4px 0;
  font-size: inherit;
  line-height: inherit;
}

.cab-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* ---------- hero «следующий шаг» ----------
   One hero per page (owner, 2026-09-29): the access hero (#overview), or —
   while the desktop sign-in request needs an action — the request itself
   (#handoff carries the same .cab-hero class and the access hero steps
   aside). Same plate, same typography, same art box in every state: no
   state class may change a font size or the art (the old «is-compact»
   no-access hero shrank its title, so the title grew after the trial). */

.cab-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 200px;
  padding: 32px 40px;
  overflow: hidden;
  border-radius: var(--cab-radius);
  background: var(--product-hero-bg, var(--surface));
}

.cab-hero[hidden],
.cab-handoff[hidden] { display: none; }

.cab-handoff:focus { outline: none; }

.cab-hero-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: grid;
  /* one track no wider than the copy itself: an auto track grew to a long
     nowrap button's width on 320px phones, and the lead's calc(100% - 104px)
     gutter then resolved against that wider track and ran into the model */
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: start;
  gap: 12px;
}

.cab-hero-title {
  margin: 0;
  max-width: 18ch;
  color: var(--text);
  font-family: var(--display);
  font-size: var(--sh-hero-title-xl, clamp(28px, 3.2vw, 44px));
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.cab-hero-lines {
  display: grid;
  gap: 4px;
  max-width: 40em;
}

.cab-hero-lines p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.cab-hero-lines strong { color: var(--text); font-weight: 800; }
.cab-hero-lines .cab-dot { color: var(--muted-2); }
/* A device or account name moves to the next line whole («DESKTOP-7F2A»
   broke at its hyphen); a name wider than the line still wraps inside. */
.cab-unit { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
/* Words the typograph (play.js) keeps together: a preposition with its
   word, a number with its unit, a dash with the word before it. */
.cab-nb { white-space: nowrap; }
.cab-nb.is-free { white-space: normal; }

.cab-hero .cab-actions { margin-top: 6px; }

/* Redirect mode (sign-in into the phone app, 03.10): until the card is
   approved or cancelled the page is only that card — the cabinet below
   (Windows downloads, «SLARP работает на Windows» on a phone) would read as
   «SLARP is Windows-only» to someone signing into the phone app. */
.cab.is-app-focus [data-cab-hero],
.cab.is-app-focus [data-cab-nav],
.cab.is-app-focus [data-cab-sections] { display: none !important; }

@media (max-width: 780px) {
  /* «Сменить аккаунт» (right above the gold «Продолжить») and the phone
     hint's «Скопировать ссылку»: their own 44px row on phones, like the
     site's mobile targets. The «·» before «Сменить аккаунт» only joins it
     to the account name on one line — on its own row it would hang at the
     end of the line above. */
  .cab .cab-hero-lines .cab-link[data-cab-reauth],
  .cab .cab-hero-lines .cab-link[data-cab-copy-link] {
    display: block;
    width: fit-content;
    min-height: 44px;
    padding: 0;
    line-height: 44px;
  }

  .cab-hero-lines .cab-dot-link { display: none; }
}

/* Hero CTAs — the action row and the handoff's code row alike — are 52px
   (secondary 48 at <=780 via --sh-hero-cta2-h), with the site hero buttons'
   metrics (.sh-hero-actions .button); other cab-btn buttons on the page
   keep the 48px baseline above. */
.cab-hero .cab-actions .cab-btn,
.cab-hero .cab-code-row .cab-btn {
  min-height: var(--sh-hero-cta-h, 52px);
  padding: 6px 28px;
  font-size: 15px;
  font-weight: 850;
}

.cab-hero .cab-actions .cab-btn.secondary,
.cab-hero .cab-code-row .cab-btn.secondary {
  min-height: var(--sh-hero-cta2-h, 52px);
}

/* The art: one square 3D model in a fixed 180px box, 56px from the plate's
   right edge, vertically centred, absolutely placed so the plate's width
   never changes its size; the copy reserves the column (below). Per-image
   --art-fit (and --art-dx/--art-dy when the model sits off its canvas
   centre by 1% or more) corrects each webp's own transparent margin so the
   visible model is 156px here, like every other hero on the site (alpha
   bbox > 20 with >= 3 pixels per row/column, PIL; fit = 156 / (180 x
   longer visible side / longer image side)). Same numbers in league.css
   and board.css; the lanes don't share a stylesheet. */
.cab-hero .cab-hero-art {
  position: absolute;
  top: 50%;
  right: 56px;
  z-index: 1;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 180px;
  height: 180px;
  pointer-events: none;
}

.cab-hero .cab-hero-art img {
  width: 180px;
  height: 180px;
  max-width: none;
  object-fit: contain;
  transform: scale(var(--art-fit, 1)) translate(var(--art-dx, 0%), var(--art-dy, 0%));
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .45));
}

.cab-hero .cab-hero-art img[hidden] { display: none; }

.cab-hero .cab-hero-art img[src*="/state-shield"] { --art-fit: 1.37; }
.cab-hero .cab-hero-art img[src*="/state-gift"] { --art-fit: 1.347; }
.cab-hero .cab-hero-art img[src*="/icon-key"] { --art-fit: 1.174; }
.cab-hero .cab-hero-art img[src*="/state-locked"] { --art-fit: 1.21; }
.cab-hero .cab-hero-art img[src*="/state-search"] { --art-fit: 1.256; }

/* Copy column, >=781px (fix round, 2026-09-29): like the site's .sh-hero,
   the plate reserves the art column on the right (inset + box + gap =
   56 + 180 + 32 at >=1024, 40 + 140 + 24 below), so the title runs on one
   line like /play/prices/ and /store/ instead of being capped at 18ch; the
   lead gets the site's 60em, and title → lead → actions keep the site's
   12px + 20px rhythm. */
@media (min-width: 781px) {
  .cab-hero { padding-right: 268px; }
  .cab-hero .cab-hero-title { max-width: none; }
  .cab-hero .cab-hero-lines { max-width: 60em; }
  .cab-hero .cab-actions,
  .cab-hero .cab-code { margin-top: 8px; }
}

@media (max-width: 1023px) and (min-width: 781px) {
  .cab-hero { padding-right: 204px; }
  .cab-hero .cab-hero-art { width: 140px; height: 140px; right: 40px; }
  .cab-hero .cab-hero-art img { width: 140px; height: 140px; }
}

/* ---------- handoff ----------
   Needs an action → it is the hero above (.cab-handoff.cab-hero). Needs
   none (done, link expired or used, error) → one line on a graphite bar
   above the access hero (.cab-notice), with a close button; the success
   line hides itself after ~20 s (play.js). */

.cab-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  box-sizing: border-box;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.cab-notice-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
}

.cab-notice.is-success .cab-notice-icon { color: var(--gold-text, var(--text)); }
.cab-notice-icon svg { width: 16px; height: 16px; }

.cab-notice-text {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.cab-notice-text strong { color: var(--text); font-weight: 800; }
.cab-notice > .cab-link { flex: none; }

.cab-notice-close,
.cab-bot-close {
  flex: none;
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.cab-notice-close:hover,
.cab-bot-close:hover { background: var(--cab-graphite); color: var(--text); }
.cab-notice-close svg,
.cab-bot-close svg { width: 18px; height: 18px; }

/* ---------- бот SLARP: тихая карточка над разделами ----------
   Графитовая, без золота и без обводки цветом: кнопка серая (одна золотая на
   экран — у hero). Знак Telegram — тот же официальный круг, что у способа
   входа (.cab-row-icon.is-telegram). Разметку рисует play.js (renderBotCard),
   пока аккаунт привязан к Telegram, а бот не запущен. */

.cab-bot {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 44px;
  align-items: center;
  gap: 8px 14px;
  min-width: 0;
  box-sizing: border-box;
  padding: 12px 6px 12px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.cab-bot[hidden] { display: none; }

.cab-bot-text {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.cab-bot-text strong { color: var(--text); font-weight: 800; }

/* The code form inside the handoff hero: the consent line (when needed),
   then [code][gold][quiet] in one row at the hero buttons' height. */
.cab-hero .cab-code { max-width: none; gap: 12px; }
.cab-hero .cab-code-row input { min-height: 50px; }
.cab-hero .cab-consent { max-width: 36em; }
/* Redirect mode (phone apps): no code field, the form is the consent line
   (trial only) and the hero's own action row. */
.cab-hero .cab-app-form .cab-actions { margin-top: 0; }

.cab-code {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 420px;
}

.cab-code label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.cab-code-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}

/* Six digits, each followed by its .28em of tracking, plus the caret: at
   8.5ch the typed code ran wider than the field and the browser scrolled
   it, cutting the first digit («Э00000» on desktop after a wrong code). */
.cab-code input {
  width: calc(6ch + 6 * .28em + 4px);
  min-width: 0;
  min-height: 48px;
  box-sizing: content-box;
  padding: 0 16px;
  /* WCAG 1.4.11 wants 3:1 for an interactive element's border.
     --line-strong is #36393e (1.46:1 on --surface #1b1d20); --muted-2 #a39c8c
     clears 3:1 (6.19:1 on --surface, 6.81 on --bg). */
  border: 1px solid var(--muted-2, var(--line-strong));
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .28em;
}

.cab-code input::placeholder {
  color: var(--muted);
  opacity: .55;
  letter-spacing: .28em;
}

.cab-code input[aria-invalid="true"] { border-color: var(--text); }

.cab-error {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.cab-error:empty { display: none; }

/* An error or warning carries a mark, so it never reads as one more lead
   line (cabinet-8): a «!» in a text-coloured circle, in the palette (no red,
   no gold). Inline flow stays — an error may hold a «Войти» link or a
   «Войти через почту или Telegram» button mid-sentence. The mark is the
   first thing on the first line, hung into the 28px indent (-28 + 18 + 10
   = no advance) and sitting on that line's baseline: pinned to the top of
   the box it rode above the text whenever a button made the line taller.
   Status lines (role=status: «Выдаём пробный доступ…») get none. */
.cab-error:not([role="status"]) {
  padding-left: 28px;
}

.cab-error:not([role="status"])::before {
  content: "!";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0 10px 0 -28px;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  font: 900 12px/18px var(--display);
  text-align: center;
  text-indent: 0;
  vertical-align: baseline;
}

/* MUST 2: the consent checkbox inside the one-step trial form (handoffTrialExtra
   in play.js), shown only while the account has not accepted the documents. */
.cab-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-2);
}

.cab-consent input[type="checkbox"] {
  flex: none;
  /* 24px: the smallest target the cabinet allows (WCAG 2.5.8); a sitewide
     touch-target min-height once stretched the box to 48px tall */
  width: 24px;
  height: 24px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  accent-color: var(--text);
}

.cab-consent label {
  color: var(--muted);
  padding-top: 2px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

.cab-consent a {
  /* inline padding grows the tap target to 24px without moving the line */
  padding-block: 4px;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

.cab-consent a:hover { text-decoration-color: currentColor; }

/* 4A-2: inline account-linking forms (почта/Telegram) in #security — same
   tokens as .cab-code, sized for a full-width text field instead of a
   6-digit box. */
.cab-link-flow {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin: 10px 0 0;
}

.cab-field {
  display: grid;
  gap: 8px;
}

.cab-field span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.cab-field input {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  padding: 0 16px;
  /* Raised fill like the store and /play/start/ fields (not a sunken well);
     the 1px --muted-2 edge stays as the field's 3:1 boundary. */
  border: 1px solid var(--muted-2, var(--line-strong));
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  font: inherit;
}

.cab-link-flow .cab-code input { width: 8.5ch; }

/* Input focus, the sitewide pattern (DECISIONS 2026-09-27): the field keeps
   its own background, the border turns the text colour, and the ring comes
   from the :focus-visible rule above. next.css does the same for every field;
   this copy keeps the cabinet independent of that shared rule. */
.cab .cab-field input:focus,
.cab .cab-field input:focus-visible,
.cab .cab-code input:focus,
.cab .cab-code input:focus-visible {
  background: rgba(255, 255, 255, .05) !important;
  border-color: var(--text) !important;
}

/* ---------- навигация по разделам ----------
   Строка ссылок-якорей, а не второй ряд карточек (владелец, 27.09: плитки
   с 3D-иконками и цифрами спорили с hero и не читались как навигация).
   Та же типографика, что у навигации в шапке; активный пункт — подчёркивание
   и цвет текста, без анимации, чтобы выбор был виден сразу. Липкая на обеих
   ширинах: она тонкая. */

.cab-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin-top: 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 24px;
  scrollbar-width: none;
  background: var(--bg);
  box-shadow: inset 0 -1px 0 var(--line);
}

.cab-nav::-webkit-scrollbar { display: none; }
.cab-nav[hidden] { display: none; }

.cab-nav-link {
  flex: 0 0 auto;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  color: var(--muted);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .05em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent;
}

.cab-nav-link:first-child { padding-left: 4px; }
.cab-nav-link:hover { color: var(--text); }

.cab-nav-link[aria-current="true"] {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--gold, #E9C87C);
}

.cab-nav.is-orders-first [data-cab-nav-link="orders"] { order: -1; padding-left: 4px; }
.cab-nav.is-orders-first [data-cab-nav-link="key"] { padding-left: 16px; }

.cab .cab-nav-link:focus-visible { outline-offset: -2px !important; }

/* ---------- разделы ---------- */

.cab-sections {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cab-sections[hidden] { display: none; }

.cab-sections.is-orders-first #orders { order: -1; }

.cab-section {
  scroll-margin-top: 68px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: var(--cab-radius);
  background: var(--surface);
  min-width: 0;
}

.cab-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 6px;
}

.cab-section-head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1.2;
  text-transform: uppercase;
}

.cab-section-head h2:focus { outline: none; }

.cab-count {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.cab-lead {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.cab-lead strong { color: var(--text); }

.cab-note {
  margin: 10px 0 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.cab-note:empty { display: none; }

.cab-session {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-2);
  font-size: 14px;
}

.cab-session p { margin: 0; }

.cab-empty {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding-top: 6px;
  color: var(--muted);
  font-size: 14px;
}

.cab-empty p { margin: 0; }

/* Строки списков: 3D-иконка без рамки, текст, действие. */
.cab-list { display: grid; }

/* Icons sit at the top of their row in every row, short or tall (centred,
   a three-line row put its icon mid-block while a one-line neighbour's sat
   at the top); the side action on wide screens stays centred. */
.cab-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.cab-list > .cab-row:first-child { border-top: 0; }

.cab-row > img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.cab-row.is-off > img { opacity: .5; }
.cab-row.is-off > .cab-row-icon { opacity: .5; }

/* Значок строки аккаунта (способ входа, вход в браузере): круг 40px. */
.cab-row-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
}

.cab-row-icon svg { width: 20px; height: 20px; display: block; }

/* Официальный знак Telegram: белый самолётик в фирменном голубом круге. */
.cab-row-icon.is-telegram { background: #2AABEE; }
.cab-row-icon.is-telegram svg { width: 22px; height: 22px; margin-left: -2px; }

.cab-row-flow {
  grid-column: 2 / -1;
  min-width: 0;
}

.cab-row-flow .cab-link-flow { margin-top: 4px; }

.cab-method.is-linked .cab-row-main small:not(.cab-row-hint) { color: var(--text); }

.cab-row-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.cab-row > .cab-row-action { align-self: center; }

/* Up to two lines, then an ellipsis; the full name is the row's title
   (one line cut «Этот браузер · Chrome · …» at 320px). */
.cab-row-main b {
  display: -webkit-box;
  overflow: hidden;
  font-size: 15px;
  font-weight: 800;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.cab-row-main small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.cab-row-main small.cab-row-hint {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px;
}

.cab-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cab-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.cab-chip.is-strong { color: var(--text); }

.cab-confirm {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  background: var(--surface-2);
}

.cab-confirm p { margin: 0; font-size: 14px; }

.cab-more { margin-top: 6px; }

.cab-more > summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

/* «Показать все (N)» under the three newest orders (declutter 05.10, CB-4). */
.cab-orders-all { margin-top: 2px; color: var(--muted); }

.cab-more > summary::-webkit-details-marker { display: none; }
.cab-more > summary::before { content: "+"; width: 1.2em; }
.cab-more[open] > summary::before { content: "−"; }

/* ---------- ключ и подключение ----------
   Declutter 05.10 (CB-1, CB-2): no numbered steps. With access, the connect
   line (text left, one graphite download right; wraps under the text on a
   phone) and the manual fallback with the key box under a hairline. */

.cab-connect {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 8px;
}

.cab-connect p {
  flex: 1 1 320px;
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.cab-connect b,
.cab-fallback > b { color: var(--text); font-weight: 800; }

.cab-fallback {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.5;
}

.cab-keybox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-2);
}

.cab-keybox code,
.cab-codes code,
.cab-order-body code {
  min-width: 0;
  color: var(--text);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
}

.cab-keybox .cab-actions { gap: 4px 14px; }

/* Several keys in the fallback step: one box each, the tariff above the key. */
.cab-keyboxes { display: grid; gap: 8px; width: 100%; }
.cab-keybox-label {
  flex: 1 0 100%;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}

.cab-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

/* ---------- заказы ---------- */

.cab-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.cab-list > .cab-order:first-child { border-top: 0; }

/* The last row of a list that ends its section stops at its content: its
   own bottom padding on top of the card's left a ~38px empty band under
   «Устройства» and «Заказы и коды» (declutter 05.10, second round: the
   active cabinet was 2.24 screens at 1440, target 2.2). A highlighted
   order keeps its filled box. */
[data-cab-body] > .cab-list:last-child > :is(.cab-row, .cab-order:not(.is-focus)):last-child { padding-bottom: 0; }

.cab-order:focus { outline: none; }

.cab-order.is-focus {
  margin: 8px 0;
  padding: 14px 16px;
  border-top: 0;
  border-left: 3px solid var(--line-strong);
  border-radius: 14px;
  background: var(--cab-fill);
}

.cab-order.is-focus + .cab-order { border-top: 0; }

.cab-order-main { min-width: 0; display: grid; gap: 4px; }

.cab-order-main b { font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }

.cab-order-main small { color: var(--muted); font-size: 13px; }

.cab-order-side {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 6px;
}

.cab-order-side strong { font-size: 15px; font-weight: 800; white-space: nowrap; }

.cab-order-body {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  justify-items: start;
}

.cab-order-body p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.cab-order-body p strong { color: var(--text); }

/* >=781: the order's one short line and its actions share a row (declutter
   05.10: «Ключ — в разделе…  Квитанция», «Деньги не списаны.  Оформить
   заново»); delivery codes keep their own full-width row. */
@media (min-width: 781px) {
  .cab-order-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
  .cab-order-body > .cab-codes { flex: 1 0 100%; }
}

.cab-this {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cab-codes {
  display: grid;
  gap: 8px;
  width: 100%;
}

.cab-codes > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--surface-2);
}

/* ---------- безопасность ---------- */

.cab-sub {
  margin: 18px 0 4px;
  color: var(--muted);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cab-methods { margin-top: 2px; }

.cab-security-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* after the sessions list its last row's 14px already sits above the line */
.cab-list + .cab-security-foot { margin-top: 0; }

/* ---------- помощь ----------
   Declutter 05.10 (CB-3): one quiet row of links at the end of the rail, no
   card and no 3D tiles (each tile repeated the key section, the footer or
   the account menu). The heading stays: the section nav lands on it. */

.cab-section.cab-help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 28px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: none;
}

.cab-help .cab-section-head { margin: 0; }

.cab-help-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 20px;
  min-width: 0;
}

.cab-help-links .cab-link { min-height: 44px; }

/* ---------- загрузка: скелетоны нужного размера ---------- */

.cab-skel {
  display: block;
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  animation: cab-pulse 1.4s ease-in-out infinite;
}

/* the final hero's title line (44px x 1.05) and 52px CTA, so nothing shifts
   when the hero paints over the skeleton */
.cab-skel-title { width: min(360px, 80%); height: 46px; }
.cab-skel-line { width: min(300px, 70%); height: 16px; }
.cab-skel-btn { width: 180px; height: 52px; border-radius: 16px; }

@keyframes cab-pulse {
  50% { opacity: .55; }
}

/* ---------- адаптив ---------- */

@media (max-width: 780px) {
  /* The bottom room for the dock is the footer's own (shell: .site-footer
     padding-bottom): a second 104px here was an empty band between the last
     section and the IP notice on every phone screen (declutter 05.10). */
  .cab-rail {
    gap: 12px;
    padding-top: 8px;
    padding-bottom: 32px;
  }

  .cab-head { gap: 10px; min-height: 32px; }
  .cab-who, .cab-who .cab-link { font-size: 13px; }

  /* Hero panel padding at mobile (hero geometry fix, 2026-09-29): the
     hero carries its own 20/16 padding directly, same as league.css and
     board.css. */
  .cab-hero { padding: 20px 16px; min-height: 0; }

  /* Every hero art (the handoff hero's too) drops to one 88x88 box,
     absolutely pinned top-right, 16px insets, with --art-fit still applied
     so the model stays the same visible size as at every other width. */
  .cab-hero .cab-hero-art {
    top: 16px;
    right: 16px;
    width: 88px;
    height: 88px;
    transform: none;
  }

  .cab-hero .cab-hero-art img { width: 88px; height: 88px; }

  /* The facts stay one inline lead line that wraps (fix round,
     2026-09-29) — as two block lines they read as two lead lines. Title
     and lead sizes match the site hero at this width. */
  .cab-hero-lines p { font-size: 14px; }

  /* The title runs beside the model, in the lines the art's float (below)
     leaves: 8px clear of its 88px box (the model itself sits ~6px inside
     the box). On the narrowest phones the size
     also follows the copy column, so the longest unit a title holds —
     «ВОЗВРАЩАЕМСЯ» (a word), «НЕ ПОДКЛЮЧЁН», «В ПРИЛОЖЕНИЕ» (kept
     together by the typograph), each up to ~9.2em — fits on one line
     there: at 320px «НЕ / ПОДКЛЮЧЁН» hung its «НЕ», «ВОЗВРАЩАЕМСЯ» broke
     inside the word. From ~357px up it is the site hero's 6vw as before
     (the first declaration is for browsers without container units). */
  .cab-hero-copy { container-type: inline-size; }

  .cab-hero-title {
    max-width: calc(100% - 96px);
    font-size: clamp(19px, 6vw, 24px);
    font-size: clamp(16px, min(6vw, (100cqi - 96px) / 9.5), 24px);
  }

  /* The copy flows around the 88px art instead of keeping a 104px gutter
     all the way down (cabinet-11: the whole lead sat in a 150–190px column,
     five-line paragraphs next to empty space under the model). The copy
     turns into block flow with a float the size of the art's corner (8px
     gap + 88px box, down to 4px under its bottom edge): only the lines
     beside the model are short, everything below it runs full width. The
     title keeps its gutter (it always sits beside the model). The grid's
     12px gap becomes margins; forms, consent and buttons clear the float,
     so a short copy never runs them under the model. */
  .cab-hero-copy { display: block; }

  .cab-hero-copy::before {
    content: "";
    float: right;
    width: 96px;
    height: 88px;
  }

  .cab-hero-copy > * + * { margin-top: 12px; }

  .cab-hero-lines { display: block; max-width: none; }
  .cab-hero-lines p + p { margin-top: 4px; }

  .cab-hero .cab-actions,
  .cab-hero .cab-code,
  .cab-hero-copy > .cab-consent { clear: both; }

  .cab-hero .cab-actions,
  .cab-hero .cab-code-row { width: 100%; }
  .cab-hero .cab-actions > .button,
  .cab-hero .cab-code-row > * { flex: 1 1 100%; }

  .cab-hero .cab-actions .cab-btn:not(.secondary),
  .cab-hero .cab-code-row .cab-btn:not(.secondary) { min-height: 52px; }
  /* 12px of the copy rhythm + the old 4px extra above the action row */
  .cab-hero .cab-actions { margin-top: 16px; }
  /* the app's code field runs the full row, at the gold button's height */
  .cab-hero .cab-code-row input { width: 100%; min-height: 52px; box-sizing: border-box; }
  /* The code form's error sits right under the field, above the buttons
     (cabinet-8: under «Это не я» it was the last thing on the card): the
     row dissolves into the form's own one-column grid and the error is
     ordered between the field and the buttons. */
  .cab-hero .cab-code-row { display: contents; }
  .cab-hero .cab-code-row > input { order: 1; }
  .cab-hero .cab-code:not(.cab-app-form) > .cab-error { order: 2; }
  .cab-hero .cab-code-row > .button { order: 3; }

  .cab-notice { padding: 6px 4px 6px 12px; gap: 10px; }
  .cab-notice-text { font-size: 14px; }

  .cab-bot {
    grid-template-columns: 40px minmax(0, 1fr) 44px;
    gap: 8px 10px;
    padding: 12px 4px 12px 12px;
  }

  .cab-bot > .cab-row-icon { grid-column: 1; grid-row: 1; }
  .cab-bot > .cab-bot-text { grid-column: 2; grid-row: 1; }
  .cab-bot > .cab-bot-close { grid-column: 3; grid-row: 1; }
  /* the card's right padding is 4px (close button flush); 8px more here
     puts the full-width button at the same 12px from both edges */
  .cab-bot > .cab-btn { grid-column: 1 / -1; grid-row: 2; margin-right: 8px; }

  .cab-skel-title { height: 24px; }

  .cab .cab-btn { min-height: 48px; }

  /* 44px touch targets on phones (cabinet-12): the small buttons
     («Привязать», «Отменить удаление», «Войти снова»), the profile link in
     the account line and the «Показать отвязанные» disclosure. */
  .cab .cab-btn.is-small { min-height: 44px; }
  .cab-who .cab-link { min-height: 44px; }
  .cab-more > summary { min-height: 44px; }

  /* Навигация прокручивается вбок; обрезанный следующий пункт у края
     сам подсказывает, что дальше есть ещё (маска-затухание делала фон
     полосы прозрачным, и под ней просвечивали карточки). */
  .cab-nav {
    margin-inline: -4px;
    padding-inline: 4px;
  }

  .cab-nav-link { min-height: 48px; padding: 0 12px; font-size: 12px; }

  .cab-section { padding: 18px 16px; scroll-margin-top: 64px; }

  .cab-row {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .cab-row > .cab-row-action {
    grid-column: 2;
    justify-self: start;
  }

  .cab-row-flow { grid-column: 1 / -1; }

  .cab-link { min-height: 44px; }

  .cab-order { grid-template-columns: minmax(0, 1fr); }
  .cab-order-side { justify-items: start; grid-auto-flow: column; justify-content: start; align-items: center; gap: 10px; }
  .cab-security-foot > .button { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cab-skel { animation: none; }
}

.cab-keys .cab-chip { white-space: normal; }

/* ---------- квитанция об оплате (A5) ----------
   Оверлей — прямой потомок body (как account-sheet в shell.js), не внутри
   .cab: свой фокус-ринг ниже повторяет правило из шапки файла (2px в цвете
   текста, без золота и без синего браузерного умолчания). */

.cab-receipt-overlay,
.cab-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 16px;
  background: rgba(10, 11, 13, .72);
}

body.cab-receipt-open,
body.cab-modal-open { overflow: hidden; }

.cab-receipt-dialog,
.cab-modal-dialog {
  width: min(100%, 440px);
  max-height: calc(100dvh - 32px);
  box-sizing: border-box;
  display: grid;
  gap: 16px;
  padding: 24px;
  overflow-y: auto;
  border-radius: var(--radius-card, 20px);
  background: var(--surface);
  color: var(--text);
}

.cab-receipt-dialog:focus,
.cab-modal-dialog:focus { outline: none; }

.cab-receipt-dialog :focus-visible,
.cab-modal-dialog :focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
  box-shadow: none;
}

.cab-receipt-head,
.cab-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cab-receipt-head h2,
.cab-modal-head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .01em;
  text-transform: uppercase;
}

/* Facts, then the seller under its own rule with air on both sides (the
   seller block sat flush under «Статус», the rule right under the text). */
.cab-receipt-body { display: grid; gap: 16px; }
.cab-receipt-facts { display: grid; gap: 10px; margin: 0; }

.cab-receipt-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.cab-receipt-row:last-child { border-bottom: 0; padding-bottom: 0; }
.cab-receipt-row dt { margin: 0; color: var(--muted); font-size: 13px; }
.cab-receipt-row dd { margin: 0; color: var(--text); font-size: 14px; font-weight: 800; text-align: right; }

.cab-receipt-seller {
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.cab-receipt-seller strong { display: block; margin-bottom: 4px; color: var(--text); font-size: 13px; }
.cab-receipt-seller p { margin: 0; }

.cab-receipt-actions { justify-content: flex-end; }

@media (max-width: 780px) {
  .cab-receipt-overlay,
  .cab-modal-overlay { align-items: flex-end; padding: 0; }
  .cab-receipt-dialog,
  .cab-modal-dialog {
    width: 100%;
    max-height: calc(100dvh - 24px);
    border-radius: 20px 20px 0 0;
  }
  .cab-receipt-actions .button { width: 100%; }
}

/* ---------- удаление аккаунта ----------
   Тихая ссылка внизу «Входов и безопасности», диалог на тех же оверлее и
   листе, что у квитанции, плашка «Удаление запланировано» над разделами —
   в стиле карточки бота: графит, без красного и без золота. */

.cab-delete-foot {
  display: flex;
  justify-content: flex-start;
  margin-top: 6px;
}

.cab-delete-foot .cab-link { min-height: 32px; font-size: 13px; font-weight: 600; }

/* The icon at the top of the copy, as in the list rows (a long copy put it
   mid-block); the side button stays centred. */
.cab-delete-banner {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px 14px;
  min-width: 0;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--surface);
}

.cab-delete-banner[hidden] { display: none; }
.cab-delete-banner > .button,
.cab-delete-banner > .cab-link { align-self: center; }

.cab-delete-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cab-graphite);
  color: var(--text);
}

.cab-delete-icon svg { width: 20px; height: 20px; }

/* One track no wider than the column (an implicit auto track grew to a
   long button's width and pushed the banner off a 320px screen). */
.cab-delete-copy { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }

.cab-delete-copy p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.cab-delete-copy p.cab-error { color: var(--text); }
.cab-delete-copy .cab-session { margin-top: 4px; }

.cab-delete-title {
  margin: 0;
  color: var(--text);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .01em;
}

.cab-inline-link {
  color: var(--text);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
}

.cab-inline-link:hover { text-decoration-color: currentColor; }

.cab-modal-copy { display: grid; gap: 10px; }
.cab-modal-copy p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.cab-modal-actions { justify-content: flex-end; }

@media (max-width: 780px) {
  .cab-delete-banner { grid-template-columns: 40px minmax(0, 1fr); padding: 14px; }
  .cab-delete-banner > .button,
  .cab-delete-banner > .cab-link { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .cab-modal-actions { flex-direction: column-reverse; align-items: stretch; }
  .cab-modal-actions .button { width: 100%; }
  .cab-delete-foot .cab-link { min-height: 44px; }
}

/* Печать: только квитанция, ничего из остального кабинета — класс на
   <html> ставится/снимается вместе с открытием/закрытием диалога. */
@media print {
  html.is-receipt-print body > *:not(.cab-receipt-overlay) { display: none !important; }
  html.is-receipt-print body { background: #fff !important; }
  .cab-receipt-overlay { position: static; inset: auto; padding: 0; background: none; }
  .cab-receipt-dialog {
    width: auto;
    max-height: none;
    overflow: visible;
    border-radius: 0;
    background: #fff;
    color: #000;
  }
  .cab-receipt-row dt,
  .cab-receipt-seller { color: #333; }
  .cab-receipt-row dd,
  .cab-receipt-seller strong,
  .cab-receipt-head h2 { color: #000; }
  /* The close button also matches the site-wide .icon-button[aria-label="Закрыть"]
     rule in index.html's critical CSS (specificity 0,0,2,0, !important) — this
     selector adds html.is-receipt-print to clear it unambiguously rather than
     race it on source order. */
  html.is-receipt-print .cab-receipt-head button,
  html.is-receipt-print .cab-receipt-actions { display: none !important; }
}

/* Google Play build of the app (channel=play, play.js playChannel): no prices,
   no tariff, store or order links anywhere on the page — header, cards, help
   tiles, footer, dock. The legal documents stay linked. */
html.cab-play-channel a[href*="slarp.gg/play/prices"],
html.cab-play-channel a[href*="slarp.gg/store"],
html.cab-play-channel a[href*="#orders"],
html.cab-play-channel #help a[href*="refund-policy"],
html.cab-play-channel [data-cab-nav-link="orders"],
html.cab-play-channel #orders,
html.cab-play-channel a[href$="slarp.gg/play/"],
html.cab-play-channel .next-primary-nav,
html.cab-play-channel .footer-column[aria-label="Продукты"] { display: none !important; }
/* The logo leads to the home page, a sales page: not a link in this mode
   (shell.js also drops its href). */
html.cab-play-channel a.brand { pointer-events: none; }
/* Dock: Лига, Форум and the account slot are left. */
html.cab-play-channel .shell-product-dock { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }