/* Fresh Focus — главная, вариант 3. Основа варианта 1, но первый экран — стена обложек всего каталога
   в перспективе, перед ней хромированный куб в синем свете; цифры считаются, карточки бликуют при наведении. */
:root {
  --bg: #0a0c14;
  --card: #10131d;
  --card-2: #151a27;
  --line: #1b2030;
  --line-2: #262d40;
  --text: #f3f5fb;
  --muted: #99a1b4;
  --dim: #646c80;
  --blue: #3d7bff;
  --blue-hi: #7aa6ff;
  --green: #33d17a;
  --amber: #f5b142;
  --wrap: 1320px;
  /* «… Fallback» — системные шрифты, подогнанные по размеру под сайт-шрифты (css/fonts.css) */
  --display: "Unbounded", "Unbounded Fallback", "Arial Black", sans-serif;
  --ui: "Manrope", "Manrope Fallback", "Manrope Fallback Arial", "Segoe UI", system-ui, sans-serif;
  --tile-w: 190px;
  --tile-h: 119px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* скрытое скрыто всегда — иначе display у кнопок и сеток перебивает атрибут hidden */
[hidden] { display: none !important; }
/* переходы между страницами: новая страница плавно проявляется, шапка и всплывашка остаются на месте
   (Chrome, Edge, Safari; в остальных браузерах — обычный переход) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
.hd { view-transition-name: site-header; }
.mtoast.show { view-transition-name: media-toast; }
/* место под полосу прокрутки занято всегда: короткая страница, открытая картинка (lb-open) или загрузка кабинета
   не сдвигают сайт вбок на ширину полосы */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body { font-family: var(--ui); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }

/* ---------- фон сайта (js/bg.js): сверху светят мягкие синие лучи, как прожекторы над сценой, и сами медленно покачиваются;
   по углам — синий полумрак, который медленно перетекает. На мышь фон не реагирует ---------- */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* луч: внешний слой размывается и качается вокруг точки сверху, внутренний — клин света; гаснет к середине экрана,
   чтобы внизу ничего не двигалось (длинные лучи мелькали концами у нижнего края) */
.bg-beam { position: absolute; top: -14vh; left: var(--x); width: var(--w); height: 96vh; margin-left: calc(var(--w) / -2); transform-origin: 50% 0;
  filter: blur(18px); will-change: transform; animation: bgBeam var(--t) ease-in-out var(--d) infinite alternate; }
.bg-beam::before { content: ""; position: absolute; inset: 0; clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(130, 170, 255, var(--o)), rgba(61, 123, 255, calc(var(--o) * .45)) 34%, rgba(61, 123, 255, calc(var(--o) * .1)) 56%, transparent 72%); }
@keyframes bgBeam { from { transform: rotate(calc(var(--a) - var(--s))); } to { transform: rotate(calc(var(--a) + var(--s))); } }
.b1 { --x: 10%; --w: 34vw; --a: -24deg; --s: 7deg; --o: .19; --t: 17s; --d: -6s; }
.b2 { --x: 34%; --w: 22vw; --a: -6deg; --s: 9deg; --o: .12; --t: 23s; --d: -15s; }
.b3 { --x: 66%; --w: 26vw; --a: 8deg; --s: 8deg; --o: .17; --t: 19s; --d: -3s; }
.b4 { --x: 90%; --w: 36vw; --a: 26deg; --s: 6deg; --o: .2; --t: 26s; --d: -11s; }
/* сияние: холст в четверть экрана растягивается во всю ширину — края света сами становятся мягкими; к низу растворяется */
.bg-aurora { position: absolute; left: 0; top: 0; width: 100%; height: 80vh; opacity: .45;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 45%, transparent 100%); }
/* полумрак: верх чуть светлее, по углам — медленно плывущие синие пятна */
.bg-haze { position: absolute; inset: 0; background: radial-gradient(130% 55% at 50% -8%, rgba(61, 123, 255, .1), transparent 62%); }
.bg-glow { position: absolute; border-radius: 50%; will-change: transform; }
.bg-glow.g1 { top: -36vmax; right: -22vmax; width: 72vmax; height: 72vmax; background: radial-gradient(circle, rgba(61, 123, 255, .16), rgba(61, 123, 255, .05) 38%, transparent 64%); animation: bgDrift 28s ease-in-out infinite alternate; }
.bg-glow.g2 { bottom: -38vmax; left: -24vmax; width: 64vmax; height: 64vmax; background: radial-gradient(circle, rgba(96, 90, 255, .12), rgba(61, 123, 255, .04) 40%, transparent 62%); animation: bgDrift 36s ease-in-out infinite alternate-reverse; }
@keyframes bgDrift { to { transform: translate3d(-7vmax, 5vmax, 0) scale(1.1); } }
/* лёгкое зерно — чтобы мягкие переходы света не шли полосами */
.bg::after { content: ""; position: absolute; inset: 0; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { .bg-glow, .bg-beam { animation: none; } .bg-beam { transform: rotate(var(--a)); } }
svg { display: block; flex: none; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 48px); margin: 0 auto; padding: 0 24px; }
.i { width: 20px; height: 20px; }
.blue { color: var(--blue-hi); }
/* знак рубля — из основного шрифта: у Unbounded перекладина ₽ стоит на уровне чаши, а не под ней */
.rub { font-family: var(--ui); font-weight: 800; }

