/* ============================================================
   Шапка их сайта (`материал/assets/css/layout.css` +
   `components.css`) — ДОСЛОВНО, как их `.topbar`.
   Взяты только правила шапки и её деталей; палитра — наша
   через слой токенов в конце файла.
   Классы их, свои имена не придумываем: `.topbar`, `.topbar__brand`,
   `.topbar__logo`, `.topbar__back`, `.topnav`, `.topnav__link`,
   `.topbar__spacer`, `.topbar__actions`, `.nav-ibtn`, `.hwal`,
   `.balance-btn`, `.balance-btn__chev`, `.topbar__topup`, `.cur-switch`,
   `.cur-switch__btn`, `.profile-wrap`, `.topbar__avatar`, `.menu`.
   ============================================================ */

/* ── из их layout.css (146 блоков) ── */
.topbar {
  position: sticky; top: 0; z-index: var(--z-header);
  display: flex; align-items: center; flex: none;
  height: var(--header-h);
  border-bottom: 1px solid var(--line);
  background: var(--topbar-bg);
  /* CORESTYLE0928: стекло стиля 0928 (§2, §9) — шапка и нижняя панель единственные стеклянные */
  backdrop-filter: saturate(var(--glass-sat, 140%)) blur(var(--glass-blur, 16px)); -webkit-backdrop-filter: saturate(var(--glass-sat, 140%)) blur(var(--glass-blur, 16px));
}
.topbar__brand { flex: none; display: flex; align-items: center; padding: 0 28px 0 24px; }
.topbar__back { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-pill);
  background: var(--btn-secondary, rgba(255,255,255,.09)); box-shadow: inset 0 0 0 1px var(--btn-secondary-line, rgba(255,255,255,.12)); color: var(--text);
  -webkit-tap-highlight-color: transparent; transition: transform var(--dur-1) var(--ease); }
