/* ================================================================ TOKENS
   Cathedral of Embers — покинутий собор, освітлений тліючим вугіллям.

   Правило акценту: --red-bright і --ember світяться рідко. Три місця на
   весь сайт: ember-частинки в hero, primary CTA у hover, активний стан
   навігації. Все інше тримається на камені й бронзі — саме бронза дає
   відчуття віку і ціни, якого не дає «чорне + червоне».
   ==================================================================== */
:root {
  /* поверхні: від найглибшого рівня до освітленої грані каменю */
  --void: #030202;
  --bg: #050303;
  --stone: #0d0a0a;
  --stone-lit: #16100f;
  --panel: rgba(20, 12, 12, 0.66);
  --panel-solid: #130b0b;

  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 60, 60, 0.18);
  --line-bronze: rgba(138, 111, 71, 0.22);

  /* текст: --muted дає 5.2:1 на --bg, --muted-dim 4.6:1 — обидва проходять AA */
  --text: #efe9e6;
  --muted: #8c7d7d;
  --muted-dim: #6f6363;
  --parchment: #d8cbb8;

  --red: #9c1c1c;
  --red-bright: #e8382c;
  --red-dim: #3d0a0a;
  --blood: #5c0f0f;
  --ember: #c9622e;
  --bronze: #8a6f47;
  --green: #3fae6b;

  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --font-display: 'Cinzel', 'UnifrakturMaguntia', serif;
  --font-body: 'Manrope', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* Кастомний курсор — ОДИН, що ЗМІНЮЄ ФОРМУ (розмітка/логіка в js/cursor.js).
   Окремі вкладені шари, щоб трансформи не перезаписували одне одного:
   позиція (.fc-pos) → натискання (.fc-press) → форма (svg: .fc-halo + .fc-path).
   Системний курсор гасимо лише на точному вказівнику й лише після успішної
   ініціалізації (клас .fc-on на <html>); на тачі й при помилці JS він лишається. */
html.fc-on,
html.fc-on * { cursor: none !important; }
/* Текстові поля — виняток: там системна каретка (свою форму ховаємо). */
html.fc-on input,
html.fc-on textarea,
html.fc-on [contenteditable=""],
html.fc-on [contenteditable="true"] { cursor: text !important; }

#fellas-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 2147483647;
}
/* Тільки позиція: точний рух без інерції/шлейфу. */
.fc-pos {
  position: absolute;
  top: 0; left: 0;
  transform: translate3d(-100px, -100px, 0);
  will-change: transform;
}
/* Окремий шар натискання: БЕЗ scale — розмір під курсором не змінюється.
   Натискання не скидає hover, не робить цятку й не перезапускає морфінг;
   лишається тільки легке потьмяніння ядра. Позицію/морфінг шар не чіпає. */
.fc-press {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  opacity: 1;
  transition: opacity .14s ease;
}
.fc-svg {
  position: absolute;
  left: -24px; top: -32px;
  width: 48px; height: 48px;
  overflow: visible;
  pointer-events: none;
}
/* Гостре червоне ядро без білої обводки; контур задає той самий path. */
.fc-path { fill: url(#fc-core); transition: opacity .14s ease; }
/* М'яке тьмяне світіння: той самий контур, залитий мазком і розмитий
   (blur лишається ЛИШЕ на ореолі). Розмір ореолу не роздутий. */
.fc-halo {
  fill: none;
  stroke: rgba(224, 70, 46, 0.30);
  stroke-width: 9;
  stroke-linejoin: round;
}
/* Натискання: лише легке потьмяніння ядра — без зміни розміру й відскоку. */
#fellas-cursor.fc-down .fc-path { opacity: 0.82; }
/* Текстові поля — форму ховаємо, лишається системна каретка. */
/* Hidden states keep a practically invisible 0.004 opacity instead of 0:
   at 0 Chromium drops the layer, and bringing it back over the WebGL/CSS3D
   scene cost a one-off 33-54 ms GPU stall (measured on every first move and
   every return from a text field / outside the window). */
#fellas-cursor.fc-text .fc-press { opacity: 0.004; }
/* Вихід за вікно / втрата фокуса: ховаємо, а не застигаємо. */
#fellas-cursor.fc-hide .fc-press { opacity: 0.004; }

/* ------------------------------------------------------------ backdrop
   П'ять шарів глибини замість плоского чорного:

     void → камінь (статична текстура) → вінєтка → вугільне світло + промінь
     (рухаються) → зерно → контент

   Статичні шари живуть у background самого body, тому нових композитних
   шарів не додається: анімованих залишається два, як і було. */
body {
  min-height: 100vh;
  background-color: var(--void);
  background-image:
    /* вінєтка: темніє до країв, тримає погляд у центрі */
    radial-gradient(ellipse 92% 78% at 50% 42%, transparent 38%, rgba(3, 2, 2, 0.72) 100%),
    /* камінь: дуже слабкі вертикальні жили, як шліфований базальт */
    repeating-linear-gradient(102deg,
      rgba(255, 255, 255, 0.011) 0 2px,
      transparent 2px 7px),
    linear-gradient(178deg, var(--bg) 0%, var(--stone) 52%, var(--bg) 100%);
  background-attachment: fixed, fixed, fixed;
  color: var(--text);
  font-family: var(--font-body);
  position: relative;
  overflow-x: hidden;
}

/* Базовий системний курсор лишається як є: кастомний вмикається JS-ом
   (html.fc-on) лише на точному вказівнику. Текстові поля — каретка. */
input, textarea { cursor: text; }

/* Вугільне світло замість fog-шейдера клієнта + промінь із стелі собору.
   Промінь їде разом із туманом — так він читається як світло, що пробилося
   крізь мряку, а не як окремий градієнт. */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  background:
    radial-gradient(ellipse 46% 34% at 50% 6%, rgba(160, 31, 31, 0.20), transparent 70%),
    radial-gradient(ellipse 60% 42% at 82% 96%, rgba(160, 31, 31, 0.08), transparent 65%),
    radial-gradient(ellipse 60% 42% at 12% 100%, rgba(90, 16, 16, 0.14), transparent 65%),
    conic-gradient(from 196deg at 62% -14%,
      transparent 0deg,
      rgba(201, 98, 46, 0.055) 7deg,
      rgba(216, 203, 184, 0.028) 11deg,
      transparent 19deg);
  pointer-events: none;
  z-index: 0;
  animation: fog 20s ease-in-out infinite alternate;
}

@keyframes fog {
  from { transform: translate3d(-1.5%, 0, 0) scale(1); }
  to   { transform: translate3d(1.5%, -2%, 0) scale(1.06); }
}

/* Слабке зерно — щоб плоский чорний не смугував на дешевих матрицях. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  opacity: 0.035;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { position: relative; z-index: 1; }

a { color: inherit; }

/* Ніщо клікабельне не має виділятися як текст на подвійний клік.
   .tab прибрано: такого класу в розмітці немає з моменту, коли табі
   рангів перейшли на .rank-switch button. */
button, .nav-cta, .pay-option, .badge, .logo, summary, .stat {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------------------ focus ring
   Раніше стилі фокуса мав лише input, тому навігація клавіатурою по
   темному фону була сліпою. :focus-visible не показує рамку на клік
   мишею, тільки на Tab. */
:where(a, button, summary, .pay-option, [tabindex]):focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 4px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

/* Пропустити навігацію — перша ціль Tab на сторінці. */
.skip {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 60;
  width: auto;
  padding: 10px 16px;
  font-size: 13px;
  background: var(--panel-solid);
  border: 1px solid var(--line-bronze);
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  transition: top 0.22s var(--ease);
}
.skip:focus-visible { top: 12px; }

/* ---------------------------------------------------------------- header */

header {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(18px);
  background: rgba(5, 3, 3, 0.72);
  border-bottom: 1px solid var(--line);
  transition: border-color 0.3s, background 0.3s, box-shadow 0.35s;
}
/* При скролі бордер стає бронзовим градієнтом, що затухає до країв —
   лінія читається як кована накладка, а не як рамка вікна. */
header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--line-bronze) 22%, rgba(201, 98, 46, 0.34) 50%, var(--line-bronze) 78%, transparent);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
header.scrolled {
  background: rgba(5, 3, 3, 0.9);
  box-shadow: 0 14px 34px -28px rgba(0, 0, 0, 0.95);
}
header.scrolled::after { opacity: 1; }

.nav {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 26px;
}

.logo {
  font-family: UnifrakturMaguntia, serif;
  font-size: 25px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.25s var(--ease);
}
.logo:hover { transform: translateY(-1px); }
.logo .fellas { color: var(--red-bright); }

.nav-links { display: flex; gap: 22px; margin-left: auto; font-size: 14px; }
.nav-links a {
  color: var(--muted);
  text-decoration: none;
  position: relative;
  transition: color 0.18s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ember), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { transform: scaleX(1); }

/* Кована пластина: світло по верхній грані, тінь по нижній. Замість
   filter: brightness() на градієнті, який дає брудний результат. */
.nav-cta {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid rgba(232, 56, 44, 0.28);
  border-radius: 6px;
  color: var(--text);
  background: linear-gradient(180deg, var(--red) 0%, #7d1616 55%, var(--red-dim) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 190, 170, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
  text-decoration: none;
  white-space: nowrap;
  width: auto;
  transition: transform 0.2s var(--ease), box-shadow 0.25s, border-color 0.25s;
}
.nav-cta:hover {
  transform: translateY(-1px);
  border-color: rgba(232, 56, 44, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 190, 170, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 8px 22px -8px rgba(201, 98, 46, 0.85);
}
.nav-cta:active { transform: translateY(0) scale(0.97); }

/* Компактна кнопка звуку свічок (6A.8): у наявній шапці, без редизайну.
   Стани on/off розрізняються і іконкою, і кольором; доступна з клавіатури. */
.sound-toggle {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--muted);
  border: 1px solid rgba(138, 111, 71, 0.30);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(216, 203, 184, 0.06), transparent 55%),
    rgba(10, 7, 7, 0.72);
  box-shadow: inset 0 1px 0 rgba(216, 203, 184, 0.08);
  transition: color .25s, border-color .25s, background .25s, transform .25s var(--ease);
}
.sound-toggle:hover {
  color: var(--text);
  border-color: rgba(138, 111, 71, 0.60);
  transform: translateY(-1px);
}
.sound-toggle:active { transform: none; }
.sound-toggle:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.sound-toggle.on { color: var(--ember); border-color: rgba(201, 98, 46, 0.55); }
.sound-toggle:disabled { opacity: .4; cursor: not-allowed; }
.sound-toggle .ic-on { display: none; }
.sound-toggle.on .ic-on { display: block; }
.sound-toggle.on .ic-off { display: none; }

.burger { display: none; background: none; border: none; box-shadow: none; color: var(--text); font-size: 22px; width: auto; padding: 0 4px; }
.burger:hover:not(:disabled),
.burger:active:not(:disabled) { background: none; box-shadow: none; transform: none; color: #fff; }
.burger:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; border-radius: 6px; }

@media (max-width: 820px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--panel-solid);
    border-bottom: 1px solid var(--line);
    padding: 8px 20px 16px;
    animation: dropIn 0.25s var(--ease);
  }
  .nav-links:not(.open) { display: none; }
  .nav-links a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav-links a::after { display: none; }
  .burger { display: block; margin-left: auto; }
  .nav-cta { display: none; }
}

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- layout */

section.page { display: none; }
section.page.active { display: block; animation: pageIn 0.45s var(--ease); }

@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
#page-docs.active { animation: docsPageIn 0.45s var(--ease); }
@keyframes docsPageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Вихідна фаза переходу: коротке затемнення поверх контенту, 0.2s. Разом
   із pageIn це 0.65s — достатньо, щоб перехід читався, і замало, щоб
   користувач відчув чекання. */
.page-veil {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(5, 3, 3, 0.72), var(--void) 92%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
}
.page-veil.on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .page-veil { display: none; }
}

.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 460px; margin: 0 auto; padding: 0 20px; }
.mid { max-width: 760px; margin: 0 auto; padding: 0 20px; }

.eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-bright);
  font-weight: 700;
  margin-bottom: 14px;
  font-family: var(--font-body);
}

/* Воскова печатка — підписний елемент hero. */
.seal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  margin-bottom: 26px;
}
.seal .wax {
  width: 26px; height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 32% 28%, var(--red-bright), var(--red) 55%, var(--red-dim) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 2px 4px rgba(0,0,0,0.5), 0 0 14px -4px rgba(194,58,46,0.9);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: rgba(241,230,212,0.85);
}
.seal span.txt {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-bright);
  font-weight: 700;
}

/* Орнаментальний розділювач: бронзова лінія з ромбом у центрі.
   Використовується там, де потрібна пауза між блоками тексту. */
.ornament {
  color: var(--bronze);
  line-height: 0;
  margin: 0 auto 22px;
  opacity: 0.72;
}
.ornament svg { display: block; margin: 0 auto; max-width: 100%; }

h1.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(46px, 9vw, 84px);
  line-height: 1.02;
  letter-spacing: 0.01em;
  margin-bottom: 18px;
}
h1.hero-title .fellas {
  background: linear-gradient(100deg, var(--red) 20%, #ff6b57 45%, var(--red) 70%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sheen 7s linear infinite;
}

@keyframes sheen {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}

h2.sec { font-family: var(--font-display); font-size: 27px; font-weight: 600; margin-bottom: 10px; letter-spacing: 0.005em; }
h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }

.sec-note { color: var(--muted); font-size: 14px; margin-bottom: 30px; line-height: 1.6; }

.hero { padding: 92px 0 84px; text-align: center; position: relative; }
.hero p.lead {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
  max-width: 520px;
  margin: 0 auto 32px;
}

/* ------------------------------------------------------------- embers */

.embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ember {
  position: absolute;
  bottom: -10px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--red-bright);
  box-shadow: 0 0 6px 1px rgba(232, 56, 44, 0.9), 0 0 14px 3px rgba(156, 28, 28, 0.5);
  opacity: 0;
  animation: emberRise linear infinite;
}
@keyframes emberRise {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(0.6); }
  8%   { opacity: 0.9; }
  85%  { opacity: 0.5; }
  100% { opacity: 0; transform: translate3d(var(--drift, 20px), -320px, 0) scale(1.1); }
}
.ember:nth-child(1)  { left: 6%;  width: 2px; height: 2px; animation-duration: 7s;  animation-delay: 0.2s; --drift: 14px; }
.ember:nth-child(2)  { left: 14%; animation-duration: 9s;  animation-delay: 2.1s; --drift: -22px; }
.ember:nth-child(3)  { left: 23%; width: 2px; height: 2px; animation-duration: 6.4s; animation-delay: 0.9s; --drift: 10px; }
.ember:nth-child(4)  { left: 34%; animation-duration: 8.2s; animation-delay: 3.4s; --drift: -16px; }
.ember:nth-child(5)  { left: 45%; width: 2px; height: 2px; animation-duration: 7.6s; animation-delay: 1.6s; --drift: 24px; }
.ember:nth-child(6)  { left: 55%; animation-duration: 9.4s; animation-delay: 0.4s; --drift: -12px; }
.ember:nth-child(7)  { left: 64%; width: 2px; height: 2px; animation-duration: 6.9s; animation-delay: 2.8s; --drift: 18px; }
.ember:nth-child(8)  { left: 73%; animation-duration: 8.6s; animation-delay: 1.1s; --drift: -20px; }
.ember:nth-child(9)  { left: 82%; width: 2px; height: 2px; animation-duration: 7.2s; animation-delay: 3.9s; --drift: 12px; }
.ember:nth-child(10) { left: 90%; animation-duration: 9.8s; animation-delay: 0.7s; --drift: -14px; }
.ember:nth-child(11) { left: 38%; width: 2px; height: 2px; animation-duration: 6.2s; animation-delay: 4.6s; --drift: 20px; }
.ember:nth-child(12) { left: 60%; animation-duration: 8.9s; animation-delay: 2.3s; --drift: -10px; }

/* Дальні вуглинки: дрібніші, тусклі, повільні. Разом із ближніми дають
   відчуття глибини без другого шару DOM і без JS-parallax. */
.ember.far {
  width: 2px; height: 2px;
  opacity: 0;
  box-shadow: 0 0 4px 1px rgba(201, 98, 46, 0.55);
  background: var(--ember);
}
.ember.far { animation-name: emberRiseFar; }

@keyframes emberRiseFar {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(0.5); }
  10%  { opacity: 0.42; }
  80%  { opacity: 0.22; }
  100% { opacity: 0; transform: translate3d(var(--drift, 12px), -190px, 0) scale(0.8); }
}

.hero > *:not(.embers) { position: relative; z-index: 1; }

.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Поява першого екрана: грає один раз, observer не потрібен. */
.rise { opacity: 0; animation: rise 0.75s var(--ease) forwards; }
.rise.d1 { animation-delay: 0.06s; }
.rise.d2 { animation-delay: 0.14s; }
.rise.d3 { animation-delay: 0.22s; }
.rise.d4 { animation-delay: 0.32s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.stats { display: flex; justify-content: center; gap: 46px; margin-top: 60px; flex-wrap: wrap; }
.stat .n { font-size: 26px; font-weight: 600; transition: opacity 0.4s; }
.stat .n.loading { opacity: 0.35; }
.stat .l { font-size: 12px; color: var(--muted); margin-top: 4px; }
.stat .live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 7px; vertical-align: 2px; animation: pulse 2.4s infinite; }

.block { padding: 74px 0; border-top: 1px solid var(--line); }

/* Поява при скролі. */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* Заголовки виїжджають з-під маски знизу вгору — типографіка «проявляється»,
   а не просто вилітає разом із блоком. */
.tx-reveal > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 0.85s var(--ease);
}
.tx-reveal { overflow: hidden; padding-bottom: 0.08em; }
.tx-reveal.in > span { transform: none; }

/* Parallax: JS кладе у --shift значення в піднятих пікселях, CSS лише
   застосовує. Через це читання layout і запис стилів не змішуються. */
.plx { transform: translate3d(0, var(--shift, 0px), 0); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .rise { opacity: 1; }
  .tx-reveal > span { transform: none; }
  .plx { transform: none; will-change: auto; }
}

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }

/* Камінь у бронзовій окантовці: зовнішня рамка тримає форму, внутрішній
   inset-хайлайт читається як металева накладка, кутові насічки — як
   оздоблення. Все на псевдоелементах, зайвих вузлів у DOM немає. */
.card {
  background:
    linear-gradient(168deg, rgba(22, 16, 15, 0.5) 0%, transparent 58%),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(216, 203, 184, 0.05),
    inset 0 0 0 1px rgba(138, 111, 71, 0.05);
  transition: transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blood), transparent);
  opacity: 0;
  transition: opacity 0.35s, background 0.35s;
}
/* Кутові насічки: два сегменти бордера в лівому верхньому й правому
   нижньому кутах. Дешевше за рамку-картинку і масштабується. */
.card::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  background:
    linear-gradient(var(--bronze), var(--bronze)) 0 0 / 11px 1px no-repeat,
    linear-gradient(var(--bronze), var(--bronze)) 0 0 / 1px 11px no-repeat,
    linear-gradient(var(--bronze), var(--bronze)) 100% 100% / 11px 1px no-repeat,
    linear-gradient(var(--bronze), var(--bronze)) 100% 100% / 1px 11px no-repeat;
  opacity: 0.22;
  pointer-events: none;
  transition: opacity 0.35s;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(232, 56, 44, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(216, 203, 184, 0.07),
    inset 0 -22px 30px -26px rgba(201, 98, 46, 0.4),
    0 18px 40px -26px rgba(143, 29, 29, 0.8);
}
.card:hover::before {
  opacity: 1;
  background: linear-gradient(90deg, transparent, var(--ember), transparent);
}
.card:hover::after { opacity: 0.5; }
.card h3 { font-family: var(--font-display); font-weight: 600; }
.card p { color: var(--muted); font-size: 13.5px; line-height: 1.6; }

/* Тонкі лінійні піктограми в бронзі замість emoji: emoji рендериться
   шрифтом системи, тому на кожній ОС виглядає інакше і вибивається з
   палітри. SVG підкоряється currentColor. */
.card .ico {
  display: block;
  width: 26px; height: 26px;
  margin-bottom: 13px;
  color: var(--bronze);
  transition: transform 0.35s var(--ease), color 0.35s;
}
.card .ico svg { display: block; width: 100%; height: 100%; }
.card:hover .ico { transform: translateY(-2px) scale(1.06); color: var(--ember); }

/* --------------------------------------------------------------- pricing */

/* Переключатель тарифов USER|PREMIUM — тот же «соединённый» контрол, что
   и .seg (класс seg добавляет renderPricing, кнопки — seg-i). Ширина по
   содержимому, центрируется, внутреннего разделителя нет. 6A.9-rev1. */
.rank-switch.seg {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 26px;
}

.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; align-items: stretch; }
.price-grid.solo { max-width: 360px; margin: 0 auto; }

/* -------------------------------------------------------- locked tab (premium) */

.price-grid-wrap { position: relative; }

.price-grid-wrap.locked .price-grid {
  filter: blur(2.5px) grayscale(0.6);
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}

.locked-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 20px;
  z-index: 5;
}

/* Печатка замість emoji-ланцюгів: тонка бронзова сигіла, яка дихає. */
/* Premium sigil. The SVG itself never changes: a soft halo breathes behind it
   and a narrow gleam crosses the outer ring now and then. Both layers are
   absolute pseudo-elements, so there is no layout shift, no filter animation
   and no second render loop. The global prefers-reduced-motion rule below
   switches the whole thing off. */
.locked-sigil {
  position: relative;
  display: inline-block;
  color: var(--bronze);
  line-height: 0;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.7));
  animation: sigilBreathe 6s ease-in-out infinite;
}
.locked-sigil svg { display: block; position: relative; z-index: 1; }

.locked-sigil::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(214, 178, 118, 0.26), rgba(214, 178, 118, 0) 66%);
  opacity: 0.3;
  animation: sigilGlow 6s ease-in-out infinite;
}

.locked-sigil::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 40%,
    rgba(255, 244, 220, 0.5) 50%,
    transparent 60%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 31px, transparent 32px);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 31px, transparent 32px);
  opacity: 0;
  transform: translateX(-70%);
  animation: sigilSheen 7s ease-in-out infinite;
}

@keyframes sigilBreathe {
  0%, 100% { opacity: 0.68; }
  50%      { opacity: 0.92; }
}

@keyframes sigilGlow {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 0.5; }
}

@keyframes sigilSheen {
  0%, 62%  { opacity: 0; transform: translateX(-70%); }
  72%      { opacity: 0.55; }
  86%      { opacity: 0.55; transform: translateX(70%); }
  94%, 100% { opacity: 0; transform: translateX(70%); }
}

.locked-text {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  background: rgba(5, 3, 3, 0.82);
  border: 1px solid var(--line-strong);
  padding: 10px 18px;
  border-radius: 8px;
  margin: 0;
}

.price {
  background:
    linear-gradient(168deg, rgba(22, 16, 15, 0.5) 0%, transparent 58%),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 26px 24px;
  position: relative;
  backdrop-filter: blur(20px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 0 1px 0 rgba(216, 203, 184, 0.05),
    inset 0 0 0 1px rgba(138, 111, 71, 0.05);
  transition: transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
}
.price::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(400px 160px at 50% -20%, rgba(143, 29, 29, 0.18), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.price:hover {
  transform: translateY(-5px);
  border-color: rgba(232, 56, 44, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(216, 203, 184, 0.07),
    0 22px 50px -30px rgba(143, 29, 29, 0.9);
}
.price:hover::before { opacity: 1; }
.price.best { border-color: rgba(232, 56, 44, 0.5); }
.price.best::before { opacity: 0.6; background: radial-gradient(400px 160px at 50% -20%, rgba(232, 56, 44, 0.22), transparent 70%); }

.price .tag {
  position: absolute;
  top: 14px; right: 14px;
  background: linear-gradient(180deg, var(--red-bright), var(--blood));
  color: #1a1206;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 4px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.price .name { font-family: var(--font-display); font-size: 13px; color: var(--muted); margin-bottom: 12px; letter-spacing: 0.03em; }

/* #6a5f4f давав 3.3:1. Стара ціна мусить читатись, вона й є аргументом. */
.price .old {
  font-size: 15px;
  color: var(--muted-dim);
  text-decoration: line-through;
  text-decoration-color: rgba(232, 56, 44, 0.8);
  text-decoration-thickness: 1.5px;
  margin-bottom: 4px;
}
.price .amount { font-size: 36px; font-weight: 700; line-height: 1; font-family: var(--font-display); }
.price .amount span { font-size: 15px; color: var(--muted); font-weight: 400; }
.price .alt { font-size: 13px; color: var(--muted); margin-top: 7px; }
.price .per { font-size: 12.5px; color: var(--muted); margin-top: 8px; margin-bottom: 22px; }
.price button { margin-top: auto; }

.save {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: #7ddb9e;
  background: rgba(40, 160, 80, 0.12);
  border: 1px solid rgba(40, 160, 80, 0.28);
}

.price-note { text-align: center; font-size: 13px; color: var(--muted); line-height: 1.6; margin-top: 24px; }

/* ------------------------------------------------------------------- faq */

details.faq { border-bottom: 1px solid var(--line); padding: 17px 0; }
details.faq summary {
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  transition: color 0.2s;
}
details.faq summary:hover { color: #fff; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+";
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  transition: transform 0.4s var(--ease), color 0.25s;
}
details.faq[open] summary::after { transform: rotate(135deg); color: var(--red); }
details.faq[open].closing summary::after { transform: rotate(0deg); color: var(--muted); }

/* Плавне розкриття: grid-рядок 0fr → 1fr анімується, на відміну від height:auto */
details.faq .faq-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.4s var(--ease), opacity 0.3s var(--ease);
}
details.faq[open] .faq-body { grid-template-rows: 1fr; opacity: 1; }
details.faq[open].closing .faq-body { grid-template-rows: 0fr; opacity: 0; }
details.faq .faq-body > div { overflow: hidden; }

details.faq p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  padding-top: 11px;
  transform: translateY(-6px);
  transition: transform 0.4s var(--ease);
}
details.faq[open] p { transform: none; }
details.faq[open].closing p { transform: translateY(-6px); }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------- screenshots */

/* Плейсхолдер тепер тепло-кам'яний, а не синьо-чорний (#101014 конфліктував
   із бордовою палітрою). Текст піднято з #34343c (1.54:1 — провал) до
   --muted-dim на світлішому камені: 4.6:1, AA проходить. */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.shot {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(160deg, var(--stone-lit), var(--void));
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  transition: transform 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s;
}
.shot > span {
  /* --muted-dim давав 3.57:1 на цьому світлішому камені — воно світліше за
     --bg, тому поріг тут жорсткіший, ніж для тексту на фоні сторінки.
     --muted тримає 4.79:1 на найсвітлішій частині градієнта. */
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.shot:hover {
  transform: scale(1.02);
  border-color: var(--line-bronze);
  box-shadow: 0 18px 44px -30px rgba(0, 0, 0, 0.95);
}
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot { cursor: zoom-in; }
.shot:focus-visible { outline: 2px solid var(--line-bronze); outline-offset: 2px; }
/* Просмотр скриншота: отдельный overlay на body (вне маршрутов и CSS3D).
   Хрестик — фиксированные 44×44 поверх всего (глобальный button{width:100%}
   и hover-трансформы перебиты явно). Кадр — портал WAAPI из app.js;
   sheen — тонкий световой проход (только во время открытия). */
.shot-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.72);
}
.shot-overlay[hidden] { display: none; }
.shot-frame {
  position: relative;
  max-width: min(1160px, 92vw);
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 12px;
  overflow: hidden;
  background: rgba(5, 3, 3, 0.96);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9);
}
.shot-frame img {
  display: block;
  max-width: min(1140px, 88vw);
  max-height: 82vh;
  width: auto;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.shot-sheen {
  position: absolute;
  inset: -10% -30%;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 42%,
    rgba(255, 214, 170, 0.0) 46%,
    rgba(255, 214, 170, 0.28) 50%,
    rgba(255, 214, 170, 0.0) 54%,
    transparent 58%);
  transform: translateX(-110%);
  opacity: 0;
}
.shot-x {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(216, 203, 184, 0.35);
  background: rgba(0, 0, 0, 0.62);
  color: #f3e9d4;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  transform: none;
}
.shot-x:hover:not(:disabled) {
  transform: none;
  border-color: var(--line-bronze);
  color: #fff;
  background: rgba(20, 12, 8, 0.85);
}
.shot-x:active:not(:disabled) { transform: none; }
.shot-x:focus-visible { outline: 2px solid var(--line-bronze); outline-offset: 2px; }
body.shot-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .shot-sheen { display: none; }
}