/* ---------- кнопки ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 14px; font-weight: 700; font-size: 15px; white-space: nowrap; transition: background .2s, border-color .2s, box-shadow .2s, transform .2s; }
.btn .i { width: 18px; height: 18px; }
.btn-blue { color: #fff; background: linear-gradient(180deg, #4b87ff, #3170f5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 24px -10px rgba(61, 123, 255, .8); }
.btn-blue:hover { background: linear-gradient(180deg, #5a91ff, #3a78fb); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 3px rgba(61, 123, 255, .22), 0 12px 30px -8px rgba(61, 123, 255, .95); }
.btn-dark { color: var(--text); background: var(--card-2); border: 1px solid var(--line-2); }
.btn-dark:hover { border-color: #3a4772; }
.btn-sm { height: 42px; padding: 0 16px; font-size: 14px; border-radius: 12px; }

/* ---------- метки ---------- */
.st { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 9px; font-size: 12.5px; font-weight: 700; white-space: nowrap; color: #c3f3d6; background: rgba(10, 12, 20, .78); border: 1px solid rgba(51, 209, 122, .28); backdrop-filter: blur(6px); }
.st i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(51, 209, 122, .8); }
.st.upd { color: #ffe3b0; border-color: rgba(245, 177, 66, .3); }
.st.upd i { background: var(--amber); box-shadow: 0 0 8px rgba(245, 177, 66, .7); }

/* ---------- шапка ---------- */
.hd { position: sticky; top: 0; z-index: 50; background: rgba(10, 12, 20, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.hd-in { height: 76px; display: flex; align-items: center; gap: 36px; }
.logo { display: flex; align-items: center; gap: 11px; flex: none; }
.logo img { width: 36px; height: 36px; }
.logo span { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: .03em; }
.logo b { color: #3d7bff; background: linear-gradient(180deg, #4b87ff, #3170f5); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; }
.nav { display: flex; align-items: center; gap: 26px; font-weight: 600; font-size: 14.5px; color: var(--muted); }
.nav a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: color .2s; }
.nav a:hover { color: #fff; }
.nav .i { width: 15px; height: 15px; }
/* смена языка в меню телефона; на компьютере — кнопка RU/EN в шапке */
.nav .nav-lang { display: none; }
.new { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; padding: 2px 5px; border-radius: 5px; color: #fff; background: var(--blue); }
.hd-r { display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* кнопка аккаунта: в разметке обе подписи, нужную выбирает html.is-auth ещё до показа страницы (js/i18n.js, js/account.js) */
.acc-cab, html.is-auth .acc-in { display: none; }
html.is-auth .acc-cab { display: inline; }
/* «Реселлер-панель» рядом с «Кабинетом» (такая же синяя кнопка) — только у тех, кому админ открыл панель (класс html.is-reseller
   ставят js/i18n.js и js/account.js); пункт «Реселлерам» (страница для будущих реселлеров) им не нужен — освобождает место в шапке */
/* баланс: виден, пока выполнен вход (html.is-auth); нажал — пополнение */
.hd-bal { display: none; align-items: center; gap: 7px; height: 42px; padding: 0 13px 0 11px; border-radius: 12px; border: 1px solid var(--line-2); color: #fff; font-weight: 800; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
html.is-auth .hd-bal { display: inline-flex; }
.hd-bal:hover { border-color: #3a4772; }
.hd-bal .i { width: 16px; height: 16px; color: var(--blue-hi); flex: none; }
/* кнопка поддержки справа снизу (js/account.js): всегда на месте, при переходе между страницами не дёргается */
.sup-fab { position: fixed; right: 20px; bottom: 20px; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; align-items: center; gap: 9px; height: 52px; padding: 0 20px 0 16px; border-radius: 26px; color: #fff; font-weight: 800; font-size: 14.5px; background: linear-gradient(180deg, #4b87ff, #2f6cf0); box-shadow: 0 14px 30px -10px rgba(34, 92, 235, .75), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .2s, filter .2s; view-transition-name: support-fab; }
.sup-fab:hover { transform: translateY(-2px); filter: brightness(1.08); }
.sup-fab .i { width: 21px; height: 21px; }
.sup-fab.has-dot::after { content: ""; position: absolute; top: 1px; right: 3px; width: 13px; height: 13px; border-radius: 50%; background: #ff5d6c; box-shadow: 0 0 0 2px #0a0c14; }
@media (max-width: 720px) {
  .sup-fab { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); justify-content: center; width: 50px; height: 50px; padding: 0; border-radius: 50%; }
  .sup-fab span { display: none; }
}
/* точка на кнопке кабинета: поддержка ответила */
[data-account-link].has-dot { position: relative; }
[data-account-link].has-dot::after { content: ""; position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: #ff5d6c; box-shadow: 0 0 0 2px #0a0c14; }
.hd-bal-add { display: grid; place-items: center; width: 22px; height: 22px; margin-right: -5px; border-radius: 8px; background: linear-gradient(180deg, #4b87ff, #3170f5); color: #fff; font-weight: 800; font-size: 15px; line-height: 1; }
.hd-panel, html.is-reseller .nav .nav-rs-info { display: none; }
html.is-reseller .hd-panel { display: inline-flex; }
.hd-panel .hp-short { display: none; }
.sq { height: 42px; min-width: 42px; padding: 0 11px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line-2); color: var(--muted); font-weight: 700; font-size: 13.5px; transition: color .2s, border-color .2s; }
.sq:hover { color: #fff; border-color: #3a4772; }
.sq .i { width: 18px; height: 18px; }
.burger { display: none; }

/* ---------- первый экран: стена обложек ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.wall-wrap { position: absolute; inset: 0; overflow: hidden; }
.wall { position: absolute; left: -12%; top: -42%; width: 150%; display: flex; flex-direction: column; gap: 10px; transform-origin: 56% 50%;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) perspective(1500px) rotateX(40deg) rotateY(-14deg) rotateZ(9deg) scale(1.08); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.wrow { display: flex; gap: 10px; width: max-content; animation: slide var(--d, 90s) linear infinite; }
.wrow.rev { animation-direction: reverse; }
@keyframes slide { to { transform: translateX(-50%); } }
.wrow i { flex: none; display: block; width: var(--tile-w); height: var(--tile-h); border-radius: 9px; background: url(../img/covers-sprite.webp) no-repeat; background-size: calc(var(--tile-w) * 12) auto; border: 1px solid rgba(255, 255, 255, .08); }
/* затемнение только там, где текст; справа стена почти как есть */
.wall-shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, #0a0c14 0%, rgba(10, 12, 20, .93) 26%, rgba(10, 12, 20, .64) 46%, rgba(10, 12, 20, .64) 70%, rgba(10, 12, 20, .72) 100%),
  linear-gradient(180deg, #0a0c14 0%, rgba(10, 12, 20, 0) 16%, rgba(10, 12, 20, .2) 62%, #0a0c14 100%); }
.wall { filter: saturate(.62); }
.sweep { position: absolute; top: -20%; bottom: -20%; left: -40%; width: 26%; transform: skewX(-14deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(120, 170, 255, .1), transparent); animation: sweep 11s ease-in-out infinite; }
@keyframes sweep { 0%, 12% { left: -40%; } 62%, 100% { left: 125%; } }
.hero-in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 24px; min-height: 720px; padding-top: 48px; padding-bottom: 60px; }
.badge { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 14px; border-radius: 10px; font-weight: 700; font-size: 13px; color: #bdf2d4; background: rgba(51, 209, 122, .1); border: 1px solid rgba(51, 209, 122, .26); backdrop-filter: blur(6px); }
.badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(51, 209, 122, .8); }
.hero h1 { margin-top: 0; font-family: var(--display); font-weight: 800; font-size: 58px; line-height: 1.1; letter-spacing: -.01em; text-shadow: 0 4px 30px rgba(0, 0, 0, .6); }
.hero-txt > p { margin-top: 18px; max-width: 520px; color: #b4bccd; font-weight: 600; font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.hero-find { display: flex; align-items: center; gap: 12px; max-width: 560px; height: 64px; margin-top: 30px; padding: 0 8px 0 20px; border-radius: 18px; background: rgba(16, 19, 29, .9); border: 1px solid var(--line-2); backdrop-filter: blur(10px); transition: border-color .2s, box-shadow .2s; }
.hero-find:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(61, 123, 255, .14); }
.hero-find > .i { color: var(--dim); }
.hero-find input { flex: 1; min-width: 0; outline: 0; font-weight: 600; font-size: 16px; }
.hero-find input::placeholder { color: var(--dim); }
.hero-find .btn { height: 48px; padding: 0 22px; border-radius: 13px; }
.hot { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.hot > span { color: var(--dim); font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.hot > div { display: flex; flex-wrap: wrap; gap: 8px; }
.hot a { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 4px; border-radius: 10px; font-weight: 700; font-size: 13px; color: #d5dbea; background: rgba(16, 19, 29, .9); border: 1px solid var(--line); transition: border-color .2s, color .2s; }
.hot a:hover { border-color: var(--blue); color: #fff; }
.hot img { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; }
/* справа — главный персонаж: хазмат-арктика из Rust с автоматом; стоит во всю высоту первого экрана,
   ноги срезает нижняя линия экрана — без растворения */
/* первый экран 720px с отступами, колонка 540px по центру: низ колонки на 96px выше нижней линии экрана */
.hero-art { position: relative; height: 540px; --char-h: 723px; --sink: 140px; }
.hero-char { position: absolute; z-index: 3; left: 56%; bottom: calc(-1 * var(--sink)); height: var(--char-h); width: auto; max-width: none; transform: translateX(-50%); pointer-events: none; }
/* за спиной — настоящий логотип Fresh Focus (хромированный куб из двух F) с горящими неоном синими полосами:
   img/ff-neon.webp — арт куба, выпрямленный (в исходнике наклон 7°), полосы светятся и подсвечивают всё вокруг;
   куб занимает 690 из 1000 px картинки, поэтому ширина = размер куба × 1000 / 690 (куб 510 px).
   Центр знака — на центре фигуры (картинка персонажа стоит на 56%, фигура в ней чуть правее середины), по высоте — грудь */
.hero-mark { position: absolute; z-index: 1; left: calc(56% + 10px); top: 47%; width: 740px; height: auto; max-width: none; transform: translate(-50%, -50%); pointer-events: none; }
.float { position: absolute; z-index: 2; width: var(--s, 64px); aspect-ratio: 1; border-radius: 16px; background-color: #111521; background-position: center; background-size: cover; background-repeat: no-repeat;
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 18px 38px rgba(0, 0, 0, .55); rotate: var(--r, 0deg); filter: saturate(.85); pointer-events: none; }
.f1 { left: 12%; top: 2%; --s: 62px; --r: -11deg; }
.f2 { left: 92%; top: 18%; --s: 54px; --r: 12deg; }
.f3 { left: 2%; top: 70%; --s: 70px; --r: 9deg; z-index: 4; }
.f4 { left: 90%; top: 62%; --s: 50px; --r: -14deg; }
@media (max-width: 1320px) and (min-width: 1025px) { .hero-art { --char-h: 703px; --sink: 125px; } }

/* ---------- цифры ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
.stat { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 122px; padding: 0 10px 0 26px; border-radius: 20px; background: linear-gradient(180deg, #121624, #0f121c); border: 1px solid var(--line); overflow: hidden; }
.stat b { display: block; font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1; white-space: nowrap; }
.stat b em { font-style: normal; }
.stat b small { margin-right: 7px; font-family: var(--ui); font-weight: 700; font-size: 15px; color: var(--muted); vertical-align: middle; }
.stat div > span { display: block; margin-top: 8px; color: var(--muted); font-weight: 600; font-size: 14px; }
.stat img { position: relative; width: 104px; height: 104px; margin-right: 4px; flex: none; }

/* ---------- разделы ---------- */
.sec { margin-top: 90px; }
.sec-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.sec-hd h2, .faq-l h2 { font-family: var(--display); font-weight: 700; font-size: 32px; letter-spacing: -.01em; }
.sec-hd p, .faq-l > p { margin-top: 10px; max-width: 560px; color: var(--muted); font-weight: 600; font-size: 15.5px; line-height: 1.55; }

/* ---------- популярные читы ---------- */
.prods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.prod { display: flex; flex-direction: column; padding: 8px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); transition: border-color .25s, transform .25s, box-shadow .25s; }
.prod:hover { border-color: rgba(61, 123, 255, .8); box-shadow: 0 0 0 1px rgba(61, 123, 255, .25), 0 18px 44px -18px rgba(61, 123, 255, .65); }
.pimg { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: #0d1120; }
.pimg img { width: 100%; height: 100%; object-fit: cover; transition: filter .3s; }
.prod:hover .pimg img { filter: brightness(1.12) saturate(1.06); }
.pimg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 12, 20, .55), transparent 45%); pointer-events: none; }
.pimg::before { content: ""; position: absolute; top: -10%; bottom: -10%; left: -70%; width: 45%; z-index: 1; transform: skewX(-18deg); pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent); transition: left .75s cubic-bezier(.2, .7, .2, 1); }
.prod:hover .pimg::before { left: 125%; }
.pimg .st { position: absolute; top: 10px; left: 10px; z-index: 2; }
.fb { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px 0 6px; border-radius: 9px; font-family: var(--display); font-weight: 700; font-size: 10.5px; letter-spacing: .05em; background: rgba(10, 12, 20, .8); border: 1px solid rgba(122, 166, 255, .35); backdrop-filter: blur(6px); }
.fb img { width: 16px; height: 16px; }
.pb { display: flex; flex-direction: column; flex: 1; padding: 14px 10px 8px; }
.pg { color: var(--dim); font-weight: 700; font-size: 12.5px; }
.pn { margin-top: 3px; font-weight: 800; font-size: 17px; line-height: 1.3; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; }
.tags span { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 8px; font-weight: 700; font-size: 12px; color: var(--muted); background: var(--card-2); border: 1px solid var(--line); }
.pf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.price { color: var(--dim); font-weight: 600; font-size: 13px; }
.price b { font-family: var(--display); font-weight: 700; font-size: 18px; color: #fff; margin: 0 2px; }
.pf .btn { height: 40px; padding: 0 18px; font-size: 14px; border-radius: 11px; }

/* ---------- каталог ---------- */
.tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
/* разделы каталога (как у elitehacks): крупные вкладки со значком и числом игр */
.cats { display: flex; gap: 6px; padding: 5px; border-radius: 16px; background: var(--card); border: 1px solid var(--line-2); }
.cats button { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px 0 14px; border-radius: 12px; font-weight: 800; font-size: 14.5px; color: var(--muted); transition: color .2s, background .2s, box-shadow .2s; }
.cats button:hover { color: #fff; }
.cats button .i { width: 20px; height: 20px; }
.cats button em { min-width: 26px; height: 22px; padding: 0 7px; border-radius: 7px; font-style: normal; font-size: 12px; line-height: 22px; text-align: center; color: var(--dim); background: rgba(255, 255, 255, .06); }
.cats button[aria-selected="true"] { color: #fff; background: linear-gradient(180deg, #4b87ff, #3170f5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 24px -12px rgba(61, 123, 255, .9); }
.cats button[aria-selected="true"] em { color: #fff; background: rgba(255, 255, 255, .2); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips button { height: 42px; padding: 0 17px; border-radius: 12px; font-weight: 700; font-size: 14px; color: var(--muted); background: var(--card); border: 1px solid var(--line); transition: color .2s, border-color .2s, background .2s; }
.chips button:hover { color: #fff; border-color: var(--line-2); }
.chips button.on { color: #fff; background: linear-gradient(180deg, #4b87ff, #3170f5); border-color: transparent; }
.cfind { display: flex; align-items: center; gap: 10px; width: 300px; height: 42px; margin-left: auto; padding: 0 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line-2); }
.cfind:focus-within { border-color: var(--blue); }
.cfind .i { width: 17px; height: 17px; color: var(--dim); }
.cfind input { flex: 1; min-width: 0; outline: 0; font-weight: 600; font-size: 14px; }
.cfind input::placeholder { color: var(--dim); }
/* карточка игры: большая обложка с названием игры поверх, ниже — «Читы для …», сколько читов, цена и «Перейти».
   Наведение не поднимает карточку — она подсвечивается */
.games { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.gcard { position: relative; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--card); border: 1px solid var(--line); transition: border-color .25s, box-shadow .25s; }
.gcard:hover { border-color: rgba(61, 123, 255, .8); box-shadow: 0 0 0 1px rgba(61, 123, 255, .25), 0 18px 44px -18px rgba(61, 123, 255, .65); }
.gcard .cv { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, #161c2c, #0d1120); }
.gcard .cv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .3s; }
.gcard:hover .cv img { filter: brightness(1.14) saturate(1.06); }
.gcard .cv::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8, 10, 18, .32), rgba(8, 10, 18, .58) 60%, rgba(16, 19, 29, .97)); }
/* карточка в разделе DMA: метка DMA в углу */
.gdma { position: absolute; z-index: 2; top: 12px; left: 12px; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 9px; font-family: var(--display); font-weight: 700; font-size: 11.5px; letter-spacing: .08em; color: #e3ecff;
  background: linear-gradient(180deg, rgba(75, 135, 255, .42), rgba(49, 112, 245, .26)); border: 1px solid rgba(125, 170, 255, .65); box-shadow: 0 0 18px rgba(61, 123, 255, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.gt { position: relative; z-index: 1; padding: 0 18px; text-align: center; font-family: var(--display); font-weight: 800; font-size: var(--fs, 24px); line-height: 1.08; text-transform: uppercase; letter-spacing: .01em; color: #fff;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .8), 0 1px 2px rgba(0, 0, 0, .6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nocv { position: absolute; inset: 0; display: grid; place-items: center; padding: 14px; text-align: center; font-family: var(--display); font-weight: 700; font-size: 14px; line-height: 1.3; color: var(--muted); background: linear-gradient(135deg, #161c2c, #0d1120); }
.gcard .st { position: absolute; z-index: 2; top: 12px; right: 12px; height: 26px; padding: 0 10px; font-size: 11.5px; }
.topb { position: absolute; z-index: 2; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: 9px; font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .07em; color: #e3ecff;
  background: linear-gradient(180deg, rgba(75, 135, 255, .42), rgba(49, 112, 245, .26)); border: 1px solid rgba(125, 170, 255, .65); box-shadow: 0 0 18px rgba(61, 123, 255, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.topb .i { width: 16px; height: 16px; color: #9fc2ff; filter: drop-shadow(0 0 4px rgba(90, 150, 255, .9)); }
/* ТОП — у читов: значок с огоньком и синяя подсветка карточки; при наведении — ярче */
.prod.top { border-color: rgba(61, 123, 255, .6); background: linear-gradient(180deg, #121a33, var(--card) 70%); box-shadow: 0 0 0 1px rgba(61, 123, 255, .2), 0 16px 42px -20px rgba(61, 123, 255, .65); }
.prod.top:hover { border-color: rgba(90, 145, 255, .95); box-shadow: 0 0 0 1px rgba(61, 123, 255, .35), 0 18px 48px -16px rgba(61, 123, 255, .8); }
.pimg .topb { top: auto; bottom: 10px; left: 10px; }
.gb { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.gname { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-weight: 800; font-size: 15.5px; line-height: 1.3; }
.gname img { flex: none; width: 40px; height: 40px; border-radius: 12px; object-fit: cover; object-position: 65% 35%; border: 1px solid var(--line-2); }
.gname span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.gcount { color: var(--dim); font-weight: 600; font-size: 13px; line-height: 1.4; }
.gcount b { font-family: var(--display); font-weight: 800; font-size: 20px; color: #fff; margin-right: 4px; }
.gcount em { font-style: normal; font-weight: 800; color: #d5dbea; }
.gfoot .btn { flex: none; height: 40px; padding: 0 14px; gap: 8px; font-size: 13.5px; border-radius: 11px; transition: background .2s, border-color .2s; }
.gfoot .btn .i { width: 15px; height: 15px; }
.gcard:hover .gfoot .btn { border-color: var(--blue); background: rgba(61, 123, 255, .16); }
/* каталог всех товаров: карточки товара в сетке, выбор игры, счётчик найденного */
.items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.items .pn { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.items .tags { margin: 10px 0 14px; }
.st.risk { color: #ffc6c6; border-color: rgba(255, 92, 92, .32); }
.st.risk i { background: #ff5c5c; box-shadow: 0 0 8px rgba(255, 92, 92, .7); }
.st.det { color: #ffc6c6; border-color: rgba(255, 70, 70, .45); }
.st.det i { background: #ff3b3b; box-shadow: 0 0 8px rgba(255, 59, 59, .8); }
.cgame { position: relative; display: flex; margin-left: auto; align-items: center; height: 42px; border-radius: 12px; background: var(--card); border: 1px solid var(--line-2); }
.cgame:focus-within { border-color: var(--blue); }
.cgame select { appearance: none; -webkit-appearance: none; height: 100%; max-width: 240px; padding: 0 38px 0 14px; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.cgame select option { color: #fff; background: #10131d; }
.cgame .i { position: absolute; right: 12px; width: 16px; height: 16px; color: var(--dim); pointer-events: none; }
.cgame + .cfind { margin-left: 0; }
.found { margin: -6px 0 16px; color: var(--dim); font-weight: 700; font-size: 13.5px; }

/* ---------- страница игры (game.html): баннер игры, ниже все читы ---------- */
/* баннер: обложка справа во всю высоту плавно уходит в тёмный фон, слева крупное название заглавными и три цифры;
   фон подкрашен размытой обложкой — у каждой игры свой оттенок */
.gban-wrap { padding-top: 22px; }
.crumbs { display: flex; align-items: center; gap: 8px; color: var(--dim); font-weight: 700; font-size: 13.5px; }
.crumbs a { color: var(--muted); transition: color .2s; }
.crumbs a:hover { color: #fff; }
.crumbs .i { width: 14px; height: 14px; transform: rotate(-90deg); }
.gban { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 360px; margin-top: 16px; border-radius: 28px; background: #0c0f19; border: 1px solid var(--line-2); box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .9); }
.gban-tint { position: absolute; inset: -30%; background: center / cover no-repeat; filter: blur(70px) saturate(1.4); opacity: .3; }
.gban-art { position: absolute; top: 0; right: 0; width: 68%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 22%, #000 48%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 22%, #000 48%); }
.gban::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(90deg, rgba(12, 15, 25, .92) 0%, rgba(12, 15, 25, .6) 38%, rgba(12, 15, 25, 0) 66%), linear-gradient(0deg, rgba(12, 15, 25, .55) 0%, transparent 38%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.gban-txt { position: relative; z-index: 1; max-width: 640px; padding: 46px 52px; }
.eyebrow { color: var(--blue); font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.gban-top { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.gban-top .st { height: 28px; }
/* заголовок страницы игры — одна фраза («Читы для» + название): обе части отдельными строками, как раньше */
.gban-h { font-size: inherit; }
.gban-h .eyebrow, .gban-h .gban-title { display: block; }
.gban-title { margin-top: 12px; font-family: var(--display); font-weight: 800; font-size: var(--fs, 52px); line-height: 1.04; letter-spacing: .005em; text-transform: uppercase; text-shadow: 0 4px 30px rgba(0, 0, 0, .55); }
.gban-stats { display: flex; flex-wrap: wrap; row-gap: 14px; margin-top: 28px; }
.gban-stats > div { padding: 0 28px; border-left: 1px solid rgba(255, 255, 255, .12); }
.gban-stats > div:first-child { padding-left: 0; border-left: 0; }
.gban-stats b { display: block; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.1; color: #fff; white-space: nowrap; }
.gban-stats span { display: block; margin-top: 7px; color: var(--muted); font-weight: 600; font-size: 13.5px; }
/* переход между обычными и DMA-читами игры */
.gswitch { display: block; transition: color .2s; }
.gswitch b { color: #9dbcff; }
.gswitch span { display: inline-flex; align-items: center; gap: 6px; color: #9dbcff; }
.gswitch .i { width: 14px; height: 14px; transition: transform .2s; }
.gswitch:hover span, .gswitch:hover b { color: #fff; }
.gswitch:hover .i { transform: translateX(3px); }
.gban.noart .gban-txt { max-width: none; }
/* официальный арт из Steam — широкий и чёткий: занимает больше места и почти не затемнён */
.gban.hero { min-height: 400px; }
.gban.hero .gban-art { width: 78%; object-position: 60% 30%; }
.gban.hero::after { background: linear-gradient(90deg, rgba(12, 15, 25, .94) 0%, rgba(12, 15, 25, .55) 34%, rgba(12, 15, 25, 0) 58%), linear-gradient(0deg, rgba(12, 15, 25, .45) 0%, transparent 34%); }
/* страница бренда (js/game.js): справа — «стена» из картинок читов бренда в перспективе, уходит в тёмный фон, как арт игры */
.gban-wall { position: absolute; top: 50%; right: -6%; width: 70%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  transform: translateY(-50%) perspective(1400px) rotateY(-16deg) rotateZ(-3deg);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 24%, #000 50%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 24%, #000 50%); }
.gban-wall img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .9); }
/* второй ряд со сдвигом, как кладка */
.gban-wall img:nth-child(n + 4) { transform: translateX(-12%); }
/* логотип бренда — над заголовком */
.gban-logo { --bl: 84px; margin-bottom: 18px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .9); }
.gsec { margin-top: 36px; }
.gsec .cfind { margin-left: auto; }

/* ---------- страница товара (product.html): слева галерея, статус и вкладки, справа покупка (липнет при прокрутке) ---------- */
.pp { padding-top: 22px; }
.pp-head { margin-top: 18px; }
.pp-name { font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1.1; overflow-wrap: anywhere; }
.pp-top { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; margin-top: 22px; }
.pp-left { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.pp-card { border-radius: 24px; background: var(--card); border: 1px solid var(--line-2); }
/* галерея: лента по две картинки 16:9 — у всех товаров одного размера (одна картинка — такого же размера, по центру); страницы — точками */
.pp-gal { padding: 18px; }
.pp-strip { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 14px) / 2); column-gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pp-strip::-webkit-scrollbar { display: none; }
.pp-gal.one .pp-strip { justify-content: center; }
.pp-shot { position: relative; aspect-ratio: 16 / 9; padding: 0; border-radius: 16px; overflow: hidden; background: #0d1120; border: 1px solid var(--line); scroll-snap-align: start; cursor: zoom-in; transition: border-color .2s, box-shadow .2s; }
.pp-shot img { width: 100%; height: 100%; object-fit: cover; transition: filter .3s; }
.pp-shot:hover { border-color: rgba(61, 123, 255, .8); box-shadow: 0 0 0 1px rgba(61, 123, 255, .25); }
.pp-shot:hover img { filter: brightness(1.12); }
.pp-play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: rgba(61, 123, 255, .9); box-shadow: 0 0 0 7px rgba(61, 123, 255, .22), 0 12px 30px rgba(0, 0, 0, .5); }
.pp-play .i { width: 22px; height: 22px; margin-left: 3px; }
.pp-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.pp-dots button { width: 7px; height: 7px; padding: 0; border-radius: 4px; background: #39415a; transition: width .25s, background .25s; }
.pp-dots button.on { width: 20px; background: var(--blue); }
/* статус и описание товара */
.pp-status { padding: 22px 24px; }
.pp-st-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
/* плитка бренда: логотип (img/brands, tools/brand_logos.js) или первая буква названия; размер — --bl */
.blogo { display: grid; place-items: center; flex: none; width: var(--bl, 52px); height: var(--bl, 52px); border-radius: calc(var(--bl, 52px) * .27); overflow: hidden;
  background: linear-gradient(160deg, #1b2236, #0c1020); border: 1px solid rgba(255, 255, 255, .1); }
.blogo img { width: 100%; height: 100%; object-fit: cover; }
/* логотип-надпись — плитка вдвое шире */
.blogo.wide { width: calc(var(--bl, 52px) * 2); }
/* без логотипа — спокойная плитка с буквой: настоящие логотипы рядом заметнее */
.blogo.mono { background: radial-gradient(120% 100% at 30% 0%, #26365f, #121a2f 70%); border-color: rgba(122, 166, 255, .3); }
.blogo.mono b { font-family: var(--display); font-weight: 800; font-size: calc(var(--bl, 52px) * .44); line-height: 1; color: #a9c4ff; }
/* бренд под ценой: логотип, название, сколько читов и игр — ссылка на все читы бренда (/brands/<бренд>/) */
.pp-brandcard { display: flex; align-items: center; gap: 14px; padding: 14px 16px; transition: border-color .2s; }
.pp-brandcard:hover { border-color: rgba(61, 123, 255, .6); }
.pp-bc-t { display: grid; flex: 1; min-width: 0; }
.pp-bc-t small { color: var(--dim); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.pp-bc-t b { margin-top: 2px; font-family: var(--display); font-weight: 800; font-size: 18px; line-height: 1.2; overflow-wrap: anywhere; }
.pp-bc-t span { margin-top: 3px; color: var(--muted); font-weight: 600; font-size: 13px; }
.pp-brandcard > .i { flex: none; width: 18px; height: 18px; color: var(--blue-hi); transition: transform .2s; }
.pp-brandcard:hover > .i { transform: translateX(3px); }
.pp-st { display: inline-flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; color: #55e397; }
.pp-st i { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(51, 209, 122, .15), 0 0 16px rgba(51, 209, 122, .9); }
.pp-st.upd { color: #ffc56b; }
.pp-st.upd i { background: var(--amber); box-shadow: 0 0 0 4px rgba(245, 177, 66, .15), 0 0 16px rgba(245, 177, 66, .85); }
.pp-st.risk { color: #ff8a8a; }
.pp-st.risk i { background: #ff5c5c; box-shadow: 0 0 0 4px rgba(255, 92, 92, .15), 0 0 16px rgba(255, 92, 92, .85); }
.pp-st.det { color: #ff8a8a; }
.pp-st.det i { background: #ff3b3b; box-shadow: 0 0 0 4px rgba(255, 59, 59, .15), 0 0 16px rgba(255, 59, 59, .85); }
.pp-st-row .topb { position: static; }
.pp-about { margin-top: 14px; color: #c3cad9; font-weight: 500; font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.pp-about p + p { margin-top: 12px; }
.pp-about.clamp { max-height: calc(1.7em * 7); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.pp-more { margin-top: 10px; padding: 0; color: #8fb4ff; font-weight: 700; font-size: 14px; transition: color .2s; }
.pp-more:hover { color: #fff; }
/* вкладки */
.pp-tabs-card { padding: 18px; }
.pp-tabs { display: flex; justify-content: center; gap: 6px; padding: 6px; border-radius: 16px; background: var(--card-2); }
.pp-tabs button { position: relative; height: 44px; padding: 0 18px; border-radius: 12px; font-weight: 700; font-size: 14.5px; color: var(--muted); white-space: nowrap; transition: color .2s; }
.pp-tabs button:hover { color: #fff; }
.pp-tabs button[aria-selected="true"] { color: #fff; }
.pp-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--blue); box-shadow: 0 0 10px rgba(61, 123, 255, .8); }
.pp-pane { margin-top: 16px; }
/* функции по разделам: раскрываются по клику, первый раздел открыт */
.pp-acc { display: grid; gap: 10px; }
.pp-grp { border-radius: 16px; background: var(--card-2); border: 1px solid var(--line); overflow: hidden; transition: border-color .2s; }
.pp-grp[open] { border-color: var(--line-2); }
.pp-grp summary { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 18px; cursor: pointer; list-style: none; }
.pp-grp summary::-webkit-details-marker { display: none; }
.pp-grp summary:hover .pp-grp-ch { color: #fff; }
.pp-grp-ic { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #8fb4ff; background: rgba(61, 123, 255, .14); border: 1px solid rgba(61, 123, 255, .35); }
.pp-grp-ic .i { width: 18px; height: 18px; }
.pp-grp summary b { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .03em; }
.pp-grp summary em { font-style: normal; color: var(--dim); font-weight: 700; font-size: 13px; }
.pp-grp-ch { width: 20px; height: 20px; margin-left: auto; color: var(--dim); transition: transform .25s, color .2s; }
.pp-grp[open] .pp-grp-ch { transform: rotate(180deg); }
.pp-grp-body { padding: 0 18px 18px 70px; }
.pp-grp-body h4 { margin: 14px 0 8px; color: #8fb4ff; font-weight: 800; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.pp-grp-body h4:first-child { margin-top: 4px; }
.pp-grp-body ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 24px; list-style: none; }
.pp-grp-body li { position: relative; padding-left: 16px; color: #d5dbea; font-weight: 600; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.pp-grp-body li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.pp-grp-body li.long { grid-column: 1 / -1; }
/* подзаголовки в описании (строки заглавными) и требования во вкладке */
.pp-dh { display: inline-block; margin-top: 4px; color: #fff; font-weight: 800; letter-spacing: .02em; }
.pp-req { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pp-req > div { padding: 14px 16px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); }
.pp-req > div.wide { grid-column: 1 / -1; }
.pp-req dt { color: var(--dim); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; }
.pp-req dd { margin-top: 6px; font-weight: 600; font-size: 14.5px; line-height: 1.5; color: #e2e7f2; overflow-wrap: anywhere; }
.pp-req > div.pt { position: relative; padding-left: 34px; }
.pp-req > div.pt::before { content: ""; position: absolute; left: 16px; top: 22px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.pp-req > div.pt dd { margin-top: 0; }
/* покупка: сроки — радиокнопки, на кнопке — цена выбранного срока */
/* правая колонка: покупка и под ней бренд — вместе прилипают при прокрутке */
.pp-side { position: sticky; top: 96px; display: grid; gap: 14px; min-width: 0; }
.pp-buy { padding: 24px; background: linear-gradient(180deg, #131828, var(--card)); box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .9); }
.pp-buy-title { font-family: var(--display); font-weight: 700; font-size: 20px; }
.pp-plans { display: grid; gap: 10px; margin-top: 16px; }
.pp-plan { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 10px 16px; border-radius: 16px; text-align: left; color: var(--text); background: var(--card-2); border: 1px solid var(--line-2); transition: border-color .2s, background .2s, box-shadow .2s; }
.pp-plan i { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #4a5370; transition: border-color .2s, background .2s, box-shadow .2s; }
.pp-plan span { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; line-height: 1.35; }
.pp-plan b { flex: none; font-family: var(--display); font-weight: 700; font-size: 17px; }
.pp-plan:hover { border-color: #3a4772; }
.pp-plan.on { border-color: var(--blue); background: rgba(61, 123, 255, .12); box-shadow: inset 0 0 0 1px rgba(61, 123, 255, .4); }
.pp-plan.on i { border-color: var(--blue); background: radial-gradient(circle, #fff 0 3px, var(--blue) 3.5px); box-shadow: 0 0 10px rgba(61, 123, 255, .7); }
.pp-plan.on b { color: #9dbcff; }
.pp-cta { width: 100%; height: 56px; margin-top: 18px; font-size: 16px; }
/* чит на обновлении: кнопка неактивна, как на сайте — «На обновлении» с гаечным ключом */
.pp-cta.off { gap: 10px; color: #c9cfdd; background: var(--card-2); border: 1px solid var(--line-2); box-shadow: none; cursor: not-allowed; }
.pp-cta.off:hover { box-shadow: none; }
.pp-cta.off .i { width: 18px; height: 18px; color: var(--amber); }
.pp-terms { margin-top: 14px; text-align: center; color: var(--dim); font-weight: 600; font-size: 13px; line-height: 1.5; }
.pp-terms a { color: #8fb4ff; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.pp-sec { margin-top: 56px; }
.pp-sec h2 { font-family: var(--display); font-weight: 700; font-size: 26px; }
.pp-sec-hd { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#ppRel { margin-top: 20px; }
.pp-404 { padding: 120px 0; text-align: center; }
.pp-404 h1 { font-family: var(--display); font-size: 36px; }
.pp-404 p { margin: 12px 0 24px; color: var(--muted); font-weight: 600; }
/* ---------- страница «Медиа» (media.html): набор медиа-креаторов — первый экран с текстом, кнопками и логотипом ---------- */
.md-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 32px; min-height: 640px; padding-top: 40px; padding-bottom: 30px; }
.md-hero h1 { font-family: var(--display); font-weight: 800; font-size: 56px; line-height: 1.08; letter-spacing: -.01em; text-shadow: 0 4px 30px rgba(0, 0, 0, .6); }
.md-txt > p { margin-top: 20px; max-width: 560px; color: #b4bccd; font-weight: 600; font-size: 17px; line-height: 1.65; text-wrap: pretty; }
.md-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.md-cta .btn .i { width: 18px; height: 18px; }
.md-art { position: relative; display: grid; place-items: center; }
.md-art::before { content: ""; position: absolute; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(61, 123, 255, .26), rgba(61, 123, 255, .06) 45%, transparent 66%); }
.md-art img { position: relative; width: min(470px, 100%); height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); }
/* логотип Fresh Focus в 3D под наклоном (img/media/logo3d.webp — tools/logo3d.py): картинка обрезана по знаку;
   вместо тёмной тени — синее свечение вокруг, как от неоновых полос */
.md-art .md-logo { width: 560px; max-width: none; filter: drop-shadow(0 0 30px rgba(61, 123, 255, .3)); }
.nav a[aria-current="page"] { color: #fff; }

/* ---------- страница «Реселлерам» (reseller.html): первый экран как у «Медиа» и три преимущества с 3D-иконками ---------- */
.md-txt .eyebrow + h1 { margin-top: 16px; }
.sec-hd .eyebrow + h2 { margin-top: 10px; }
/* первый экран ниже, чем у «Медиа», чтобы карточки было видно сразу */
.rs-hero { min-height: 0; padding-top: 36px; padding-bottom: 0; }
.rs-hero .md-art img { width: min(420px, 100%); }
.rs .sec { margin-top: 36px; }
.rs-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rs-ben { padding: 22px 24px 26px; border-radius: 22px; background: linear-gradient(180deg, #121624, #0f121c); border: 1px solid var(--line); }
.rs-ben img { width: 96px; height: 96px; margin: -6px 0 0 -8px; }
.rs-ben h3 { margin-top: 10px; font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1.25; }
.rs-ben p { margin-top: 8px; color: var(--muted); font-weight: 600; font-size: 14.5px; line-height: 1.55; }

/* ---------- страница «Розыгрыши» (giveaways.html): карточки розыгрышей из js/giveaways.js; пока их нет — заглушка ---------- */
.gvp .gv-sec { margin-top: 44px; }
.gv-h1 { font-family: var(--display); font-weight: 800; font-size: 44px; letter-spacing: -.01em; }
.gv-list { display: grid; gap: 18px; }
.gv { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); overflow: hidden; border-radius: 24px; background: linear-gradient(180deg, #121624, #0f121c); border: 1px solid var(--line-2); }
.gv.end { opacity: .65; }
.gv-pic { position: relative; min-height: 260px; background: #0d1120 center / cover no-repeat; }
.gv-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, rgba(15, 18, 28, .9)), linear-gradient(0deg, rgba(10, 12, 20, .55), transparent 45%); }
.gv-time { position: absolute; z-index: 1; left: 16px; bottom: 16px; display: flex; gap: 6px; }
.gv-time span { min-width: 54px; padding: 8px 8px 6px; border-radius: 12px; text-align: center; background: rgba(10, 12, 20, .78); border: 1px solid rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.gv-time b { display: block; font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.1; }
.gv-time small { display: block; margin-top: 2px; color: var(--muted); font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.gv-body { display: flex; flex-direction: column; padding: 26px 28px; }
.gv-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.gv-st { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 11px; border-radius: 9px; font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #bdf2d4; background: rgba(51, 209, 122, .1); border: 1px solid rgba(51, 209, 122, .3); }
.gv-st i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(51, 209, 122, .8); }
.gv.end .gv-st { color: var(--muted); background: rgba(255, 255, 255, .05); border-color: var(--line-2); }
.gv.end .gv-st i { background: var(--dim); box-shadow: none; }
.gv-game { color: var(--muted); font-weight: 700; font-size: 13.5px; }
.gv-body h3 { margin-top: 14px; font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.2; }
.gv-prize { margin-top: 8px; color: #9dbcff; font-weight: 800; font-size: 15px; }
.gv-how { display: grid; gap: 8px; margin-top: 16px; list-style: none; }
.gv-how li { position: relative; padding-left: 26px; color: #c3cad9; font-weight: 600; font-size: 14.5px; line-height: 1.5; }
.gv-how li::before { content: ""; position: absolute; left: 0; top: .2em; width: 16px; height: 16px; border-radius: 5px; background: rgba(61, 123, 255, .2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fc2ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.gv-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: auto; padding-top: 20px; }
.gv-foot small { color: var(--dim); font-weight: 700; font-size: 13.5px; }
.gv-empty { display: grid; justify-items: center; gap: 6px; padding: 52px 24px 56px; border-radius: 26px; text-align: center; background: linear-gradient(180deg, #121624, #0f121c); border: 1px solid var(--line); }
.gv-empty img { width: 150px; height: 150px; }
.gv-empty h2 { margin-top: 6px; font-family: var(--display); font-weight: 700; font-size: 24px; }
.gv-empty p { max-width: 460px; color: var(--muted); font-weight: 600; font-size: 15.5px; line-height: 1.6; }
.gv-demo { margin-bottom: 14px; color: #ffc56b; font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }

/* всплывашка «Стать медиа-креатором» внизу экрана (js/media-toast.js), как на сайте; крестик запоминается */
.mtoast { position: fixed; left: 20px; bottom: 20px; z-index: 60; display: flex; align-items: center; gap: 2px; max-width: calc(100vw - 40px); padding: 6px; border-radius: 18px;
  background: rgba(16, 19, 29, .95); border: 1px solid var(--line-2); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .85), 0 0 0 1px rgba(61, 123, 255, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform: translateY(150%); opacity: 0; transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .4s; }
.mtoast.show { transform: none; opacity: 1; }
/* уже показанная в этом визите всплывашка на следующих страницах стоит на месте, без выезда */
.mtoast.instant { transition: none; }
/* 3D-логотип Fresh Focus (img/media/logo3d-sm.webp) — как стикер: крупный и выходит за верхний край карточки */
.mtoast a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 10px 6px 92px; border-radius: 13px; transition: background .2s; }
.mtoast a:hover { background: rgba(61, 123, 255, .1); }
.mtoast img { position: absolute; left: 8px; bottom: 6px; width: 76px; height: auto; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .55)) drop-shadow(0 0 14px rgba(61, 123, 255, .3)); pointer-events: none; transition: transform .3s; }
.mtoast a:hover img { transform: translateY(-2px) scale(1.04); }
.mtoast b { display: block; font-weight: 800; font-size: 14.5px; color: #fff; white-space: nowrap; }
.mtoast a > .i { width: 18px; height: 18px; margin-left: 6px; color: var(--blue-hi); }
.mtoast button { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--dim); transition: color .2s, background .2s; }
.mtoast button:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.mtoast button .i { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .mtoast { transition: none; } }

/* просмотр скриншотов и видео на весь экран */
.lb { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(5, 7, 12, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lb[hidden] { display: none; }
.lb-stage { width: min(92vw, 1500px); height: min(84vh, 845px); display: grid; place-items: center; }
.lb-stage img, .lb-stage video { max-width: 100%; max-height: 100%; border-radius: 14px; }
.lb-stage iframe { width: 100%; max-height: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; background: #000; }
.lb-x, .lb-nav { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); transition: background .2s; }
.lb-x:hover, .lb-nav:hover { background: rgba(61, 123, 255, .35); }
.lb-x { top: 20px; right: 20px; }
.lb-nav { top: 50%; margin-top: -24px; }
.lb-prev { left: 20px; }
.lb-next { right: 20px; }
.lb-prev .i { transform: rotate(90deg); }
.lb-next .i { transform: rotate(-90deg); }
.lb .i { width: 22px; height: 22px; }
.lb-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: var(--muted); font-weight: 700; font-size: 14px; }
html.lb-open { overflow: hidden; }
@media (max-width: 1024px) {
  .md-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 28px; }
  .gv { grid-template-columns: minmax(0, 1fr); }
  .gv-pic { min-height: 220px; }
  .gv-pic::after { background: linear-gradient(0deg, rgba(15, 18, 28, .9), transparent 50%); }
  .md-art img { width: 340px; }
  .md-art .md-logo { width: 440px; }
  /* в одну колонку: галерея, сразу покупка, потом статус и вкладки */
  .pp-top { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
  .pp-left { display: contents; }
  .pp-gal { order: 1; }
  .pp-side { order: 2; position: static; }
  .pp-status { order: 3; }
  .pp-tabs-card { order: 4; }
}
@media (max-width: 640px) {
  /* у .wrap на телефоне свой padding — без второго класса он обнулял отступ сверху */
  .md-hero.wrap { padding-top: 40px; }
  .md-hero h1 { font-size: 34px; }
  .md-txt > p { font-size: 15.5px; }
  .md-cta .btn { flex: 1 1 100%; }
  .rs-benefits { grid-template-columns: minmax(0, 1fr); }
  .gv-body { padding: 20px 18px; }
  .gv-body h3 { font-size: 20px; }
  .gv-time span { min-width: 46px; }
  .md-art img { width: 260px; }
  .md-art .md-logo { width: min(320px, 84vw); }
  .mtoast { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .mtoast a { flex: 1; min-width: 0; }
  .mtoast b { white-space: normal; }
  .pp-name { font-size: 28px; }
  .pp-card { border-radius: 18px; }
  .pp-gal, .pp-tabs-card { padding: 12px; }
  .pp-strip { grid-auto-columns: 86%; }
  .pp-status { padding: 18px; }
  /* вкладки делят ширину, длинные подписи переносятся в две строки */
  .pp-tabs { justify-content: flex-start; gap: 4px; padding: 5px; overflow-x: auto; scrollbar-width: none; }
  .pp-tabs::-webkit-scrollbar { display: none; }
  .pp-tabs button { flex: 1 1 auto; height: auto; min-height: 52px; padding: 6px 8px 10px; font-size: 13px; line-height: 1.2; white-space: normal; text-align: center; }
  .pp-tabs button[aria-selected="true"]::after { left: 12px; right: 12px; bottom: 5px; }
  .pp-grp summary { min-height: 56px; padding: 8px 14px; gap: 12px; }
  .pp-grp-body { padding: 0 14px 16px; }
  .pp-grp-body ul { grid-template-columns: minmax(0, 1fr); }
  .pp-req { grid-template-columns: minmax(0, 1fr); }
  .pp-buy { padding: 18px; }
  .pp-sec { margin-top: 40px; }
  .pp-sec h2 { font-size: 22px; }
  .lb-nav { top: auto; bottom: 14px; margin-top: 0; }
  .lb-prev { left: 14px; }
  .lb-next { right: 14px; }
  .lb-x { top: 12px; right: 12px; }
}
@media (max-width: 760px) {
  .gban { flex-direction: column; align-items: stretch; min-height: 0; border-radius: 20px; }
  .gban-art { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 8; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
  .gban::after { background: linear-gradient(180deg, transparent 35%, rgba(12, 15, 25, .5) 70%); }
  .gban-txt { padding: 0 20px 24px; margin-top: -34px; }
  .gban.hero { min-height: 0; }
  .gban.hero .gban-art { width: 100%; object-position: 60% 40%; }
  .gban.hero::after { background: linear-gradient(180deg, transparent 35%, rgba(12, 15, 25, .5) 70%); }
  /* «стена» бренда — сверху, без наклона: четыре обложки, низ уходит в фон */
  .gban-wall { position: relative; top: auto; right: auto; width: 100%; padding: 14px 14px 0; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); transform: none;
    -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent); mask-image: linear-gradient(180deg, #000 50%, transparent); }
  .gban-wall img { border-radius: 9px; }
  .gban-wall img:nth-child(n + 5) { display: none; }
  .gban-wall img:nth-child(n + 4) { transform: none; }
  .gban-logo { --bl: 64px; margin-bottom: 14px; }
  .gban-title { font-size: calc(var(--fs, 52px) * .6); }
  .gban-stats > div { padding: 0 16px; }
  .gban-stats b { font-size: 19px; }
  .gban-top { gap: 10px; }
  .items .pimg .topb { bottom: 6px; left: 6px; height: 21px; padding: 0 7px; gap: 4px; font-size: 9.5px; }
  .items .pimg .topb .i { width: 11px; height: 11px; }
  .gban-stats span { font-size: 12px; }
  .gsec { margin-top: 26px; }
}
.more { display: flex; justify-content: center; margin-top: 26px; }
.more .i { width: 17px; height: 17px; }
.empty { grid-column: 1 / -1; padding: 50px 0; text-align: center; color: var(--dim); font-weight: 600; }

/* ---------- как купить ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step { position: relative; overflow: hidden; padding: 18px 26px 28px; border-radius: 22px; background: linear-gradient(180deg, #121624, #0f121c); border: 1px solid var(--line); }
.step::before { content: ""; position: absolute; left: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(61, 123, 255, .16), transparent); }
.step img { position: relative; width: 112px; height: 112px; margin-left: -12px; }
.step .n { position: relative; display: block; margin-top: 4px; font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-hi); }
.step h3 { position: relative; margin-top: 8px; font-family: var(--display); font-weight: 700; font-size: 20px; }
.step p { position: relative; margin-top: 10px; color: var(--muted); font-weight: 600; font-size: 15px; line-height: 1.6; }

/* ---------- вопросы ---------- */
.faq { display: grid; grid-template-columns: 1fr 1.45fr; gap: 40px; align-items: start; }
.help { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding: 16px 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); transition: border-color .2s; }
.help:hover { border-color: var(--blue); }
.help img { width: 42px; height: 42px; }
.help b { display: block; font-weight: 800; font-size: 15.5px; }
.help small { display: block; margin-top: 2px; color: var(--dim); font-weight: 600; font-size: 13px; }
.help .i { margin-left: auto; color: var(--blue-hi); }
.qa { display: flex; flex-direction: column; gap: 10px; }
.qa details { border-radius: 16px; background: var(--card); border: 1px solid var(--line); transition: border-color .2s; }
.qa details[open] { border-color: #2c3960; }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 20px; list-style: none; cursor: pointer; font-weight: 700; font-size: 16px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary span { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--card-2); border: 1px solid var(--line-2); transition: transform .25s, background .25s; }
.qa summary span .i { width: 14px; height: 14px; }
.qa details[open] summary span { transform: rotate(45deg); background: var(--blue); border-color: var(--blue); }
.qa details p { padding: 0 20px 20px; color: var(--muted); font-weight: 600; font-size: 15px; line-height: 1.65; }
/* текст страницы игры для поисковиков и покупателей (tools/prerender.js): что есть в каталоге, функции, ссылки на читы */
.seo-txt { max-width: 900px; color: var(--muted); font-weight: 600; font-size: 15.5px; line-height: 1.7; text-wrap: pretty; }
.seo-txt p + p { margin-top: 12px; }
.seo-txt a { color: var(--blue-hi); font-weight: 700; }
.seo-txt a:hover { color: #fff; }
.gsec + .seo { margin-top: 64px; }
.seo-links { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.seo-links .seo-txt { font-size: 14.5px; max-width: none; }

/* ---------- статьи и инструкции (/articles/ — tools/prerender.js, тексты — tools/articles.js) ---------- */
.art { padding-top: 26px; padding-bottom: 20px; }
.art-main { max-width: 800px; }
.art-hd { margin-top: 22px; }
.art-hd h1 { margin-top: 14px; font-family: var(--display); font-weight: 800; font-size: 44px; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.art-lead { margin-top: 18px; max-width: 760px; color: #b4bccd; font-weight: 600; font-size: 18px; line-height: 1.65; text-wrap: pretty; }
.art-meta { margin-top: 14px; color: var(--dim); font-weight: 600; font-size: 14px; }
.art-toc { margin-top: 28px; padding: 18px 22px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.art-toc b { font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-hi); }
.art-toc ol { margin-top: 10px; padding-left: 20px; display: grid; gap: 6px; color: var(--muted); font-weight: 600; font-size: 15px; }
.art-toc a:hover { color: #fff; }
.art-body { margin-top: 8px; color: #c3cad8; font-weight: 600; font-size: 16.5px; line-height: 1.75; }
.art-body h2 { margin-top: 40px; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.25; color: #fff; scroll-margin-top: 90px; }
.art-body h2 + *, .art-body p + *, .art-body ul + *, .art-body ol + * { margin-top: 14px; }
.art-body h2 + h2 { margin-top: 40px; }
.art-body ul, .art-body ol { padding-left: 22px; display: grid; gap: 8px; }
.art-body li::marker { color: var(--blue-hi); font-weight: 800; }
.art-body b { color: #fff; }
.art-body a { color: var(--blue-hi); font-weight: 700; }
.art-body a:hover { color: #fff; }
.art-body code { padding: 2px 7px; border-radius: 6px; background: var(--card-2); border: 1px solid var(--line-2); font-size: .92em; }
.art-faq { margin-top: 44px; }
.art-faq h2, .art-more h2 { font-family: var(--display); font-weight: 700; font-size: 26px; scroll-margin-top: 90px; }
.art-faq .qa { margin-top: 16px; }
.art-cta { margin-top: 34px; }
.art-cta .btn .i { width: 18px; height: 18px; }
.art-more { margin-top: 64px; }
.art-cards { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.art-hd-index + .art-cards { margin-top: 34px; }
/* подзаголовок списка статей — в одну строку с запасом: пока грузится шрифт, он тоже не переносится и карточки не прыгают */
.art-hd-index .art-lead { max-width: 800px; }
.art-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
.art-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.art-card b { font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1.3; }
.art-card p { color: var(--muted); font-weight: 600; font-size: 14.5px; line-height: 1.6; }

/* ---------- бренды читов (/brands/, tools/prerender.js): популярные — карточками, все — по алфавиту ---------- */
.br-sec { margin-top: 44px; }
.br-hd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 18px; }
.br-hd h2 { font-family: var(--display); font-weight: 700; font-size: 26px; }
.br-hd p { color: var(--dim); font-weight: 600; font-size: 14px; }
.br-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.br-card { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 8px 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); transition: border-color .25s, box-shadow .25s, transform .25s; }
.br-card:hover { border-color: rgba(61, 123, 255, .8); box-shadow: 0 0 0 1px rgba(61, 123, 255, .25), 0 18px 44px -18px rgba(61, 123, 255, .65); transform: translateY(-2px); }
/* три полосы — обложки игр бренда, приглушённые; по центру — логотип бренда или первая буква */
.br-cv { position: relative; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 4px; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #0d1120; }
.br-cv > img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.55) saturate(.9); transition: filter .3s; }
.br-card:hover .br-cv > img { filter: brightness(.75) saturate(1); }
.br-cv::after { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side, rgba(10, 12, 20, .55), transparent); pointer-events: none; }
.br-logo { position: absolute; z-index: 1; left: 50%; top: 50%; --bl: 76px; transform: translate(-50%, -50%); box-shadow: 0 16px 34px -10px rgba(0, 0, 0, .9); transition: transform .25s; }
.br-card:hover .br-logo { transform: translate(-50%, -50%) scale(1.05); }
.br-name { margin: 14px 8px 0; font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.15; text-transform: uppercase; overflow-wrap: anywhere; }
.br-meta { margin: 6px 8px 0; color: var(--muted); font-weight: 600; font-size: 13.5px; }
.br-und { display: inline-flex; align-items: center; gap: 7px; margin: 10px 8px 0; color: #c3f3d6; font-weight: 700; font-size: 12.5px; }
.br-und i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(51, 209, 122, .7); }
/* все бренды: слева буква, справа бренды плашками с числом читов */
.br-az { display: grid; gap: 14px; }
.br-l { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: start; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.br-l > b { font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 36px; color: var(--blue-hi); white-space: nowrap; }
.br-l > div { display: flex; flex-wrap: wrap; gap: 8px; }
.br-l a { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); font-weight: 700; font-size: 14px; transition: border-color .2s, color .2s; }
.br-l a:hover { border-color: rgba(61, 123, 255, .7); color: #fff; }
.br-l a > span:last-child { color: var(--dim); font-size: 12.5px; }
.br-l a .blogo { --bl: 22px; margin-left: -4px; border-radius: 6px; }
@media (max-width: 1100px) { .br-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .br-sec { margin-top: 34px; }
  .br-hd h2 { font-size: 21px; }
  .br-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .br-card { padding: 6px 6px 12px; border-radius: 16px; }
  .br-cv { border-radius: 11px; }
  .br-logo { --bl: 56px; }
  .br-name { margin: 10px 6px 0; font-size: 15px; }
  .br-meta { margin: 4px 6px 0; font-size: 12px; }
  .br-und { margin: 8px 6px 0; font-size: 11.5px; }
  .br-l { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; }
  .br-l > b { font-size: 17px; }
  .br-l a { height: 34px; padding: 0 10px; font-size: 13.5px; }
}
.art-go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; padding-top: 6px; color: var(--blue-hi); font-weight: 800; font-size: 14px; }
.art-go .i { width: 16px; height: 16px; }
/* ---------- окно оплаты на странице чита (как на живом сайте: согласие и два способа покупки) ---------- */
.pay { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 16px; background: rgba(5, 7, 12, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pay[hidden] { display: none; }
.pay-box { position: relative; width: min(480px, 100%); padding: 28px; border-radius: 22px; background: linear-gradient(180deg, #151b2c, var(--card)); border: 1px solid var(--line-2); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); }
.pay-x { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--muted); background: var(--card-2); border: 1px solid var(--line-2); }
.pay-x:hover { color: #fff; border-color: #3a4772; }
.pay-x .i { width: 16px; height: 16px; }
.pay-title { margin-top: 10px; padding-right: 44px; font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.25; }
.pay-sum { margin-top: 6px; color: var(--blue-hi); font-family: var(--display); font-weight: 800; font-size: 20px; }
.pay-sum:empty { display: none; }
.pay-err { margin-top: 10px; color: #ff8a8a; font-weight: 700; font-size: 13.5px; }
.pay-item { display: flex; align-items: center; gap: 14px; padding-right: 44px; }
.pay-item img { flex: none; width: 64px; height: 64px; border-radius: 14px; object-fit: cover; background: var(--card-2); border: 1px solid var(--line-2); }
.pay-item-t { min-width: 0; }
.pay-item .pay-title { margin-top: 0; padding-right: 0; font-size: 20px; overflow-wrap: anywhere; }
.pay-plan { margin-top: 3px; color: var(--muted); font-weight: 600; font-size: 14.5px; }
.pay-lines { display: grid; gap: 10px; margin-top: 16px; padding: 16px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--line-2); }
.pay-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-weight: 600; font-size: 14.5px; }
.pay-line span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.pay-line b { flex: none; color: var(--text); font-weight: 700; }
.pay-line.off b { color: #8be3b2; }
.pay-line.total { color: var(--text); font-weight: 800; font-size: 15.5px; }
.pay-line:not(:first-child).total { padding-top: 12px; border-top: 1px solid var(--line-2); }
.pay-line.total b { font-family: var(--display); font-weight: 800; font-size: 24px; color: #fff; }
.pay-unpromo { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--muted); background: rgba(255, 255, 255, .06); cursor: pointer; }
.pay-unpromo:hover { color: #fff; background: rgba(255, 93, 108, .35); }
.pay-unpromo .i { width: 11px; height: 11px; }
.pay-go { width: 100%; height: 54px; margin-top: 14px; font-size: 16px; }
.pay-go:disabled { opacity: .6; cursor: default; }
.pay-bal { margin-top: 10px; text-align: center; color: var(--muted); font-weight: 600; font-size: 13.5px; }
.pay-terms { margin-top: 12px; text-align: center; color: var(--dim); font-weight: 600; font-size: 12.5px; line-height: 1.55; }
.pay-terms a { color: #8fb4ff; text-decoration: underline; text-underline-offset: 3px; }
.pay-stock { margin-top: 12px; color: #8be3b2; font-weight: 700; font-size: 13.5px; line-height: 1.5; }
.pay-stock.man { color: var(--muted); }

/* ---------- вход и регистрация (/login/, /register/ — одна форма с вкладками), личный кабинет (/profile/) — js/account.js ---------- */
/* поля форм (общие для входа, регистрации и смены пароля) */
.acc-field { display: grid; gap: 8px; }
.acc-field > span:first-child { font-weight: 700; font-size: 14px; }
.acc-field input, .acc-pass input { width: 100%; height: 50px; padding: 0 16px; border-radius: 13px; background: #0d1120; border: 1px solid var(--line-2); color: var(--text); font-weight: 600; font-size: 15px; outline: 0; transition: border-color .2s, box-shadow .2s; }
.acc-field input:focus, .acc-pass input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(61, 123, 255, .14); }
.acc-field small { color: var(--dim); font-weight: 600; font-size: 12.5px; line-height: 1.45; }
.acc-pass { position: relative; display: block; }
.acc-pass input { padding-right: 104px; }
.acc-pass button { position: absolute; top: 7px; right: 7px; height: 36px; padding: 0 12px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line-2); color: var(--muted); font-weight: 700; font-size: 13px; transition: color .2s, border-color .2s; }
.acc-pass button:hover { color: #fff; border-color: #3a4772; }
.acc-consent { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); font-weight: 600; font-size: 14px; line-height: 1.5; cursor: pointer; }
.acc-consent input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--blue); cursor: pointer; }
.acc-consent a { color: var(--blue-hi); font-weight: 700; }
.acc-submit { position: relative; width: 100%; }
.acc-submit:disabled { opacity: .55; cursor: not-allowed; }
.acc-submit.busy { color: transparent; }
.acc-submit.busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: accSpin .7s linear infinite; }
@keyframes accSpin { to { transform: rotate(360deg); } }
/* сообщения: ошибка — красная, успех — зелёная, справка (сервис недоступен) — спокойная синяя, с кнопкой «Повторить» */
.acc-msg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 90, 90, .1); border: 1px solid rgba(255, 90, 90, .35); color: #ffb0b0; font-weight: 700; font-size: 14px; line-height: 1.45; }
.acc-msg[hidden] { display: none; }
.acc-msg.ok { background: rgba(51, 209, 122, .1); border-color: rgba(51, 209, 122, .35); color: #9be8bd; }
.acc-msg.info { background: rgba(61, 123, 255, .08); border-color: rgba(61, 123, 255, .3); color: #c4d4ff; font-weight: 600; }
.acc-msg-acts { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.acc-msg-btn { height: 32px; padding: 0 12px; border-radius: 9px; background: rgba(61, 123, 255, .16); border: 1px solid rgba(61, 123, 255, .4); color: #dbe6ff; font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; }
.acc-msg-btn:hover { background: rgba(61, 123, 255, .28); }

/* вход и регистрация: слева — что даёт аккаунт (3D-монета кешбека и значки уровней), справа — форма */
.auth { display: grid; grid-template-columns: minmax(0, 470px); justify-content: center; gap: 28px; align-items: stretch; padding-top: 40px; padding-bottom: 56px; }
.auth[data-auth-mode="login"] [data-only="register"], .auth[data-auth-mode="register"] [data-only="login"] { display: none; }
.auth-card { position: relative; padding: 30px; border-radius: 26px; background: linear-gradient(180deg, #151b2c, var(--card)); border: 1px solid var(--line-2); box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .9); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 5px; border-radius: 15px; background: #0b0f1b; border: 1px solid var(--line-2); }
.auth-tabs a { display: grid; place-items: center; height: 42px; border-radius: 11px; color: var(--muted); font-weight: 800; font-size: 14.5px; transition: color .2s, background .2s; }
.auth-tabs a:hover { color: #fff; }
.auth-tabs a[aria-selected="true"] { background: linear-gradient(180deg, #4b87ff, #3170f5); color: #fff; box-shadow: 0 10px 24px -12px rgba(61, 123, 255, .9); }
.auth-h { margin-top: 26px; font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1.15; }
.auth-sub { margin-top: 10px; color: var(--muted); font-weight: 600; font-size: 15px; line-height: 1.55; }
.auth-card form { display: grid; gap: 16px; margin-top: 22px; }
.auth-alt { margin-top: 18px; color: var(--dim); font-weight: 600; font-size: 14.5px; text-align: center; }
.auth-alt a, .auth-help a { color: var(--blue-hi); font-weight: 800; }
.auth-help { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--dim); font-weight: 600; font-size: 13.5px; line-height: 1.55; text-align: center; }
.auth-promo { order: -1; position: relative; display: flex; flex-direction: column; justify-content: center; padding: 34px; border-radius: 26px; overflow: hidden;
  background: radial-gradient(70% 60% at 50% 22%, rgba(61, 123, 255, .3), transparent 70%), linear-gradient(180deg, #111a31, #0c1120); border: 1px solid var(--line-2); }
.auth-promo::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 30% at 50% 36%, rgba(122, 166, 255, .22), transparent 70%); pointer-events: none; }
/* четыре уровня в ряд, от бронзы к алмазу: знаки в одном масштабе — каждый следующий больше (без анимации) */
.auth-art { position: relative; display: flex; align-items: center; justify-content: center; gap: 1.5%; min-height: 250px; margin-bottom: 18px; }
.auth-art::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 2px; height: 24px; border-radius: 50%; background: radial-gradient(closest-side, rgba(61, 123, 255, .35), transparent); filter: blur(6px); }
.auth-rank { position: relative; z-index: 1; height: auto; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .55)); }
.r-bronze { width: 15.1%; } .r-silver { width: 17.6%; } .r-gold { width: 25.6%; } .r-diamond { width: 27%; }
.auth-promo .eyebrow { position: relative; }
.auth-promo-h { position: relative; margin-top: 12px; font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1.15; text-wrap: balance; }
.auth-perks { position: relative; list-style: none; display: grid; gap: 14px; margin-top: 22px; }
.auth-perks li { display: flex; gap: 14px; align-items: flex-start; }
.auth-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: rgba(61, 123, 255, .14); border: 1px solid rgba(61, 123, 255, .35); color: var(--blue-hi); }
.auth-ico .i { width: 19px; height: 19px; }
.auth-perks b { font-weight: 800; font-size: 15.5px; }
.auth-perks p { margin-top: 3px; color: var(--muted); font-weight: 600; font-size: 14px; line-height: 1.5; }
.soon-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--blue); color: #fff; font-style: normal; font-weight: 800; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; vertical-align: 2px; }

/* демо-кабинет (только на своём компьютере, js/account.js) */
.demo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 18px; padding: 12px 16px; border-radius: 14px; background: rgba(245, 177, 66, .08); border: 1px solid rgba(245, 177, 66, .32); color: #f3d29a; font-weight: 600; font-size: 13.5px; }
.demo-bar b { font-weight: 800; color: #ffd27a; }
.demo-bar a { margin-left: auto; color: #ffd27a; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.auth .demo-bar { grid-column: 1 / -1; margin-bottom: 0; }

/* кабинет: слева аккаунт и разделы, справа открытый раздел */
.cab { min-height: 100vh; padding-top: 28px; padding-bottom: 60px; }
.cab > .acc-msg { margin: 0 0 16px; }
.cab-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
.cab-side { position: sticky; top: 92px; display: grid; gap: 14px; padding: 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.cab-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cab-ava { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; font-family: var(--display); font-weight: 800; font-size: 19px; color: #cfe0ff; background: linear-gradient(135deg, #2a3d6e, #1b2440); border: 1px solid #34406a; }
.cab-who { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cab-who b { font-weight: 800; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-who small { color: var(--dim); font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-out { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--dim); border: 1px solid transparent; transition: color .15s, background .15s; }
.cab-out:hover { color: #fff; background: var(--card-2); border-color: var(--line-2); }
.cab-out .i { width: 17px; height: 17px; }
.cab-bal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line-2); }
.cab-bal small { display: block; color: var(--muted); font-weight: 700; font-size: 13px; }
.cab-bal b { display: block; margin-top: 2px; font-family: var(--display); font-weight: 700; font-size: 21px; font-variant-numeric: tabular-nums; }
.cab-bal .btn { gap: 6px; height: 38px; padding: 0 12px; }
.cab-bal .btn .i { width: 15px; height: 15px; }
.cab-nav { display: grid; gap: 2px; }
.cab-nav a { position: relative; display: flex; align-items: center; gap: 11px; height: 42px; padding: 0 12px; border-radius: 11px; color: var(--muted); font-weight: 700; font-size: 14.5px; transition: color .15s, background .15s; }
.cab-nav a:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.cab-nav a[aria-current="page"] { color: #fff; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.cab-nav a[aria-current="page"] .i { color: var(--blue-hi); }
.cab-nav .i { flex: none; width: 18px; height: 18px; }
.cab-nav span { flex: 1; min-width: 0; }
.cab-nav em { font-style: normal; font-weight: 800; font-size: 12.5px; color: #8be3b2; }
.cab-nav a.has-dot::after { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #ff5d6c; }
.cab-main { min-width: 0; }
.cab-h { margin-bottom: 16px; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.2; }
.cab-hd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-bottom: 16px; }
.cab-hd .cab-h { margin-bottom: 0; }
.cab-hd .btn { gap: 6px; }
.cab-hd .btn .i { width: 15px; height: 15px; }
.cab-card { padding: 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.cab-card + .cab-card { margin-top: 14px; }
.cab-card h2 { margin-bottom: 14px; font-family: var(--display); font-weight: 700; font-size: 17px; }
.cab-card form { display: grid; gap: 16px; }
.cab-mail { margin-bottom: 16px; border-color: rgba(245, 177, 66, .4); }
.cab-mail h2 { margin-bottom: 0; }
.cab-mail .lv-next { margin: 4px 0 12px; }
.wal-email { margin-top: 6px; }
.cab-main .buys { margin-top: 0; }
.cab-main .tk-list { margin-top: 0; }
.cab-main #wallet-top:empty, .cab-main .wal-open:empty { display: none; }
.cab-main .wal-open { margin-bottom: 14px; }
.lv-now { display: flex; align-items: center; gap: 16px; }
.lv-now img { flex: none; width: 78px; height: 78px; object-fit: contain; }
.lv-big { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1.15; color: #fff; }
.lv-sub { margin-top: 3px; color: var(--muted); font-weight: 600; font-size: 14px; }
.lv-next { margin-top: 10px; color: var(--muted); font-weight: 600; font-size: 14px; line-height: 1.5; }
.cab-card .prog { margin-top: 16px; }
.lv-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.lv-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lv { padding: 14px 8px 12px; border-radius: 14px; text-align: center; background: var(--card-2); border: 1px solid var(--line-2); }
.lv.on { border-color: var(--blue); background: rgba(61, 123, 255, .1); }
.lv img { display: block; width: 52px; height: 52px; margin: 0 auto 6px; object-fit: contain; }
.lv img.plat { filter: saturate(.2) brightness(1.2); }
.lv.off img { opacity: .7; }
.lv b { display: block; font-weight: 800; font-size: 14px; }
.lv strong { display: block; margin-top: 2px; font-family: var(--display); font-weight: 800; font-size: 21px; color: var(--blue-hi); }
.lv.off strong { color: var(--muted); }
.lv small { display: block; margin-top: 2px; color: var(--dim); font-weight: 600; font-size: 12.5px; }
.ref-link, .cab-card form.ref-link { display: flex; flex-wrap: wrap; gap: 8px; }
.ref-link input { flex: 1 1 220px; min-width: 0; height: 42px; padding: 0 14px; border-radius: 12px; background: #0d1120; border: 1px solid var(--line-2); color: var(--text); font: inherit; font-weight: 600; font-size: 14.5px; outline: 0; }
.ref-link input:focus { border-color: var(--blue); }
.ref-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.ref-stats + .cab-card { margin-top: 14px; }
.ref-stats .cab-card { margin-top: 0; padding: 14px 16px; }
.ref-stats small { display: block; color: var(--muted); font-weight: 600; font-size: 13px; }
.ref-stats b { display: block; margin-top: 4px; font-family: var(--display); font-weight: 700; font-size: 19px; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .cab-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .cab-side { position: static; }
  .cab-nav { display: flex; gap: 4px; margin: 0 -16px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
  .cab-nav::-webkit-scrollbar { display: none; }
  .cab-nav a { flex: none; }
  .cab-nav span { flex: none; }
  .ref-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .lv-grid { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  .lv-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lv small { font-size: 12px; }
}
.cab-empty { padding: 30px 24px; border-radius: 18px; text-align: center; background: linear-gradient(180deg, #131a2a, var(--card)); border: 1px solid var(--line); }
.cab-empty img { display: block; width: 104px; height: 104px; margin: 0 auto 8px; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .5)); }
.cab-empty h2 { font-family: var(--display); font-weight: 700; font-size: 20px; }
.cab-empty p { margin-top: 6px; color: var(--muted); font-weight: 600; font-size: 14.5px; }
.cab-empty .btn { margin-top: 16px; }
.cab-sub { margin: 22px 0 12px; font-family: var(--display); font-weight: 700; font-size: 17px; }
.cab-games { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cab-game { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--card-2); border: 1px solid var(--line-2); transition: border-color .2s; }
.cab-game:hover { border-color: var(--blue); }
.cab-game img { width: 100%; height: 100%; object-fit: cover; }
.cab-game::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8, 10, 18, .85)); }
.cab-game b { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 8px; font-weight: 800; font-size: 13.5px; color: #fff; }
.cab-main .tk-empty, .cab-main .wal-empty { margin: 0; padding: 26px 16px 8px; text-align: center; color: var(--muted); }
.cab-main .wal-empty + .btn { display: flex; width: fit-content; margin: 8px auto 12px; }
.cab-main .tk-empty { padding-bottom: 26px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
@media (max-width: 620px) { .cab-games { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pp-plan b s { margin-right: 4px; color: var(--dim); font-family: var(--ui); font-weight: 600; font-size: 13.5px; }
/* кабинет, старое оформление: загрузка и общие части */
/* не ниже экрана: пока кабинет грузится, подвал не стоит посреди экрана, чтобы потом не уехать вниз */
.dash { min-height: 100vh; padding-top: 32px; padding-bottom: 60px; }
.dash-loading { display: flex; align-items: center; gap: 12px; padding: 40px 0; color: var(--muted); font-weight: 700; }
.spin { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--blue); animation: accSpin .7s linear infinite; }
.dash > .acc-msg { margin: 0 0 16px; }
.dash-hd { position: relative; display: flex; align-items: center; gap: 22px; padding: 22px 28px; border-radius: 26px; overflow: hidden;
  background: radial-gradient(60% 160% at 100% 0%, rgba(61, 123, 255, .26), transparent 60%), linear-gradient(180deg, #131a2c, #0e1322); border: 1px solid var(--line-2); }
.dash-rank { flex: none; width: 104px; height: 92px; object-fit: contain; filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .55)); }
/* кабинет: первая буква логина вместо картинки, роль — плашкой */
.dash-ava { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; font-family: var(--display); font-weight: 800; font-size: 30px;
  color: #cfe0ff; background: linear-gradient(135deg, #2a3d6e, #1b2440); border: 1px solid #34406a; }
.role-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font-weight: 800; font-size: 13px;
  color: #c4d4ff; background: rgba(61, 123, 255, .12); border: 1px solid rgba(61, 123, 255, .35); }
.dash-id { min-width: 0; }
.dash-id h1 { margin-top: 6px; font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1.15; overflow-wrap: anywhere; }
.dash-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; color: var(--dim); font-weight: 600; font-size: 14px; }
.dash-out { margin-left: auto; gap: 8px; }
.dash-out .i { width: 17px; height: 17px; }
.lvl-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font-weight: 800; font-size: 13px; border: 1px solid; }
.lvl-bronze { --lvl: #f2b58c; --lvl-bg: rgba(214, 132, 80, .12); --lvl-line: rgba(214, 132, 80, .38); --lvl-glow: rgba(232, 140, 80, .34); }
.lvl-silver { --lvl: #dfe6f2; --lvl-bg: rgba(200, 210, 228, .1); --lvl-line: rgba(200, 210, 228, .34); --lvl-glow: rgba(185, 208, 255, .3); }
.lvl-gold { --lvl: #ffd37a; --lvl-bg: rgba(255, 196, 80, .11); --lvl-line: rgba(255, 196, 80, .38); --lvl-glow: rgba(255, 184, 56, .38); }
.lvl-diamond { --lvl: #a9c6ff; --lvl-bg: rgba(61, 123, 255, .14); --lvl-line: rgba(122, 166, 255, .45); --lvl-glow: rgba(70, 140, 255, .5); }
.lvl-chip { color: var(--lvl); background: var(--lvl-bg); border-color: var(--lvl-line); }
.dash-tabs { display: flex; gap: 4px; margin-top: 16px; padding: 5px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; scroll-margin-top: 90px; }
.dash-tabs::-webkit-scrollbar { display: none; }
.dash-tabs a { flex: none; display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 18px; border-radius: 12px; color: var(--muted); font-weight: 800; font-size: 14.5px; white-space: nowrap; transition: color .2s, background .2s; }
.dash-tabs a:hover { color: #fff; }
.dash-tabs a[aria-selected="true"] { background: var(--card-2); color: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.dash-tabs a[aria-selected="true"] .i { color: var(--blue-hi); }
.dash-tabs .i { width: 17px; height: 17px; }
.dash-sec { margin-top: 16px; }
.dash-h { margin: 30px 0 14px; font-family: var(--display); font-weight: 700; font-size: 20px; }
.dash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dash-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; align-items: start; }
.dash-sec > .dash-cols:first-child { margin-top: 0; }
.cb-soon { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 14px 18px; border-radius: 16px; background: rgba(61, 123, 255, .08); border: 1px solid rgba(61, 123, 255, .3); color: #c9d8ff; font-weight: 600; font-size: 14.5px; line-height: 1.5; }
.cb-soon .soon-tag { flex: none; }
/* карточки-цифры: баланс, уровень, кешбек на проверке — с 3D-картинкой в углу */
.dcard { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 196px; padding: 22px; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, #131a2a, var(--card)); border: 1px solid var(--line); }
.dcard-art { position: absolute; right: 10px; top: 10px; width: 88px; height: auto; pointer-events: none; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .5)); }
.dcard-lvl .dcard-art { width: 108px; height: 90px; object-fit: contain; filter: brightness(1.06) drop-shadow(0 0 18px var(--lvl-glow)) drop-shadow(0 12px 16px rgba(0, 0, 0, .45)); }
.dcard-l { display: block; padding-right: 96px; color: var(--muted); font-weight: 800; font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; }
.dcard-v { margin-top: 12px; padding-right: 96px; font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1.1; }
.dcard-v .rub, .cb-stats .rub, .ord-sum .rub { font-family: var(--ui); }
.dcard-pct { color: var(--blue-hi); }
.dcard-s { margin-top: 8px; color: var(--dim); font-weight: 600; font-size: 13.5px; line-height: 1.5; }
.dcard .btn { margin-top: auto; gap: 8px; }
.dcard .btn .i { width: 16px; height: 16px; }
.dcard-s + .btn { margin-top: 18px; }
.dcard-link { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 6px; color: var(--blue-hi); font-weight: 800; font-size: 14px; }
.dcard-link .i, .dpanel-hd a .i { width: 15px; height: 15px; }
.dcard-big { min-height: 220px; }
.dcard-big .dcard-v { font-size: 40px; }
.dcard .rules { margin-top: 14px; }
.prog { width: 100%; height: 8px; margin-top: 22px; border-radius: 99px; background: #0a0e1a; border: 1px solid var(--line-2); overflow: hidden; }
.prog i { display: block; width: var(--p); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3d7bff, #8fb4ff); box-shadow: 0 0 14px rgba(61, 123, 255, .7); }
/* панели со списками */
.dpanel { padding: 22px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.dpanel.wide { grid-column: 1 / -1; }
.dpanel { scroll-margin-top: 88px; }
/* мои покупки в кабинете: заказ — срок, статус, ключи (открываются кнопкой) и инструкция; счёт, ждущий оплаты, — со ссылкой */
.buys { display: grid; gap: 10px; margin-top: 14px; }
.buy { padding: 14px 16px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--line-2); }
.buy-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.buy-top b { font-weight: 800; font-size: 15px; }
.buy-st { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; font-weight: 800; color: #ffd38c; background: rgba(245, 177, 66, .1); border: 1px solid rgba(245, 177, 66, .3); }
.buy-st.ok { color: #8ff0b6; background: rgba(51, 209, 122, .1); border-color: rgba(51, 209, 122, .3); }
.buy-st.bad { color: #ffb3ba; background: rgba(255, 93, 108, .1); border-color: rgba(255, 93, 108, .3); }
.buy-meta { margin-top: 4px; color: var(--dim); font-weight: 600; font-size: 13px; }
.buy-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.buy-keys { display: grid; gap: 8px; margin-top: 12px; }
.buy-key { display: flex; align-items: center; gap: 10px; padding: 9px 9px 9px 13px; border-radius: 11px; background: #0d1019; border: 1px solid var(--line-2); }
.buy-key code { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: 13.5px; overflow-wrap: anywhere; user-select: all; }
.buy-ins { padding: 12px 14px; border-radius: 12px; background: rgba(61, 123, 255, .06); border: 1px solid rgba(61, 123, 255, .22); color: #d5dcec; font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 50vh; overflow-y: auto; }
.buy-ins a { color: var(--blue-hi); text-decoration: underline; text-underline-offset: 3px; }
/* карточка «Баланс» в кабинете: сумма и кнопка, неоплаченные счета, история */
.wal { padding: 0; overflow: hidden; }
.wal-hero { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 26px 28px; background: linear-gradient(135deg, #18264f, #111830 55%, #0f1424); border-bottom: 1px solid var(--line); overflow: hidden; }
.wal-hero::after { content: ""; position: absolute; right: -70px; top: -90px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(61, 123, 255, .3), transparent 70%); pointer-events: none; }
.wal-hero-l { display: grid; gap: 6px; min-width: 0; }
.wal-lbl { color: #aebbdc; font-weight: 700; font-size: 14px; }
.wal-sum { font-family: var(--display); font-weight: 700; font-size: 38px; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wal-add { position: relative; z-index: 1; }
.wal-in { padding: 20px 28px 24px; }
.wal-in > #wallet-top:empty, .wal-open:empty { display: none; }
#wallet-top .acc-msg { margin: 0 0 14px; }
.wal-open { display: grid; gap: 8px; margin-bottom: 20px; }
.wal-wait { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 14px 12px 16px; border-radius: 14px; background: rgba(245, 177, 66, .07); border: 1px solid rgba(245, 177, 66, .28); }
.wal-wait.bad { background: rgba(255, 93, 108, .08); border-color: rgba(255, 93, 108, .3); }
.wal-wa { display: flex; flex-wrap: wrap; gap: 8px; }
.wal-h3 { font-weight: 800; font-size: 15px; color: var(--muted); }
.wal-list { margin-top: 4px; }
.wal-empty { margin-top: 8px; color: var(--dim); font-weight: 600; font-size: 14px; }
.wal-row { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.wal-row:last-of-type { border-bottom: 0; }
.wal-oi { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.wal-oi .i { width: 18px; height: 18px; }
.wal-oi.pic { background: none; box-shadow: none; }
.wal-oi.pic img { display: block; width: 100%; height: 100%; }
.wal-oi.op-up { background: linear-gradient(135deg, #38d283, #149a57); }
.wal-oi.op-buy { background: linear-gradient(135deg, #5f91ff, #2f62ea); }
.wal-oi.op-back { background: linear-gradient(135deg, #f7ba4e, #d78810); }
.wal-oi.op-adj { background: linear-gradient(135deg, #808aa3, #515a71); }
.wal-rt { flex: 1; min-width: 0; }
.wal-rt b { display: block; font-weight: 700; font-size: 14.5px; overflow-wrap: anywhere; }
.wal-rt small { display: block; margin-top: 2px; color: var(--dim); font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.wal-wait .wal-rt small { color: #ffd38c; }
.wal-wait.bad .wal-rt small { color: #ffb3ba; }
.wal-rs { flex: none; font-weight: 800; font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wal-rs.plus { color: #8ff0b6; }
.wal-link { display: inline-block; margin-top: 10px; color: var(--blue-hi); font-weight: 700; font-size: 13.5px; cursor: pointer; }
.wal-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.dash-meta .dash-mail { overflow-wrap: anywhere; }
.wal-form { display: grid; gap: 14px; margin-top: 16px; max-width: 560px; }
/* окно пополнения */
.wal-box { width: min(540px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 24px 26px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2c3652 transparent; }
.wal-box::-webkit-scrollbar { width: 8px; }
.wal-box::-webkit-scrollbar-track { background: transparent; }
.wal-box::-webkit-scrollbar-thumb { background: #2c3652; border-radius: 8px; }
.wal-now { margin-top: 6px; color: var(--muted); font-weight: 600; font-size: 14.5px; }
.wal-need { margin-top: 14px; padding: 11px 14px; border-radius: 12px; background: rgba(61, 123, 255, .1); border: 1px solid rgba(61, 123, 255, .32); color: #c4d4ff; font-weight: 700; font-size: 14px; line-height: 1.45; }
.wal-h { display: block; margin: 15px 0 7px; font-weight: 700; font-size: 14px; }
.wal-amt { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 18px; border-radius: 14px; background: #0d1120; border: 1px solid var(--line-2); transition: border-color .15s, box-shadow .15s; }
.wal-amt:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(61, 123, 255, .14); }
.wal-amt input { flex: 1; width: 100%; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: #fff; font-weight: 800; font-size: 22px; font-variant-numeric: tabular-nums; }
.wal-amt span { flex: none; color: var(--muted); font-weight: 800; font-size: 19px; }
.wal-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wal-chip { flex: 1 1 auto; height: 34px; padding: 0 10px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line-2); color: var(--text); font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; }
.wal-chip:hover { border-color: #3a4772; }
.wal-hint { margin-top: 8px; color: var(--dim); font-weight: 600; font-size: 12.5px; }
.wal-hint.bad { color: #ff8a8a; }
.wal-ms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wal-m { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 11px 12px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line-2); color: var(--text); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.wal-m.wide { grid-column: 1 / -1; }
.wal-m:hover { border-color: #3a4772; }
.wal-m[aria-pressed="true"] { border-color: var(--blue); background: rgba(61, 123, 255, .08); box-shadow: 0 0 0 3px rgba(61, 123, 255, .16); }
.wal-mt { flex: 1; min-width: 0; }
.wal-m b { display: block; font-weight: 800; font-size: 14.5px; }
.wal-m small { display: block; margin-top: 3px; color: var(--muted); font-weight: 600; font-size: 12.5px; line-height: 1.35; }
.wal-ic { position: relative; flex: none; width: 40px; height: 40px; }
.wal-ic img { display: block; width: 100%; height: 100%; }
.wal-zero { display: inline-flex; align-items: center; height: 20px; margin-left: 8px; padding: 0 7px; border-radius: 6px; vertical-align: 1px; color: #8ff0b6; background: rgba(51, 209, 122, .14); border: 1px solid rgba(51, 209, 122, .35); font-weight: 800; font-size: 12px; }
.wal-brands { display: inline-flex; align-items: center; gap: 6px; margin-left: 9px; vertical-align: -3px; }
.wal-brands img { display: block; width: 17px; height: 17px; }
.wal-go { width: 100%; margin-top: 14px; }
.wal-go:disabled { opacity: .5; cursor: not-allowed; }
.wal-go[hidden] { display: none; }
.wal-code { margin-top: 2px; text-align: center; }
.wal-code[hidden] { display: none; }
.wal-code-row { display: flex; gap: 8px; margin-top: 10px; }
.wal-code-row[hidden] { display: none; }
.wal-code-row input { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border-radius: 12px; background: #0d1120; border: 1px solid var(--line-2); color: var(--text); font-weight: 700; font-size: 14px; }
.wal-code-row input:focus { border-color: var(--blue); }
.wal-code .wal-h { margin: 14px 0 0; text-align: left; }
@media (max-width: 520px) {
  .wal-ms { grid-template-columns: minmax(0, 1fr); }
  .wal-hero { padding: 22px 18px; }
  .wal-in { padding: 16px 18px 20px; }
  .wal-sum { font-size: 32px; }
  .wal-add { width: 100%; }
  .wal-box { padding: 20px 16px; }
  .wal-box .pay-title { font-size: 18px; }
  .wal-chip { padding: 0 4px; font-size: 12.5px; }
  .wal-m { padding: 8px 10px; }
  .wal-ic { width: 36px; height: 36px; }
  /* кнопка оплаты всегда на экране, даже если окно прокручивается */
  .wal-go { position: sticky; bottom: 4px; z-index: 1; }
  /* на iPhone поле мельче 16px приближает страницу при нажатии */
  .wal-code-row input { font-size: 16px; }
}
/* короткое сообщение внизу экрана */
.ff-toast { position: fixed; left: 50%; bottom: 24px; z-index: 130; max-width: calc(100% - 32px); padding: 13px 18px; border-radius: 14px; background: #12321f; border: 1px solid rgba(51, 209, 122, .45); color: #bff5d6; font-weight: 700; font-size: 14.5px; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .9); opacity: 0; transform: translate(-50%, 12px); transition: opacity .25s, transform .25s; }
.ff-toast.on { opacity: 1; transform: translate(-50%, 0); }
.dash-sec > .dpanel { margin-top: 16px; }
.dash-sec > .dpanel:first-child { margin-top: 0; }
.dpanel-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.dpanel-hd h2 { font-family: var(--display); font-weight: 700; font-size: 18px; }
.dpanel-hd a { display: inline-flex; align-items: center; gap: 6px; color: var(--blue-hi); font-weight: 800; font-size: 14px; }
.dpanel-note { margin-top: 6px; color: var(--muted); font-weight: 600; font-size: 14px; line-height: 1.55; }
.dpanel-note.dim { color: var(--dim); font-size: 13px; }
.dpanel form { display: grid; gap: 16px; margin-top: 18px; }
.dash-links { display: grid; gap: 10px; margin: 18px 0 14px; }
.dash-links .btn { justify-content: flex-start; gap: 10px; height: 48px; }
.dash-links .i { width: 18px; height: 18px; color: var(--blue-hi); }
/* покупки */
.ord { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
.dpanel-hd + .ord { border-top: 0; }
.ord-pic { width: 72px; height: 45px; border-radius: 10px; object-fit: cover; background: var(--card-2); border: 1px solid var(--line); }
.ord-pic-x { display: grid; place-items: center; color: var(--muted); font-family: var(--display); font-weight: 800; }
.ord-n { font-weight: 800; font-size: 15px; }
.ord-n a:hover { color: var(--blue-hi); }
.ord-m { margin-top: 3px; color: var(--dim); font-weight: 600; font-size: 13px; line-height: 1.45; }
.ord-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.ord-key code { padding: 7px 11px; border-radius: 9px; background: #0b0f1b; border: 1px dashed var(--line-2); color: #dfe6f5; font-family: ui-monospace, Consolas, monospace; font-size: 13px; letter-spacing: .06em; }
.ord-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 9px; background: var(--card-2); border: 1px solid var(--line-2); color: var(--muted); font-weight: 700; font-size: 12.5px; }
.ord-btn:hover { color: #fff; border-color: #3a4772; }
.ord-btn .i { width: 14px; height: 14px; }
.ord-side { display: grid; justify-items: end; gap: 6px; text-align: right; }
.ord-sum { font-weight: 800; font-size: 15px; white-space: nowrap; }
.st { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-weight: 800; font-size: 12px; white-space: nowrap; }
.st.ok { color: #8be3b2; background: rgba(51, 209, 122, .1); }
.st.wait { color: #f5cf86; background: rgba(245, 177, 66, .1); }
.st.bad { color: #ff9b9b; background: rgba(255, 90, 90, .1); }
.ord-cb { color: #8be3b2; font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.ord-cb.pending { color: #f5cf86; }
.ord-cb.canceled { color: var(--dim); text-decoration: line-through; }
/* операции по балансу */
.op { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.dpanel-hd + .op { border-top: 0; }
.op-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line-2); color: var(--blue-hi); }
.op-ico .i { width: 18px; height: 18px; }
.op-ico.cashback { color: #8be3b2; }
.op-ico.refund { color: #ff9b9b; }
.op-t { font-weight: 700; font-size: 14.5px; }
.op-m { margin-top: 2px; color: var(--dim); font-weight: 600; font-size: 12.5px; }
.op-a { font-weight: 800; font-size: 15px; white-space: nowrap; }
.op-a.plus { color: #8be3b2; }
.op-a.minus { color: #ffb0b0; }
.op-a.off { color: var(--dim); text-decoration: line-through; }
/* пусто */
.empty { display: grid; justify-items: center; gap: 8px; padding: 26px 12px 18px; text-align: center; }
.empty img { width: 110px; height: auto; margin-bottom: 4px; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .5)); }
.empty b { font-family: var(--display); font-weight: 700; font-size: 17px; }
.empty p { max-width: 380px; color: var(--muted); font-weight: 600; font-size: 14px; line-height: 1.55; }
.empty .btn { margin-top: 10px; gap: 8px; }
.empty .btn .i { width: 16px; height: 16px; }
/* кешбек: текущий уровень, лестница уровней, как это работает */
.cb-hero { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 26px; align-items: center; padding: 24px 28px; border-radius: 24px; overflow: hidden;
  background: radial-gradient(50% 140% at 0% 50%, var(--lvl-bg), transparent 70%), linear-gradient(180deg, #131a2c, #0e1322); border: 1px solid var(--lvl-line); }
.cb-rank { width: 190px; height: 150px; object-fit: contain; filter: brightness(1.06) drop-shadow(0 0 30px var(--lvl-glow)) drop-shadow(0 18px 26px rgba(0, 0, 0, .5)); }
.cb-name { margin-top: 8px; font-family: var(--display); font-weight: 800; font-size: 32px; color: var(--lvl); }
.cb-name span { margin-left: 6px; color: var(--text); font-size: 18px; font-weight: 700; }
.cb-main .prog { max-width: 460px; }
.cb-stats { display: grid; gap: 12px; min-width: 200px; }
.cb-stats div { padding: 10px 14px; border-radius: 14px; background: rgba(10, 14, 26, .6); border: 1px solid var(--line); }
.cb-stats dt { color: var(--dim); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.cb-stats dd { margin-top: 3px; font-family: var(--display); font-weight: 800; font-size: 18px; }
.lvls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
/* каждая карточка подсвечена цветом своего металла; все уровни яркие — открытые и ещё нет */
.lvl { position: relative; display: grid; justify-items: center; padding: 26px 14px 20px; border-radius: 22px; text-align: center; transition: transform .2s, border-color .2s, box-shadow .2s;
  background: radial-gradient(62% 52% at 50% 34%, var(--lvl-glow), transparent 72%), linear-gradient(180deg, #131a2b, var(--card)); border: 1px solid var(--lvl-line); }
.lvl:hover { transform: translateY(-3px); }
/* знаки в лестнице — в одном масштабе: бронза маленькая, алмаз во всю карточку */
.lvl-pic { display: flex; align-items: center; justify-content: center; width: 100%; height: 168px; }
.lvl img { width: auto; max-width: 100%; height: 100%; object-fit: contain; filter: brightness(1.06) drop-shadow(0 0 24px var(--lvl-glow)) drop-shadow(0 16px 20px rgba(0, 0, 0, .45)); }
.lvl-bronze img { height: 63%; } .lvl-silver img { height: 71%; } .lvl-gold img { height: 95%; } .lvl-diamond img { height: 100%; }
.lvl b { margin-top: 12px; font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--lvl); }
.lvl-pct { margin-top: 4px; font-family: var(--display); font-weight: 800; font-size: 30px; }
.lvl small { margin-top: 4px; color: var(--dim); font-weight: 600; font-size: 13px; }
.lvl:hover { box-shadow: 0 24px 60px -30px var(--lvl-glow); }
.lvl.now { border-color: var(--lvl); box-shadow: 0 0 0 1px var(--lvl-line), 0 26px 64px -26px var(--lvl-glow); }
.lvl-tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); height: 22px; padding: 0 10px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 800; font-size: 11.5px; line-height: 22px; white-space: nowrap; }
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.step3 { padding: 20px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.step3 span { font-family: var(--display); font-weight: 800; font-size: 13px; color: var(--blue-hi); }
.step3 b { display: block; margin-top: 8px; font-weight: 800; font-size: 16px; }
.step3 p { margin-top: 6px; color: var(--muted); font-weight: 600; font-size: 14px; line-height: 1.55; }
.rules { list-style: none; display: grid; gap: 10px; margin-top: 12px; }
.rules li { position: relative; padding-left: 20px; color: #c3cad8; font-weight: 600; font-size: 14px; line-height: 1.55; }
.rules li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--blue); transform: rotate(45deg); }
/* окно «Скоро будет» (пополнение баланса) */
.soon { margin: auto; padding: 0; border: 0; border-radius: 22px; background: transparent; color: var(--text); }
.soon::backdrop { background: rgba(5, 7, 12, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.soon form { display: grid; gap: 12px; justify-items: center; max-width: 380px; padding: 30px 36px; border-radius: 22px; background: linear-gradient(180deg, #151b2c, var(--card)); border: 1px solid var(--line-2); text-align: center; }
.soon img { width: 110px; height: auto; }
.soon h2 { font-family: var(--display); font-weight: 800; font-size: 24px; }
.soon p { color: var(--muted); font-weight: 600; font-size: 14.5px; line-height: 1.55; }
/* окно оплаты: сколько кешбека придёт за оплату на сайте (когда программа запущена — js/cashback.js) */

/* ---------- рефералы (вкладка «Рефералы» в кабинете — js/account.js, условия — js/referral.js) ---------- */
.rf-starter { --rf: #8fb4ff; --rf-a: #4b87ff; --rf-b: #2a55c8; --rf-glow: rgba(61, 123, 255, .32); }
.rf-advanced { --rf: #c9a8ff; --rf-a: #9a6bff; --rf-b: #6238d0; --rf-glow: rgba(139, 92, 255, .32); }
.rf-expert { --rf: #ffd37a; --rf-a: #ffbd45; --rf-b: #c97f15; --rf-glow: rgba(255, 185, 56, .32); }
/* сверху — две карточки: ссылка и реферальный баланс с выводом */
.ref-top { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; }
.ref-card { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; border-radius: 22px; border: 1px solid var(--line-2); }
.ref-invite { background: radial-gradient(60% 130% at 0% 0%, rgba(61, 123, 255, .24), transparent 60%), linear-gradient(180deg, #131a2c, #0e1322); }
.ref-wallet { background: radial-gradient(70% 120% at 100% 0%, rgba(51, 209, 122, .14), transparent 60%), linear-gradient(180deg, #131a2c, #0e1322); }
.ref-h { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.25; text-wrap: balance; }
/* «Другу −5% только на первую покупку · Тебе до 10% постоянно» */
.ref-deal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ref-deal > div { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1px solid; }
.ref-deal span { font-weight: 800; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; }
.ref-deal b { font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.15; }
.ref-deal small { color: var(--muted); font-weight: 700; font-size: 13px; line-height: 1.35; }
.ref-deal > .ref-deal-friend { background: rgba(61, 123, 255, .1); border-color: rgba(61, 123, 255, .35); }
.ref-deal-friend span { color: var(--blue-hi); }
.ref-deal > .ref-deal-you { background: rgba(51, 209, 122, .09); border-color: rgba(51, 209, 122, .35); }
.ref-deal-you span, .ref-deal-you b { color: #8be3b2; }
.ref-sum { font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1; }
.ref-sum .rub { font-family: var(--ui); }
.ref-wallet .dcard-s b { color: var(--text); }
.ref-wallet-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.ref-wallet .btn { gap: 8px; }
.ref-wallet .btn .i { width: 17px; height: 17px; }
.ref-wallet .btn:disabled { opacity: .5; cursor: not-allowed; }
.ref-fees { color: var(--dim); font-weight: 600; font-size: 12.5px; line-height: 1.5; }
.ref-crypto { display: flex; align-items: center; gap: 8px; color: #f5cf86; font-weight: 700; font-size: 13.5px; }
.ref-crypto .i { flex: none; width: 17px; height: 17px; }
.ref-count { margin: 2px 0 6px; color: var(--muted); font-weight: 600; font-size: 13.5px; }
.ref-count b { color: var(--text); }
.ref-steps { display: grid; gap: 12px; margin-top: 12px; list-style: none; counter-reset: rs; }
.ref-steps li { position: relative; display: grid; gap: 2px; padding-left: 40px; counter-increment: rs; }
.ref-steps li::before { content: counter(rs); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(61, 123, 255, .16); color: var(--blue-hi); font-family: var(--display); font-weight: 800; font-size: 13px; }
.ref-steps b { font-weight: 800; font-size: 15px; }
.ref-steps span { color: var(--muted); font-weight: 600; font-size: 14px; line-height: 1.5; }
.ref-info .rules { margin-top: 12px; }
/* окно вывода на криптовалюту */
.wd { margin: auto; padding: 0; border: 0; border-radius: 22px; background: transparent; color: var(--text); }
.wd::backdrop { background: rgba(5, 7, 12, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wd-box { display: grid; gap: 12px; width: min(460px, 92vw); padding: 26px; border-radius: 22px; background: linear-gradient(180deg, #151b2c, var(--card)); border: 1px solid var(--line-2); }
.wd h2 { font-family: var(--display); font-weight: 800; font-size: 22px; }
.wd-avail { color: var(--muted); font-weight: 600; font-size: 14.5px; }
.wd-avail b { color: var(--text); }
.wd-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 5px; border-radius: 14px; background: #0b0f1b; border: 1px solid var(--line-2); }
.wd-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: 10px; color: var(--muted); font-weight: 800; font-size: 14px; }
.wd-tabs button .i { width: 16px; height: 16px; }
.wd-tabs button[aria-selected="true"] { background: linear-gradient(180deg, #4b87ff, #3170f5); color: #fff; }
.wd-tabs button:disabled { cursor: default; }
.wd-pane { display: grid; gap: 12px; }
.wd-nets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wd-net { position: relative; cursor: pointer; }
.wd-net input { position: absolute; opacity: 0; pointer-events: none; }
.wd-net span { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line-2); transition: border-color .2s, box-shadow .2s; }
.wd-net b { font-weight: 800; font-size: 14.5px; }
.wd-net small { color: var(--dim); font-weight: 700; font-size: 12.5px; }
.wd-net input:checked + span { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(61, 123, 255, .18); }
.wd-net input:checked + span small { color: var(--blue-hi); }
.wd-net input:focus-visible + span { outline: 2px solid var(--blue-hi); outline-offset: 2px; }
.wd-sum { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: #0b0f1b; border: 1px solid var(--line); list-style: none; }
.wd-sum li { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-weight: 600; font-size: 14px; }
.wd-sum b { color: var(--text); font-weight: 800; }
.wd-hint { color: var(--dim); font-weight: 600; font-size: 13px; line-height: 1.5; }
.wd .wd-note { color: #f5cf86; font-weight: 600; font-size: 13px; line-height: 1.5; }
.wd-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
.wd .acc-msg { margin-top: 0; }
.ref-link { display: flex; flex-wrap: wrap; gap: 8px; }
.ref-input { flex: 1 1 220px; min-width: 0; height: 42px; padding: 0 14px; border-radius: 11px; background: #0b0f1b; border: 1px solid var(--line-2); color: #dfe6f5; font-family: ui-monospace, Consolas, monospace; font-size: 13.5px; outline: 0; }
.ref-input:focus { border-color: var(--blue); }
.ref-link .btn, .ref-create .btn { gap: 8px; }
.ref-link .btn .i, .ref-create .btn .i { width: 16px; height: 16px; }
.ref-code { color: var(--dim); font-weight: 600; font-size: 13px; }
.ref-code b { color: var(--text); letter-spacing: .04em; }
.ref-level { margin-top: 16px; padding: 20px 22px 22px; border-radius: 22px; background: radial-gradient(60% 160% at 0% 0%, var(--rf-glow), transparent 60%), var(--card); border: 1px solid var(--line); }
.ref-level-top { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; }
.ref-level-name b { font-weight: 800; font-size: 17px; }
.ref-level-name p { margin-top: 3px; color: var(--rf); font-weight: 800; font-size: 14.5px; }
.ref-next { margin-left: auto; color: var(--muted); font-weight: 700; font-size: 14px; }
.ref-level-nums { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 16px; color: var(--muted); font-weight: 600; font-size: 14px; }
.ref-level-nums b { color: var(--text); }
.ref-level .prog { margin-top: 12px; }
.ref-level .prog i { background: linear-gradient(90deg, var(--rf-a), var(--rf)); box-shadow: 0 0 14px var(--rf-glow); }
/* плитка с процентом уровня */
.pct-tile { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(145deg, var(--rf-a), var(--rf-b)); color: #fff; font-family: var(--display); font-weight: 800; font-size: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -6px 14px rgba(0, 0, 0, .18), 0 10px 24px -8px var(--rf-glow); }
.pct-tile.big { width: 58px; height: 58px; border-radius: 17px; font-size: 17px; }
.ref-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.ref-lv { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: radial-gradient(60% 140% at 0% 50%, var(--rf-glow), transparent 65%), var(--card); border: 1px solid var(--line); }
.ref-lv b { font-weight: 800; font-size: 15.5px; }
.ref-lv p { margin-top: 2px; color: var(--dim); font-weight: 600; font-size: 13px; }
.ref-lv.now { border-color: var(--rf-a); box-shadow: 0 0 0 1px var(--rf-glow), 0 20px 50px -26px var(--rf-glow); }
.ref-here { margin-left: auto; padding: 4px 10px; border-radius: 9px; background: var(--rf-glow); color: #fff; font-weight: 800; font-size: 12px; white-space: nowrap; }
.op-ico.referral { color: #c9a8ff; }
.op-ico.withdraw { color: #f5cf86; }
/* подсказка другу, пришедшему по ссылке (когда программа запущена) */
.ref-toast { position: fixed; left: 50%; bottom: 20px; z-index: 120; display: flex; align-items: center; gap: 12px; width: min(440px, calc(100% - 32px)); padding: 14px 16px; border-radius: 16px;
  background: linear-gradient(180deg, #172036, #10162a); border: 1px solid rgba(61, 123, 255, .45); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8); transform: translate(-50%, 160%); transition: transform .35s ease; }
.ref-toast.show { transform: translate(-50%, 0); }
.ref-toast-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(61, 123, 255, .18); color: var(--blue-hi); }
.ref-toast-ico .i { width: 20px; height: 20px; }
.ref-toast b { font-weight: 800; font-size: 14.5px; }
.ref-toast p { margin-top: 2px; color: var(--muted); font-weight: 600; font-size: 13px; }
.ref-toast button { margin-left: auto; width: 30px; height: 30px; border-radius: 9px; color: var(--muted); font-size: 20px; line-height: 1; }
/* окно оплаты: скидка по приглашению и промокод (после запуска оплаты на сайте) */
.pay-promo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pay-promo input { flex: 1 1 160px; min-width: 0; height: 42px; padding: 0 14px; border-radius: 11px; background: #0d1120; border: 1px solid var(--line-2); color: var(--text); font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; outline: 0; }
.pay-promo input:focus { border-color: var(--blue); }
.pay-promo small { flex-basis: 100%; color: var(--dim); font-weight: 600; font-size: 13px; }
.pay-promo small:empty { display: none; }
.pay-promo small.ok { color: #8be3b2; }
.pay-promo small.bad { color: #ff9b9b; }
@media (max-width: 960px) {
  .ref-top { grid-template-columns: minmax(0, 1fr); }
  .ref-levels { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ref-card { padding: 18px; }
  .ref-h { font-size: 19px; }
  .ref-sum { font-size: 30px; }
  .ref-next { flex-basis: 100%; margin-left: 0; }
}

/* ---------- поддержка (/support/) ---------- */
.sup-contact { position: relative; padding: 24px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
.sup-contact:hover { border-color: var(--blue); transform: translateY(-2px); }
.sup-contact span { color: var(--blue-hi); font-weight: 800; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.sup-contact b { display: block; margin-top: 10px; font-family: var(--display); font-weight: 700; font-size: 22px; }
.sup-contact p { margin-top: 6px; color: var(--muted); font-weight: 600; font-size: 14.5px; }
.sup-contact i { position: absolute; top: 22px; right: 22px; font-style: normal; color: var(--blue-hi); font-weight: 800; }
.sup-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; margin-top: 30px; align-items: start; }
.sup-side { display: grid; gap: 16px; }
.sup-new p { margin-top: 14px; color: var(--muted); font-weight: 600; font-size: 14.5px; }
.sup-card { padding: 24px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.sup-card h2 { font-family: var(--display); font-weight: 700; font-size: 20px; }
.sup-card .qa { margin-top: 14px; }
.sup-card .qa a { color: var(--blue-hi); font-weight: 700; }

/* ---------- документы (/terms/, /privacy/ — тексты с живого сайта, tools/docs.js) ---------- */
.doc .art-body h2 span { margin-right: 12px; color: var(--blue-hi); }
.doc-contact { margin-top: 40px; padding: 20px 22px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); color: var(--muted); font-weight: 600; font-size: 14.5px; line-height: 1.8; }
.doc-contact a { color: var(--blue-hi); font-weight: 700; }
.ft-code { color: var(--dim); }
@media (max-width: 1100px) {
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cb-hero { grid-template-columns: auto minmax(0, 1fr); }
  .cb-stats { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .auth { grid-template-columns: minmax(0, 1fr); max-width: 600px; }
  .auth-promo { order: 0; }
  .auth-art { min-height: 220px; }
}
@media (max-width: 860px) {
  .sup-grid, .dash-cols { grid-template-columns: minmax(0, 1fr); }
  .lvls { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .steps3 { grid-template-columns: minmax(0, 1fr); }
}
/* телефон: «.wrap { padding: 0 16px }» обнуляет отступы сверху и снизу — у статей, поддержки, документов, входа, кабинета и 404 возвращаем */
@media (max-width: 640px) {
  .wrap.art { padding-top: 22px; padding-bottom: 20px; }
  .wrap.auth, .wrap.dash { padding-top: 22px; padding-bottom: 40px; }
  .auth-card, .auth-promo { padding: 22px; border-radius: 22px; }
  .auth-h, .auth-promo-h { font-size: 24px; }
  .auth-art { min-height: 150px; }
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .dcard { min-height: 0; }
  .dash-hd { flex-wrap: wrap; gap: 14px 16px; padding: 18px; border-radius: 22px; }
  .dash-rank { width: 76px; height: 66px; }
  .dash-id { flex: 1; }
  .dash-id h1 { font-size: 22px; }
  .dash-out { margin-left: 0; width: 100%; }
  .dash-tabs a { padding: 0 14px; }
  .ord { grid-template-columns: 56px minmax(0, 1fr); }
  .ord-pic { width: 56px; height: 35px; }
  .ord-side { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; justify-items: start; gap: 6px 10px; text-align: left; }
  .cb-hero { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px; }
  .cb-rank { width: 140px; height: 112px; }
  .cb-name { font-size: 26px; }
  .cb-stats { grid-template-columns: minmax(0, 1fr); }
  .lvl-pic { height: 120px; }
  .lvl-pct { font-size: 24px; }
  .wrap.nf { padding-top: 64px; padding-bottom: 80px; }
}

/* страница «не найдено» (404.html) */
.nf { padding-top: 90px; padding-bottom: 110px; text-align: center; }
.nf h1 { margin-top: 14px; font-family: var(--display); font-weight: 800; font-size: 44px; }
.nf p { margin: 16px auto 0; max-width: 560px; color: var(--muted); font-weight: 600; font-size: 16px; line-height: 1.6; }
.nf p a { color: var(--blue-hi); }
.nf .md-cta { justify-content: center; }
.nf .btn .i { width: 18px; height: 18px; }
@media (max-width: 1024px) { .art-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .art-hd h1, .nf h1 { font-size: 30px; }
  .art-lead { font-size: 16px; }
  .art-body { font-size: 15.5px; }
  .art-body h2, .art-faq h2, .art-more h2 { font-size: 22px; }
  .art-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- подвал ---------- */
.ft { margin-top: 100px; border-top: 1px solid var(--line); background: #080a11; }
.ft-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding: 56px 0 44px; }
.ft-brand p { margin-top: 16px; max-width: 300px; color: var(--dim); font-weight: 600; font-size: 14px; line-height: 1.6; }
.ft-cols h4 { margin-bottom: 16px; font-weight: 800; font-size: 14px; }
/* ссылки колонок подвала; кнопки соцсетей (.soc) сюда не попадают — у них свои размеры и значок по центру */
.ft-cols > div > a:not(.logo) { display: block; margin-top: 11px; color: var(--muted); font-weight: 600; font-size: 14px; transition: color .2s; }
.ft-cols > div > a:not(.logo):hover { color: #fff; }
.soc { display: flex; gap: 8px; margin-top: 20px; }
.soc a { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--muted); transition: color .2s, border-color .2s; }
.soc a:hover { color: #fff; border-color: var(--blue); }
.soc .i { width: 18px; height: 18px; }
.ft-copy { display: flex; justify-content: space-between; gap: 20px; padding: 22px 0 30px; border-top: 1px solid var(--line); color: var(--dim); font-weight: 600; font-size: 13px; }
.ft-lang a { color: var(--dim); transition: color .2s; }
.ft-lang a:hover, .ft-lang a.on { color: #fff; }

@media (prefers-reduced-motion: reduce) { .wrow, .sweep { animation: none; } }

/* ---------- экраны поменьше ---------- */
@media (max-width: 1240px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .nav.open { display: flex; position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 6px 24px 16px; background: rgba(10, 12, 20, .98); border-bottom: 1px solid var(--line); }
  .nav.open a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
  .nav.open .nav-lang { display: flex; gap: 10px; color: #fff; border-bottom: 0; }
  .prods { grid-template-columns: repeat(2, 1fr); }
  .games { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat { padding-left: 20px; }
  .stat b { font-size: 26px; }
  .stat img { width: 90px; height: 90px; margin-right: 2px; }
}
/* у реселлера в шапке на одну кнопку больше: меню сворачивается в «бургер» чуть раньше, чтобы шапка не вылезала за экран */
@media (max-width: 1340px) {
  html.is-reseller .nav { display: none; }
  html.is-reseller .burger { display: inline-flex; }
  html.is-reseller .nav.open { display: flex; position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 6px 24px 16px; background: rgba(10, 12, 20, .98); border-bottom: 1px solid var(--line); }
  html.is-reseller .nav.open a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
  html.is-reseller .nav.open .nav-lang { display: flex; gap: 10px; color: #fff; border-bottom: 0; }
}
/* на узком экране — короткая подпись «Панель» */
@media (max-width: 900px) {
  .hd-panel .hp-long { display: none; }
  .hd-panel .hp-short { display: inline; }
}
/* у реселлера на узкой шапке кнопки RU/EN нет (язык переключается пунктом «English» в меню) — иначе шапка шире экрана */
@media (max-width: 760px) {
  html.is-reseller .lang { display: none; }
}
@media (max-width: 1024px) {
  :root { --tile-w: 150px; --tile-h: 94px; }
  .hero-in { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 24px; }
  /* персонаж под поиском: ноги уходят под нижнюю линию первого экрана, как на компьютере */
  .hero-art { height: 380px; --char-h: 517px; --sink: 105px; }
  .hero-char { left: 50%; }
  .hero-mark { left: calc(50% + 8px); top: 46%; width: 493px; }
  .f1 { left: 14%; top: 4%; } .f2 { left: 78%; top: 10%; } .f3 { left: 8%; top: 62%; } .f4 { left: 80%; top: 58%; }
  .wall { top: -10%; }
  .wall-shade { background: linear-gradient(180deg, #0a0c14 0%, rgba(10, 12, 20, .9) 45%, rgba(10, 12, 20, .66) 68%, rgba(10, 12, 20, .72) 88%, #0a0c14 100%); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .games { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; gap: 26px; }
  .ft-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) { .items, .games { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  :root { --tile-w: 118px; --tile-h: 74px; }
  .wrap { padding: 0 16px; }
  .hd-in { height: 64px; gap: 10px; }
  .nav.open { top: 64px; padding: 4px 16px 14px; }
  .logo span { font-size: 14px; }
  .logo img { width: 32px; height: 32px; }
  .lang, #hdFind { display: none; }
  /* реселлеру на телефоне: логотип без надписи — рядом помещаются «Панель», «Кабинет» и меню */
  html.is-reseller .hd .logo span { display: none; }
  .hd-panel { height: 42px; padding: 0 12px 0 10px; gap: 7px; font-size: 13.5px; }
  /* вошёл: логотип без надписи, «Кабинет» — значком: рядом помещаются баланс и меню */
  html.is-auth .hd .logo span { display: none; }
  html.is-auth .acc-cab { display: none; }
  html.is-auth .hd-r [data-account-link] { width: 42px; padding: 0; justify-content: center; }
  .hd-bal { padding: 0 11px 0 9px; gap: 6px; font-size: 13.5px; }
  .hd-bal-add { display: none; }
  .wall { left: -30%; width: 190%; top: -20%; transform: perspective(1200px) rotateX(34deg) rotateY(-10deg) rotateZ(7deg) scale(1.05); }
  .hero-art { height: 330px; --char-h: 465px; }
  .hero-mark { top: 50%; width: 440px; }
  .float { --s: 46px; border-radius: 12px; }
  .f1 { left: 4%; top: 6%; } .f2 { left: 82%; top: 8%; } .f3 { left: 2%; top: 60%; --s: 52px; } .f4 { left: 84%; top: 56%; }
  .hero h1 { font-size: 36px; }
  .hero-txt > p { font-size: 15.5px; }
  .hero-find { height: 58px; padding: 0 6px 0 16px; }
  .hero-find .btn { height: 44px; padding: 0 16px; }
  .hot { flex-direction: column; align-items: flex-start; }
  .stats { gap: 10px; }
  .stat { height: auto; flex-direction: column-reverse; align-items: flex-start; padding: 6px 16px 18px; }
  .stat img { width: 72px; height: 72px; margin: 8px 0 4px -4px; }
  .stat b { font-size: 24px; }
  .sec { margin-top: 64px; }
  .sec-hd { flex-direction: column; align-items: flex-start; gap: 14px; }
  .sec-hd h2, .faq-l h2 { font-size: 26px; }
  .prods { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .prods::-webkit-scrollbar { display: none; }
  .prod { flex: 0 0 82%; scroll-snap-align: start; }
  .cfind { width: 100%; margin-left: 0; }
  .chips button { height: 38px; padding: 0 13px; font-size: 13px; }
  .games { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* карточки игр на телефоне: компактнее, без кнопки — вся карточка ссылка */
  .gcard { border-radius: 16px; }
  .gt { font-size: calc(var(--fs, 24px) * .62); padding: 0 10px; }
  .gcard .st, .topb { top: 7px; height: 21px; padding: 0 7px; gap: 4px; font-size: 9.5px; }
  .gcard .st { right: 7px; } .topb { left: 7px; } .topb .i { width: 11px; height: 11px; }
  .gb { padding: 10px 11px 12px; }
  .gname { gap: 8px; margin-bottom: 10px; font-size: 13px; }
  .gname img { width: 28px; height: 28px; border-radius: 8px; }
  .gfoot { padding-top: 10px; }
  .gfoot .btn { display: none; }
  .gcount { font-size: 12px; }
  .gcount b { font-size: 16px; }
  /* каталог на телефоне: две колонки, карточка компактнее, вся карточка — ссылка */
  .items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .items .prod { padding: 6px; border-radius: 16px; }
  .items .pimg { border-radius: 12px; }
  .items .pimg .st { top: 6px; left: 6px; height: 22px; padding: 0 7px; gap: 5px; font-size: 10.5px; }
  .items .pb { padding: 10px 4px 4px; }
  .items .pg { font-size: 11.5px; }
  .items .pn { font-size: 14px; }
  .items .tags, .items .pf .btn { display: none; }
  .items .pf { padding-top: 10px; }
  .items .price b { font-size: 15px; }
  /* на телефоне разделы — сеткой 2×2, число читов видно и здесь */
  .cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .cats button { justify-content: center; gap: 7px; height: 44px; padding: 0 8px; font-size: 13.5px; }
  .cats button .i { width: 17px; height: 17px; }
  .cats button em { min-width: 0; height: 20px; padding: 0 6px; font-size: 11.5px; line-height: 20px; }
  .tools .chips { flex-wrap: nowrap; overflow-x: auto; width: calc(100% + 32px); margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
  .tools .chips::-webkit-scrollbar { display: none; }
  .tools .chips button { flex: none; }
  .cgame { width: 100%; margin-left: 0; }
  .cgame select { width: 100%; max-width: none; }
  .gb .go { display: none; }
  .ft-cols { grid-template-columns: 1fr; gap: 28px; }
  .ft-copy { flex-direction: column; }
}
/* узкие телефоны (360 и уже): кнопки шапки чуть компактнее, на самых узких — логотип без надписи */
@media (max-width: 380px) {
  .hd-r { gap: 8px; }
  .hd-r .btn-sm { padding: 0 12px; gap: 7px; }
  .hd-panel { padding: 0 10px 0 9px; }
  .hd-bal { padding: 0 10px; }
  .hd-bal .i { display: none; }
}
@media (max-width: 340px) {
  .hd .logo span { display: none; }
  .hd-panel .i { display: none; }
  /* реселлер с большой суммой на балансе: баланс важнее логотипа */
  html.is-reseller .hd .logo { display: none; }
}