.topbar__back:active { transform: scale(.97); }
.topbar__logo { position: relative; display: block; border-radius: 8px; }
.topbar__logo::after { content: ""; position: absolute; inset: -9px -6px; }
.topbar__logo img { width: 87px; height: 32px; object-fit: contain; }
.topnav { flex: none; display: flex; align-items: center; gap: 4px; padding-left: 20px; }
.topnav__link {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--r-11);
  color: var(--text-2); font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
  position: relative;
}
.topnav__link::after { content: ""; position: absolute; inset: -2px 0; }
.topnav__link:hover { color: var(--text-2); }
.topnav__link:focus-visible { color: var(--text); background: rgba(255,255,255,.04); }
@media (hover: hover) {
.topnav__link:hover { color: var(--text); background: rgba(255,255,255,.04); }
}
/* S0929: цвет выбранного пункта меню (--nav-capsule, --nav-capsule-ring, --nav-active) — в tokens.css, сине-фиолетовый/белый, не жёлтый */
.topnav__link[aria-current="page"] { background: var(--nav-capsule); box-shadow: var(--nav-capsule-ring); color: var(--nav-active); font-weight: 700; }
.nav-ico { transition: color var(--dur-1) var(--ease), filter var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.topnav__link[aria-current="page"] .nav-ico, .tabbar__link[aria-current="page"] .nav-ico { color: var(--nav-active); }
.menu__item:hover .nav-ico, .menu__item:focus-visible .nav-ico { color: var(--nav-active); }
.topnav__link:not([aria-current="page"]) .ico-rb, .tabbar__link:not([aria-current="page"]) .ico-rb { opacity: .9; }
.topnav__link:focus-visible .ico-rb, .tabbar__link:focus-visible .ico-rb { opacity: 1; }
@media (hover: hover) {
.topnav__link:hover .ico-rb, .tabbar__link:hover .ico-rb { opacity: 1; }
}
.topnav__link .ico-rb { margin: -2px 0; }
.topnav__link[aria-current="page"] .ico-rb, .tabbar__link[aria-current="page"] .ico-rb { filter: none; }
.nav-ibtn .ico-rb, .chat-fab .ico-rb { filter: saturate(.9); }
@media (hover: hover) {
.nav-ibtn:hover .ico-rb, .chat-fab:hover .ico-rb { filter: saturate(1.1) brightness(1.06); }
}
.menu__item .ico-rb { margin: -2px 0; }
.topbar__spacer { flex: 1; min-width: 8px; }
.topbar__actions { display: flex; align-items: center; gap: 10px; padding-right: 24px; }
.topbar__chat { display: none; }
.balance-wrap { position: relative; }
.balance-btn {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px 0 14px;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-strong);
  color: var(--text); font-size: 15px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.balance-btn:hover { border-color: var(--line-hover); }
.balance-btn { position: relative; }
.balance-btn::after { content: ""; position: absolute; inset: min(0px, calc(50% - 22px)) 0; }
.balance-btn__chev { color: var(--text-3); transition: transform var(--dur-2) var(--ease); }
.balance-btn[aria-expanded="true"] .balance-btn__chev { transform: rotate(180deg); }
.balance-btn__cur { display: inline-flex; }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  width: 280px; padding: 8px; border-radius: var(--r-lg);
  background: var(--s1); border: 1px solid var(--s-line-hi); box-shadow: var(--shadow-pop);
  animation: modal-in var(--dur-2) var(--ease);
}
.topbar:has(.menu) { z-index: 60; }
.menu-scrim { position: fixed; left: 0; right: 0; top: 0; height: 100vh; height: 100dvh; z-index: 55; background: transparent; -webkit-tap-highlight-color: transparent; }
.menu__title { padding: 8px 10px 6px; font-size: 13px; font-weight: 600; color: var(--text-3); }
/* REDESIGN0927: без капса */
.menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px;
  border-radius: var(--r-10); color: var(--text); font-size: 14.5px; font-weight: 600; text-align: left;
}
.menu__item:hover { background: var(--surface-4); color: var(--text); }
.menu__item[aria-checked="true"] { background: var(--surface-active); }
.menu__item-end { margin-left: auto; color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.menu__sep { height: 1px; margin: 6px 4px; background: var(--line); }
.menu__note { padding: 6px 10px 4px; font-size: 12px; color: var(--text-3); }
.profile-wrap { position: relative; }
.topbar__avatar { display: inline-flex; border-radius: var(--r-md); position: relative; transition: transform var(--dur-1) var(--ease); }
.topbar__avatar .avatar { width: 44px; height: 44px; border-radius: var(--r-md); font-size: 16px; transition: box-shadow var(--dur-1) var(--ease); }
.topbar__avatar .avatar, .pmenu__head .avatar {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 60%), var(--surface-active);
  color: var(--text); box-shadow: inset 0 0 0 1px var(--line-btn);
}
.topbar__avatar:hover .avatar, .topbar__avatar[aria-expanded="true"] .avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(255,255,255,.22); }
/* REDESIGN0927: без жёлтой рамки */
.topbar__avatar-lvl { position: absolute; right: -6px; bottom: -6px; display: inline-flex; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.menu--profile { width: 300px; }
.pmenu__head { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r-md); color: var(--text); }
.pmenu__head:hover, .pmenu__head:focus-visible { background: var(--surface-4); color: var(--text); }
.pmenu__head .avatar { width: 44px; height: 44px; border-radius: var(--r-md); }
.pmenu__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pmenu__name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmenu__lvl { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; }
.pmenu__bal { font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.menu__item svg { flex: none; color: var(--text-3); }
.menu__item:hover svg { color: var(--text); }
.menu__item--danger { color: var(--danger-text); }
.menu__item--danger svg, .menu__item--danger:hover svg { color: var(--danger-text); }
/* LAUNCH0928: чат выключен (боевой режим без чата) — ни колонки, ни полосы с кнопкой, ни кнопки в шапке */
.app--no-chat .shell__aside, .app--no-chat .topbar__chat { display: none !important; }
.topbar__logo.is-img-fail::before, .footer__logo.is-img-fail::before {
  content: "RubUP"; position: absolute; inset: 0; display: flex; align-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1; color: var(--text); pointer-events: none;
}
.tabbar__ico .nav-ico { width: 34px; height: 34px; }
.tabbar__link[aria-current="page"] .ico-rb { transform: none; }
@media (max-width: 1199.98px) {
.topbar__chat { display: inline-flex; }.topbar__brand { width: auto; padding-left: var(--gutter); }.topbar__actions { padding-right: var(--gutter); }.topbar .cur-switch { display: none; }
}
@media (max-width: 1023.98px) {
.topnav { padding-left: 12px; gap: 2px; }.topnav__link { padding: 0 11px; }.topnav__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }.topnav__link .ico-rb { width: 22px; height: 22px; margin: 0; }.topbar__topup-label { display: none; }.topbar__topup { width: 44px; padding: 0; }
}
@media (max-width: 767.98px) {
.topbar { padding: 0 var(--gutter); background: var(--topbar-bg-m); }/* CORESTYLE0928 §9: на телефоне шапка — плавающая стеклянная капсула. Полоса шапки остаётся высотой --header-h (страница игры,
     меню и прокрутка к полям считают от неё и не сдвигаются), капсула рисуется внутри полосы псевдоэлементом */
  .topbar { padding: 6px calc(var(--gutter) + 6px) 0; background: transparent; border-bottom: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none; }.topbar::before {
    content: ""; position: absolute; left: 8px; right: 8px; top: 6px; bottom: 0; z-index: -1; pointer-events: none;
    border: 1px solid var(--glass-line, rgba(255,255,255,.14)); border-radius: var(--r-pill);
    background: var(--glass-hi, none), var(--topbar-bg-m);
    box-shadow: var(--glass-edge, none), var(--glass-shadow, none);
    -webkit-backdrop-filter: saturate(var(--glass-sat, 140%)) blur(var(--glass-blur, 16px)); backdrop-filter: saturate(var(--glass-sat, 140%)) blur(var(--glass-blur, 16px));
  }.topbar__brand { padding-left: 0; padding-right: 8px; }/* REDESIGN0927: чат — иконка 24 в кнопке 40 без рамки, точка непрочитанного */
  .topbar .nav-ibtn { background: transparent; border-color: transparent; color: var(--text-2); }.topbar .nav-ibtn:hover { background: var(--s1); border-color: transparent; color: var(--text); }.topbar .nav-ibtn .icon-btn__dot { top: 6px; right: 6px; box-shadow: 0 0 0 2px var(--bg); }.topbar__logo img { width: 71px; height: 26px; }/* CORESTYLE0928 §9: внутренняя страница — «‹» 40 px вместо логотипа */
  html[data-inner] .topbar__logo { display: none; }html[data-inner] .topbar__back { display: inline-flex; }.topnav, .topbar__search, .topbar__avatar { display: none; }.topbar__actions { gap: 8px; padding-right: 0; }.topbar .icon-btn { width: 40px; height: 40px; }.balance-btn { height: 40px; padding: 0 10px 0 12px; font-size: 14px; gap: 6px; }.topbar__topup { width: 40px; height: 40px; border-radius: var(--r-md); }.topbar__topup::after { inset: -3px -3px; }.topbar .hwal .topbar__topup::after { inset: -5px; }.topbar__login { height: 40px; padding: 0 14px; font-size: 14px; }.topbar__login-long { display: none; }/* REDESIGN0927: меню шапки на телефоне — во всю ширину под шапкой (правило вернулось из блока 374.98 в телефонный) */
  .menu { position: fixed; left: 16px; right: 16px; top: calc(var(--header-h) + 8px); width: auto; }.menu-scrim { background: rgba(5,8,15,.5); animation: rb-scrim-in var(--dur-2) var(--ease) both; }
}
.topbar__login-short { display: none; }
@media (max-width: 1599.98px) {
.topbar .cur-switch__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }.topbar .cur-switch__btn { padding: 0 10px; }
}
@media (max-width: 1599.98px) {
.topbar__login-long { display: none; }.topbar__login-short { display: inline; }
}
@media (max-width: 359.98px) {
.topbar__logo img { width: 60px; }.balance-btn { padding: 0 8px; }.topbar__brand { padding-right: 6px; }.topbar__actions { gap: 6px; }
}
@media (max-width: 1279.98px) {
.topnav { gap: 2px; padding-left: 12px; }.topnav__link { padding: 0 10px; gap: 7px; }.topbar__topup-label { display: none; }.topbar__topup { width: 44px; padding: 0; }.topbar__actions { gap: 8px; }
}
@media (min-width: 1024px) and (max-width: 1149.98px) {
.topnav { padding-left: 8px; }.topnav__link { padding: 0 8px; gap: 5px; }.topnav__link .ico-rb { width: 20px; height: 20px; margin: 0; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
.topnav { padding-left: 8px; }.topnav__link { padding: 0 7px; }
}
@media (prefers-reduced-motion: no-preference) {
.topbar { view-transition-name: rb-topbar; }
}
::view-transition-old(rb-topbar), ::view-transition-old(rb-tabbar), ::view-transition-old(rb-chat) { display: none; }
::view-transition-new(rb-topbar), ::view-transition-new(rb-tabbar), ::view-transition-new(rb-chat),
::view-transition-group(rb-topbar), ::view-transition-group(rb-tabbar), ::view-transition-group(rb-chat) { animation: none; }
/* MINIMALICONS0928: optical sizes for compact filled navigation symbols. */
.topnav__link .nav-ico { width: 32px; height: 32px; }
.topnav__link .ico-games { width: 38px; height: 38px; }
.topnav__link { height: 48px; gap: 10px; }
@media (min-width: 768px) and (max-width: 1199.98px) {
.topnav__link { padding-left: 9px; padding-right: 9px; gap: 7px; }.topnav { padding-left: 8px; }.topnav__link .nav-ico { width: 28px; height: 28px; }.topnav__link .ico-games { width: 34px; height: 34px; }
}
@media (min-width: 768px) and (max-width: 1119.98px) {
.topnav__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
}
@media (min-width: 768px) and (max-width: 899.98px) {
.topbar__brand { padding-right: 12px; }.topnav { padding-left: 0; }.topnav__link { padding-left: 5px; padding-right: 5px; }
}
/* Colour follows selection, as in the current Mini App. */
.nav-ico { transition: color 200ms ease, opacity 200ms ease; }
.topnav__link[aria-current="page"] { font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
.nav-ico { transition: none; }
}
@media (min-width: 768px) {
.topnav__link .ico__silhouette [stroke-width] { stroke-width: 1.7; }.topnav__link .ico__color-art { filter: none; opacity: 1; }
}
.tabbar .tabbar__ico--art .nav-ico { width: 36px; height: 36px; }
/* CORESTYLE0928E (DAY-PLAN-0928 п. 2–3, макет v2 партнёра): стекло — не одной большой панелью, а отдельными пилюлями и кругами.
   «Пополнить» в шапке — жёлтая пилюля ТЕКСТОМ на всех ширинах (плюса больше нет — пустой квадрат недопустим).
   Телефон: шапка без капсулы — логотип без подложки, стеклянный круг чата, стеклянная пилюля баланса (нижняя панель — см. CORESTYLE0928H). */
.topbar__topup-label { display: inline; }
.topbar .topbar__topup, .topbar .hwal .topbar__topup { width: auto; padding: 0 18px; border-radius: var(--r-pill); font-weight: 700; }
@media (max-width: 767.98px) {
.topbar::before { content: none; }/* капсулы нет — внутренний отступ капсулы (+6/+2 px) больше не нужен, край как у страницы */
  .topbar, .topbar.topbar { padding: 6px var(--gutter) 0; }.topbar__spacer { min-width: 0; }.topbar .nav-ibtn, .topbar .balance-btn {
    background: var(--glass-bg); border: 1px solid var(--glass-line); box-shadow: var(--glass-edge);
    -webkit-backdrop-filter: saturate(var(--glass-sat, 160%)) blur(var(--glass-blur, 20px)); backdrop-filter: saturate(var(--glass-sat, 160%)) blur(var(--glass-blur, 20px));
  }.topbar .nav-ibtn { width: 38px; height: 38px; border-radius: 50%; color: var(--text); }.topbar .nav-ibtn:hover { background: var(--glass-bg); border-color: var(--glass-line); }.topbar .balance-btn { height: 40px; border-radius: var(--r-pill); padding: 0 11px 0 6px; }.topbar .balance-btn__chev { display: none; }.topbar .topbar__topup, .topbar .hwal .topbar__topup { height: 40px; padding: 0 13px; font-size: 14px; }.hwal { display: flex; align-items: center; gap: 6px; }
}
@media (max-width: 767.98px) {
.topbar__logo img { width: 58px; height: 22px; }.topbar__brand { padding-right: 4px; }.topbar__actions { gap: 6px; }.topbar .balance-btn { gap: 5px; font-size: 13.5px; }.topbar .balance-btn .cur-mark { width: 22px; height: 22px; }
}
@media (max-width: 389.98px) {
.topbar .topbar__topup, .topbar .hwal .topbar__topup { padding: 0 11px; font-size: 13.5px; }.topbar .balance-btn { padding: 0 9px 0 5px; font-size: 12.5px; }.topbar__logo img { width: 54px; height: 20px; }.topbar .nav-ibtn { width: 36px; height: 36px; }
}
@media (max-width: 374.98px) {
.topbar .balance-btn .cur-mark { width: 18px; height: 18px; }.topbar .balance-btn { padding: 0 7px 0 5px; gap: 4px; }.topbar .topbar__topup, .topbar .hwal .topbar__topup { padding: 0 9px; }.topbar__actions, .hwal { gap: 4px; }
}
@media (max-width: 339.98px) {
.topbar__logo img { width: 46px; height: 17px; }.topbar .nav-ibtn { width: 34px; height: 34px; }.topbar .topbar__topup, .topbar .hwal .topbar__topup { padding: 0 9px; font-size: 13px; height: 36px; }.topbar .balance-btn { height: 36px; font-size: 12.5px; }
}
/* ── S0929 (сборщик S, закон DESIGN-0929): оболочка в едином стиле.
   Шапка ПК: пилюля баланса и «Пополнить» — пилюли (как на телефоне), без жёлтого. Нижняя панель — стеклянная капсула как была;
   выбранный пункт — сине-фиолетовая стеклянная плашка, белые значок и подпись. Правая колонка чата — фон страницы, линии --s-line. ── */
.topbar { border-bottom-color: var(--s-line); }
.balance-btn { border-radius: var(--r-pill); background: var(--s2); border-color: var(--s-line-hi); }
.topbar__avatar .avatar, .topbar__avatar { border-radius: 50%; }
.topbar .topbar__topup { color: var(--on-fill); }
.topnav__link { border-radius: var(--r-pill); }
.tabbar .tabbar__ico--line::before, .tabbar .tabbar__ico--art .nav-ico { filter: drop-shadow(0 2px 3px rgba(8,10,28,.45)); }
.tabbar .tabbar__ico--art .nav-ico { width: calc(var(--tab-art) + 4px); height: calc(var(--tab-art) + 4px); }
/* F2-S U-03 (5): шапка телефона — пилюли стекла стоят отдельно, но при прокрутке контент больше не просвечивает в промежутках:
   под пилюлями — размытая подложка цвета фона с мягким нижним краем (без полосы-«ленты»). Появляется по мере прокрутки
   первых 48 px (scroll-driven), наверху страницы её не видно — там свечение фона. Без поддержки — просто видна всегда. */
@keyframes topbar-veil-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 767.98px) {
.topbar::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -12px; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(25,29,46,.94) 0%, rgba(25,29,46,.88) 72%, rgba(25,29,46,0) 100%);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent); mask-image: linear-gradient(180deg, #000 76%, transparent);
  }
}
@media (max-width: 389.98px) {
.topbar .hwal .balance-btn { padding: 0 8px 0 2px; }.topbar .hwal .balance-btn .cur-mark { width: 24px; height: 24px; }
}
@media (max-width: 374.98px) {
.topbar .hwal .balance-btn .cur-mark { width: 20px; height: 20px; }
}
/* HEADER0929 narrow v2: на 320–359 px длинный баланс не выталкивает общую группу за край.
   Специфичность учитывает поздние стили .hwal из ui.js; новый логотип, стрелка, чат и стеклянная группа сохранены. */