/* ---------------------------------------------------------------- panels */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
  backdrop-filter: blur(20px);
}

h2.panel-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin-bottom: 20px; letter-spacing: 0.01em; }

label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }

input, select, textarea {
  width: 100%;
  padding: 11px 13px;
  margin-bottom: 15px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.25s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgba(232, 56, 44, 0.5);
  box-shadow: 0 0 0 3px rgba(232, 56, 44, 0.10);
}
/* #4a4136 давав ~2.1:1 — placeholder був практично невидимий. */
input::placeholder { color: var(--muted-dim); }

/* Кована пластина: трьохстопний градієнт + inset-хайлайт по верхній грані
   і inset-тінь по нижній. Раніше hover робив filter: brightness(1.3) по
   градієнту — це вимиває колір у брудно-сірий і будує зайвий шар фільтра.
   Тепер світлішає сам градієнт, а фільтра немає взагалі. */
button {
  width: 100%;
  padding: 11px;
  border: 1px solid rgba(138, 111, 71, 0.16);
  border-radius: 6px;
  background: linear-gradient(180deg, #3a2d20 0%, #2a2016 52%, #1b150e 100%);
  box-shadow:
    inset 0 1px 0 rgba(216, 203, 184, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: transform 0.18s var(--ease), background 0.22s, border-color 0.22s, box-shadow 0.25s;
}
button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--line-bronze);
  background: linear-gradient(180deg, #4a3a29 0%, #34281c 52%, #221a11 100%);
  box-shadow:
    inset 0 1px 0 rgba(216, 203, 184, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 8px 20px -12px rgba(0, 0, 0, 0.9);
}
button:active:not(:disabled) { transform: scale(0.98); }
button:disabled { opacity: 0.5; cursor: default; }

/* Primary CTA: єдине місце, крім hero і навігації, де дозволене світіння. */
button.accent {
  border-color: rgba(232, 56, 44, 0.3);
  background: linear-gradient(180deg, var(--red-bright) 0%, #a01d1a 55%, var(--red-dim) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 180, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
button.accent:hover:not(:disabled) {
  border-color: rgba(232, 56, 44, 0.55);
  background: linear-gradient(180deg, #f04a3c 0%, #b12220 55%, #4a0d0d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 180, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 12px 30px -12px rgba(201, 98, 46, 0.9);
}

button.ghost {
  background: rgba(255, 255, 255, 0.014);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(216, 203, 184, 0.04);
}
button.ghost:hover:not(:disabled) {
  background: rgba(216, 203, 184, 0.045);
  border-color: var(--line-bronze);
  box-shadow: inset 0 1px 0 rgba(216, 203, 184, 0.07);
}
button.auto { width: auto; padding: 12px 26px; }

/* Стан завантаження: текст лишається на місці (щоб кнопка не змінювала
   ширину), але стає прозорим, а поверх обертається бронзовий орнамент. */
button.is-busy { position: relative; color: transparent; pointer-events: none; }
button.is-busy::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 1.5px solid rgba(216, 203, 184, 0.2);
  border-top-color: var(--parchment);
  border-radius: 50%;
  animation: runeSpin 0.75s linear infinite;
}

@keyframes runeSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  /* Без обертання індикатор мусить лишитися видимим, інакше кнопка просто
     мовчить. Показуємо статичне кільце. */
  button.is-busy::after { animation: none; border-top-color: var(--parchment); opacity: 0.8; }
}

.switch { text-align: center; margin-top: 18px; font-size: 13px; color: var(--muted); }
.switch a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); cursor: pointer; transition: border-color 0.2s; }
.switch a:hover { border-color: var(--red); }

.msg { padding: 10px 13px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; display: none; line-height: 1.5; }
.msg.error, .msg.ok, .msg.info { animation: fadeIn 0.3s var(--ease); }
.msg.error { display: block; background: rgba(143, 29, 29, 0.12); border: 1px solid rgba(143, 29, 29, 0.3); color: #ff8a8a; }
.msg.ok { display: block; background: rgba(40, 160, 80, 0.10); border: 1px solid rgba(40, 160, 80, 0.28); color: #7ddb9e; }
.msg.info { display: block; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); color: var(--muted); }

.row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.row:last-of-type { border-bottom: none; }
.row .k { font-size: 13px; color: var(--muted); flex-shrink: 0; }
.row .v { font-size: 14px; font-weight: 500; text-align: right; }

.badge { padding: 3px 9px; border-radius: 5px; font-size: 12px; font-weight: 600; }
.badge.user { background: rgba(255, 255, 255, 0.08); }
.badge.developer { background: rgba(143, 29, 29, 0.2); color: #e07461; }
.badge.premium { background: rgba(232, 56, 44, 0.16); color: var(--red-bright); }
.badge.none { background: rgba(255, 255, 255, 0.04); color: var(--muted); }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; }
.dot.on { background: var(--green); box-shadow: 0 0 0 0 rgba(70, 196, 110, 0.6); animation: pulse 2.4s infinite; }
.dot.off { background: #6a6a72; }

@keyframes pulse {
  70% { box-shadow: 0 0 0 7px rgba(70, 196, 110, 0); }
  100% { box-shadow: 0 0 0 0 rgba(70, 196, 110, 0); }
}

.divider { height: 1px; background: var(--line); margin: 22px 0; }
.hint { font-size: 12px; color: var(--muted); margin-top: 10px; line-height: 1.55; }

#keyInput { text-transform: uppercase; letter-spacing: 0.5px; font-family: ui-monospace, monospace; }

/* -------------------------------------------------------------- history */

.hist { max-height: 260px; overflow-y: auto; }
.hist-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  animation: fadeIn 0.35s var(--ease);
}
.hist-item:last-child { border-bottom: none; }
.hist-item .code { font-family: ui-monospace, monospace; }
.hist-item .when { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* ---------------------------------------------------------------- modal */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  display: none;
  place-items: center;
  padding: 20px;
  z-index: 90;
}
.overlay.open { display: grid; animation: fadeIn 0.22s var(--ease); }

.modal {
  width: 100%;
  max-width: 400px;
  background: var(--panel-solid);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 26px;
  position: relative;
  animation: modalIn 0.34s var(--ease);
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.modal h3 { font-size: 18px; margin-bottom: 6px; }
.modal .close {
  position: absolute;
  top: 14px; right: 16px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 22px;
  width: auto;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, transform 0.25s var(--ease);
}
.modal .close:hover { color: var(--text); transform: rotate(90deg); }

body.pay3d-on #css3d-layer {
  z-index: 91 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* Checkout: the scene is NOT dimmed. The transparent #payOverlay below still
   covers the viewport, so stray clicks on the background are swallowed. */
body.pay3d-on #pricing { pointer-events: none !important; }
#payOverlay {
  background: transparent;
  backdrop-filter: none;
}
#payOverlay.open { animation: none; }

.modal.pay-modal {
  width: min(620px, 100%);
  max-width: 620px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: none;
  box-shadow: none;
  animation: none;
  overflow: visible;
}
.pay-visual {
  position: relative;
  width: 100%;
  padding: 24px 28px 22px;
  border-radius: 22px;
  border: 1px solid rgba(206, 168, 106, 0.26);
  background:
    radial-gradient(90% 62% at 12% -12%, rgba(156, 28, 28, 0.24), transparent 62%),
    radial-gradient(82% 58% at 102% -6%, rgba(138, 111, 71, 0.15), transparent 66%),
    linear-gradient(155deg, rgba(31, 18, 17, 0.988), rgba(9, 7, 8, 0.995));
  box-shadow:
    0 0 0 1px rgba(255, 225, 180, 0.04) inset,
    0 1px 0 rgba(255, 226, 180, 0.08) inset,
    0 45px 110px -30px rgba(0, 0, 0, 0.96),
    0 14px 36px -18px rgba(0, 0, 0, 0.92);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.pay-visual::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(236, 200, 145, 0.58), transparent);
  pointer-events: none;
}
.pay-visual::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 21px;
  border: 1px solid rgba(255, 255, 255, 0.025);
  pointer-events: none;
}
.pay-visual > *:not(.close) { position: relative; z-index: 1; }
.pay-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-right: 38px;
  margin-bottom: 8px;
}
.modal.pay-modal .pay-head {
  position: static;
  top: auto;
  z-index: auto;
  backdrop-filter: none;
  background: none;
  border-bottom: 0;
  transition: none;
}
.modal.pay-modal .pay-head::after { content: none; display: none; }
.pay-seal {
  width: 40px;
  height: 40px;
  padding: 5px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #e4c690;
  background: linear-gradient(145deg, rgba(156, 28, 28, 0.45), rgba(40, 22, 17, 0.8));
  border: 1px solid rgba(214, 178, 118, 0.32);
  box-shadow: inset 0 1px rgba(255, 236, 200, 0.12), 0 8px 18px -12px rgba(0, 0, 0, 0.9);
}
.pay-seal img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.pay-head-copy { min-width: 0; }
.pay-kicker {
  display: block;
  margin-bottom: 4px;
  color: #c7a46b;
  font: 600 9px/1 var(--font-body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.modal.pay-modal h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.modal.pay-modal .close {
  top: 17px;
  right: 17px;
  z-index: 3;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(206, 168, 106, 0.32);
  border-radius: 50%;
  background: rgba(58, 38, 29, 0.38);
  color: #e4c690;
  font-size: 20px;
  box-shadow: inset 0 1px rgba(255, 236, 200, 0.1);
}
.modal.pay-modal .close:hover {
  color: #f0d3a1;
  border-color: rgba(214, 178, 118, 0.35);
  transform: rotate(90deg);
}
.modal.pay-modal .pay-note {
  max-width: 54ch;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.pay-summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
  padding: 9px 15px 9px 17px;
  overflow: hidden;
  border: 1px solid rgba(206, 168, 106, 0.28);
  border-radius: 14px;
  background: linear-gradient(100deg, rgba(156, 28, 28, 0.2), rgba(138, 111, 71, 0.07) 56%, rgba(255, 255, 255, 0.018));
  box-shadow: inset 0 1px rgba(255, 230, 190, 0.06);
}
.pay-summary::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, #e4c690, rgba(156, 28, 28, 0.2));
}
.pay-summary-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pay-summary-label {
  color: #e0c28d;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pay-summary-period {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}
.pay-summary-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}
.pay-summary-price {
  color: #fff;
  font: 700 26px/1 var(--font-display);
  text-shadow: 0 0 24px rgba(201, 98, 46, 0.24);
}
.pay-summary-cap {
  color: var(--muted);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pay-promo { margin-bottom: 12px; }
.pay-promo-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.pay-promo-head .promo-field {
  margin: 0;
  color: #b9a07e;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pay-promo-head > span {
  color: var(--muted-dim);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.modal.pay-modal .promo-row { gap: 8px; margin-bottom: 0; }
.modal.pay-modal .promo-row input {
  height: 38px;
  padding: 0 13px;
  border-radius: 10px;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.28);
  font-size: 13px;
}
.modal.pay-modal .promo-row input:focus {
  border-color: rgba(214, 178, 118, 0.45);
  background: rgba(0, 0, 0, 0.38);
}
.modal.pay-modal .promo-apply {
  min-height: 38px;
  padding: 0 15px;
  border-radius: 10px;
  font-size: 12px;
}
.modal.pay-modal .promo-status {
  min-height: 14px;
  margin: 3px 0 0;
  font-size: 11px;
  line-height: 1.4;
}
.modal.pay-modal .promo-funpay-note { min-height: 15px; margin-top: 1px; }
.modal.pay-modal .pay-methods { position: relative; }
.modal.pay-modal .pay-option {
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 9px 13px;
  border-radius: 12px;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
  transform: none;
}
.modal.pay-modal .pay-option .mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: #d7b57e;
  background: rgba(138, 111, 71, 0.12);
  border: 1px solid rgba(138, 111, 71, 0.18);
}
.modal.pay-modal .pay-option .txt b {
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.modal.pay-modal .pay-option .txt span {
  font-size: 11.5px;
  line-height: 1.3;
  color: rgba(239, 233, 230, 0.56);
}
.modal.pay-modal .pay-option .arrow {
  color: #d7b57e;
  font-size: 16px;
  opacity: 0.8;
}
.modal.pay-modal .pay-option:hover,
.modal.pay-modal .pay-option:focus-visible {
  transform: none;
  border-color: rgba(214, 178, 118, 0.38);
  background: rgba(255, 255, 255, 0.05);
}
.modal.pay-modal .pay-option-primary {
  border-color: rgba(232, 56, 44, 0.36);
  background: linear-gradient(100deg, rgba(156, 28, 28, 0.56), rgba(92, 15, 15, 0.34));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 12px 28px -18px rgba(156, 28, 28, 0.95);
}
.modal.pay-modal .pay-option-primary:hover,
.modal.pay-modal .pay-option-primary:focus-visible {
  border-color: rgba(232, 56, 44, 0.62);
  background: linear-gradient(100deg, rgba(176, 36, 32, 0.64), rgba(104, 18, 18, 0.4));
}
.modal.pay-modal .pay-option-primary .mark {
  color: #f0d3a1;
  background: linear-gradient(145deg, rgba(255, 215, 150, 0.18), rgba(156, 28, 28, 0.24));
  border-color: rgba(240, 211, 161, 0.26);
}
.modal.pay-modal .pay-option-primary .txt span { color: rgba(255, 242, 224, 0.64); }
.pay-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 7px 0;
  color: var(--muted-dim);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pay-or::before,
.pay-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}
.pay-methods-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.modal.pay-modal .pay-methods-grid .pay-option { padding: 8px 11px; gap: 9px; }
.modal.pay-modal .pay-methods-grid .pay-option .mark { width: 28px; height: 28px; border-radius: 9px; }
.modal.pay-modal .pay-methods-grid .pay-option .txt b { font-size: 12.5px; }
.modal.pay-modal .pay-methods-grid .pay-option .txt span { font-size: 10.5px; }
.modal.pay-modal .pay-method.is-active {
  border-color: rgba(214, 178, 118, 0.4);
  background: rgba(138, 111, 71, 0.13);
}
/* A method without a provider is not sold as working: it stays readable and
   explains itself on click, but never looks selected or ready. */
.modal.pay-modal .pay-method.is-unavailable {
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.014);
  color: rgba(236, 226, 214, 0.62);
  cursor: help;
}
.modal.pay-modal .pay-method.is-unavailable .mark { opacity: 0.55; }
.modal.pay-modal .pay-method.is-unavailable .txt span { color: rgba(229, 154, 121, 0.82); }
.modal.pay-modal .pay-method.is-unavailable:hover,
.modal.pay-modal .pay-method.is-unavailable:focus-visible {
  border-color: rgba(229, 154, 121, 0.3);
  background: rgba(229, 154, 121, 0.04);
}
.pay-methods-note {
  margin: 7px 0 0;
  color: var(--muted-dim);
  font-size: 10.5px;
  line-height: 1.45;
}
.pay-foot {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}
.modal.pay-modal .hint {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.modal.pay-modal .hint a {
  color: #d4b07a;
  text-decoration: none;
  border-bottom: 1px solid rgba(214, 178, 118, 0.28);
}
.modal.pay-modal .hint a:hover { color: #f0d3a1; border-bottom-color: rgba(240, 211, 161, 0.6); }

@media (max-width: 700px) {
  .modal.pay-modal {
    width: 100%;
    max-width: 100%;
  }
  .pay-visual {
    padding: 24px 20px 20px;
    border-radius: 18px;
  }
  .pay-visual::after { border-radius: 17px; }
  .modal.pay-modal h3 { font-size: 20px; }
  .pay-summary { padding: 12px 14px 12px 16px; }
  .pay-summary-price { font-size: 26px; }
  .pay-methods-grid { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .pay-visual { padding: 22px 16px 18px; }
  .modal.pay-modal .promo-row { flex-direction: column; }
  .modal.pay-modal .promo-apply { width: 100%; }
}

/* ================================================= KEY SUCCESS MODAL
   Тёмная кожа/камень, бронзовая рамка, бордо. Открывается только после
   реального успеха /activate. Частицы — одноразовый DOM-бёрст. */
body.key-success-open { overflow: hidden; }

.key-success-overlay {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  visibility: hidden;
  isolation: isolate;
  overflow: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.22s;
}
.key-success-overlay[hidden] { display: none; }
.key-success-overlay.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease;
}
/* Закрытие: гаснет, но остаётся видимым для transition и уже не ловит клики. */
.key-success-overlay.closing {
  opacity: 0;
  visibility: visible;
  transition: opacity 0.18s ease, visibility 0s linear 0.2s;
}

.key-success-modal {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 440px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  border: 1px solid var(--line-bronze);
  border-radius: 15px;
  background:
    radial-gradient(ellipse 90% 30% at 50% 0%, rgba(201, 98, 46, 0.07), transparent 70%),
    linear-gradient(172deg, #1a120d 0%, #120c0a 55%, #0b0707 100%);
  box-shadow:
    inset 0 1px 0 rgba(216, 203, 184, 0.07),
    0 30px 70px -30px rgba(0, 0, 0, 0.95);
  padding: 30px 28px 26px;
  text-align: center;
  opacity: 0;
  transform: translateY(16px) scale(0.88);
}
.key-success-overlay.open .key-success-modal {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.key-success-overlay.closing .key-success-modal {
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.key-success-close {
  position: absolute;
  top: 10px; right: 12px;
  min-width: 40px;
  min-height: 40px;
  width: auto;
  padding: 6px 10px;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, transform 0.25s var(--ease);
}
.key-success-close:hover { color: var(--text); transform: rotate(90deg); }

.key-success-mark {
  width: 64px; height: 64px;
  margin: 2px auto 16px;
  color: var(--red-bright);
  filter: drop-shadow(0 0 18px rgba(156, 28, 28, 0.55));
}
.key-success-mark svg { display: block; width: 100%; height: 100%; }
.key-success-overlay.open .key-success-mark {
  animation: keyMarkPop 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: 50% 50%;
}
@keyframes keyMarkPop {
  0%   { transform: scale(0.5) rotate(-8deg); opacity: 0; }
  60%  { transform: scale(1.06) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.key-success-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze);
  font-weight: 700;
  margin-bottom: 8px;
}
.key-success-modal h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}
.key-success-modal #keySuccessText {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
  margin-bottom: 18px;
}
.key-success-result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  margin-bottom: 22px;
  border: 1px solid var(--line-bronze);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  font-size: 13px;
  color: var(--muted);
}
.key-success-result strong {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--parchment);
  white-space: nowrap;
}
.key-success-result[hidden] { display: none; }
.key-success-modal .accent { margin-top: 0; }

/* Передний декоративный слой: летит ПОВЕРХ рамки, поверхности и текста
   modal. Клики проходят насквозь (pointer-events), за пределы overlay
   ничего не вытекает (inset:0 + overflow:hidden), stacking замкнут
   внутри overlay через isolation:isolate — наружу z-index не торчит. */
.key-success-particles {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}
.key-success-particle {
  position: absolute;
  left: var(--ox, 50%);
  top: var(--oy, 34%);
  width: var(--size, 4px);
  height: var(--size, 4px);
  background: var(--color, #c9622e);
  opacity: 0;
  pointer-events: none;
  animation: keyParticle var(--duration, 900ms) ease-out var(--delay, 0ms) forwards;
}
.key-success-particle.cross {
  clip-path: polygon(38% 0, 62% 0, 62% 38%, 100% 38%, 100% 62%, 62% 62%, 62% 100%, 38% 100%, 38% 62%, 0 62%, 0 38%, 38% 38%);
}
/* Подъём в первой трети, затем падение с вращением и затуханием.
   Центр частицы держится через -50%: точка вылета точная. */
@keyframes keyParticle {
  0%   { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  35%  { transform: translate(calc(-50% + var(--x, 0px) * 0.6), calc(-50% + var(--y, 60px) * 0.6 - 46px)) rotate(calc(var(--r, 180deg) * 0.4)); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 60px))) rotate(var(--r, 180deg)); opacity: 0; }
}

@media (max-width: 620px) {
  .key-success-modal { padding: 26px 20px 22px; }
  .key-success-mark { width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .key-success-overlay { transition: none; }
  .key-success-overlay.open .key-success-modal,
  .key-success-overlay.closing .key-success-modal { transition: none; transform: none; }
  .key-success-overlay.open .key-success-mark { animation: none; }
  .key-success-particle { display: none; }
}

/* ================================================= SECURITY CARDS
   Три блока вкладки «Безопасность»: Telegram, смена пароля, платный
   одноразовый сброс HWID. Палитра сайта: кожа/камень, бронза, бордо. */
.sec-card [hidden] { display: none !important; }
.sec-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(172deg, rgba(26, 18, 13, 0.6) 0%, rgba(11, 7, 7, 0.6) 100%);
  padding: 20px;
  margin-bottom: 16px;
  max-width: 640px;
}
.sec-card:last-child { margin-bottom: 0; }
.sec-lot { border-color: var(--line-bronze); }
.sec-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.sec-title {
  font-family: var(--font-display);
  font-size: 17px;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.sec-tgicon {
  width: 24px; height: 24px;
  flex: 0 0 auto;
  border-radius: 50%;
}
.sec-status {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-bronze);
  color: var(--muted);
  white-space: nowrap;
}
.sec-status[data-state="on"] { color: #7ddc8f; border-color: rgba(125, 220, 143, 0.35); }
.sec-status[data-state="off"] { color: var(--bronze); }
.sec-status[data-state="bad"] { color: var(--red-bright, #e8382c); border-color: var(--line-strong); }
.sec-desc { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0 0 12px; }
.sec-list { margin: 0 0 14px; padding-left: 20px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.sec-idline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--line-bronze);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
}
.sec-idname {
  font-weight: 700;
  overflow-wrap: anywhere;
  min-width: 0;
}
.sec-iddate { color: var(--muted); font-size: 12.5px; }
.sec-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.sec-actions .accent, .sec-actions .ghost { min-height: 44px; }
.sec-toggles {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 12px 0 2px;
}
.sec-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  min-height: 44px;
}
.sec-toggle input { width: 18px; height: 18px; accent-color: var(--red-bright, #e8382c); }
.sec-linkbox, .sec-unlinkbox, .sec-confirm { margin-top: 14px; }
.sec-linkhint { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0 0 10px; }
.sec-passrow { display: flex; gap: 10px; align-items: stretch; margin-bottom: 12px; }
.sec-passrow input { flex: 1 1 0%; width: auto; min-width: 0; }
.sec-passrow .ghost.sm { flex: 0 0 auto; width: auto; min-height: 44px; }
.sec-facts { margin: 0 0 6px; display: grid; gap: 8px; }
.sec-facts > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
}
.sec-facts dt { color: var(--muted); font-size: 12.5px; flex: 0 0 auto; }
.sec-facts dd { margin: 0; font-size: 13.5px; text-align: right; overflow-wrap: anywhere; }
#pwForm label { display: block; margin: 0 0 6px; font-size: 13px; color: var(--muted); }

@media (max-width: 620px) {
  .sec-card { padding: 16px 14px; }
  .sec-passrow { flex-direction: column; }
  .sec-passrow .ghost.sm { align-self: flex-start; }
}

.sec-details { margin: 0 0 12px; }
.sec-details summary {
  cursor: pointer;
  color: var(--bronze);
  font-size: 13px;
  font-weight: 600;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.sec-details .sec-list { margin-bottom: 2px; }

/* Компактная раскладка Безопасности на desktop: слева Telegram и сброс,
   справа смена пароля. Без внутренних скролл-контейнеров: контент должен
   влезать в .cab-view-scroll целиком. */
@media (min-width: 1000px) {
  #cabPanelSecurity { display: grid; grid-template-columns: 1fr 1.05fr; gap: 0 14px; align-items: start; }
  /* Grid-blowout: min-content широких детей (ряды пароль+кнопка) иначе
     раздвигает Pane шире колонки на узком desktop (1366, панель 44%). */
  #cabPanelSecurity > * { min-width: 0; }
  #cabPanelSecurity > .cab-pane-title { grid-column: 1 / -1; margin-bottom: 10px; }
  #cabPanelSecurity .sec-card { margin-bottom: 14px; max-width: none; padding: 15px 17px; }
  #cabPanelSecurity #pwCard { grid-column: 2; grid-row: 2 / span 2; }
  #cabPanelSecurity #hwidCard { grid-column: 1; }
  body.in-room #cabPanelSecurity .sec-card { padding: 12px 15px; margin-bottom: 10px; }
  body.in-room #cabPanelSecurity .sec-desc { margin-bottom: 6px; }
  body.in-room #cabPanelSecurity .sec-actions { margin-top: 8px; }
  body.in-room #cabPanelSecurity > .cab-pane-title { margin-bottom: 6px; }
  #cabPanelSecurity .sec-desc { margin-bottom: 9px; }
  #cabPanelSecurity .sec-actions { margin-top: 9px; }
}

/* Точечно: убрать лишнюю нижнюю линию под «Деталями аккаунта»
   (последняя строка) и разделитель подвала кабинета. Остальные
   рамки кабинета не трогаем. */
#page-cabinet .cab-details > .cab-drow:last-child { border-bottom: none; }
#page-cabinet footer.cab-foot { border-top: none; margin-top: 18px; padding-top: 12px; }

/* 5B preview: комната без перекрывающего меню. Только локальный
   осмотр (#/cabinet-preview); обычный сценарий не меняется. */
body.room-preview #page-cabinet .cabinet-shell { display: none; }

/* 5B in-room: панель СПРАВА от рабочего места (решение: панель справа),
   ~40-46% viewport, без transform:scale (текст и зоны нажатия
   в натуральную величину). Камера смотрит на восток (+X): стол, кресло
   и статуя остаются в свободной левой части кадра.
   Только desktop: на mobile остаётся обычный 2D-фолбэк.
   5C: класс .room-3d — панель как CSS3D-плоскость в комнате:
   фиксированная растровая ширина, компактная шапка (контентные шрифты
   НЕ меняются), фон — полупрозрачный (см. ниже), текст непрозрачен. */
@media (min-width: 1000px) {
  body.in-room #page-cabinet .cabinet-shell {    width: clamp(560px, 44vw, 860px);
    max-width: none;
    margin-left: auto;
    margin-right: max(16px, 3vw);
    /* Высота — по содержимому: внутренний скролл запрещён как класс
       (иначе 560px вылезают за рамку при высоком контенте). Если вкладка
       выше viewport — прокручивается страница естественным образом. */
    max-height: none;
    padding: 26px 30px 18px;
  }
  /* Контейнер вкладок — обычный поток без собственной прокрутки. */
  body.in-room #page-cabinet .cab-view-scroll {
    max-height: none;
    overflow: visible;
  }
  body.in-room #page-cabinet .cab-foot { margin-top: 12px; }
  /* История — потоком вместе со страницей, без вложенного скролла. */
  body.in-room #page-cabinet .cab-hist { max-height: none; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .sec-status, .sec-card { transition: none; }
}

/* ================================================= DOCUMENTATION
   Единые документы: вкладка кабинета и гостевая страница рисуются
   из js/docs.js. Палитра кабинета, компактное меню + статья. */
.doc-menu {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.doc-menu button {
  width: auto;
  padding: 9px 15px;
  background: rgba(255, 255, 255, 0.014);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
}
.doc-menu button:hover:not(:disabled) {
  transform: none;
  color: var(--text);
  border-color: var(--line-bronze);
  background: rgba(216, 203, 184, 0.045);
  box-shadow: none;
}
.doc-menu button[aria-current="true"] {
  color: var(--parchment);
  border-color: rgba(138, 111, 71, 0.65);
  background: rgba(138, 111, 71, 0.10);
}
.doc-article {
  max-width: 720px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
  animation: docArticleIn 0.28s ease;
}
@keyframes docArticleIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .doc-article { animation: none; }
}
.doc-article h2 {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 0 0 4px;
}
.doc-version { color: var(--muted); font-size: 12.5px; margin: 0 0 16px; }
.doc-article h3 { font-size: 15.5px; margin: 22px 0 8px; color: var(--parchment); }
.doc-article h3:first-of-type { margin-top: 14px; }
.doc-article p { margin: 0 0 10px; color: var(--muted); }
.doc-article p.doc-lead { color: var(--text); font-size: 14.5px; }
.doc-article ul { margin: 0 0 12px 20px; padding: 0; color: var(--muted); }
.doc-article li { margin-bottom: 5px; }
.doc-article li b, .doc-article p b { color: var(--text); font-weight: 600; }
.doc-article .mono { font-family: ui-monospace, monospace; font-size: 12.5px; }
.doc-table { width: 100%; border-collapse: collapse; margin: 4px 0 14px; font-size: 13.5px; }
.doc-table th, .doc-table td {
  text-align: left;
  vertical-align: top;
  padding: 9px 14px;
  border: 1px solid var(--line);
}
.doc-table th { color: var(--muted); font-weight: 600; width: 130px; background: rgba(0, 0, 0, 0.25); }
.doc-table td { color: var(--text); }

@media (max-width: 620px) {
  .doc-menu button { flex: 1 1 auto; }
  .doc-article { font-size: 13.5px; }
  .doc-table th { width: 96px; }
}

/* ================================================= CUSTOM SCROLLBAR
   Стилизация нативного scrollbar средствами CSS (без библиотек):
   тёмный трек, бронзовый thumb. Колесо, touch, перетаскивание
   и клавиатурная прокрутка работают как обычно. Firefox — через
   scrollbar-width/color, WebKit/Blink/Edge — через псевдоэлементы. */
html, body, .cab-view-scroll, .key-success-modal {
  scrollbar-width: thin;
  scrollbar-color: rgba(138, 111, 71, 0.55) rgba(0, 0, 0, 0.35);
}
html::-webkit-scrollbar, body::-webkit-scrollbar,
.cab-view-scroll::-webkit-scrollbar, .key-success-modal::-webkit-scrollbar { width: 10px; height: 10px; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track,
.cab-view-scroll::-webkit-scrollbar-track, .key-success-modal::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.35); }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb,
.cab-view-scroll::-webkit-scrollbar-thumb, .key-success-modal::-webkit-scrollbar-thumb {
  background: rgba(138, 111, 71, 0.55);
  border-radius: 6px;
  border: 2px solid rgba(0, 0, 0, 0.35);
}
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover,
.cab-view-scroll::-webkit-scrollbar-thumb:hover, .key-success-modal::-webkit-scrollbar-thumb:hover {
  background: rgba(180, 148, 96, 0.75);
}
html::-webkit-scrollbar-thumb:active, body::-webkit-scrollbar-thumb:active,
.cab-view-scroll::-webkit-scrollbar-thumb:active, .key-success-modal::-webkit-scrollbar-thumb:active {
  background: rgba(201, 98, 46, 0.8);
}