@media (max-width: 359.98px) {
  .topbar .hwal .balance-btn { font-size: 13.5px; gap: 4px; padding-right: 6px; }
}
@media (max-width: 339.98px) {
.topbar .hwal .balance-btn { font-size: 12.5px; }
}
/* DC-0929 (EDGE-1): страховка длинного баланса — число сжимается и режется многоточием, «Пополнить» и аватар не выезжают за край */
.topbar .hwal { min-width: 0; flex: 0 1 auto; }
.topbar .hwal .balance-btn { min-width: 0; }
.topbar .hwal [data-balance] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .hwal .topbar__topup, .topbar .profile-wrap { flex: none; }
/* CODEX-V7: blur группы баланса создаёт containing block для fixed-меню и прячет его под scrim.
   Пока меню открыто, его фиксированные координаты считаются от окна; строки валют доступны касанию. */
.topbar .balance-wrap:has(.menu) {
  z-index: 56; -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* R6-0929 (разбор владельца №6, D2): шапка.
   1) Логотип крупнее: ПК 87×32 → 104×38, телефон 58×22 → 70×26 (390), узкие — ниже. Картинка 261×96 — хватает на DPR 2–3.
      Страховка: если справа не влезает (длинный баланс до «999 999 999» на 320–360 px), ужимается только логотип
      (до --logo-min); группа баланса на телефоне не сжимается — WebKit ставил многоточие в сумме уже при доле пикселя.
   2) Баланс — видно, что это кнопка выбора валюты: шеврон ▾ на всех ширинах (на телефоне раньше был скрыт) и своя подложка
      у суммы внутри группы [сумма ▾ | Пополнить]; нажатие открывает прежнее меню валют (data-action="balance-menu").
   3) Чат в шапке — только на главной (html[data-home] ставит app.js markBack); на ПК чат — колонка справа, как был.
   4) Телефон: аватар в шапке скрыт, а его пустая ячейка съедала 6 px промежутка — убрана, место отдано логотипу и шеврону.
   Размеры рассчитаны на худший случай демо: главная с чатом и баланс «10 000 000». */
html:not([data-home]) .topbar__chat { display: none !important; }
.topbar__logo img { width: 104px; height: 38px; }
.topbar .balance-wrap .balance-btn .balance-btn__chev { display: inline-block; flex: none; width: 16px; height: 16px; margin-left: -2px;
  stroke-width: 2.7; color: var(--text-2); }