.pay-note { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-bottom: 20px; }

.pay-option {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.022);
  text-decoration: none;
  margin-bottom: 10px;
  transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ease);
}
.pay-option:hover { border-color: rgba(61, 220, 132, 0.4); background: rgba(255, 255, 255, 0.06); transform: translateX(3px); }
.pay-option .mark {
  width: 38px; height: 38px;
  border-radius: 8px;
  display: grid; place-items: center;
  flex-shrink: 0;
  background: #0e2a1c;
}
.pay-option .txt { text-align: left; }
.pay-option .txt b { display: block; font-size: 14px; font-weight: 600; }
.pay-option .txt span { font-size: 12px; color: var(--muted); }
.pay-option .arrow { margin-left: auto; color: var(--muted); transition: transform 0.25s var(--ease); }
.pay-option:hover .arrow { transform: translateX(4px); }

/* «Скоро»: колір іконки успадковується через currentColor, а не прибитий
   хардкодом у кожному svg. */
.pay-option.soon { opacity: 0.45; cursor: not-allowed; color: var(--muted-dim); }
.pay-option.soon:hover { transform: none; border-color: var(--line); background: rgba(255, 255, 255, 0.022); }
.pay-option.soon .mark { background: rgba(255, 255, 255, 0.05); }

/* Пляма теплого світла за курсором. mix-blend-mode: screen додає світло,
   а не малює поверх — тому вона не «замащує» контент, а підсвічує його. */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 420px; height: 420px;
  margin: -210px 0 0 -210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 98, 46, 0.09) 0%, rgba(156, 28, 28, 0.05) 42%, transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  transition: opacity 0.4s;
  will-change: transform;
}

/* --------------------------------------------------------------- legal */

.legal h1 { font-size: 30px; margin-bottom: 8px; }
.legal .upd { color: var(--muted); font-size: 13px; margin-bottom: 34px; }
.legal h3 { margin-top: 28px; font-size: 16px; }
.legal p, .legal li { color: var(--muted); font-size: 14px; line-height: 1.75; }
.legal ul { margin: 10px 0 0 20px; }
.legal p { margin-top: 10px; }

/* -------------------------------------------------------------- footer */

footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 34px 0 46px; }
.foot {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
}
.foot a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
.foot a:hover { color: var(--text); }
.foot .links { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap; }

.center { text-align: center; }

/* Утиліти замість style="" в розмітці: інлайнові стилі блокуються
   Content-Security-Policy без 'unsafe-inline', а саме strict-CSP — головна
   причина, чому CSS і JS взагалі винесені у файли. */
.mt { margin-top: 22px; }
.mt-0 { margin-top: 0; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.pad-page { padding-top: 56px; padding-bottom: 56px; }
.pad-legal { padding-top: 56px; padding-bottom: 40px; }

/* =========================================================== RESPONSIVE
   Атмосфера мусить лишитись, але не за рахунок UX і батареї. На вузьких
   екранах прибираємо те, що не має сенсу без мишки або з'їдає GPU при
   тому, що займає пів екрана. */

/* Тач: hover-станів немає в природі, а backdrop-filter на кількох
   поверхнях підряд — найдорожча річ у цьому файлі. */
@media (hover: none) {
  .cursor-glow { display: none; }
  .card:hover, .price:hover, .shot:hover { transform: none; }
  .card, .price { backdrop-filter: none; background: var(--panel-solid); }
}

@media (max-width: 900px) {
  .stats { gap: 30px; }
  .block { padding: 60px 0; }
  h2.sec { font-size: 24px; }
}

@media (max-width: 620px) {
  .hero { padding: 64px 0 60px; }
  /* Вугілля в hero на телефоні: сім частинок замість дванадцяти — на
     екрані 360px решта все одно накладається одна на одну. */
  .ember:nth-child(n + 8) { display: none; }
  /* Промінь із стелі розрахований на широкий екран; на вузькому він
     перетворюється у пляму через пів hero. */
  body::before { background-image: none; }

  .stats { gap: 22px 34px; margin-top: 44px; }
  .stat .n { font-size: 22px; }

  .ornament svg { width: 160px; }
  .card { padding: 18px; }
  .card::after { inset: 5px; }
  .price { padding: 22px 18px; }
  .panel { padding: 20px; }
  .legal h1 { font-size: 25px; }

  /* Кутові насічки на дрібних картках зливаються з рамкою — прибираємо. */
  .shot { border-radius: 8px; }
  .hero-actions button.auto { width: 100%; }
  .hero-actions > a { width: 100%; }
}

@media (max-width: 420px) {
  .nav { gap: 14px; padding: 12px 16px; }
  .logo { font-size: 21px; }
  .container, .narrow, .mid { padding: 0 16px; }
  .foot { flex-direction: column; align-items: flex-start; gap: 14px; }
  .foot .links { margin-left: 0; }
}

/* =========================================================== 3D ACCESS KEY */
.key-stage {
  position: relative;
  width: 250px;
  height: 144px;
  margin: 35px auto 4px;
  perspective: 900px;
  cursor: grab;
  user-select: none;
  z-index: 2;
}
.key-stage:active { cursor: grabbing; }
.key-stage::before {
  content: "";
  position: absolute;
  left: 15%; right: 15%; bottom: 10px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0,0,0,.72);
  filter: blur(14px);
  transform: rotate(-5deg);
  transition: transform .35s, opacity .35s;
}
.key-hint {
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  color: var(--muted-dim);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  opacity: .72;
}
.access-key {
  --rx: 12deg;
  --ry: -25deg;
  --rz: -5deg;
  position: absolute;
  left: 22px; top: 6px;
  width: 190px; height: 112px;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));
  transition: transform .18s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.42));
}
.access-key::after {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 18px;
  background: radial-gradient(ellipse at 50% 45%, rgba(156,28,28,.24), transparent 62%);
  transform: translateZ(-10px);
  pointer-events: none;
}
.key-face {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(216,203,184,.28);
  border-radius: 10px;
  overflow: hidden;
  backface-visibility: hidden;
  background:
    radial-gradient(circle at 78% 25%, rgba(232,56,44,.24), transparent 20%),
    linear-gradient(140deg, #2a1614, #100909 56%, #050303);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -18px 28px rgba(0,0,0,.35);
}
.key-front::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(201,98,46,.23);
  border-radius: 6px;
  background: linear-gradient(118deg, transparent 20%, rgba(255,255,255,.12) 42%, transparent 55%);
  background-size: 240% 100%;
  animation: keySheen 4.5s ease-in-out infinite;
}
@keyframes keySheen { 0%, 40% { background-position: 140% 0; } 75%, 100% { background-position: -40% 0; } }
.key-back { transform: rotateY(180deg) translateZ(2px); padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
.key-back-label { color: var(--ember); font-size: 9px; letter-spacing: .16em; }
.key-back-code { color: var(--text); font: 700 25px/1 var(--font-display); }
.key-back-copy { color: var(--muted); font-size: 10px; line-height: 1.5; }
.key-led { position: absolute; right: 18px; top: 17px; width: 7px; height: 7px; border-radius: 50%; background: #ff765f; box-shadow: 0 0 6px 2px rgba(232,56,44,.88), 0 0 18px 5px rgba(156,28,28,.42); animation: keyPulse 2.1s ease-in-out infinite; }
@keyframes keyPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.key-brand { position: absolute; left: 19px; top: 15px; color: var(--red-bright); font: 22px/1 UnifrakturMaguntia, serif; }
.key-title { position: absolute; left: 19px; bottom: 22px; color: var(--text); font: 700 14px/1.15 var(--font-display); letter-spacing: .08em; }
.key-serial { position: absolute; right: 17px; bottom: 19px; color: var(--muted); font: 8px/1 ui-monospace, monospace; letter-spacing: .1em; writing-mode: vertical-rl; transform: rotate(180deg); }
.key-screw { position: absolute; width: 5px; height: 5px; border: 1px solid rgba(216,203,184,.42); border-radius: 50%; }
.screw-a { left: 12px; bottom: 12px; }
.screw-b { right: 12px; bottom: 12px; }
.key-edge { position: absolute; background: linear-gradient(90deg, #3e211b, #120908); border: 1px solid rgba(216,203,184,.2); }
.key-edge-top, .key-edge-bottom { left: 7px; right: 7px; height: 6px; }
.key-edge-top { top: -3px; transform: rotateX(90deg) translateZ(3px); transform-origin: bottom; }
.key-edge-bottom { bottom: -3px; transform: rotateX(-90deg) translateZ(3px); transform-origin: top; }
.key-edge-left, .key-edge-right { top: 7px; bottom: 7px; width: 6px; }
.key-edge-left { left: -3px; transform: rotateY(-90deg) translateZ(3px); transform-origin: right; }
.key-edge-right { right: -3px; transform: rotateY(90deg) translateZ(3px); transform-origin: left; }
.key-usb { position: absolute; right: -26px; top: 35px; width: 28px; height: 42px; border: 1px solid rgba(216,203,184,.34); border-left: 0; border-radius: 0 5px 5px 0; background: linear-gradient(180deg, #b18a5c, #5e452f 45%, #24180f); transform: translateZ(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.key-usb i { display: block; width: 12px; height: 3px; margin: 8px 0 0 9px; border-radius: 1px; background: rgba(20,12,8,.62); }
.key-usb i + i { margin-top: 5px; }
.key-stage:focus-within .access-key { outline: 1px solid var(--ember); outline-offset: 10px; }
@media (max-width: 620px) {
  .key-stage { margin-top: 27px; transform: scale(.88); }
}
@media (prefers-reduced-motion: reduce) {
  .key-front::before, .key-led { animation: none; }
}

/* Final tuning for the 3D key prototype. */
.key-stage.rise { animation: keyStageReveal 1.05s cubic-bezier(.16,1,.3,1) .22s both; }
@keyframes keyStageReveal {
  from { opacity: 0; transform: translateY(20px) scale(.72) rotate(-5deg); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); filter: blur(0); }
}
.key-edge { display: none; }
.key-stage { height: 164px; margin-bottom: -8px; }
.key-hint { bottom: -19px; }
.key-front::before { border-color: rgba(216,203,184,.15); }
.key-stage::after {
  content: "";
  position: absolute;
  left: 50%; top: 48%;
  width: 145px; height: 70px;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: rgba(156,28,28,.16);
  filter: blur(28px);
  opacity: 0;
  animation: keyGlowIn 1.1s ease .35s both;
  pointer-events: none;
}
@keyframes keyGlowIn { from { opacity: 0; scale: .55; } to { opacity: 1; scale: 1; } }
@media (max-width: 620px) {
  .key-stage { height: 158px; margin-bottom: -4px; }
}

/* Key and payment refinements. */
.key-stage:focus-within .access-key,
.access-key:focus,
.access-key:focus-visible { outline: none; outline-offset: 0; }
.key-back-promo { color: var(--red-bright); font: 9px/1 ui-monospace, monospace; letter-spacing: .1em; }
.promo-field { margin-top: 2px; }
.promo-row { display: flex; gap: 8px; align-items: stretch; margin-bottom: 5px; }
.promo-row input { margin-bottom: 0; text-transform: uppercase; letter-spacing: .04em; }
.promo-apply { flex: 0 0 auto; width: auto; padding: 0 13px; }
.promo-status { min-height: 18px; margin: 4px 0 10px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.promo-status.warn { color: #e59a79; }
.promo-status.ok { color: #b9d7a4; }
.pay-option.pay-method { color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pay-option.pay-method .mark { color: var(--muted); }
.pay-option.blocked { opacity: .42; pointer-events: none; filter: grayscale(.55); }
.pay-option.blocked .txt span::after { content: " · промокод"; color: #e59a79; }
@media (max-width: 430px) {
  .promo-row { flex-direction: column; }
  .promo-apply { min-height: 42px; }
}

/* Readable reverse face. */
.key-face { backface-visibility: visible; }
.key-back { transform: rotateY(180deg) translateZ(2px); }
.key-back > * { transform: none; }

/* Correct face visibility: front at rest, readable artwork on the reverse. */
.key-face { backface-visibility: hidden; }
.key-back { transform: rotateY(180deg) translateZ(2px); }
.key-back > * { transform: none; }

/* Show exactly one artwork at a time: front at rest, reverse after 90°. */
.key-face { backface-visibility: visible; }
.key-back { visibility: hidden; transform: rotateY(180deg) translateZ(2px); }
.key-back > * { transform: none; }
.access-key.is-back .key-front { visibility: hidden; }
.access-key.is-back .key-back { visibility: visible; }

/* JS owns every frame of the drag/return motion; CSS must not interpolate behind it. */
.access-key { transition: none; }

/* True two-sided card test: both faces stay in the 3D stack. */
.key-face { backface-visibility: hidden; visibility: visible; }
.key-back { transform: rotateY(180deg); visibility: visible; }
.access-key.is-back .key-front,
.access-key.is-back .key-back { visibility: visible; }
.key-back { transform: translateZ(1px) rotateY(180deg); }
/* Keep the 3D context intact: parent filters flatten backface rendering. */
.access-key { filter: none; }

/* ========================================================= NAV + INTRO PASS */
.nav-links { gap: 24px; }
.nav-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
  font-size: 14.5px;
  letter-spacing: .01em;
}
/* Кнопка кабинета: фиксированный avatar 34px + текст. Размеры заданы
   контейнером — картинка их не меняет ни до, ни после загрузки. */
.account-nav {
  height: 46px;
  min-height: 46px;
  max-width: 210px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 12px 5px 5px;
  flex-shrink: 0;
  border: 1px solid rgba(138, 111, 71, 0.30);
  border-radius: 10px;
  color: var(--text);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  background:
    linear-gradient(180deg, rgba(216, 203, 184, 0.06), transparent 55%),
    rgba(10, 7, 7, 0.72);
  box-shadow: inset 0 1px 0 rgba(216, 203, 184, 0.08);
  transition: border-color .25s, background .25s, transform .25s var(--ease);
}
.account-nav:hover {
  border-color: rgba(138, 111, 71, 0.60);
  background:
    linear-gradient(180deg, rgba(216, 203, 184, 0.09), transparent 55%),
    rgba(14, 10, 9, 0.85);
  transform: translateY(-1px);
}
.account-nav:active { transform: none; }
.account-nav:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
  border-radius: 10px;
}
.account-nav[hidden] { display: none; }
.account-nav-avatar {
  position: relative;
  width: 34px;
  height: 34px;
  min-width: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
}
.account-nav-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 8px;
  border: none;
  box-sizing: border-box;
  background: transparent;
}
#accountNavAvatar {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#accountNavAvatar[data-type="steve"],
#accountNavAvatar[data-type="alex"] { image-rendering: pixelated; }
.account-nav-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}
.account-nav-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 104px;
}
.account-rank {
  padding-left: 8px;
  border-left: 1px solid rgba(216,203,184,.16);
  color: var(--ember);
  font: 10px/1 ui-monospace, monospace;
  letter-spacing: .08em;
  flex-shrink: 0;
}
#page-cabinet .cab-avatar .avatar-img-swap,
.account-nav-clip .avatar-img-swap {
  transform: scale(0.88);
  opacity: 0.15;
  transition-duration: 0.15s, 0.15s;
}
/* Временное кольцо успешной смены: только ::after внешних wrapper
   (не обрезается, т.к. у них нет overflow), один запуск, затем класс
   снимается JS — постоянной рамки не остаётся. */
.account-nav-avatar::after,
.cab-avatar::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 1px solid rgba(201, 98, 46, 0.75);
  box-shadow: 0 0 12px -4px rgba(201, 98, 46, 0.35);
  opacity: 0;
  pointer-events: none;
}
.account-nav-avatar.avatar-ring::after,
.cab-avatar.avatar-ring::after { animation: avatarRing .46s ease-out forwards; }
@keyframes avatarRing {
  from { transform: scale(0.88); opacity: 0.8; }
  to   { transform: scale(1.32); opacity: 0; }
}
#page-cabinet .cab-avatar img,
#accountNavAvatar { transition: transform .3s var(--ease), opacity .3s ease; }
@media (prefers-reduced-motion: reduce) {
  #page-cabinet .cab-avatar img,
  #accountNavAvatar { animation: none !important; transition: none !important; }
  .account-nav-avatar.avatar-ring::after,
  .cab-avatar.avatar-ring::after { animation: none !important; }
}

.intro-curtain {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse 45% 42% at 50% 48%, rgba(70,9,9,.28), var(--void) 78%);
  pointer-events: none;
  animation: introCurtainOut 1.15s cubic-bezier(.76,0,.24,1) .22s forwards;
}
.intro-mark {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border: 1px solid rgba(232,56,44,.55);
  border-radius: 50%;
  color: var(--red-bright);
  font: 26px/1 UnifrakturMaguntia, serif;
  opacity: 0;
  transform: scale(.72);
  box-shadow: 0 0 32px rgba(156,28,28,.25), inset 0 1px 0 rgba(255,255,255,.12);
  animation: introMarkIn .44s cubic-bezier(.16,1,.3,1) .1s forwards;
}
.intro-line {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 1px;
  transform: translate(-50%,-50%);
  background: linear-gradient(90deg, transparent, var(--red-bright), #f1c38a, var(--red-bright), transparent);
  box-shadow: 0 0 18px rgba(232,56,44,.78);
  animation: introLine 1.05s cubic-bezier(.16,1,.3,1) .18s forwards;
}
@keyframes introMarkIn { to { opacity:1; transform:scale(1); } }
@keyframes introLine { 0% { width:0; opacity:0; } 28% { width:220px; opacity:1; } 72% { width:440px; opacity:.9; } 100% { width:100vw; opacity:0; } }
@keyframes introCurtainOut { 0% { opacity:1; } 72% { opacity:1; } 100% { opacity:0; visibility:hidden; } }

@media (max-width: 820px) {
  .nav-links a { min-height: 44px; }
  .account-nav {
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 3px;
    gap: 0;
    border-radius: 10px;
    font-size: 12px;
  }
  .account-nav-avatar { width: 32px; height: 32px; min-width: 32px; flex-basis: 32px; }
  .account-nav-copy {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .intro-curtain { display:none; }
}

/* CTA links keep button geometry but navigate to pricing first. */
a.accent.auto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 12px 26px;
  border: 1px solid rgba(232,56,44,.30);
  border-radius: 6px;
  color: var(--text);
  background: linear-gradient(180deg, var(--red-bright) 0%, #a01d1a 55%, var(--red-dim) 100%);
  box-shadow: inset 0 1px 0 rgba(255,200,180,.18), inset 0 -1px 0 rgba(0,0,0,.5);
  text-decoration: none;
  transition: transform .18s var(--ease), background .22s, border-color .22s, box-shadow .25s;
}
a.accent.auto:hover { transform: translateY(-1px); border-color: rgba(232,56,44,.55); background: linear-gradient(180deg,#f04a3c 0%,#b12220 55%,#4a0d0d 100%); box-shadow: inset 0 1px 0 rgba(255,200,180,.24), inset 0 -1px 0 rgba(0,0,0,.5), 0 12px 30px -12px rgba(201,98,46,.9); }
a.accent.auto:active { transform: scale(.98); }
@media (max-width:620px) { .hero-actions > a.accent.auto { width:100%; } }

/* ================================================== GOTHIC 3D FOUNDATION
   Canvas — fixed fullscreen ПОД контентом (.wrap z-index:1).
   pointer-events:none: сцена никогда не перехватывает клики.
   Контент остаётся обычным поверх сцены, app.js не тронут. */
#gothic-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  display: block;
  opacity: 0.9;
}
body:not(.spatial-on):not(.in-room) #gothic-canvas,
body:not(.spatial-on):not(.in-room) #css3d-layer {
  opacity: 0;
  visibility: hidden;
}
.wrap { position: relative; z-index: 1; }
/* Фаза 6: минимальный HUD зоны. Только текст, клики не перехватывает
   (pointer-events:none), контент/модалки/панель не перекрывает (угол,
   компакт). На mobile скрыт. */
.hud-zone {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 5;
  pointer-events: none;
  font: 12px/1.4 system-ui, sans-serif;
  letter-spacing: 0.04em;
  color: rgba(232, 226, 208, 0.75);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 4px 12px;
  user-select: none;
}
.hud-zone #hudZoneState { opacity: 0.6; }
@media (max-width: 700px) {
  .hud-zone { display: none; }
}
/* Панели полупрозрачные — коридор читается сквозь них, но текст поверх. */
@media (prefers-reduced-motion: reduce) {
  #gothic-canvas { display: none; }
}

/* ============================================== ZONE SCREENS (фаза 2)
   Лендинг — «одна зона на экране»: скролл страницы заблокирован,
   каждая зона — строго высота доступной области, при переполнении
   скроллится только внутренность зоны. Кабинет и legal-страницы
   этот режим не затрагивает (классы висят только в режиме экранов).
   ВРЕМЕННАЯ механика: когда контент станет 3D-объектами, fade уберём. */
html.screens-locked,
body.screens-locked {
  overflow: hidden;
  overscroll-behavior: none;
}
body.screens-locked { height: 100dvh; }
body.screens-locked .wrap {
  height: 100dvh;
  display: flex;
  flex-direction: column;
}
body.screens-locked header { flex: 0 0 auto; }
body.screens-locked main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body.screens-locked footer { display: none; }

#page-home.screens:not(.active) { display: none; }
#page-home.screens.active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

#page-home.screens .landing-zone {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  opacity: 1;
  transform: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
#page-home.screens .landing-zone > .container,
#page-home.screens .landing-zone > .mid { width: 100%; }
/* hidden должен побеждать display:flex зоны (иначе UA-правило
   [hidden]{display:none} проигрывает специфичности и все зоны
   видны одновременно). Скрытие — только через [hidden],
   на overflow родителя как механизм скрытия не полагаемся. */
#page-home.screens .landing-zone[hidden] { display: none; }
/* Текущая секция гаснет… */
#page-home.screens .landing-zone.zone-leaving {
  opacity: 0;
  transform: scale(1.015);
  pointer-events: none;
}
/* …новая появляется, когда камера прибывает. */
#page-home.screens .landing-zone.zone-enter {
  opacity: 0;
  transform: scale(0.985) translateY(10px);
}

/* Активный пункт меню — четвёртое место свечения после ember-частиц,
   hero-CTA и навигации: тихая бронза, а не красный. */
.nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }

/* Навигация внутри зон: скромные ghost-ссылки внизу экрана по центру.
   Подхватываются существующим capture-обработчиком (переход зоны). */
.zone-nav {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
}
.zone-nav a {
  display: inline-block;
  padding: 11px 24px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.014);
  box-shadow: inset 0 1px 0 rgba(216, 203, 184, 0.04);
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
  transition: transform 0.18s var(--ease), background 0.22s, border-color 0.22s;
}
.zone-nav a:hover {
  transform: translateY(-1px);
  background: rgba(216, 203, 184, 0.045);
  border-color: var(--line-bronze);
}

/* #features в режиме экранов: заголовок + сетка 4×2 + кнопка должны
   влезать в 1080p без внутреннего скролла. Только ужатие отступов,
   десктопный вид вне режима не тронут. */
body.screens-locked #page-home.screens #features { padding: 24px 0; }
body.screens-locked #page-home.screens #features .sec-note { margin-bottom: 20px; }
body.screens-locked #page-home.screens #features .grid { gap: 12px; }
body.screens-locked #page-home.screens #features .card { padding: 18px; }
body.screens-locked #page-home.screens #features .zone-nav { margin-top: 22px; }

@media (prefers-reduced-motion: reduce) {
  #page-home.screens .landing-zone { transition: none; }
}

/* Anti-flash: прячем лендинг до инициализации режима (снимает модуль).
   visibility не ломает layout — замеры панелей для CSS3D корректны. */
.boot #page-home { visibility: hidden; }

/* Spatial-режим (фаза 4): секции уехали в CSS3D-контейнер, .wrap пуст —
   клики идут сквозь него к панелям. Шапка и открытая модалка живые. */
body.spatial-on .wrap { pointer-events: none; }
body.spatial-on header,
body.spatial-on .overlay.open { pointer-events: auto; }

/* Перспектива выпекается в matrix3d на листе — двойной просчёт
   через perspective на родителе не нужен (и под CSS3D он ломается). */
body.spatial-on .key-stage { perspective: none; }
body.spatial-on .access-key {
  /* Стартовое значение до первого кадра JS; дальше paint() пишет
     inline matrix3d с полной проекцией P(900)*Rx*Ry*Rz. */
  transform: rotateX(var(--rx)) scaleX(var(--sx, 1)) rotateZ(var(--rz));
  transform-style: flat;
}
/* Culling драйвера под CSS3D ненадёжен — гранями ведает is-back (JS). */
body.spatial-on .access-key .key-face { backface-visibility: visible; }
body.spatial-on .access-key .key-front { visibility: visible; }
body.spatial-on .access-key .key-back  { visibility: hidden; transform: scaleX(-1); }
body.spatial-on .access-key.is-back .key-front { visibility: hidden; }
body.spatial-on .access-key.is-back .key-back  { visibility: visible; }
/* Штекер НЕ переставляем: настоящий поворот в matrix3d сам уводит
   его влево на 180°, как у физической карты. */

/* В пространстве border-top .block превращается в серую полосу над
   панелью — в spatial-режиме его нет (разделы и так разделены глубиной). */
body.spatial-on .block { border-top: none; }

/* Скелет reveals в полёте (.rvp/.txp): скрыт как исходный .reveal.
   app.js observer, продолжающий дёргать узлы после переезда в CSS3D,
   своим .in на rvp ничего не включает (под .rvp.in стилей нет) —
   показ идёт только из stagger-таймера, атомарно, ровно один раз. */
body.spatial-on .rvp { opacity: 0; transform: translateY(22px); }
body.spatial-on .txp { overflow: hidden; padding-bottom: 0.08em; }
body.spatial-on .txp > span { display: inline-block; transform: translateY(105%); }

/* Spatial-ужатие высоких зон: панель ~70% кадра без кропа контента.
   Только отступы, десктоп вне режима не тронут. */
body.spatial-on #features { padding: 24px 0; }
body.spatial-on #features .sec-note { margin-bottom: 20px; }
body.spatial-on #features .grid { gap: 12px; }
body.spatial-on #features .card { padding: 18px; }
body.spatial-on #features .zone-nav { margin-top: 22px; }
body.spatial-on #gallery { padding: 24px 0; }
body.spatial-on #pricing { padding: 24px 0; }
body.spatial-on #pricing .sec-note { margin-bottom: 20px; }
body.spatial-on #pricing .price-grid { gap: 12px; }
body.spatial-on #pricing .price { padding: 20px 18px; }
body.spatial-on #pricing .price-note { margin-top: 16px; }
body.spatial-on #faq { padding: 24px 0; }
body.spatial-on .hero { padding: 48px 0 40px; }
body.spatial-on .hero p.lead { margin-bottom: 22px; }
body.spatial-on .key-stage { margin-top: 24px; }
body.spatial-on .stats { margin-top: 36px; }

/* Общий компонент «вращающийся факт» (initRotator): тарифный ряд и
   подсказка кабинета используют ОДИН набор классов .facts/.fact/.out —
   одинаковый вид и поведение, без дублирования. Одна строка
   фиксированной высоты: смена фраз не двигает layout, refit панели
   молчит. 6A.9-rev1: правила вынесены из #priceFootnote в общие. */
.facts { min-height: 1.6em; }
.facts .fact {
  display: inline-block;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.facts.out .fact { opacity: 0; transform: translateY(-6px); }

/* ================================================== CABINET (5A)
   Приватный готический executive dashboard. Всё строго под
   #page-cabinet — остальные страницы не задеты. Старые глобальные
   классы (.msg, .badge, .dot, .row, .hint, .hist, input, button)
   переиспользуются как есть; .panel здесь больше не используем. */

/* Оболочка: тёмное дерево и кожа на чистых градиентах (без картинок),
   бронзовая рама + внутренняя волосяная линия, мягкая тень. Одна
   корневая нода, стабильная ширина — готова к будущему CSS3D:
   никакого position:fixed внутри, скролл только внутри областей. */
#page-cabinet .cabinet-shell {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  padding: 34px 34px 22px;
  border: 1px solid var(--line-bronze);
  border-radius: 16px;
  background:
    radial-gradient(ellipse 90% 30% at 50% 0%, rgba(201, 98, 46, 0.06), transparent 70%),
    repeating-linear-gradient(97deg,
      rgba(255, 255, 255, 0.008) 0 2px,
      transparent 2px 7px),
    linear-gradient(172deg, #1a120d 0%, #120c0a 45%, #0b0707 100%);
  box-shadow:
    inset 0 1px 0 rgba(216, 203, 184, 0.07),
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    0 30px 70px -40px rgba(0, 0, 0, 0.9);
}
/* Внутренняя рамка-плакетка поверх фона, под контентом. */
#page-cabinet .cabinet-shell::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(138, 111, 71, 0.14);
  border-radius: 10px;
  pointer-events: none;
}
#page-cabinet .cab-velvet {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 55% 22% at 50% 0%, rgba(156, 28, 28, 0.10), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* Шапка: герб + титулы + статус. */
#page-cabinet .cab-top {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
#page-cabinet .cab-emblem {
  width: 68px;
  height: auto;
  flex-shrink: 0;
  border-radius: 14px;
  border: 1px solid rgba(138, 111, 71, 0.35);
  background: #0a0707;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.65));
}
#page-cabinet .cab-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}
#page-cabinet .cab-sub {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
#page-cabinet .cab-topside { margin-left: auto; flex-shrink: 0; }
#page-cabinet .cab-seal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
#page-cabinet .cab-seal-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bronze);
  box-shadow: 0 0 8px rgba(138, 111, 71, 0.8);
  flex-shrink: 0;
}
/* hidden обязан побеждать display (та же ловушка, что у flex-зон):
   показ/скрытие оболочек держится на hidden. */