.topbar .balance-btn:hover .balance-btn__chev, .topbar .balance-btn[aria-expanded="true"] .balance-btn__chev { color: var(--text); }
/* ревью R6 п.4: подложка суммы на ПК — такая же явная, как на телефоне (--s2 почти сливался с группой --s1) */
.topbar .hwal .balance-btn { background: rgba(255,255,255,.07); }
.topbar .hwal .balance-btn:hover, .topbar .hwal .balance-btn[aria-expanded="true"] { background: rgba(255,255,255,.11); }
@media (max-width: 767.98px) {
.topbar { --logo-w: 70px; --logo-min: 54px; }.topbar .profile-wrap { display: none; }.topbar__brand { flex: 0 1 auto; min-width: 0; }.topbar__actions { flex-shrink: 0; }.topbar__logo { flex: 0 1 auto; min-width: var(--logo-min); }.topbar__logo img { width: var(--logo-w); max-width: 100%; height: auto; }.topbar .nav-ibtn { width: 36px; height: 36px; }.topbar .hwal .balance-btn { gap: 4px; padding: 0 8px 0 3px; font-size: 14.5px; }.topbar .hwal .balance-btn .cur-mark { width: 24px; height: 24px; }.topbar .balance-wrap .balance-btn .balance-btn__chev { width: 13px; height: 13px; margin-left: 0; stroke-width: 3.2; }.topbar .hwal .topbar__topup { padding: 0 10px; font-size: 14px; }
}
@media (max-width: 389.98px) {
.topbar { --logo-w: 66px; --logo-min: 50px; }.topbar .hwal .balance-btn { font-size: 14px; padding-right: 7px; }.topbar .hwal .balance-btn .cur-mark { width: 22px; height: 22px; }.topbar .hwal .topbar__topup { padding: 0 9px; font-size: 13.5px; }
}
/* ревью R6 п.2–3: сумма на 360–389 не мельче 14 px, логотип не уже 46 px даже на 320 с чатом. Место берём у промежутков,
   отступов группы, кнопки чата (36 → 32 px; зона касания 44 — .icon-btn::after) и «Пополнить», а не у суммы и логотипа. */
@media (max-width: 374.98px) {
  .topbar { --logo-w: 60px; --logo-min: 50px; }
  .topbar__actions { gap: 5px; }
  .topbar .hwal { padding: 2px; }
  .topbar .hwal .balance-btn { gap: 3px; padding: 0 6px 0 3px; font-size: 14px; }
  .topbar .balance-wrap .balance-btn .balance-btn__chev { width: 12px; height: 12px; }
  .topbar .hwal .topbar__topup { padding: 0 8px; }
}
@media (max-width: 359.98px) {
.topbar { --logo-w: 56px; --logo-min: 46px; }.topbar__brand { padding-right: 2px; }.topbar__actions { gap: 4px; }.topbar .nav-ibtn { width: 32px; height: 32px; }.topbar .hwal .balance-btn { gap: 2px; padding: 0 5px 0 2px; font-size: 13.5px; }.topbar .hwal .balance-btn .cur-mark { width: 20px; height: 20px; }.topbar .balance-wrap .balance-btn .balance-btn__chev { width: 11px; height: 11px; }.topbar .hwal .topbar__topup { padding: 0 7px; font-size: 13px; }
}
@media (max-width: 339.98px) {
.topbar { --logo-w: 52px; --logo-min: 46px; }.topbar .hwal .balance-btn { font-size: 13px; }.topbar .hwal .topbar__topup { padding: 0 6px; }
}
/* R9-0929 (C4, разбор владельца №9: «логотип RubUP стоит неровно по соотношению ко всему, как-то в стороне»).
   1) По вертикали. В картинке логотипа под буквами «UP» — стрелка, поэтому коробка картинки стоит по оси шапки, а ось букв
      (тело «Rub» 2–82 % высоты, с хвостом «R» — 1–91 %, т. е. ≈ 42–46 %) — на 1–3 px выше оси цифр баланса, «Пополнить», «‹»
      и пунктов меню ПК. Опускаем картинку на --logo-dy: 3 px на ПК ≥1200 (логотип 44 px), 2 px на 768–1199 (38 px), 1 px на
      телефоне (18–26 px) — ось букв ложится между осью цифр и центром пилюль (±0,6 px по замеру чернил на 320–1920).
   2) По горизонтали на ПК ≥1200: логотип стоял на 24 px, а край страницы — на 32 (--gutter) — теперь на одной линии с контентом;
      промежуток логотип → меню 48 → 32 px, логотип больше не «отдельно» от ряда меню.
   3) Телефон, внутренние страницы и игры («‹ RubUP»): «‹» встаёт ровно по краю страницы (12 px, как баннеры и игра),
      логотип — через ровные ~10 px от стрелки; зона нажатия «‹» — до края экрана и по высоте шапки (≥ 40 × 44). */