#page-cabinet .cab-seal[hidden] { display: none; }

/* Вкладки: бронзовая строка, активная — пергамент + верхняя насечка. */
#page-cabinet .cab-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin: 14px 0 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#page-cabinet .cab-tabs::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
#page-cabinet .cab-tabs button {
  width: auto;
  flex-shrink: 0;
  padding: 12px 18px;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  position: relative;
  transition: color 0.2s;
}
#page-cabinet .cab-tabs button:hover:not(:disabled) {
  transform: none;
  background: none;
  border-color: transparent;
  box-shadow: none;
  color: var(--text);
}
#page-cabinet .cab-tabs button::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--ember), transparent);
  transform: scaleX(0);
  transition: transform 0.3s var(--ease);
}
#page-cabinet .cab-tabs button[aria-selected="true"] { color: var(--parchment); }
#page-cabinet .cab-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
#page-cabinet .cab-tabs button:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: -2px;
  border-radius: 6px;
}

/* Формы гостевых вкладок. */
#page-cabinet .cab-form { max-width: 420px; }
#page-cabinet .cab-form-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 6px;
}
#page-cabinet .cab-form-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 20px;
}
#page-cabinet input { min-height: 44px; }
#page-cabinet .cab-secure {
  margin-top: 20px;
  padding: 10px 14px 10px 12px;
  border-left: 2px solid var(--bronze);
  background: rgba(138, 111, 71, 0.07);
  border-radius: 0 8px 8px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

/* Текстовая ссылка-кнопка (без ID, по data-goto-tab). */
#page-cabinet .textbtn {
  width: auto;
  padding: 0;
  background: none;
  border: none;
  border-radius: 4px;
  box-shadow: none;
  color: var(--text);
  font-size: inherit;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.2s;
}
#page-cabinet .textbtn:hover:not(:disabled) {
  transform: none;
  background: none;
  border-color: var(--red);
  box-shadow: none;
}

/* Ссылка как primary-кнопка (восстановление → поддержка). */
#page-cabinet .cab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px;
  border: 1px solid rgba(232, 56, 44, 0.3);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--red-bright) 0%, #a01d1a 55%, var(--red-dim) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 180, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.18s var(--ease), border-color 0.22s, box-shadow 0.25s;
}
#page-cabinet .cab-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(232, 56, 44, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 180, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 12px 30px -12px rgba(201, 98, 46, 0.9);
}

/* Кнопка выхода живёт в верхней шапке кабинета (data-auth-only). */
#page-cabinet .cab-username {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#page-cabinet .cab-logout { width: auto; padding: 9px 22px; }

/* Рабочая область авторизованных вкладок: ограниченная высота,
   внутренний скролл — панель не растягивает страницу. */
#page-cabinet .cab-view-scroll { max-height: 560px; overflow-y: auto; padding-right: 4px; }
#page-cabinet .cab-pane { animation: cabPaneIn 0.32s var(--ease); }
#page-cabinet .cab-pane[hidden] { display: none; }

@keyframes cabPaneIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

#page-cabinet .cab-pane-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 6px;
}
#page-cabinet .cab-pane-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Карточки обзора. */
#page-cabinet .cab-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
#page-cabinet .cab-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    linear-gradient(168deg, rgba(22, 16, 15, 0.5) 0%, transparent 58%),
    rgba(20, 12, 12, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(216, 203, 184, 0.05),
    inset 0 0 0 1px rgba(138, 111, 71, 0.05);
}
#page-cabinet .cab-ico {
  width: 26px; height: 26px;
  flex-shrink: 0;
  color: var(--bronze);
  margin-top: 1px;
}
#page-cabinet .cab-ico svg { display: block; width: 100%; height: 100%; }
#page-cabinet .cab-k { font-size: 12px; color: var(--muted); margin-bottom: 5px; }
#page-cabinet .cab-v { font-size: 14px; font-weight: 500; line-height: 1.5; }
#page-cabinet .cab-hwidline { word-break: break-all; }
#page-cabinet .cab-hwidline-box {
  display: block;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  font-size: 13px;
}
#page-cabinet .cab-hwidline-box:empty { display: none; }

/* Ключ крупно, как лицензионный документ. */
#page-cabinet #keyInput {
  font-size: 16px;
  letter-spacing: 0.5px;
  font-family: ui-monospace, monospace;
}

/* Опасное действие визуально отделено: красная ghost-кнопка. */
#page-cabinet button.ghost.danger {
  border-color: rgba(232, 56, 44, 0.4);
  color: #ff9a8a;
  background: rgba(143, 29, 29, 0.10);
}
#page-cabinet button.ghost.danger:hover:not(:disabled) {
  border-color: rgba(232, 56, 44, 0.65);
  background: rgba(143, 29, 29, 0.18);
  color: #ffb3a8;
}

/* История: внутренний скролл, без горизонтального переполнения. */
#page-cabinet .cab-hist { max-height: 240px; }
#page-cabinet .hist-item .code { word-break: break-all; }

/* ------------------------------------------------- account tab
   Профильная страница: заголовок, строка профиля с аватаром и
   загрузкой справа, двухколоночные детали. Палитра — бронза,
   кожа, бордо и красный акцент сайта (не синий из референса). */
#page-cabinet .cab-acc-title { font-size: 22px; }
#page-cabinet .cab-acc-sub {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}
#page-cabinet .cab-profile {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 20px 0 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
#page-cabinet .cab-id {
  display: flex;
  gap: 16px;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
}
#page-cabinet .cab-avatar {
  width: 64px; height: 64px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  background: transparent;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.8);
}
#page-cabinet .cab-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
#page-cabinet .cab-avatar img[hidden] { display: none; }
/* Пиксельная чёткость только для пиксель-арта; custom — фотография. */
#page-cabinet .cab-avatar img[data-type="steve"],
#page-cabinet .cab-avatar img[data-type="alex"] { image-rendering: pixelated; }

/* Пикер пресетов: кнопки строит JS, Custom — только для DEVELOPER
   (для остальных его нет ни в DOM, ни в тексте, ни местом). */
#page-cabinet .cab-avatar-picker { margin: 2px 0 22px; }
/* Пикер аватаров — «соединённый» контрол (класс seg). Рамку, заливку и
   границы рисует .seg; здесь только контент кнопки. 6A.9-rev1. */
#page-cabinet .cab-avatar-opts { max-width: 100%; }
#page-cabinet .cab-avatar-opt {
  width: auto;
  padding: 8px 10px 7px;
  flex-direction: column;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
#page-cabinet .cab-avatar-opt:hover:not(:disabled) {
  color: var(--text);
}
#page-cabinet .cab-avatar-opt[aria-pressed="true"] {
  color: var(--parchment);
}
#page-cabinet .cab-avatar-opt img {
  width: 50px; height: 50px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: #0a0707;
}
#page-cabinet .cab-avatar-opt img[data-type="steve"],
#page-cabinet .cab-avatar-opt img[data-type="alex"] { image-rendering: pixelated; }
/* Loading выбранной карточки: приглушение (без анимации — понятно
   и при reduced-motion). Убирается по завершении своего запроса. */
#page-cabinet .cab-avatar-opt.is-loading { opacity: 0.55; }
#page-cabinet .cab-avatar-opt.is-loading img { filter: brightness(0.7); }
#page-cabinet .cab-id-text { min-width: 0; }
#page-cabinet .cab-id-text .cab-username { margin-bottom: 2px; }
#page-cabinet .cab-email {
  color: var(--muted);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
#page-cabinet .cab-rankline { margin-top: 8px; }
#page-cabinet .cab-rankline:empty { display: none; }
#page-cabinet .cab-dl {
  width: 230px;
  flex-shrink: 0;
  margin-left: auto;
}
#page-cabinet .cab-dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
#page-cabinet .cab-dl-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
#page-cabinet .cab-dl .hint { margin-top: 10px; }

#page-cabinet .cab-details-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--parchment);
  padding-left: 12px;
  border-left: 2px solid var(--bronze);
  margin-bottom: 14px;
}
#page-cabinet .cab-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 28px;
}
#page-cabinet .cab-drow {
  display: grid;
  grid-template-columns: 26px minmax(0, auto) minmax(0, 1fr);
  gap: 0 10px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
#page-cabinet .cab-drow .cab-ico { width: 20px; height: 20px; align-self: center; }
#page-cabinet .cab-drow .cab-k { white-space: nowrap; }
#page-cabinet .cab-drow .cab-v {
  text-align: right;
  word-break: break-word;
  min-width: 0;
}
#page-cabinet .cab-drow-wide { grid-column: 1 / -1; }

/* Подвал оболочки: сверху — вращающаяся подсказка, ниже — строка
   поддержки и копирайта. Столбец, чтобы смена ширины подсказки не
   двигала нижнюю строку. */
#page-cabinet .cab-foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted-dim);
  font-size: 12px;
  text-align: center;
}
#page-cabinet .cab-foot-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
#page-cabinet .cab-foot-sep { opacity: 0.5; }
/* Подсказка кабинета: зарезервированная высота, смена текста не двигает
   панель. Ширину ограничиваем, чтобы строка не растягивалась на всю
   оболочку. */
#page-cabinet .cab-hint {
  margin: 0;
  max-width: 52ch;
  color: var(--muted);
  line-height: 1.5;
}
#page-cabinet .cab-hint[hidden] { display: none; }
/* Поддержка остаётся постоянной ссылкой, копирайт — рядом. */
#page-cabinet .cab-support {
  color: var(--muted-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
#page-cabinet .cab-support:hover {
  color: var(--text);
  border-bottom-color: var(--line-bronze);
}
/* На узком экране подсказка может занять до двух строк — место
   зарезервировано, обрезки нет. */
@media (max-width: 560px) {
  #page-cabinet .cab-hint { min-height: 3em; padding: 0 4px; }
}

/* Сообщения не прячем за скроллами. */
#page-cabinet .cab-view-scroll .msg,
#page-cabinet .cab-form .msg { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  #page-cabinet .cab-pane { animation: none; }
  #page-cabinet .cab-tabs button::after { transition: none; }
  /* Подсказки кабинета используют общий компонент .facts и, как и в
     тарифах, при reduced-motion остаются статичными (ротатор не идёт). */
}