.topbar { --logo-dy: 3px; }
.topbar__logo img { position: relative; top: var(--logo-dy); }
@media (min-width: 1200px) {
.topbar__brand { padding-left: var(--gutter); padding-right: 24px; }.topnav { padding-left: 8px; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
.topbar { --logo-dy: 2px; }
}
@media (max-width: 767.98px) {
.topbar { --logo-dy: 1px; }html[data-inner] .topbar__brand { gap: 0; }html[data-inner] .topbar__back { position: relative; width: 28px; margin-left: -9px; }html[data-inner] .topbar__back::after { content: ""; position: absolute; inset: -3px 0 -3px -3px; }html[data-inner] .topbar__logo::after { left: 0; }
}
/* HEADGAP0930 (владелец 30.09: «пространство между кнопками — будто слитые, но не очень; просто небольшой пробел»):
   баланс и «Пополнить» — две отдельные капсулы с зазором, без общей стеклянной подложки. После тапа баланс
   на телефоне больше не залипает тёмной заливкой наведения. */
.topbar .hwal { gap: 6px; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.topbar .hwal .balance-btn { background: var(--glass-bg, var(--s1)); border: 1px solid var(--glass-line, var(--s-line-hi)); box-shadow: var(--glass-edge, none);
  -webkit-backdrop-filter: saturate(var(--glass-sat, 160%)) blur(var(--glass-blur, 20px)); backdrop-filter: saturate(var(--glass-sat, 160%)) blur(var(--glass-blur, 20px)); }
@media (hover: none) {
.topbar .hwal .balance-btn:hover { background: var(--glass-bg, var(--s1)); }
}
@media (max-width: 767.98px) {
.topbar .hwal .balance-btn, .topbar .hwal .topbar__topup { height: 40px; }.topbar .hwal .balance-btn { padding: 0 10px 0 5px; }
}
@media (max-width: 389.98px) {
.topbar .hwal { gap: 4px; }.topbar .hwal .balance-btn { padding: 0 8px 0 4px; }
}
.menu--profile .pmenu__head {
  display: grid; grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 12px; row-gap: 4px;
}
.menu--profile .pmenu__head > .avatar { grid-column: 1; grid-row: 1 / span 3; align-self: center; }
.menu--profile .pmenu__who { display: contents; }
.menu--profile .pmenu__name {
  grid-column: 2; grid-row: 1; white-space: normal;
  overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
}
.menu--profile .pmenu__bal { grid-column: 2; grid-row: 2; }
.menu--profile .pmenu__lvl { grid-column: 2; grid-row: 3; }
@media (max-width: 767.98px) {
.topbar .profile-wrap { display: flex; }.topbar { --logo-min: 44px; }.topbar__actions { gap: 6px; }
}
/* …и в диапазоне HEADERPC1002 (от 1280 px его правила сильнее — html body .topbar …): там же ужимаем до 1440 */
@media (min-width: 1280px) and (max-width: 1439.98px) {
  html body .topbar .topnav { gap: 0; padding-left: 6px; }
  html body .topbar .topnav__link { padding: 0 8px; gap: 6px; }
  html body .topbar .topnav__label { font-size: 14px; }
  html body .topbar .topnav__link .nav-ico { width: 30px; height: 30px; }
}

/* ── из их components.css (171 блоков) ── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 44px; padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--r-md);
  font-family: var(--font-body); font-size: 15px; font-weight: 700; line-height: 1;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; }
.btn svg { display: block; }
.btn--primary {
  background: var(--primary-fill); color: var(--on-primary); font-weight: 700;
  text-shadow: none; box-shadow: var(--accent-edge);
}
.btn--primary:hover:not(:disabled) { background: var(--primary-fill-hover); color: var(--on-primary); }
.btn--primary .ico, .btn--primary svg { color: currentColor; }
.btn--primary:active:not(:disabled) { background: var(--primary-fill-press); box-shadow: var(--accent-edge); }
.btn--secondary { background: var(--surface-2); border-color: var(--line-btn); color: var(--text); font-weight: 600; }
.btn--secondary:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--line-hover); color: var(--text); }
.btn--glass { background: var(--btn-glass); border-color: var(--btn-glass-line); color: var(--on-fill); font-weight: 700; }
.btn--glass:hover:not(:disabled) { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.36); color: var(--on-fill); }
.btn--ghost { background: transparent; color: var(--text-2); font-weight: 600; }
.btn--ghost:hover:not(:disabled) { background: var(--surface); color: var(--text); }
.btn--outline { background: var(--surface); border-color: var(--line-strong); color: var(--text); font-weight: 600; }
.btn--outline:hover:not(:disabled) { border-color: var(--line-hover); color: var(--text); }
.btn--win { background: var(--win-fill); color: var(--on-fill); font-weight: 700; text-shadow: none; box-shadow: var(--win-edge), 0 6px 18px rgba(19,168,107,.2); }
.btn--win:hover:not(:disabled) { background: var(--win-fill-hover); color: var(--on-fill); }
.btn--win:active:not(:disabled) { box-shadow: var(--win-edge); }
.btn--danger { background: var(--danger-soft); border-color: rgba(255,92,122,.35); color: var(--danger-text); font-weight: 600; }
/* REDESIGN0927 (Я3): «Пополнить» — сине-фиолетовый градиент и белый текст; «Вывести» — тёмная вторичная */
.btn--deposit { background: var(--grad-deposit); color: var(--deposit-ink); font-weight: 700; border-color: rgba(255,255,255,.14); box-shadow: var(--deposit-edge), var(--deposit-glow); }
.btn--deposit:hover:not(:disabled) { background: var(--grad-deposit-hover); color: var(--deposit-ink); }
.btn--deposit:active:not(:disabled) { background: var(--grad-deposit-press); box-shadow: var(--deposit-edge); }
.btn--deposit:focus-visible { outline-color: var(--text); }
.btn--deposit .ico, .btn--deposit svg { color: currentColor; }
.btn--withdraw { background: var(--s2); border-color: var(--s-line-hi); color: var(--text-2); font-weight: 700; }
.btn--withdraw:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--line-hover); color: var(--text); }
/* цена внутри кнопки: «Забрать [47 ₽]» — приглушённая таблетка, цифры одной ширины */
.btn__price {
  display: inline-flex; align-items: center; height: 28px; margin-right: -6px; padding: 0 10px; border-radius: 10px;
  background: rgba(0,0,0,.14); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.btn--sm .btn__price { height: 24px; padding: 0 8px; font-size: 13px; border-radius: 8px; margin-right: -4px; }
/* REDESIGN0927: значок валюты (звёзды, TON) в цене — в строку с числом; общее .btn svg { display:block }
переносило его вниз */
.btn__price .cur-mark, .btn .money-i__mark { display: inline-block; }
.btn--secondary .btn__price, .btn--withdraw .btn__price, .btn--ghost .btn__price, .btn--outline .btn__price { background: rgba(255,255,255,.07); }
/* DC-0929 (S7): одна малая кнопка во всех разделах — h40, 14px 700 (локальные 36/13,5 в задачах, турнирах, друзьях сняты) */
.btn--sm { height: var(--btn-h-sm, 40px); padding: 0 14px; border-radius: var(--r-10); font-size: 14px; font-weight: 700; gap: 7px; }
.btn::after, .chip::after, .link-arrow::after { content: ""; position: absolute; inset: min(0px, calc(50% - 22px)); }
.chip, .link-arrow { position: relative; }
.btn--sm::after { content: ""; position: absolute; inset: min(0px, calc(50% - 22px)); }
.btn--lg { height: 48px; padding: 0 22px; border-radius: var(--r-lg); font-size: 15px; }
.btn--xl { height: 54px; padding: 0 30px; border-radius: var(--r-lg); font-size: 16px; }
.btn--display { font-family: var(--font-body); }
.btn--block { display: flex; width: 100%; }
.btn--square { padding: 0; width: 44px; }
.btn--lg.btn--square { width: 48px; }
.btn--xl.btn--square { width: 54px; }
.icon-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 42px; height: 42px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--text-2);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.icon-btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%,-50%); }
.icon-btn:hover { color: var(--text); border-color: var(--line-hover); }
.icon-btn--sm { width: 32px; height: 32px; border-radius: var(--r-9); background: var(--surface-4); }
.icon-btn--bare { background: transparent; border-color: transparent; }
.icon-btn--bare:hover { background: var(--surface); border-color: transparent; }
.icon-btn--accent { background: var(--primary-fill); border-color: transparent; color: var(--on-primary); box-shadow: var(--accent-edge); }
.icon-btn--accent:hover { background: var(--primary-fill-hover); border-color: transparent; color: var(--on-primary); }
.icon-btn__dot {
  position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--win); box-shadow: 0 0 0 2px var(--surface);
}
.btn-all {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 40px; padding: 0 12px 0 16px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line-strong);
  color: var(--text); font-size: 14px; font-weight: 600; white-space: nowrap;
  position: relative;
}
.btn-all::after { content: ""; position: absolute; inset: -2px 0; }
.btn-all:hover { color: var(--text); border-color: var(--line-hover); }
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; border-radius: var(--r-10);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 60%), var(--av, var(--av-1));
  color: var(--on-fill); text-shadow: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  font-family: var(--font-body); font-size: 13px; font-weight: 700; line-height: 1; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 26px; height: 26px; font-size: 12px; }