@media (max-width: 620px) {
  #page-cabinet .cabinet-shell { padding: 22px 16px 16px; border-radius: 12px; }
  #page-cabinet .cab-emblem { width: 52px; }
  #page-cabinet .cab-title { font-size: 21px; }
  #page-cabinet .cab-top { gap: 14px; }
  #page-cabinet .cab-topside { margin-left: 0; width: 100%; }
  #page-cabinet .cab-top { flex-wrap: wrap; }
  #page-cabinet .cab-tabs button { padding: 12px 14px; font-size: 12.5px; }
  #page-cabinet .cab-view-scroll { max-height: none; overflow: visible; }
  #page-cabinet .cab-cards { grid-template-columns: 1fr; }
  #page-cabinet .cab-logout { margin-left: 0; }
  #page-cabinet input { font-size: 16px; }
  #page-cabinet .cab-profile { flex-direction: column; }
  #page-cabinet .cab-dl { width: 100%; margin-left: 0; }
  #page-cabinet .cab-details { grid-template-columns: 1fr; }
  #page-cabinet .cab-avatar { width: 56px; height: 56px; }
}

/* ================================================= 5C room-3d
   Кабинет как CSS3D-плоскость в комнате: фиксированная растровая ширина,
   компактная шапка/отступы (КОНТЕНТНЫЕ шрифты не меняются — только
   paddings/margins/декор), фон — полупрозрачный (alpha в background,
   НЕ opacity контейнера: текст/поля остаются opacity:1).
   backdrop-filter — необязательное улучшение поверх читаемой подложки.
   Применяется только в 3D (класс ставит roomPanel-модуль); 2D-фолбэк
   класс снимает и возвращает обычные стили. */
#page-cabinet .cabinet-shell.room-3d {
  width: 780px;
  margin: 0;
  max-width: none;
  padding: 18px 22px 14px;
  /* Заметно прозрачный фон (комната просматривается): alpha только
     в слоях background — текст/поля остаются opacity:1. Без backdrop
     подложка сама читаема; blur — необязательное усиление. */
  background:
    radial-gradient(ellipse 90% 30% at 50% 0%, rgba(201, 98, 46, 0.08), transparent 70%),
    repeating-linear-gradient(97deg,
      rgba(255, 255, 255, 0.008) 0 2px,
      transparent 2px 7px),
    linear-gradient(172deg, rgba(26, 18, 13, 0.62), rgba(18, 12, 10, 0.66) 45%, rgba(11, 7, 7, 0.70));
}
@supports (backdrop-filter: blur(1px)) {
  #page-cabinet .cabinet-shell.room-3d {
    backdrop-filter: blur(12px) saturate(1.15);
  }
}
#page-cabinet .cabinet-shell.room-3d .cab-top { gap: 12px; padding-bottom: 8px; margin-bottom: 4px; }
#page-cabinet .cabinet-shell.room-3d .cab-emblem { width: 40px; border-radius: 10px; }
#page-cabinet .cabinet-shell.room-3d .cab-sub { font-size: 12px; }
#page-cabinet .cabinet-shell.room-3d .cab-foot { margin-top: 8px; padding-top: 6px; }
#page-cabinet .cabinet-shell.room-3d .cab-pane-note { margin-bottom: 12px; }
#page-cabinet .cabinet-shell.room-3d .sec-card { padding: 10px 12px; margin-bottom: 10px; }
#page-cabinet .cabinet-shell.room-3d .sec-desc { margin-bottom: 5px; }
#page-cabinet .cabinet-shell.room-3d .sec-actions { margin-top: 6px; }
#page-cabinet .cabinet-shell.room-3d .sec-details { margin-bottom: 8px; }
#page-cabinet .cabinet-shell.room-3d .cab-details-title { margin-bottom: 4px; }
#page-cabinet .cabinet-shell.room-3d .sec-passrow { margin-bottom: 8px; }
#page-cabinet .cabinet-shell.room-3d .sec-facts > div { padding-top: 6px; padding-bottom: 6px; }
/* Подтверждение сброса HWID вместо фактов: пока открыт confirm, факты
   скрыты (место один в один, плоскость не растёт; всё возвращается
   при отмене; только room-3d, 2D не затронут). */
#page-cabinet .cabinet-shell.room-3d #hwidCard:has(.sec-confirm:not([hidden])) .sec-facts,
#page-cabinet .cabinet-shell.room-3d #hwidCard:has(.sec-confirm:not([hidden])) .sec-actions:has(.accent) { display: none; }
/* Прокрутка длинного контента ВНУТРИ фиксированной плоскости:
   только docs/history (их штатные контейнеры), остальные вкладки
   должны влезать целиком — иначе это фиксируется как переполнение. */
#page-cabinet .cabinet-shell.room-3d #cabDocs .doc-article { max-height: 380px; overflow-y: auto; }
#page-cabinet .cabinet-shell.room-3d .cab-hist { max-height: 380px; overflow-y: auto; }

/* ================================================== 6A.9 CONNECTED BUTTONS
   Один reusable-компонент: две (и более) соседние кнопки-действия внутри
   одной общей рамки. Никакого определения действия по координате — каждый
   сегмент остаётся отдельным <button>/<a> со своим href/handler/focus/hit.
   Не применяется к вкладкам (семантика не меняется) и к независимым блокам. */

/* Обёртка навигационной пары в лендинге (заменяет .zone-nav у галереи). */
.pair-nav {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.seg {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  /* Собственный контекст наложения: псевдозаливка сегмента (z-index:-1)
     остаётся НАД фоном группы и ПОД текстом. */
  isolation: isolate;
}

.seg > * {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  margin: 0;
  padding: 11px 20px;
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  transform: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.26s ease, background-color 0.26s ease;
  /* Параметры заливки половины (переопределяет .seg-danger). */
  --seg-a: rgba(196, 66, 52, 0.22);
  --seg-b: rgba(150, 46, 40, 0.16);
}

/* Заливка половины: плотнее у внешнего края, мягко растворяется к
   внутренней грани — пространственный градиент без резкого
   прямоугольного обреза и без разрыва/двойной линии по центру.
   Внутреннего разделителя нет: половины читаются как один контрол.
   6A.9-rev1. */
.seg > *::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.26s ease;
}
.seg > :first-child::before {
  background-image: linear-gradient(
    90deg,
    var(--seg-a) 0%,
    var(--seg-b) 34%,
    rgba(0, 0, 0, 0) 100%
  );
}
.seg > :last-child::before {
  background-image: linear-gradient(
    270deg,
    var(--seg-a) 0%,
    var(--seg-b) 34%,
    rgba(0, 0, 0, 0) 100%
  );
}
/* Средняя часть (3+ кнопки, напр. аватары DEVELOPER): ровная слабая
   заливка без градиента к граням. */
.seg > *:not(:first-child):not(:last-child)::before {
  background-image: linear-gradient(90deg, var(--seg-b), var(--seg-b));
}
.seg > *:hover::before,
.seg > *:focus-visible::before,
.seg > [aria-selected="true"]::before,
.seg > [aria-pressed="true"]::before,
.seg > .on::before { opacity: 1; }
.seg > *:hover,
.seg > *:active,
.seg > *:hover:not(:disabled),
.seg > *:active:not(:disabled) {
  transform: none;
  color: #ffe6df;
  /* Гасим базовый button:hover (градиент/тень/подъём) — заливку рисует
     псевдослой сегмента, разделитель остаётся тонкой линией. */
  background: transparent;
  box-shadow: none;
  border-color: var(--line);
}
.seg > *:focus-visible {
  outline: 2px solid var(--red-bright, #e8382c);
  outline-offset: -3px; /* внутрь: рамка группы не обрезает фокус */
}
.seg > *:disabled { opacity: 0.5; cursor: default; }
.seg > *:disabled::before { opacity: 0; }

/* Опасная половина сохраняет предупреждающее оформление. */
.seg > .seg-danger {
  color: #ff9a8a;
  --seg-a: rgba(196, 66, 52, 0.26);
  --seg-b: rgba(143, 29, 29, 0.16);
}
.seg > .seg-danger:hover,
.seg > .seg-danger:focus-visible { color: #ffb3a8; }

/* Внутри кабинета сегменты компактнее (страница и CSS3D-плоскость). */
#page-cabinet .seg > * { padding: 9px 16px; min-height: 40px; }
#page-cabinet .cabinet-shell.room-3d .seg > * {
  padding: 8px 14px;
  min-height: 38px;
  font-size: 13px;
}

/* Очень узкий экран: соединяем вертикально — заливка течёт от внешнего
   края к внутреннему, разделителя нет. */
@media (max-width: 380px) {
  .seg { flex-direction: column; align-items: stretch; }
  .seg > :first-child::before {
    background-image: linear-gradient(
      180deg,
      var(--seg-a) 0%,
      var(--seg-b) 34%,
      rgba(0, 0, 0, 0) 100%
    );
  }
  .seg > :last-child::before {
    background-image: linear-gradient(
      0deg,
      var(--seg-a) 0%,
      var(--seg-b) 34%,
      rgba(0, 0, 0, 0) 100%
    );
  }
}


/* Gradient stops of the selection indicator (set by syncSeg). Registered
   as <color>, so they interpolate during the glide; inherited from .seg to
   its ::before. */
@property --seg-c0 { syntax: "<color>"; inherits: true; initial-value: rgba(150, 46, 40, 0.16); }
@property --seg-c1 { syntax: "<color>"; inherits: true; initial-value: rgba(150, 46, 40, 0.16); }
@property --seg-c2 { syntax: "<color>"; inherits: true; initial-value: rgba(150, 46, 40, 0.16); }
@property --seg-c3 { syntax: "<color>"; inherits: true; initial-value: rgba(150, 46, 40, 0.16); }
@property --seg-c4 { syntax: "<color>"; inherits: true; initial-value: rgba(150, 46, 40, 0.16); }
.seg.has-glide {
  transition:
    --seg-c0 0.32s cubic-bezier(0.22, 0.9, 0.28, 1),
    --seg-c1 0.32s cubic-bezier(0.22, 0.9, 0.28, 1),
    --seg-c2 0.32s cubic-bezier(0.22, 0.9, 0.28, 1),
    --seg-c3 0.32s cubic-bezier(0.22, 0.9, 0.28, 1),
    --seg-c4 0.32s cubic-bezier(0.22, 0.9, 0.28, 1);
}

/* 6A.11: одна рамка selected-індикатора на групу. Вона не в потоці,
   не перехоплює pointer events і не змінює layout кнопок. Анімується
   лише transform/width/height за потреби aria-стану, не за hover. */
.seg.has-glide::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--seg-w, 0px);
  height: 100%;
  z-index: -1;
  background: linear-gradient(
    var(--seg-dir, 90deg),
    var(--seg-c0) 0%,
    var(--seg-c1) 36%,
    var(--seg-c2) 50%,
    var(--seg-c3) 64%,
    var(--seg-c4) 100%
  );
  transform: translateX(var(--seg-left, 0px));
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.32s cubic-bezier(0.22, 0.9, 0.28, 1),
    width 0.32s cubic-bezier(0.22, 0.9, 0.28, 1),
    height 0.32s cubic-bezier(0.22, 0.9, 0.28, 1),
    opacity 0.18s ease;
}
.seg.has-glide.is-ready::before { opacity: 1; }

/* У selection-стані приховуємо старі псевдозаливки окремих кнопок:
   рамку малює тільки новий індикатор, а hover лишається окремо. */
.seg.has-glide > *::before { display: none; }
.seg.has-glide > * { background: transparent; }
.seg.has-glide > [aria-selected="true"],
.seg.has-glide > [aria-pressed="true"],
.seg.has-glide > .on { color: var(--parchment); }

@media (hover: hover) {
  .seg.has-glide > *:hover,
  .seg.has-glide > *:focus-visible {
    background: rgba(255, 255, 255, 0.035);
    color: #ffe6df;
  }
}

/* Вертикальний режим для вузьких екранів (<=380px): рух іде зверху
   вниз, а не зліва направо. */
.seg.has-glide.seg-vertical::before {
  width: 100%;
  height: var(--seg-h, 0px);
  transform: translateY(var(--seg-top, 0px));
}

@media (prefers-reduced-motion: reduce) {
  .seg.has-glide,
  .seg.has-glide::before { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .seg > *,
  .seg > *::before { transition: none; }
}



/* ------------------------------------------- docs notice before «Цены» */
.docs-notice {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 85;
  width: min(520px, calc(100vw - 32px));
  transform: translate(-50%, -50%);
}
.docs-notice[hidden] { display: none; }
.docs-notice.n3d {
  position: absolute;
  top: auto;
  left: auto;
  z-index: auto;
  transform: none;
}
.docs-notice-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(206, 168, 106, 0.32);
  border-radius: 16px;
  background:
    radial-gradient(90% 120% at 8% -20%, rgba(156, 28, 28, 0.26), transparent 62%),
    linear-gradient(155deg, rgba(31, 18, 17, 0.97), rgba(10, 7, 8, 0.98));
  box-shadow: 0 22px 50px -26px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 226, 180, 0.08);
}
.docs-notice-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(214, 178, 118, 0.45);
  border-radius: 50%;
  color: #e4c690;
  font: italic 600 15px/1 var(--font-display, serif);
}
.docs-notice-text {
  flex: 1 1 auto;
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
}
.docs-notice-text a {
  color: #f0d3a1;
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 211, 161, 0.5);
}
.docs-notice-text a:hover { border-bottom-color: #f0d3a1; }
.docs-notice-text a:focus-visible,
.docs-notice .accent:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; border-radius: 4px; }
.docs-notice .accent { flex: 0 0 auto; width: auto; padding: 9px 16px; white-space: nowrap; }
@media (max-width: 480px) {
  .docs-notice-card { flex-wrap: wrap; }
  .docs-notice-text { flex-basis: calc(100% - 44px); }
  .docs-notice .accent { width: 100%; }
}
/* ----------------------------------------------- ENG / RUS switch (header) */
.lang-switch {
  flex-shrink: 0;
  align-self: center;
  height: 42px;
}
.lang-switch > * {
  min-height: 40px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.lang-switch > [aria-pressed="false"] { color: var(--muted); }
@media (max-width: 820px) {
  .lang-switch { height: 40px; }
  .lang-switch > * { min-height: 38px; padding: 0 9px; font-size: 11px; letter-spacing: 0.06em; }
}
/* promo price in the payment summary: old price struck through inside the caption line,
   so the summary keeps its height */
.pay-summary-old {
  margin-right: 6px;
  color: var(--muted-dim, #6a5f4f);
  text-decoration: line-through;
  text-decoration-color: rgba(232, 56, 44, 0.8);
  letter-spacing: 0.04em;
}
.pay-summary-old[hidden] { display: none; }