.avatar--lg { width: 44px; height: 44px; border-radius: var(--r-md); font-size: 16px; }
.avatar--xl { width: 72px; height: 72px; border-radius: var(--r-xl); font-size: 28px; }
.avatar--round { border-radius: 50%; }
.avatar--mod { background: var(--surface-active); color: var(--primary-text); }
@media (max-width: 767.98px) {
.section-head .btn-all { display: none; }
}
.gift-card__actions .btn { flex: 1; }
.win-chip {
  display: flex; align-items: center; gap: 10px; flex: none;
  width: 168px; height: 62px; padding: 0 12px 0 9px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  color: var(--text);
}
.win-chip__body { min-width: 0; }
.win-chip__title { font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-chip__title--win { color: var(--win); }
.win-chip__sub { margin-top: 2px; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-chip .game-ico, .win-chip .gift-thumb { width: 44px; height: 44px; border-radius: var(--r-md); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg,#000 84%,transparent); mask-image: linear-gradient(90deg,#000 84%,transparent); padding-right: 32px; }
.chips--scroll::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 44px; padding: 0 16px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--text-2);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--line-hover); }
.chip[aria-pressed="true"], .chip[aria-selected="true"] {
  background: var(--primary-soft); border-color: var(--primary-line); color: var(--primary-text); font-weight: 700;
}
.chip[aria-pressed="true"]:hover, .chip[aria-selected="true"]:hover { border-color: var(--primary-text); color: var(--primary-text); }
@media (max-width: 767.98px) {
.chip { padding: 0 14px; font-size: 13.5px; gap: 7px; }
}
.cur-switch {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-strong);
}
.cur-switch__btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 11px; border-radius: var(--r-9);
  font-size: 13.5px; font-weight: 600; color: var(--text-2); white-space: nowrap;
}
.cur-switch__btn::after { content: ""; position: absolute; inset: -5px 0; }
.cur-switch__btn:hover { color: var(--text); }
.cur-switch__btn[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary-text); box-shadow: inset 0 0 0 1px var(--primary-line); font-weight: 700; }
.cur-ico--stars { color: var(--accent); }
.cur-ico--ton { color: var(--ton-coin); }
.cur-ico--usdt { color: var(--usdt); }
.cur-ico--rub { color: var(--rub); }
.pay-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pay-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 12px; border-radius: var(--r-10);
  background: var(--surface-4); color: var(--text); font-size: 14px; font-weight: 600; white-space: nowrap;
}
button.pay-chip[aria-pressed="true"] { box-shadow: 0 0 0 1px var(--primary-line) inset; background: var(--primary-soft); }
@media (max-width: 767.98px) {
.pay-chip { height: 36px; font-size: 13.5px; gap: 7px; }
}
.modal__head .icon-btn:focus-visible { outline-color: rgba(255,255,255,.45); }
.modal__foot .btn { min-width: 120px; }
@media (max-width: 767.98px) {
.modal__foot .btn { flex: 1; min-width: 0; }
}
/* ───────── REDESIGN0927: общие элементы этапа 1б (ui.seg, ui.disclosure, ui.modeTile, ui.icoPlate, .tint) ───────── */
/* Тонировка раздела: 14 % цвета раздела → --s1. Цвет — класс .tone-* или свой --tone в style. */
.tint { background: linear-gradient(135deg, color-mix(in srgb, var(--tone, var(--tone-neutral)) 14%, var(--s1)) 0%, var(--s1) 72%); border: 1px solid var(--s-line); }
/* Сегмент: контейнер 44, активный — --s2 и полоса акцента снизу с мягким свечением */
.seg {
  display: inline-flex; gap: 4px; height: 44px; padding: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  border-radius: 14px; background: var(--s1); border: 1px solid var(--s-line);
}
.seg::-webkit-scrollbar { display: none; }
.seg--block { display: flex; width: 100%; }
.seg--block .seg__item { flex: 1 1 0; }
.seg__item {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 0; height: 100%; padding: 0 14px; border-radius: 10px;
  color: var(--text-3); font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.seg__item::after { content: ""; position: absolute; inset: min(0px, calc(50% - 22px)) 0; }
.seg__item::before {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 22px; height: 2px; margin-left: -11px; border-radius: 2px;
  background: var(--accent); box-shadow: none; opacity: 0; transform: scaleX(.4);
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}
@media (hover: hover) {
.seg__item:hover { color: var(--text-2); }
}
.seg__item[aria-selected="true"], .seg__item[aria-pressed="true"] { background: var(--s2); color: var(--text); font-weight: 700; }
.seg__item[aria-selected="true"]::before, .seg__item[aria-pressed="true"]::before { opacity: 1; transform: none; }
.seg__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: rgba(255,255,255,.07); color: var(--text-2); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.seg__item[aria-selected="true"] .seg__count, .seg__item[aria-pressed="true"] .seg__count { background: rgba(255,255,255,.10); color: var(--text); }
.disc__btn {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 4px;
  color: var(--text); font-size: 15px; font-weight: 600; text-align: left; -webkit-tap-highlight-color: transparent;
}
.disc__btn > .ico:first-child { color: var(--text-3); }
.disc__btn[aria-expanded="true"] .disc__chev { transform: rotate(180deg); }
@media (hover: hover) {
.disc__btn:hover .disc__chev { color: var(--text-2); }
}
/* ── CORESTYLE0928C: кнопки, сегменты и чипы стиля 0928 (owner-0928n/DESIGN-SYSTEM §4, §5) — поверх прежних правил выше.
   Кнопки — пилюли; вторичная — полупрозрачная белая .09 с линией .12; у жёлтой, синей и зелёной — обводка и тень из токенов.
   Сегмент — пилюля, активный пункт — жёлтая заливка и тёмный текст (без полоски снизу). Чип — пилюля 36, активный — жёлтый. ── */
.btn, .btn--sm, .btn--lg, .btn--xl { border-radius: var(--r-pill); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn--primary { border-color: var(--btn-primary-line, transparent); box-shadow: var(--btn-primary-shadow, var(--accent-edge)); }
.btn--secondary, .btn--outline { background: var(--btn-secondary, var(--surface-2)); border-color: var(--btn-secondary-line, var(--line-btn)); color: var(--on-btn, var(--text)); }
@media (hover: hover) {
.btn--secondary:hover:not(:disabled), .btn--outline:hover:not(:disabled) { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.2); color: var(--on-btn, var(--text)); }
}
.btn--deposit { border-color: var(--btn-deposit-line, rgba(255,255,255,.14)); box-shadow: var(--btn-deposit-shadow, var(--deposit-glow)); }
.btn--win { border-color: var(--btn-win-line, transparent); box-shadow: var(--btn-win-shadow, var(--win-edge)); }
.seg { border-radius: var(--r-pill); }
.seg__item { border-radius: var(--r-pill); color: var(--text-2); font-weight: 700; }
.seg__item::before { display: none; }
.seg__item[aria-selected="true"], .seg__item[aria-pressed="true"] {
  background: var(--primary-fill); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.seg__item[aria-selected="true"] .seg__count, .seg__item[aria-pressed="true"] .seg__count { background: rgba(0,0,0,.14); color: var(--ink); }
.chip { height: 36px; border-radius: var(--r-pill); background: var(--btn-secondary, var(--surface)); border-color: var(--btn-secondary-line, var(--line-strong)); }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--primary-fill); border-color: var(--btn-primary-line, var(--primary-line)); color: var(--ink); }
.chip[aria-pressed="true"]:hover, .chip[aria-selected="true"]:hover { border-color: var(--btn-primary-line, var(--primary-line)); color: var(--ink); }
/* CORESTYLE0928F (DAY-PLAN-0928 п. 3): переключатели разделов — ОТДЕЛЬНЫМИ пилюлями, не одной длинной полосой.
   Подложки у сегмента больше нет: каждый пункт — своя вторичная пилюля 40, выбранный — жёлтый. */
.seg { gap: 6px; height: 40px; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.seg__item { height: 40px; padding: 0 16px; background: var(--btn-secondary); border: 1px solid var(--btn-secondary-line); }
@media (hover: hover) {
.seg__item:not([aria-selected="true"]):not([aria-pressed="true"]):hover { background: rgba(255,255,255,.13); color: var(--text); }
}
.seg__item[aria-selected="true"], .seg__item[aria-pressed="true"] { background: var(--primary-fill); border-color: var(--btn-primary-line); color: var(--ink); }
/* ── S0929 (сборщик S, закон owner-0928e/DESIGN-0929): единый стиль общих компонентов — поверх правил выше.
   Кнопки ровно 4 вида (PRIMARY сине-фиолетовая / SECONDARY --s2 / WIN зелёная / DANGER красная), у всех цветных — белый текст.
   Переключатели и чипы: отдельные пилюли, неактивная --s2 + --s-line, активная — главная заливка и белый текст (не жёлтая, не тёмный текст).
   Поверхности: карточка --s1 / --s-line / 20 px, плитка --s2 / 14 px; без цветных ореолов. Текст не мельче 12 px. ── */
.btn--primary, .btn--primary:hover:not(:disabled) { color: var(--on-primary); }
.btn--secondary, .btn--outline { background: var(--btn-secondary); border-color: var(--btn-secondary-line); color: var(--text); }
@media (hover: hover) {
.btn--secondary:hover:not(:disabled), .btn--outline:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--line-hover); color: var(--text); }
}
.btn--withdraw { background: var(--btn-secondary); border-color: var(--btn-secondary-line); color: var(--text); }
.btn--ghost { color: var(--text-2); }
.btn--danger { background: var(--danger-fill); border-color: var(--btn-danger-line, transparent); color: var(--on-fill); font-weight: 700; box-shadow: var(--btn-danger-shadow, none); }
.btn--danger:hover:not(:disabled) { filter: brightness(1.06); color: var(--on-fill); }
.btn--win, .btn--win:hover:not(:disabled), .btn--deposit, .btn--deposit:hover:not(:disabled) { color: var(--on-fill); }
.btn__price { background: var(--btn-price-bg); }
:is(.btn--win, .btn--danger, .btn--deposit) .btn__price { background: var(--btn-price-bg-on-color); }
.btn--secondary .btn__price, .btn--withdraw .btn__price, .btn--ghost .btn__price, .btn--outline .btn__price { background: rgba(255,255,255,.08); }
.icon-btn { background: var(--s2); border-color: var(--s-line-hi); }
.icon-btn--sm { background: var(--s2); }
.icon-btn--bare { background: transparent; border-color: transparent; }
.icon-btn--accent { background: var(--primary-fill); border-color: transparent; color: var(--on-primary); }
/* переключатели / чипы / пресеты — §5 */
.seg__item { background: var(--s2); border-color: var(--s-line); color: var(--text-2); }
.seg__item::before { content: none; }
@media (hover: hover) {
.seg__item:not([aria-selected="true"]):not([aria-pressed="true"]):hover { background: var(--surface-hover); color: var(--text); }
}
.seg__item[aria-selected="true"], .seg__item[aria-pressed="true"] {
  background: var(--primary-fill); border-color: transparent; color: var(--on-primary); box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.seg__item[aria-selected="true"] .seg__count, .seg__item[aria-pressed="true"] .seg__count { background: rgba(255,255,255,.20); color: var(--on-primary); }
.chip { background: var(--s2); border-color: var(--s-line); color: var(--text-2); }
.chip[aria-pressed="true"], .chip[aria-selected="true"],
.chip[aria-pressed="true"]:hover, .chip[aria-selected="true"]:hover { background: var(--primary-fill); border-color: transparent; color: var(--on-primary); }
.cur-switch { border-radius: var(--r-pill); background: var(--s2); border-color: var(--s-line); }
.cur-switch__btn { border-radius: var(--r-pill); }
.cur-switch__btn[aria-pressed="true"] { background: var(--primary-fill); color: var(--on-primary); box-shadow: none; }
.pay-chip { background: var(--s2); box-shadow: inset 0 0 0 1px var(--s-line); }
.win-chip { background: var(--s1); border-color: var(--s-line); }
/* листы / окна / меню — стекло (§2) */
.modal__panel, .menu {
  background: var(--glass-sheet-bg); border-color: var(--glass-line);
  -webkit-backdrop-filter: saturate(var(--glass-sat, 160%)) blur(var(--glass-sheet-blur, 30px)); backdrop-filter: saturate(var(--glass-sat, 160%)) blur(var(--glass-sheet-blur, 30px));
}
.btn-all { height: 40px; padding: 0 4px 0 10px; border: 0; background: none; color: var(--accent); font-weight: 600; }
.btn-all:hover { color: var(--accent-hover); border: 0; }
.btn-all, .section-head__more-phone { color: var(--accent); font-size: 14px; font-weight: 600; }
/* U-02: чипы и переключатели — одно правило. Неактивная пилюля h 40: --s2 + --s-line, текст --text-2;
   активная (aria-pressed / aria-selected) — главная заливка, белый текст, без обводки и без подчёркивания. Тоже :not(#_) —
   поверх локальных копий в страницах (сиреневые обводки, --w-sel). Иконки-плитки способа оплаты (.w-mt) не трогаются. */
.chip { height: 40px; padding: 0 16px; border-radius: var(--r-pill); background: var(--s2); border: 1px solid var(--s-line); color: var(--text-2); font-weight: 600; }
@media (max-width: 767.98px) {
.chip { padding: 0 14px; }
}
.seg__item::before { content: none; display: none; }
:is(.chip, .seg__item, .tabs__tab, .preset):is([aria-pressed="true"], [aria-selected="true"]):not(#_),
:is(.chip, .seg__item, .tabs__tab, .preset):is([aria-pressed="true"], [aria-selected="true"]):hover:not(#_) {
  background: var(--primary-fill); border-color: transparent; color: var(--on-primary); box-shadow: none;
}
/* ── G4-0929 R4 (слово владельца: «Играть слева, сумма справа — абсурд»): кнопка с ценой — ОДНА подпись по центру,
   «Забрать 47 ₽» / «Оплатить 1 000 ₽»: цена сразу за словом, жирнее (Unbounded 800), без своей пилюли и без прижатия к правому краю.
   Разметка ui.btn( { price }
) прежняя (.btn--priced > .btn__price). :not(#_) — поверх локальных пилюль цены в страницах ядра
   (account .bcard__btn и т. п.); зона кейсов/игр свою цену в .btn__price не кладёт. ── */
.btn.btn--priced:not(#_) { justify-content: center; gap: .34em; }
.btn.btn--priced:not(#_) > svg:first-child, .btn.btn--priced:not(#_) > .ico:first-child { margin-right: .2em; }
.btn .btn__price:not(#_) {
  display: inline; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit;
  font-family: var(--font-display); font-size: 1.04em; font-weight: 800; letter-spacing: -.01em; line-height: 1; font-variant-numeric: tabular-nums;
}
/* A4V1-UNIFY (сверка V1: C123/C127/C130/C135 + поля ввода): переключатели .seg — промежуток 8 px по закону §5 (было 6) */
.seg { gap: 8px; }
.chat-ava .avatar { width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: 800; }


/* ── СЛОЙ ТОКЕНОВ ─────────────────────────────────────────────────────────
   Имена и значения — ИХ, из `материал/assets/css/tokens.css` (дословно),
   берём ровно те, что нужны правилам шапки. Ниже — перекраска в нашу
   палитру Altushka (розовый/фиолетовый/золото), как для раздела кошелька:
   структура, радиусы, тайминги, стекло и шрифты остаются их. */
:root {
  --accent: #F9CC52;
  --accent-edge: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 6px rgba(170,105,0,.22);
  --accent-hover: #FFE08F;
  --av-1: #5B74FE;
  --bg: #101116;
  --btn-danger-line: rgba(255,175,185,.50);
  --btn-danger-shadow: inset 0 1px 0 rgba(255,255,255,.40), 0 8px 20px rgba(255,92,122,.24);
  --btn-deposit-line: rgba(160,200,255,.50);
  --btn-deposit-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 22px rgba(47,123,255,.30);
  --btn-glass: rgba(255,255,255,.09);
  --btn-glass-line: rgba(255,255,255,.12);
  --btn-h-sm: 40px;
  --btn-price-bg: rgba(70,45,0,.14);
  --btn-price-bg-on-color: rgba(255,255,255,.20);
  --btn-primary-line: rgba(255,238,180,.70);
  --btn-primary-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 6px rgba(170,105,0,.22), 0 8px 22px rgba(249,204,82,.22);
  --btn-secondary: rgba(255,255,255,.09);
  --btn-secondary-line: rgba(255,255,255,.12);
  --btn-win-line: rgba(170,255,205,.45);
  --btn-win-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 20px rgba(34,197,94,.24);
  --danger-fill: linear-gradient(180deg, #FF6F88 0%, #E5405F 100%);
  --danger-soft: rgba(255,92,122,.12);
  --danger-text: #FF8FA3;
  --deposit-edge: inset 0 1px 0 rgba(255,255,255,.45);
  --deposit-glow: 0 8px 22px rgba(47,123,255,.30);
  --deposit-ink: #FFFFFF;
  --dur-1: 120ms;
  --dur-2: 200ms;
  --ease: cubic-bezier(.2,.7,.2,1);
  --font-body: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Unbounded', system-ui, sans-serif;
  --glass-bg: rgba(22,24,30,.58);
  --glass-blur: 20px;
  --glass-edge: inset 0 1px 0 rgba(255,255,255,.22);
  --glass-hi: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 45%, rgba(255,255,255,0) 70%);
  --glass-line: rgba(255,255,255,.14);
  --glass-sat: 160%;
  --glass-shadow: 0 12px 30px rgba(0,0,0,.35);
  --glass-sheet-bg: rgba(22,24,30,.86);
  --glass-sheet-blur: 30px;
  --grad-deposit: linear-gradient(180deg, #3F8BFF 0%, #2262F0 100%);
  --grad-deposit-hover: linear-gradient(180deg, #4F97FF 0%, #2B6CF5 100%);
  --grad-deposit-press: linear-gradient(180deg, #3579F0 0%, #1B55D8 100%);
  --gutter: 32px;
  --header-h: 64px;
  --ink: #14100A;
  --line: var(--s-line);
  --line-btn: var(--s-line-hi);
  --line-hover: rgba(255,255,255,.18);
  --line-strong: rgba(255,255,255,.10);
  --nav-active: #FFE18A;
  --nav-capsule: var(--primary-fill);
  --nav-capsule-ring: inset 0 0 0 1px rgba(176,182,255,.32);
  --on-btn: #FFFFFF;
  --on-fill: #FFFFFF;
  --on-primary: #14100A;
  --primary-fill: linear-gradient(180deg, #FFDD70 0%, #F7C43B 100%);
  --primary-fill-hover: linear-gradient(180deg, #FFE58A 0%, #FBCF4E 100%);
  --primary-fill-press: linear-gradient(180deg, #F5C53A 0%, #EDB92C 100%);
  --primary-line: rgba(255,238,180,.70);
  --primary-soft: rgba(249,204,82,.12);
  --primary-text: #F9CC52;
  --r-10: 10px;
  --r-11: 11px;
  --r-9: 9px;
  --r-lg: 14px;
  --r-md: 12px;
  --r-pill: 999px;
  --r-xl: 22px;
  --rub: #2F7BFF;
  --s-line: rgba(255,255,255,.08);
  --s-line-hi: rgba(255,255,255,.14);
  --s1: #17191F;
  --s2: #1E2129;
  --shadow-pop: 0 -20px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.16);
  --surface: var(--s1);
  --surface-2: var(--s2);
  --surface-4: var(--s2);
  --surface-active: #2A2D37;
  --surface-hover: #242731;
  --text: #F4F5F7;
  --text-2: #C9CCD6;
  --text-3: #8D919E;
  --ton-coin: #0098EA;
  --tone-neutral: #8D919E;
  --topbar-bg: rgba(22,24,30,.58);
  --topbar-bg-m: rgba(22,24,30,.62);
  --usdt: #26A17B;
  --win: #22C55E;
  --win-edge: inset 0 1px 0 rgba(255,255,255,.45);
  --win-fill: linear-gradient(180deg, #2FD070 0%, #13A366 100%);
  --win-fill-hover: linear-gradient(180deg, #3ADB7A 0%, #17AD6C 100%);
  --z-header: 40;
}

/* ── Наша палитра (перекраска их токенов) ─────────────────────────────── */
:root {
  --bg: #0a0a0f;
  --s1: #12121a;
  --s2: #16161f;
  --surface: var(--s1);
  --surface-2: var(--s2);
  --surface-4: var(--s2);
  --surface-hover: #1c1c28;
  --surface-active: #232333;
  --text: #ffffff;
  --text-2: #c9ccd6;
  --text-3: #8a8a9e;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .10);
  --line-hover: rgba(255, 255, 255, .18);
  --s-line: rgba(255, 255, 255, .08);
  --s-line-hi: rgba(255, 255, 255, .14);
  --glass-bg: rgba(12, 12, 19, .62);
  --glass-line: rgba(255, 255, 255, .12);
  --glass-sheet-bg: rgba(12, 12, 19, .9);
  --topbar-bg: rgba(12, 12, 19, .62);
  --topbar-bg-m: rgba(12, 12, 19, .66);
  --primary-text: #ff00cc;
  --primary-soft: rgba(255, 0, 204, .14);
  --primary-line: rgba(255, 0, 204, .34);
  --primary-fill: linear-gradient(180deg, #ff00cc 0%, #9d00ff 100%);
  --primary-fill-hover: linear-gradient(180deg, #ff35d8 0%, #ad2bff 100%);
  --nav-active: #ffffff;
  --nav-capsule: rgba(157, 0, 255, .22);
  --nav-capsule-ring: inset 0 0 0 1px rgba(255, 0, 204, .32);
  --accent: #ffcc00;
  --grad-deposit: linear-gradient(180deg, #ff00cc 0%, #9d00ff 100%);
  --grad-deposit-hover: linear-gradient(180deg, #ff35d8 0%, #ad2bff 100%);
  --grad-deposit-press: linear-gradient(180deg, #d100a6 0%, #7d00d6 100%);
  --btn-deposit-line: rgba(255, 255, 255, .35);
  --btn-deposit-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 22px rgba(157, 0, 255, .35);
  --deposit-glow: 0 8px 22px rgba(157, 0, 255, .35);
  --rub: #2f7bff;
  --win: #00ff88;
  --danger-text: #ff6b7f;
  --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Montserrat', system-ui, sans-serif;
}

/* Наше лого-надпись в их `.topbar__logo` (их картинку RubUP не берём:
   владелец сказал — своё лого Altushka, кнопку музыки оставляем). */
.topbar__logo-alt {
  font-weight: 900; font-size: 17px; letter-spacing: .06em; line-height: 1;
  background: linear-gradient(90deg, #ff00cc, #9d00ff 60%, #ffcc00);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  white-space: nowrap;
}
.topbar__music { margin-left: 6px; }


/* ── Наши размеры под лого-надпись (отсебятины в их правилах нет) ─────────
   Их шапка знает только картинку лого (`--logo-w`), а у нас надпись «ALTUSHKA»:
   в их блоке под телефон бренд = 75 px, надпись из него вылезала и уезжала под
   пилюлю баланса (замер 12.10.2026: бренд 75 px, действия начинались с 107 px).
   Даём бренду свой размер и убираем правый отступ у действий — под наш вьюпорт. */
.topbar__brand { flex: 0 0 auto; min-width: 0; padding: 0 12px 0 14px; }
.topbar__logo { flex: 0 0 auto; overflow: visible; }
.topbar__logo-alt { font-size: 12.5px; letter-spacing: .02em; }
/* Под 390 px с их телефонным набором (баланс + «Пополнить») бренд и пилюля
   ужимаются их же телефонными значениями — иначе наша кнопка музыки уезжала
   за край (замер: 440 px при 390). */
.topbar .hwal .balance-btn { gap: 4px; padding: 0 8px 0 6px; font-size: 14.5px; }
.topbar .hwal .topbar__topup { padding: 0 10px; font-size: 13.5px; }
.topbar .hwal .balance-btn { font-size: 14px; }
.topbar__actions { padding-right: 0; }


/* ── Под 390 px: ужимаем шапку без потери их набора ────────────────────────
   Замер: бренд 140 + действия 214 + музыка 36 + левый отступ 32 = 422 px при
   390 — наша кнопка музыки уезжала за край. Их телефонные значения (узкий
   блок ≤389.98) плюс наша музыка 34 px вместо 44 — всё влезает. */
.topbar__brand { padding: 0 8px 0 10px; }
/* Их телефонный отступ — `--gutter` = 32 px на сторону; с нашей музыкой
   этого мало (замер: 404 px при 390). Свой отступ только для нашей шапки. */
#app-topbar { padding: 6px 8px 0 10px; }
.topbar .hwal .balance-btn { gap: 4px; padding: 0 6px 0 4px; }
.topbar .hwal .topbar__topup { padding: 0 8px; font-size: 13px; }
#app-topbar #music-toggle { width: 34px; height: 34px; font-size: 16px; }


/* ── Внутренние экраны: у них лого прячется, остаётся «назад» ─────────────
   Их правило — `html[data-inner] .topbar__logo { display: none }`. У нас
   роль `data-inner` играет класс на самой шапке (его ставит `renderTopbar`). */
#app-topbar.is-inner .topbar__logo { display: none; }
.back-btn { display: none !important; }