@font-face { font-family: "Golos Text"; src: url("/assets/fonts/golos-400.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Golos Text"; src: url("/assets/fonts/golos-600.woff2") format("woff2"); font-weight: 600 650; font-style: normal; font-display: swap; }
@font-face { font-family: "Golos Text"; src: url("/assets/fonts/golos-700.woff2") format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geologica"; src: url("/assets/fonts/geologica-var.woff2") format("woff2-variations"); font-weight: 400 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  /* SLARP tokens r4, dark theme (docs/tokens/slarp.tokens.json) */
  --bg: #131110;
  --bg-2: #1A1714;
  --surface: #1A1714;
  --surface-2: #221D19;
  --surface-3: #2A2521;
  --text: #F4EFE4;
  --muted: #B3AA98;
  --muted-2: #938C7B;
  --gold: #E9C87C;
  --gold-fill: #E9C87C;
  --gold-text: #E9C87C;
  --gold-strong: #D9B45E;
  --gold-ink: #171310;
  --blue: #5B8FE8;
  --paint-cobalt: #5B8FE8;
  --paint-patina: #3FA08B;
  --paint-plum: #9C7BD4;
  --paint-master: #F4EFE4;
  --green: #93BE9D;
  --red: #F26D5E;
  --line: #2A2521;
  --line-strong: #3A342D;
  --shadow: none;
  --shadow-soft: none;
  --sheet-shadow: 0 -12px 40px rgba(0, 0, 0, .5);
  --surface-highlight: rgba(255, 255, 255, .03);
  --max: 1200px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-input: 14px;
  --radius-button: 16px;
  --radius-card: 20px;
  --radius-panel: 24px;
  --radius: var(--radius-card);
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --text-tertiary: var(--muted-2);
  --color-success: var(--green);
  --color-error: var(--red);
  --color-disabled: #7A7364;
  --body: "Golos Text", "Segoe UI", sans-serif;
  --display: "Geologica", "Segoe UI", sans-serif;
  --accent-wash: rgba(233, 200, 124, .09);
  --accent-wash-strong: rgba(233, 200, 124, .16);
  --accent-border-soft: rgba(233, 200, 124, .45);
  --hairline: rgba(255, 255, 255, .06);
  --hairline-strong: rgba(255, 255, 255, .10);
  --spring: cubic-bezier(0.34, 1.30, 0.42, 1);
  --t-press: 120ms;
  --t-move: 200ms;
  --t-sheet: 320ms;
  /* legacy aliases -> token core (resolve per-theme dynamically) */
  --canvas: var(--bg);
  --canvas-raised: var(--surface);
  --panel: var(--surface);
  --panel-raised: var(--surface-2);
  --panel-hover: var(--surface-3);
  --ink: var(--text);
  --ink-secondary: var(--muted);
  --ink-tertiary: var(--muted-2);
  --edge: var(--line);
  --edge-strong: var(--line-strong);
  --intent: var(--gold);
  --intent-hover: var(--gold-strong);
  --intent-wash: rgba(233, 200, 124, .12);
  --ui-bg: var(--bg);
  --ui-surface: var(--surface);
  --ui-surface-hover: var(--surface-2);
  --ui-control: var(--surface-2);
  --ui-line: var(--line);
  --ui-line-strong: var(--line-strong);
  --ui-text: var(--text);
  --ui-muted: var(--muted);
  --ui-gold: var(--gold);
  --ui-radius-panel: var(--radius-panel);
;--focus-ring:#E9C87C}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { max-width: 100%; scroll-behavior: smooth; }
@view-transition { navigation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* Направление Б: чистая нейтральная страница, тех-сетка фона удалена */
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--gold-fill); color: var(--gold-ink); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
a, button, input, select, summary, [role="button"], [role="tab"] { -webkit-tap-highlight-color: transparent; }
button, select, summary, [role="button"], [role="tab"] { min-height: 44px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [role="button"]:focus-visible, [role="tab"]:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
button:disabled, [aria-disabled="true"] { color: var(--color-disabled); cursor: not-allowed; }
.motion-ready .reveal-item { opacity: 0; transform: translate3d(0,14px,0); filter: blur(2px); transition: opacity .42s ease, transform .42s cubic-bezier(.2,.75,.25,1), filter .42s ease; transition-delay: var(--reveal-delay,0ms); will-change: opacity,transform; }
.motion-ready .reveal-item.reveal-card { transform: translate3d(0,14px,0) scale(.985); }
.motion-ready .reveal-item.is-visible { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
.motion-ready .gold { background: none; color: var(--gold-text); animation: none; }
.skip-link { position: fixed; z-index: 1000; top: 10px; left: 12px; min-height: 44px; display: inline-flex; align-items: center; transform: translateY(-150%); border-radius: 5px; padding: 8px 14px; background: var(--gold-fill); color: #171811; font-size: 12px; font-weight: 800; transition: transform .18s ease; }
.skip-link:focus { transform: translateY(0); }

.container { width: min(calc(100% - 40px), var(--max)); min-width: 0; margin-inline: auto; }
.page { min-height: 0; }
.page, main, section, article, aside, nav, form, .container > *, .workspace > *, .checkout-layout > *, .profile-dashboard-grid > * { min-width: 0; }
.section { padding: 72px 0; border-bottom: 1px solid var(--line); }
.section.compact { padding: 30px 0; }
.section-banner { position: relative; height: 148px; overflow: hidden; margin-bottom: 16px; border: 1px solid rgba(237,207,121,.16); border-radius: 20px; background: var(--bg); box-shadow: 0 16px 38px rgba(0,0,0,.2); }
.section-banner img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center right; }
.section-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,9,8,.84) 0%, rgba(8,9,8,.38) 35%, rgba(8,9,8,.04) 68%); pointer-events: none; }
.section-banner h1 { position: absolute; z-index: 1; left: 28px; top: 50%; margin: 0; transform: translateY(-50%); color: var(--text); font: 800 28px/1 var(--display); letter-spacing: -.03em; text-transform: none; text-shadow: 0 2px 18px rgba(0,0,0,.32); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
.section-head > div { max-width: 780px; }
.section-head p { max-width: 470px; margin: 0; color: var(--muted); }
.eyebrow { color: var(--gold-text); font-size: 11px; font-weight: 800; text-transform: uppercase; }
h1, h2, h3, p {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}
h1, h2 { font-family: var(--display); font-weight: 800; letter-spacing: .01em; text-transform: uppercase; }
h1 { margin: 14px 0 0; font-size: clamp(34px, 9vw, 52px); line-height: 1.0; }
h2 { margin: 10px 0 0; font-size: clamp(26px, 5vw, 34px); line-height: 1.05; }
h3 { margin: 0; font-size: 18px; line-height: 1.2; }
.muted { color: var(--muted); }
.gold { color: var(--gold-text); }
.blue { color: var(--blue); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
  backdrop-filter: blur(24px) saturate(1.35);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
  box-shadow: 0 10px 35px rgba(0,0,0,.18);
  animation: none;
}
.checkout-header { position: relative; }
.checkout-header-main { height: 72px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.checkout-header-main .icon-button { justify-self: end; }
.checkout-header-title { color: var(--muted); font-size: 12px; font-weight: 800; }
.header-main { height: 72px; display: grid; grid-template-columns: auto minmax(260px, 1fr) auto; align-items: center; gap: 24px; }
.brand { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; gap: 9px; width: fit-content; color: var(--text); }
.brand-mark { height: 20px; width: auto; flex: none; color: var(--gold-text); transition: transform var(--t-move) var(--spring); }
.brand-word { height: 16px; width: 68px; display: block; flex: none; }
.brand:hover .brand-mark { transform: rotate(-7deg) scale(1.08); }
.site-search { position: relative; max-width: 650px; width: 100%; margin-inline: auto; }
.site-search svg { position: absolute; left: 15px; top: 50%; width: 18px; transform: translateY(-50%); color: var(--muted-2); }
.site-search input {
  width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 6px; outline: none;
  background: var(--surface-2); color: var(--text); padding: 0 44px; transition: border-color .18s ease, background .18s ease;
}
.site-search input:focus { border-color: var(--line-strong); background: var(--surface-2); }
.site-search kbd { position: absolute; right: 12px; top: 11px; border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; color: var(--muted-2); font-size: 10px; }
.search-suggestions { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 100; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 7px; background: #1d1e1a; box-shadow: var(--shadow); }
.search-suggestions:not([hidden]) { transform-origin: top center; animation: menu-pop .2s cubic-bezier(.2,.75,.25,1) both; }
.search-suggestions a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.search-suggestions a:last-child { border-bottom: 0; }
.search-suggestions a:hover, .search-suggestions a.active { background: var(--accent-wash); }
.search-suggestions a.active { box-shadow: inset 2px 0 var(--gold); }
.search-suggestions b { font-size: 12px; }
.search-suggestions small, .search-suggestions p { margin: 0; color: var(--muted); font-size: 10px; }
.search-suggestions p { padding: 13px 14px; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-button {
  position: relative; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px;
  background: var(--hairline); cursor: pointer; transition: border-color .18s ease, background .18s ease;
}
.icon-button:hover { border-color: var(--line-strong); background: var(--accent-wash); }
.icon-button svg { width: 19px; height: 19px; transition: transform .2s cubic-bezier(.2,.75,.25,1); }
.icon-button:hover svg { transform: scale(1.08); }
.icon-button:active, .button:active, .quick:active, .filter:active, .package:active, .order-filters button:active { transform: translateY(0) scale(.97); }
.menu-button { display: none; }
.header-nav { border-top: 0; }
.nav-row {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}
.nav-row a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  padding: 0 14px;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.nav-row-icon {
  width: 20px;
  height: 20px;
  display: grid;
  flex: 0 0 20px;
  place-items: center;
  color: var(--muted-2);
  transition: color .18s ease, transform .18s ease;
}
.nav-row-icon svg { width: 19px; height: 19px; }
.nav-row a:hover {
  color: var(--text);
  background: var(--hairline);
}
.nav-row a:hover .nav-row-icon { color: var(--text); transform: translateY(-1px); }
.nav-row a.active {
  color: var(--gold-text); background: transparent;
}
.nav-row a.active .nav-row-icon { color: var(--gold-text); }
.nav-row a:active { transform: scale(.98); }
.nav-spacer { flex: 1; }
.nav-status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted-2); font-size: 11px; }
.nav-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.nav-status i, .status-chip i { animation: status-pulse 2.1s ease-in-out infinite; }
.mobile-support-link { display: none !important; }
.mobile-menu-panel { display: none; }

.button {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 12px;
  position: relative; overflow: hidden; isolation: isolate; padding: 0 18px; background: var(--gold-fill); color: var(--gold-ink); font-weight: 800; cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.button::after { content: ""; position: absolute; inset: -40% -30%; z-index: 0; transform: translateX(-120%) skewX(-18deg); background: linear-gradient(90deg,transparent,var(--hairline),transparent); transition: transform .5s ease; pointer-events: none; }
.button:hover { transform: translateY(-2px); background: #f7e5a9; box-shadow: 0 10px 28px var(--accent-wash); }
.button:hover::after { transform: translateX(120%) skewX(-18deg); }
.button.secondary { border-color: var(--line); background: transparent; color: var(--text); }
.button.secondary:hover { border-color: var(--line-strong); background: var(--accent-wash); }
.button.blue { background: var(--blue); color: #0b1d2b; }
.button.full { width: 100%; }
.button svg { width: 18px; height: 18px; }
.button[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.mini-button[disabled] { cursor: default; }

.home-hero { padding: 48px 0 34px; border-bottom: 1px solid var(--line); }
.hero-copy { max-width: 980px; margin-bottom: 28px; }
.hero-copy p { max-width: 650px; margin: 18px 0 0; color: var(--muted); font-size: 18px; }
.store-hero { padding: 20px 0 24px; border-bottom: 1px solid var(--line); }
.store-hero-top { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: end; gap: 24px; margin-bottom: 18px; }
.store-hero-top h1 { margin-bottom: 0; }
.home-title-mobile { display: none; }
.store-hero-top > p { margin: 0 0 7px; color: var(--muted); font-size: 16px; }
.home-showcase { margin-top: 24px; }
.home-showcase-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.home-showcase-head span { display: block; margin-bottom: 4px; color: var(--gold-text); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.home-showcase-head h2 { margin: 0; font: 800 25px/1.05 var(--display); letter-spacing: -.025em; }
.home-showcase-head > a { position: relative; top: 5px; align-self: flex-end; color: var(--muted); font-size: 12px; font-weight: 700; }
.home-showcase-head > a:hover { color: var(--gold-text); }
.home-showcase-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.home-showcase-card { min-width: 0; overflow: hidden; display: grid; grid-template-rows: 108px auto; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--text); box-shadow: 0 12px 28px rgba(0,0,0,.14); transition: border-color .18s ease, background-color .18s ease, transform .18s ease; }
.home-showcase-card:hover, .home-showcase-card:focus-visible { border-color: var(--accent-border-soft); background: #20221d; transform: translateY(-2px); outline: 0; }
.home-showcase-art { position: relative; min-width: 0; overflow: hidden; display: grid; place-items: center; background: var(--surface-2); }
.home-showcase-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10,11,9,.35)); pointer-events: none; }
.home-showcase-art img { width: 100%; height: 100%; display: block; object-fit: cover; transition: filter .18s ease; }
.home-showcase-card:hover .home-showcase-art img { filter: brightness(1.06); }
.home-showcase-card.stars .home-showcase-art { background: radial-gradient(circle at 50% 45%, rgba(255,207,54,.18), transparent 58%), var(--surface-2); }
.home-showcase-card.premium .home-showcase-art { background: radial-gradient(circle at 50% 45%, rgba(131,76,255,.22), transparent 60%), #12110f; }
.home-showcase-card.stars .home-showcase-art img, .home-showcase-card.premium .home-showcase-art img, .home-showcase-card.service .home-showcase-art img { width: 58px; height: 58px; object-fit: contain; }
.home-showcase-card.service.playstation .home-showcase-art { background: radial-gradient(circle at 50% 40%, rgba(52,136,205,.18), transparent 62%), var(--surface-2); }
.home-showcase-card.service.app-store .home-showcase-art { background: radial-gradient(circle at 50% 40%, var(--hairline), transparent 62%), var(--surface-2); }
.home-showcase-card.service.xbox .home-showcase-art { background: radial-gradient(circle at 50% 40%, rgba(33,169,62,.2), transparent 62%), var(--surface-2); }
.home-showcase-copy { min-width: 0; display: grid; gap: 3px; padding: 13px 14px 15px; }
.home-showcase-copy small { color: var(--gold-text); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.home-showcase-copy b { overflow: hidden; font-size: 15px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.home-showcase-copy em { overflow: hidden; color: var(--muted); font-size: 11px; font-style: normal; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.site-verification { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.steam-flow { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.steam-flow-head { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 28px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.steam-flow-brand { display: inline-flex; align-items: center; gap: 16px; }
.steam-flow-brand img { width: 42px; height: 42px; object-fit: contain; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface-2); padding: 8px; }
.steam-flow-brand span { color: var(--muted); font-size: 12px; font-weight: 700; }
.status-chip { display: inline-flex; align-items: center; gap: 8px; color: var(--green); font-size: 11px; font-weight: 800; }
.status-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.steam-flow-grid { display: grid; grid-template-columns: minmax(270px, 1fr) minmax(300px, 1.08fr) 284px; }
.steam-step { position: relative; min-height: 214px; padding: 28px; border-right: 1px solid var(--line); }
.step-number { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-bottom: 16px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--gold-text); font-size: 11px; font-weight: 800; }
.steam-step .field { gap: 7px; }
.steam-step .field label { color: var(--text); font-size: 14px; }
.steam-step .input-wrap input { height: 54px; font-size: 14px; }
.amount-input { position: relative; }
.amount-input input { width: 100%; height: 62px; border: 1px solid var(--line-strong); border-radius: 12px; outline: 0; background: var(--bg); color: var(--text); padding: 0 56px 0 18px; font-family: var(--display); font-size: 22px; font-weight: 600; }
.amount-input input:focus { border-color: var(--gold); }
.amount-input input.invalid { border-color: var(--red); }
.amount-input span { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--gold-text); font-family: var(--display); font-size: 18px; }
.amount-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 17px; }
.amount-presets .quick { width: 100%; min-width: 0; min-height: 44px; }
.steam-order { display: flex; flex-direction: column; justify-content: space-between; min-height: 214px; padding: 28px; background: var(--accent-wash); }
.order-kicker { color: var(--gold-text); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.order-amount { margin-top: 7px; color: var(--gold-text); font-family: var(--display); font-size: 34px; line-height: 1; }
.steam-order p { margin: 10px 0 0; color: var(--muted-2); font-size: 10px; line-height: 1.45; }
.steam-order .button { margin-top: 20px; }
.flow-proofs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); background: var(--hairline); }
.flow-proofs span, .flow-proofs a { min-height: 48px; display: flex; align-items: center; gap: 5px; padding: 0 18px; color: var(--muted-2); font-size: 10px; }
.flow-proofs span + span, .flow-proofs a { border-left: 1px solid var(--line); }
.flow-proofs b { color: var(--text); }
.flow-proofs a:hover { color: var(--gold-text); }
.storefront-section { padding-top: 64px; }
.storefront-grid { display: grid; grid-template-columns: 1.18fr 1fr 1fr; gap: 12px; }
.featured-service { min-height: 210px; display: grid; grid-template-columns: auto 1fr; align-content: space-between; column-gap: 18px; row-gap: 22px; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: var(--surface); transition: border-color .24s ease, transform .24s cubic-bezier(.2,.75,.25,1), background .24s ease, box-shadow .24s ease; }
.featured-service:hover { transform: translateY(-4px); border-color: var(--line-strong); background: var(--surface-2); box-shadow: 0 18px 38px rgba(0,0,0,.18); }
.featured-service > img, .service-spark { width: 46px; height: 46px; align-self: start; object-fit: contain; }
.featured-service > img { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.service-spark { display: grid; place-items: center; border-radius: 8px; background: var(--bg); color: var(--gold-text); font-size: 24px; }
.featured-service > div > span { color: var(--muted-2); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.featured-service h3 { margin-top: 4px; font-family: var(--display); font-size: 19px; text-transform: uppercase; }
.featured-service p { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.featured-service > b { grid-column: 1 / -1; display: flex; justify-content: space-between; color: var(--gold-text); font-size: 12px; }
.telegram-service { border-color: var(--line-strong); }
.telegram-service > b { color: var(--blue); }
.game-showcase { background: var(--hairline); }
.commerce-board { display: grid; grid-template-columns: 260px minmax(0, 1fr) 280px; min-height: 226px; border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow); }
.board-brand, .board-fields, .board-summary { padding: 26px; }
.board-brand { display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); background: var(--bg-2); }
.board-brand img { width: 142px; height: auto; }
.board-brand small { color: var(--muted-2); font-size: 11px; text-transform: uppercase; }
.board-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: center; border-right: 1px solid var(--line); }
.board-summary { display: flex; flex-direction: column; justify-content: space-between; }
.field { display: grid; gap: 8px; }
.field label { color: var(--muted); font-size: 12px; font-weight: 700; }
.input-wrap { position: relative; transition: transform .18s ease; }
.input-wrap:focus-within { transform: translateY(-1px); }
.input-wrap input, .field select {
  width: 100%; height: 50px; border: 1px solid var(--line); border-radius: 12px; outline: 0; background: var(--bg); color: var(--text); padding: 0 42px 0 14px;
}
.input-wrap input:focus, .field select:focus { border-color: var(--gold); }
.input-wrap > span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--gold-text); font-weight: 800; }
.quick-row { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.quick {
  height: 40px; min-width: 70px; border: 1px solid var(--line); border-radius: 11px; background: transparent; color: var(--muted); padding: 0 10px; font-size: 11px; font-weight: 800; cursor: pointer;
}
.quick:hover, .quick.active { border-color: var(--gold); color: var(--gold-text); background: var(--accent-wash); }
.summary-label { color: var(--muted); font-size: 12px; }
.summary-value { margin-top: 5px; color: var(--gold-text); font-family: var(--display); font-size: 34px; line-height: 1; }
.summary-note { margin: 10px 0 0; color: var(--muted-2); font-size: 10px; }
.assurance-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); border-top: 0; background: var(--hairline); }
.assurance-row span { padding: 11px 16px; color: var(--muted-2); font-size: 10px; }
.assurance-row span + span { border-left: 1px solid var(--line); }
.assurance-row b { color: var(--text); }

.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.service-card { min-height: 188px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: var(--surface); transition: transform .24s cubic-bezier(.2,.75,.25,1), border-color .24s ease, background .24s ease, box-shadow .24s ease; }
.service-card:hover { transform: translateY(-5px); border-color: var(--line-strong); background: var(--surface-2); box-shadow: 0 18px 38px rgba(0,0,0,.18); }
.service-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 8px; background: var(--bg); }
.service-icon img { width: 36px; max-height: 36px; object-fit: contain; }
.service-icon.star { color: var(--gold-text); font-size: 30px; }
.service-card p { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.service-link { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; color: var(--gold-text); font-size: 12px; font-weight: 800; }

.game-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.game-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: transform .24s cubic-bezier(.2,.75,.25,1), border-color .24s ease, box-shadow .24s ease; }
.game-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 18px 38px rgba(0,0,0,.18); }
.game-cover { position: relative; aspect-ratio: 460 / 215; overflow: hidden; background: var(--bg-2); }
.game-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.game-card:hover .game-cover img { transform: scale(1.04); }
.game-cover span { position: absolute; left: 8px; bottom: 8px; border-radius: 5px; padding: 4px 7px; background: rgba(15,16,13,.88); color: var(--gold-text); font-size: 9px; font-weight: 800; }
.game-info { padding: 12px; }
.game-info h3 { min-height: 42px; font-size: 14px; }
.game-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; color: var(--muted-2); font-size: 10px; }

.page-hero { padding: 46px 0 30px; border-bottom: 1px solid var(--line); }
.page-hero-row { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 36px; }
.page-hero-row > *, .workspace > * { min-width: 0; }
.page-hero p { max-width: 650px; margin: 16px 0 0; color: var(--muted); font-size: 17px; }
.page-badge { display: flex; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 18px; background: linear-gradient(145deg, var(--surface-highlight), transparent 46%), var(--surface); box-shadow: var(--shadow-soft); }
.page-badge img { width: 46px; height: 46px; max-height: none; object-fit: contain; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface-2); padding: 9px; }
.page-badge b { display: block; font-size: 13px; }
.page-badge small { color: var(--muted-2); font-size: 10px; }
.breadcrumbs { margin-bottom: 14px; color: var(--muted-2); font-size: 11px; }
.breadcrumbs a:hover { color: var(--gold-text); }

.workspace { display: grid; grid-template-columns: minmax(0, 1.25fr) 380px; gap: 18px; }
.workspace-main, .workspace-side { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, var(--surface-highlight), transparent 38%), var(--surface); box-shadow: var(--shadow-soft); }
.workspace-main { padding: 28px; }
.workspace-side { position: sticky; top: 136px; height: fit-content; padding: 26px; }
.steam-workspace, .telegram-workspace { grid-template-columns: minmax(0, 1fr) 260px; }
.workspace-side.action-only, .home-order-summary.action-only { display: flex; align-items: center; justify-content: center; padding: 18px; }
.workspace-side.action-only .button, .home-order-summary.action-only .button { width: 100%; min-height: 52px; margin: 0; }
.workspace-title { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.workspace-title > img { width: 44px; height: 44px; object-fit: contain; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface-2); padding: 9px; }
.workspace-title span { color: var(--green); font-size: 11px; font-weight: 800; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .wide { grid-column: 1 / -1; }
.helper { margin: 7px 0 0; color: var(--muted-2); font-size: 10px; }
.field-error { margin: 7px 0 0; color: var(--red); font-size: 11px; font-weight: 700; }
.input-wrap input.invalid { border-color: var(--red); }
.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.method {
  min-height: 58px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-2); color: var(--muted); font-size: 12px; font-weight: 800; cursor: pointer;
}
.method.active { border-color: var(--gold); color: var(--gold-text); background: var(--accent-wash); }
.payment-placeholder { display: grid; gap: 4px; min-height: 58px; align-content: center; border: 1px dashed var(--line-strong); border-radius: 6px; padding: 12px 14px; background: var(--accent-wash); }
.payment-placeholder b { color: var(--gold-text); font-size: 12px; }
.payment-placeholder span { color: var(--muted); font-size: 11px; }
.order-lines { display: grid; gap: 0; margin: 18px 0; border-top: 1px solid var(--line); }
.order-line { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.order-line b { color: var(--text); }
.order-total { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 24px 0; }
.order-total span { color: var(--muted); font-size: 12px; }
.order-total b { color: var(--gold-text); font-family: var(--display); font-size: 30px; }

.package-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.package {
  min-height: 120px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); border-radius: 7px; background: linear-gradient(145deg, var(--hairline), transparent 48%), var(--bg-2); padding: 18px; cursor: pointer; text-align: left; transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.package:hover, .package.active { transform: translateY(-2px); border-color: var(--gold); background: var(--intent-wash); box-shadow: 0 12px 26px rgba(0,0,0,.14); }
.package b { font-family: var(--display); font-size: 19px; }
.package span { color: var(--muted-2); font-size: 10px; }
.telegram-panel[hidden] { display: none; }
.telegram-recipient-field { margin-bottom: 22px; }

.catalog-tools { display: grid; grid-template-columns: 1fr 220px; gap: 12px; margin-bottom: 14px; }
.catalog-search { position: relative; }
.catalog-search > svg { position: absolute; z-index: 1; left: 17px; top: 50%; width: 21px; height: 21px; transform: translateY(-50%); fill: none; stroke: var(--muted-2); stroke-width: 2; }
.catalog-search input { width: 100%; height: 54px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, var(--hairline), transparent), var(--surface); color: var(--text); outline: 0; padding: 0 52px; font-size: 14px; }
.catalog-search input:focus { border-color: var(--line-strong); box-shadow: 0 0 0 3px var(--accent-wash); }
.catalog-search button { position: absolute; right: 10px; top: 50%; width: 34px; height: 34px; transform: translateY(-50%); border: 0; border-radius: 8px; background: var(--hairline); color: var(--muted); font-size: 19px; cursor: pointer; }
.catalog-search button:hover { background: var(--accent-wash); color: var(--gold-text); }
.catalog-tools select { height: 50px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--text); padding: 0 40px 0 14px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.filter { min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--muted); padding: 0 15px; font-size: 11px; font-weight: 800; cursor: pointer; }
.filter.active, .filter:hover { border-color: var(--gold); color: var(--gold-text); background: var(--accent-wash); }
.catalog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.catalog-result { min-height: 18px; margin: -4px 0 14px; color: var(--muted-2); font-size: 11px; }
.live-catalog-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 14px 0; border: 1px solid rgba(159,211,155,.16); border-radius: 7px; padding: 11px 14px; background: rgba(159,211,155,.025); color: var(--muted); font-size: 10px; }
.catalog-category-tabs { margin: 0 0 18px; }
.catalog-category-tabs .filter { display: inline-flex; align-items: center; white-space: nowrap; }
.game-cover-generated { isolation: isolate; display: block; background: radial-gradient(circle at 78% 22%, hsl(var(--cover-hue-2) 68% 48% / .38), transparent 38%), radial-gradient(circle at 12% 110%, hsl(var(--cover-hue) 78% 54% / .3), transparent 48%), linear-gradient(145deg, hsl(var(--cover-hue) 26% 18%), var(--surface-2) 72%); }
.game-cover-generated::before { content: ""; position: absolute; inset: -40% -12% 8% 42%; z-index: -1; border: 1px solid hsl(var(--cover-hue-2) 72% 76% / .18); border-radius: 42% 58% 52% 48%; transform: rotate(-18deg); box-shadow: 0 0 80px hsl(var(--cover-hue) 75% 48% / .14); }
.game-cover-generated::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(hsl(var(--cover-hue) 60% 78% / .045) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--cover-hue) 60% 78% / .045) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(110deg, #000, transparent 72%); }
.game-cover-generated b { position: absolute; right: 18px; top: 11px; color: hsl(var(--cover-hue-2) 78% 78% / .72); font-family: var(--display); font-size: clamp(44px, 5vw, 66px); letter-spacing: -.08em; line-height: 1; text-shadow: 0 12px 34px rgba(0,0,0,.25); }
.game-cover-generated .cover-name { position: absolute; left: 18px; right: 82px; bottom: 18px; color: #f4f1e8; font-family: var(--display); font-size: 17px; line-height: 1.05; text-transform: uppercase; text-wrap: balance; }
.game-cover-generated span { left: 14px; top: 13px; bottom: auto; background: rgba(8,9,7,.78); color: hsl(var(--cover-hue-2) 78% 78%); }
.game-checkout-panel { scroll-margin-top: 110px; margin: 18px 0 24px; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 22px; background: linear-gradient(145deg, var(--accent-wash), transparent 38%), var(--surface); box-shadow: var(--shadow-soft); }
.game-checkout-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.game-checkout-heading span { color: var(--gold-text); font-size: 9px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.game-checkout-heading h2 { margin-top: 5px; font-size: 22px; }
.game-checkout-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 14px; }
.game-checkout-dynamic { display: contents; }
.game-checkout-form .button { min-height: 48px; }
.catalog-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: transform .24s cubic-bezier(.2,.75,.25,1), border-color .24s ease, box-shadow .24s ease; }
.catalog-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 18px 38px rgba(0,0,0,.18); }
.catalog-card .game-cover img { transition: transform .32s cubic-bezier(.2,.75,.25,1); }
.catalog-card:hover .game-cover img { transform: scale(1.035); }
.catalog-card[hidden] { display: none; }
.catalog-card .game-cover { aspect-ratio: 460 / 215; }
.catalog-card-body { padding: 18px; }
.catalog-card h3 { font-size: 18px; line-height: 1.2; }
.catalog-grid.game-logo-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 19px 12px; }
.game-logo-card { min-width: 0; display: grid; align-content: start; justify-items: center; gap: 8px; border-radius: 14px; color: var(--text); padding: 5px; text-align: center; cursor: pointer; outline: 0; }
.game-logo-icon { position: relative; width: 100%; aspect-ratio: 1; overflow: visible; border: 1px solid var(--hairline); border-radius: 22%; background: var(--surface); box-shadow: 0 10px 22px rgba(0,0,0,.18); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.game-logo-icon img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.game-logo-icon img[src*="apex-legends-tile"] { object-fit: contain; background: #b72d2d; padding: 17%; }
.game-logo-icon i { position: absolute; top: -7px; right: -5px; min-height: 20px; display: inline-flex; align-items: center; border: 2px solid var(--bg); border-radius: 999px; background: #2ca95b; color: #fff; padding: 0 7px; font-size: 8px; font-style: normal; font-weight: 800; }
.game-logo-card h3 { width: 100%; min-height: 30px; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-family: var(--body); font-size: 10px; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; }
.game-logo-card:hover .game-logo-icon, .game-logo-card:focus-visible .game-logo-icon { transform: translateY(-3px) scale(1.025); border-color: var(--accent-border-soft); box-shadow: 0 15px 30px rgba(0,0,0,.28); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.chip { border-radius: 5px; padding: 4px 7px; background: var(--bg); color: var(--muted); font-size: 9px; font-weight: 800; }
.card-bottom { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.card-bottom span { color: var(--muted-2); font-size: 10px; }
.mini-button { min-width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 5px; background: transparent; cursor: pointer; }
.mini-button:hover { border-color: var(--gold); color: var(--gold-text); }
.mini-button.coming { width: auto; min-width: 62px; padding: 0 10px; color: var(--gold-text); font-size: 10px; font-weight: 800; }
.mini-button.coming:hover { background: var(--accent-wash); }
.mini-button.choose-product { width: auto; min-width: 78px; padding: 0 12px; border-color: var(--accent-border-soft); color: var(--gold-text); font-size: 10px; font-weight: 800; }
.mini-button.choose-product:hover { background: var(--accent-wash); }
.region-chip { color: var(--gold-text); }

/* Primary service launchpad */
.service-launchpad { width: 100%; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 12px; margin: 14px auto 16px; }
.launch-service { min-width: 0; display: grid; align-content: start; justify-items: center; gap: 8px; border: 0; border-radius: 14px; background: transparent; color: var(--text); padding: 5px; text-align: center; cursor: pointer; outline: 0; }
.launch-service::after { display: none; }
.launch-service > span:nth-child(2) { width: 100%; min-width: 0; }
.launch-service b { width: 100%; min-height: 31px; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 11px; line-height: 1.35; text-overflow: ellipsis; }
.launch-service small, .launch-service > i { display: none; }
.launch-icon { width: 100%; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--hairline-strong); border-radius: 23%; background: linear-gradient(145deg, var(--hairline), transparent 48%), var(--surface-2); box-shadow: 0 10px 22px rgba(0,0,0,.18); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.launch-icon img { width: 54%; height: 54%; object-fit: contain; }
.launch-service.telegram-stars .launch-icon img { width: 60%; height: 60%; }
.launch-service.telegram-premium .launch-icon img { width: 58%; height: 58%; }
.launch-service.games .launch-icon img { width: 78%; height: 78%; border-radius: 22%; object-fit: cover; }
.launch-service:hover .launch-icon, .launch-service:focus-visible .launch-icon { transform: translateY(-3px) scale(1.025); border-color: var(--accent-border-soft); box-shadow: 0 15px 30px rgba(0,0,0,.28); }
.launch-covers { width: 62px; height: 54px; position: relative; }
.launch-covers img { position: absolute; top: 5px; width: 42px; height: 42px; border: 2px solid var(--surface); border-radius: 11px; object-fit: cover; }
.launch-covers img:nth-child(1) { left: 0; z-index: 3; }.launch-covers img:nth-child(2) { left: 11px; z-index: 2; }.launch-covers img:nth-child(3) { left: 22px; z-index: 1; }
.launch-service.telegram-stars { --launch-glow: rgba(255,197,54,.2); border-color: rgba(255,200,61,.22); }
.launch-service.telegram-premium { --launch-glow: rgba(142,94,255,.2); border-color: rgba(151,106,255,.24); }
.launch-service.spotify { --launch-glow: rgba(30,215,96,.14); }.launch-service.playstation { --launch-glow: rgba(0,112,209,.15); }.launch-service.xbox { --launch-glow: rgba(16,124,16,.15); }
.launch-service:not(.active) { color: var(--muted); }
.launch-service.selected .launch-icon { border-color: var(--accent-border-soft); background: linear-gradient(145deg, var(--accent-wash), transparent 54%), var(--surface-2); box-shadow: 0 12px 30px rgba(0,0,0,.24), inset 0 0 0 1px var(--accent-wash); }
.launch-service.selected b { color: var(--gold-text); }

/* Home quick order */
.home-quick-order { width: 100%; margin: 0 auto; }
.home-order-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; align-items: stretch; gap: 12px; }
.home-order-layout > * { min-width: 0; }
.home-order-card, .home-order-summary { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, var(--hairline), transparent 54%), var(--surface); box-shadow: 0 18px 44px rgba(0,0,0,.16); }
.home-order-card { padding: 0 22px 20px; }
.home-order-head { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); margin: 0 -22px 18px; padding: 0 22px; }
.home-order-head .steam-flow-brand img { width: 38px; height: 38px; border-radius: 11px; padding: 7px; }
.home-order-fields { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 14px; }
.home-order-fields .field { min-width: 0; }
.home-order-fields .field label { font-size: 11px; }
.home-order-fields .input-wrap input { height: 54px; border-radius: 12px; }
.home-order-fields .input-wrap > span { color: var(--gold-text); font-weight: 800; }
.home-presets { grid-column: 1 / -1; }
.home-presets .quick-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.home-presets .quick { min-width: 0; min-height: 42px; border-radius: 11px; }
.home-order-summary { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 22px; background: linear-gradient(145deg, var(--accent-wash), transparent 56%), var(--surface); }
.home-order-summary .order-total { display: grid; gap: 7px; }
.home-order-summary .order-total span { color: var(--muted); font-size: 11px; }
.home-order-summary .order-total b { color: var(--gold-text); font-family: var(--display); font-size: 30px; line-height: 1.1; }
.home-order-summary .button { min-height: 52px; margin-top: auto; }
.telegram-home-fields .home-recipient { grid-column: 1 / -1; }
/* П4: the home Stars box used to shrink itself to 54px with a 24px number
   while Steam next to it was 82/30. One component means one size. */
.home-stars-input { grid-template-columns: 36px minmax(0, 1fr) auto; }
.home-stars-input img { width: 34px; height: 34px; border-radius: 8px; padding: 5px; }

.stars-home-presets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-premium-packages { grid-column: 1 / -1; }
.home-premium-packages .package-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-premium-packages .telegram-package { min-height: 96px; padding: 12px; }
.home-premium-packages .telegram-package img { width: 28px; height: 28px; margin-bottom: 6px; }
.home-premium-packages .telegram-package b { font-size: 14px; }
.home-order-summary.telegram-home-summary { justify-content: flex-start; }
.telegram-home-summary .telegram-summary-icon { width: 48px; height: 48px; margin-bottom: 0; border-radius: 12px; }
.telegram-home-summary .telegram-summary-icon img { width: 36px; height: 36px; }
.telegram-home-summary h3 { font-size: 15px; }
.telegram-home-summary .order-total b { font-family: var(--body); font-size: 17px; }
.home-price { color: var(--muted-2); font-size: 10px; }

/* Telegram product selector */
.telegram-product-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.telegram-product-card { min-height: 112px; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); padding: 16px; text-align: left; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.telegram-product-card:hover, .telegram-product-card.active { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.telegram-product-card.stars.active { border-color: rgba(255,200,61,.52); background: linear-gradient(145deg, rgba(255,200,61,.1), transparent 48%), var(--surface); }
.telegram-product-card.premium.active { border-color: rgba(151,106,255,.52); background: linear-gradient(145deg, rgba(151,106,255,.1), transparent 48%), var(--surface); }
.telegram-product-card > img { width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface-2); padding: 10px; filter: drop-shadow(0 12px 20px rgba(0,0,0,.22)); }
.telegram-product-card small, .telegram-product-card em { display: block; color: var(--muted-2); font-size: 10px; font-style: normal; }
.telegram-product-card b { display: block; margin: 0 0 5px; font-family: var(--display); font-size: 18px; }
.telegram-product-card > i { color: var(--muted-2); font-size: 22px; font-style: normal; }
.telegram-product-card.stars.active > i { color: #ffca43; }.telegram-product-card.premium.active > i { color: #a77cff; }
.telegram-workspace { align-items: start; }
.telegram-package { min-height: 136px; align-items: flex-start; }
.telegram-package img { width: 38px; height: 38px; margin-bottom: 10px; }
.telegram-package.stars:hover, .telegram-package.stars.active { border-color: #e9b832; background: rgba(255,200,61,.08); }
.telegram-package.premium:hover, .telegram-package.premium.active { border-color: #9a6cff; background: rgba(151,106,255,.09); }
.telegram-package b { font-size: 20px; }.telegram-package span { font-size: 11px; }
.stars-quantity { display: grid; grid-template-columns: minmax(250px, .85fr) minmax(0, 1.15fr); gap: 12px; align-items: stretch; }
.stars-quantity-input { min-height: 82px; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-input); background: var(--surface-2); padding: 12px 16px; }
.stars-quantity-input:focus-within { border-color: #ffd75c; box-shadow: 0 0 0 3px var(--accent-wash); }
.stars-quantity-input img { width: 44px; height: 44px; object-fit: contain; border-radius: 11px; background: var(--surface-2); padding: 7px; filter: drop-shadow(0 8px 14px rgba(246,184,35,.18)); }
.stars-quantity-input input { width: 100%; min-width: 0; min-height: 44px; border: 0; outline: 0; background: transparent; color: var(--text); font-family: var(--display); font-size: 30px; font-weight: 800; }
.stars-quantity-input input::-webkit-inner-spin-button { appearance: none; }
.stars-quantity-input span { color: #f6c843; font-size: 12px; font-weight: 800; }
.stars-presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.stars-presets button { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--muted); font-size: 11px; font-weight: 800; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
.stars-presets button:hover, .stars-presets button.active { border-color: var(--accent-border-soft); background: var(--accent-wash); color: #ffe38a; transform: translateY(-1px); }
.telegram-summary-icon { width: 62px; height: 62px; display: grid; place-items: center; margin-bottom: 16px; border: 1px solid var(--hairline); border-radius: 16px; background: var(--surface-2); }
.telegram-summary-icon img { width: 46px; height: 46px; object-fit: contain; }.telegram-summary-icon.stars { box-shadow: inset 0 0 24px rgba(255,200,61,.05); }.telegram-summary-icon.premium { box-shadow: inset 0 0 24px rgba(151,106,255,.06); }
.telegram-submit.stars { border-color: var(--gold-strong); background: var(--gold-fill); color: var(--gold-ink); }.telegram-submit.stars:hover { background: var(--gold-strong); }
.telegram-submit.premium { border-color: #8b59ee; background: #8053dd; color: #fff; }.telegram-submit.premium:hover { background: #9569ee; }
.package-loading { grid-column: 1 / -1; min-height: 110px; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); font-size: 12px; }.package-loading.error { color: var(--red); }

/* Real game media and in-card configuration */
.catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.live-game-card { cursor: pointer; outline: 0; }
.live-game-card:focus-visible { border-color: var(--gold); box-shadow: 0 0 0 3px var(--accent-wash); }
.catalog-card .game-cover-real { aspect-ratio: 16 / 9; background: var(--surface-2); }
.game-cover-real::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(7,8,7,.48)); pointer-events: none; }
.game-cover-real img { width: 100%; height: 100%; object-fit: cover; }
.game-cover-real span { z-index: 1; top: 12px; bottom: auto; left: 12px; border: 1px solid var(--hairline); background: rgba(8,9,8,.82); color: #f4edda; }
.catalog-card-body { padding: 18px 19px 17px; }
.catalog-card h3 { font-size: 20px; }
.catalog-card-detail { min-height: 18px; margin: 8px 0 14px; color: var(--muted-2); font-size: 11px; }
.card-open-arrow { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--accent-wash-strong); border-radius: 50%; color: var(--gold-text); font-size: 15px; transition: transform .18s ease, background .18s ease; }
.catalog-card:hover .card-open-arrow { transform: translateX(3px); background: var(--accent-wash); }
.game-checkout-panel { padding: 0; overflow: hidden; border-color: var(--accent-border-soft); }
.game-configurator { display: grid; grid-template-columns: minmax(290px, .72fr) minmax(0, 1.65fr); min-height: 610px; }
.game-configurator-visual { position: relative; min-height: 100%; overflow: hidden; background: #0c0d0b; }
.game-configurator-visual::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(transparent, rgba(7,8,7,.94)); }
.game-configurator-visual > img { width: 100%; height: 100%; min-height: 610px; object-fit: cover; }
.game-configurator-visual > div { position: absolute; z-index: 1; left: 28px; right: 28px; bottom: 28px; }
.game-configurator-visual span { color: var(--gold-text); font-size: 10px; font-weight: 800; text-transform: uppercase; }.game-configurator-visual h2 { margin-top: 8px; font-size: clamp(30px, 3vw, 44px); line-height: .98; }.game-configurator-visual p { margin: 12px 0 0; color: var(--hairline-strong); font-size: 11px; }
.game-configurator-main { min-width: 0; padding: 25px 28px 28px; }
.game-checkout-heading { align-items: center; margin-bottom: 8px; }.game-checkout-heading h3 { margin-top: 5px; font-size: 22px; }
.config-step { padding: 18px 0; border-top: 1px solid var(--line); }
.config-step-title { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.config-step-title > span { width: 27px; height: 27px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--gold-text); font-size: 11px; font-weight: 800; }
.config-step-title b, .config-step-title small { display: block; }.config-step-title b { font-size: 13px; }.config-step-title small { margin-top: 3px; color: var(--muted-2); font-size: 9px; }
.region-choice-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.region-choice { min-width: 132px; min-height: 52px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); padding: 9px 12px; text-align: left; cursor: pointer; }
.region-choice:hover, .region-choice.active { border-color: var(--gold); background: var(--accent-wash); }.region-choice b { font-size: 11px; }.region-choice small { color: var(--muted-2); font-size: 9px; }
.region-choice img, .voucher-region img { width: 28px; height: 21px; flex: 0 0 auto; object-fit: cover; border: 1px solid var(--hairline); border-radius: 5px; box-shadow: 0 3px 8px rgba(0,0,0,.22); }
.product-choice-search { width: 100%; height: 42px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 7px; outline: 0; background: var(--bg); color: var(--text); padding: 0 13px; }.product-choice-search:focus { border-color: var(--gold); }
.product-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 276px; overflow-y: auto; padding-right: 4px; scrollbar-color: var(--line-strong) transparent; }
.product-choice { width: 100%; min-width: 0; min-height: 76px; display: grid; grid-template-columns: 54px minmax(0, 1fr) 22px; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); padding: 10px; text-align: left; cursor: pointer; }
.product-choice:hover, .product-choice.active { border-color: var(--accent-border-soft); background: var(--accent-wash); }.product-choice img { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; filter: none; }.product-choice b, .product-choice small { display: block; }.product-choice b { overflow: hidden; font-size: 12px; line-height: 1.25; text-overflow: ellipsis; }.product-choice small { margin-top: 5px; color: var(--gold-text); font-size: 11px; }.product-choice i { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: transparent; font-size: 10px; font-style: normal; }.product-choice.active i { border-color: var(--gold); background: var(--gold-fill); color: var(--gold-ink); }
.account-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.account-fields .field > span { color: var(--muted); font-size: 11px; font-weight: 700; }.account-fields input, .account-fields select { width: 100%; height: 48px; border: 1px solid var(--line); border-radius: 6px; outline: 0; background: var(--bg); color: var(--text); padding: 0 13px; }.account-fields select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 17px) 21px, calc(100% - 12px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; }.account-fields input:focus, .account-fields select:focus { border-color: var(--gold); }.account-fields input[aria-invalid="true"], .account-fields select[aria-invalid="true"] { border-color: var(--red); }.account-fields small { color: var(--muted-2); font-size: 9px; }.field-example { min-height: 76px; display: flex; flex-direction: column; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--hairline); padding: 13px; }.field-example span { color: var(--muted-2); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }.field-example b { color: var(--muted); font-size: 11px; line-height: 1.45; }
.configurator-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); }.configurator-footer > div { min-width: 0; }.configurator-footer span, .configurator-footer b { display: block; }.configurator-footer span { color: var(--muted-2); font-size: 9px; text-transform: uppercase; }.configurator-footer b { max-width: 300px; margin-top: 5px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.configurator-action { min-width: 220px; }
.catalog-badge-mark { color: var(--gold-text); font-size: 30px; }

/* Regional vouchers and subscriptions */
.voucher-badge-stack { position: relative; width: 72px; height: 44px; flex: 0 0 auto; }.voucher-badge-stack img { position: absolute; top: 4px; width: 36px; height: 36px; border: 2px solid var(--surface); border-radius: 11px; background: var(--surface-2); padding: 6px; }.voucher-badge-stack img:nth-child(1) { left: 0; z-index: 3; }.voucher-badge-stack img:nth-child(2) { left: 18px; z-index: 2; }.voucher-badge-stack img:nth-child(3) { left: 36px; z-index: 1; }
.voucher-service-switch { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.voucher-service-card { min-width: 0; display: grid; align-content: start; justify-items: center; gap: 8px; border: 0; border-radius: 14px; background: transparent; color: var(--text); padding: 5px; text-align: center; cursor: pointer; outline: 0; }
.voucher-service-card > span { width: min(100%, 92px); aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--hairline); border-radius: 22%; background: var(--surface-2); box-shadow: 0 10px 22px rgba(0,0,0,.18); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }.voucher-service-card img { width: 52%; height: 52%; object-fit: contain; }.voucher-service-card b { width: 100%; min-height: 31px; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: normal; }.voucher-service-card small, .voucher-service-card i { display: none; }
.voucher-service-card:hover > span, .voucher-service-card.active > span { transform: translateY(-3px) scale(1.025); border-color: var(--accent-border-soft); box-shadow: 0 15px 30px rgba(0,0,0,.28); }.voucher-service-card[disabled] { display: none; }
.voucher-layout { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 350px; align-items: start; gap: 16px; }.voucher-main, .voucher-summary, .voucher-main .config-step { min-width: 0; }.voucher-main { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, var(--surface-highlight), transparent 38%), var(--surface); padding: 26px 28px; box-shadow: var(--shadow-soft); }
.voucher-flow-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 18px; }.voucher-flow-head > div { display: flex; align-items: center; gap: 13px; }.voucher-flow-head img { width: 46px; height: 46px; object-fit: contain; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface-2); padding: 9px; }.voucher-flow-head small, .voucher-flow-head b { display: block; }.voucher-flow-head small { color: var(--muted-2); font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }.voucher-flow-head b { margin-top: 4px; font-size: 16px; }
.choice-search { width: 100%; height: 44px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 12px; outline: 0; background: var(--bg); color: var(--text); padding: 0 14px; font-size: 13px; }.choice-search:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--accent-wash); }
.voucher-region-grid { display: flex; flex-wrap: wrap; gap: 8px; max-height: 184px; overflow-y: auto; padding-right: 3px; scrollbar-color: var(--line-strong) transparent; }.voucher-region { min-width: 132px; min-height: 52px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); padding: 9px 12px; cursor: pointer; text-align: left; }.voucher-region:hover, .voucher-region.active { border-color: var(--gold); background: var(--accent-wash); }.voucher-region b { font-size: 11px; }
.voucher-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 390px; overflow-y: auto; padding-right: 4px; scrollbar-color: var(--line-strong) transparent; }.voucher-product { min-width: 0; min-height: 70px; display: grid; grid-template-columns: 42px minmax(0, 1fr) 22px; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); padding: 11px; cursor: pointer; text-align: left; }.voucher-product:hover, .voucher-product.active { border-color: var(--accent-border-soft); background: var(--accent-wash); }.voucher-product > img { width: 42px; height: 42px; object-fit: contain; padding: 7px; border-radius: 11px; background: var(--hairline); }.voucher-product b, .voucher-product em { display: block; }.voucher-product b { overflow: hidden; font-size: 13px; line-height: 1.25; text-overflow: ellipsis; }.voucher-product em { margin-top: 5px; color: var(--gold-text); font-size: 11px; font-style: normal; font-weight: 800; }.voucher-product > i { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: transparent; font-size: 10px; font-style: normal; }.voucher-product.active > i { border-color: var(--gold); background: var(--gold-fill); color: var(--gold-ink); }
.voucher-summary-icon { width: 66px; height: 66px; display: grid; place-items: center; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }.voucher-summary-icon img { width: 43px; height: 43px; object-fit: contain; }.voucher-summary .order-line b { max-width: 175px; text-align: right; overflow-wrap: anywhere; }
.voucher-delivery { margin-top: 14px; border: 1px solid rgba(159,211,155,.25); border-radius: 8px; background: rgba(159,211,155,.04); padding: 16px; }.voucher-delivery > span { color: var(--green); font-size: 10px; font-weight: 800; text-transform: uppercase; }.voucher-code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 10px; }.voucher-code-row code { overflow-wrap: anywhere; color: var(--text); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; }.voucher-code-row button { min-height: 34px; border: 1px solid var(--line-strong); border-radius: 6px; background: transparent; color: var(--gold-text); padding: 0 10px; font-size: 9px; font-weight: 800; cursor: pointer; }
.store-order-delivery { grid-column: 1 / -1; display: grid; gap: 8px; margin-top: 4px; }.store-order-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 1px solid rgba(159,211,155,.2); border-radius: 7px; background: rgba(159,211,155,.035); padding: 9px 11px; }.store-order-code code { overflow-wrap: anywhere; font-size: 11px; }.store-order-code button { border: 0; background: transparent; color: var(--gold-text); font-size: 9px; font-weight: 800; cursor: pointer; }

.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.info-item { min-height: 150px; border-top: 1px solid var(--line); padding: 20px 18px 0 0; }
.info-item + .info-item { padding-left: 18px; border-left: 1px solid var(--line); }
.info-item b { display: block; margin-bottom: 10px; font-family: var(--display); font-size: 16px; text-transform: uppercase; }
.info-item p { margin: 0; color: var(--muted); font-size: 13px; }

.site-footer { border-top: 1px solid var(--hairline); background: linear-gradient(180deg, var(--hairline), transparent 68%); padding: 20px 0 14px; }
.footer-compact { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 16px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 18px; }
.footer-links a { min-height: 32px; display: inline-flex; align-items: center; color: var(--muted); font-size: 11px; font-weight: 700; }
.footer-links a:hover { color: var(--gold-text); }
.footer-main { display: grid; grid-template-columns: 1.3fr repeat(4, .7fr); gap: 42px; padding-bottom: 42px; }
.footer-about p { max-width: 380px; color: var(--muted); font-size: 13px; }
.footer-column { display: grid; align-content: start; gap: 10px; }
.footer-column b { margin-bottom: 4px; font-size: 12px; }
.footer-column a { min-height: 28px; display: inline-flex; align-items: center; color: var(--muted); font-size: 12px; }
.footer-column a:hover { color: var(--gold-text); }
.footer-legal a { line-height: 1.35; }
.trademark { max-width: 760px; margin: 10px 0 0; color: var(--muted-2); font-size: 9px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); padding-top: 18px; color: var(--muted-2); font-size: 10px; }
.footer-legal-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.footer-legal-links a { min-height: 28px; display: inline-flex; align-items: center; color: var(--muted); }
.footer-legal-links a:hover { color: var(--gold-text); }

.toast { position: fixed; left: 50%; bottom: 22px; z-index: 160; width: min(calc(100% - 28px), 520px); transform: translate(-50%, 22px); border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface-3); padding: 13px 16px; text-align: center; font-size: 12px; font-weight: 800; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.mobile-dock { display: none; }

.checkout-page { padding: 32px 0 40px; }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 44px; }
.checkout-main h1 { margin-bottom: 0; }
.checkout-intro { max-width: 560px; margin: 15px 0 26px; color: var(--muted); }
.checkout-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 18px; border: 1px solid var(--line); }
.checkout-steps span { min-height: 48px; display: flex; align-items: center; padding: 11px 14px; color: var(--muted-2); font-size: 11px; font-weight: 800; }
.checkout-steps span + span { border-left: 1px solid var(--line); }
.checkout-steps .active { color: var(--gold-text); background: var(--accent-wash); }
.checkout-items { border-top: 1px solid var(--line); }
.checkout-item { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 118px; border-bottom: 1px solid var(--line); padding: 20px 0; }
.checkout-item span { color: var(--muted-2); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.checkout-item h3 { margin-top: 5px; font-family: var(--display); font-size: 17px; text-transform: uppercase; }
.checkout-item p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.checkout-side { position: sticky; top: 105px; align-self: start; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 26px; background: linear-gradient(145deg, var(--accent-wash), transparent 42%), var(--surface); box-shadow: var(--shadow-soft); }
.checkout-legal { margin: 15px 0 0; color: var(--muted-2); font-size: 10px; line-height: 1.55; }
.checkout-legal a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }

.legal-page { padding: 62px 0 88px; }
.legal-layout { display: grid; grid-template-columns: minmax(0, 760px) 220px; justify-content: space-between; gap: 56px; }
.legal-copy { color: var(--muted); font-size: 14px; line-height: 1.72; }
.legal-copy .legal-title {
  max-width: 760px;
  margin: 12px 0 20px;
  color: var(--text);
  font-family: var(--body);
  font-size: clamp(32px, 3.5vw, 46px);
  font-weight: 800;
  line-height: 1.06;
  text-transform: uppercase;
}
.legal-title > span { display: block; }
.legal-title .gold { font-size: .88em; }
.legal-copy h2 { margin: 42px 0 12px; color: var(--text); font-family: var(--display); font-size: 17px; text-transform: uppercase; }
.legal-copy p { margin: 0 0 14px; }
.legal-copy ul { display: grid; gap: 8px; margin: 0 0 16px; padding-left: 20px; }
.legal-copy a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }
.legal-meta { position: sticky; top: 104px; align-self: start; border-top: 1px solid var(--line-strong); padding-top: 16px; color: var(--muted-2); font-size: 11px; line-height: 1.55; }
.legal-meta b { display: block; margin-bottom: 5px; color: var(--text); font-size: 11px; }

/* SLARP ID */
.identity-hero { padding: 24px 0 18px; border-bottom: 1px solid var(--line); }
.identity-hero h1 { margin: 0; font-size: clamp(34px, 4vw, 48px); }
.identity-hero p { max-width: 670px; margin: 12px 0 0; color: var(--muted); font-size: 15px; }
.identity-grid { display: grid; grid-template-columns: minmax(0, 1180px); justify-content: center; gap: 20px; align-items: start; }
.identity-panel { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, var(--surface-highlight), transparent 42%), var(--surface); box-shadow: var(--shadow-soft); }
.identity-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 72px; padding: 0 28px; border-bottom: 1px solid var(--line); background: var(--hairline); }
.identity-panel-head h2 { margin: 0; font-size: 23px; }
.identity-panel-body { padding: 28px; }
.identity-head-note { color: var(--muted); font-size: 11px; }
.login-methods { display: grid; gap: 10px; }
.login-method-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.login-method { width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg-2); padding: 0 16px; color: var(--text); font-size: 13px; font-weight: 800; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; }
.login-method:hover { transform: translateY(-2px); border-color: var(--line-strong); background: var(--surface-2); box-shadow: 0 12px 28px rgba(0,0,0,.16); }
.login-method > span:last-child { transition: transform .2s cubic-bezier(.2,.75,.25,1); }
.login-method:hover > span:last-child { transform: translateX(3px); }
.login-method[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.login-method-primary { min-height: 64px; border-color: var(--line-strong); background: linear-gradient(100deg, var(--accent-wash), var(--accent-wash)); }
.login-method-primary:hover { background: var(--accent-wash-strong); }
.login-method .login-method-icon { width: 32px; height: 32px; display: inline-grid; place-items: center; margin-right: 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--gold-text); font-family: var(--display); font-size: 11px; font-style: normal; vertical-align: middle; }
.login-method .login-method-icon img { width: 18px; height: 18px; object-fit: contain; }
.login-method span:last-child { color: var(--muted); font-size: 11px; font-weight: 700; }
.login-method.telegram .login-method-icon { color: #69b8f6; }
.login-method.google .login-method-icon { color: #f2f1ed; }
.email-login-form { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.email-login-form[hidden] { display: none; }
.identity-status { min-height: 20px; margin: 14px 0 0; color: var(--muted); font-size: 11px; }
.identity-status.error { color: var(--red); }
.identity-status.ok { color: var(--green); }
.identity-loading { min-height: 110px; display: flex; align-items: center; justify-content: center; gap: 13px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.identity-loading[hidden] { display: none; }
.identity-loading b { font-family: var(--display); font-size: 14px; text-transform: uppercase; }
.identity-loading p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.identity-loader { width: 24px; height: 24px; border: 2px solid var(--line); border-top-color: var(--gold); border-radius: 50%; animation: identity-spin .8s linear infinite; }
@keyframes identity-spin { to { transform: rotate(360deg); } }
.referral-field { margin-top: 16px; color: var(--muted-2); font-size: 11px; }
.referral-field summary { width: fit-content; cursor: pointer; color: var(--muted); font-weight: 700; }
.referral-field .input-wrap { margin-top: 10px; }
.profile-card { display: grid; gap: 20px; }
.profile-card[hidden], .profile-dashboard[hidden], .login-card[hidden] { display: none; }
.profile-summary { display: grid; grid-template-columns: 82px 1fr; gap: 16px; align-items: center; }
.profile-summary h3 { font-family: var(--display); font-size: 18px; text-transform: uppercase; }
.profile-summary p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.rank-crest { width: 74px; aspect-ratio: 1; user-select: none; clip-path: polygon(50% 0, 88% 18%, 84% 68%, 50% 100%, 16% 68%, 12% 18%); background: linear-gradient(145deg, #9d7544, #423127); box-shadow: 0 10px 24px rgba(0,0,0,.26); transition: transform .28s cubic-bezier(.2,.75,.25,1), filter .28s ease; }
.rank-crest.silver { background: linear-gradient(145deg, #bec8cf, #52616d); }
.rank-crest.gold { background: linear-gradient(145deg, #ffe38b, #a97422); }
.rank-crest.platinum { background: linear-gradient(145deg, #9ce6db, #277a86); }
.rank-crest.diamond { background: linear-gradient(145deg, #c8b8ff, #5949bd); }
.rank-card:hover .rank-crest, .profile-overview:hover .profile-rank-crest { transform: translateY(-4px) rotate(-2deg); filter: saturate(1.08) brightness(1.05); }
.rank-progress { display: grid; gap: 9px; }
.rank-progress-head { display: flex; align-items: center; justify-content: flex-end; color: var(--muted); font-size: 11px; }
.rank-progress-head b { color: var(--text); }
.rank-track { height: 8px; overflow: hidden; border-radius: 99px; background: var(--bg); }
.rank-track > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--gold-fill); transition: width .45s ease; }
.profile-lines { display: grid; gap: 0; border-top: 1px solid var(--line); }
.profile-line { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.profile-line b { max-width: 62%; overflow-wrap: anywhere; color: var(--text); text-align: right; }
.referral-link { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.referral-link input { flex: 1; min-width: 0; height: 44px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); color: var(--muted); padding: 0 11px; font-size: 11px; }
.referral-copy { flex: 0 0 auto; height: 44px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--accent-wash); color: var(--gold-text); padding: 0 13px; font-size: 11px; font-weight: 800; cursor: pointer; }
.rank-board { border-top: 1px solid var(--line); }
.rank-board-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.rank-board-head p { max-width: 330px; margin: 0; color: var(--muted); font-size: 12px; text-align: right; }
.rank-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.rank-card { min-height: 188px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; padding: 24px 20px; border-right: 1px solid var(--line); transition: background .22s ease, box-shadow .22s ease; }
.rank-card:last-child { border-right: 0; }
.rank-card:hover { background: var(--hairline); }
.rank-card .rank-crest { width: 62px; }
.rank-card h3 { font-family: var(--display); font-size: 15px; text-transform: uppercase; }
.rank-card strong { color: var(--gold-text); font-family: var(--display); font-size: 12px; }
.rank-card.active { background: var(--accent-wash); box-shadow: inset 0 3px 0 var(--gold); }
.rank-card p { margin: 3px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }

.identity-entry-grid { display: grid; grid-template-columns: minmax(0, 640px); justify-content: center; gap: 20px; max-width: 1120px; margin-inline: auto; }
.identity-entry-copy { max-width: 640px; margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.identity-benefits { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, var(--accent-wash), transparent 55%), var(--hairline); box-shadow: var(--shadow-soft); }
.identity-benefits > div { display: grid; grid-template-columns: 36px 1fr; align-content: center; gap: 6px 13px; min-height: 146px; padding: 23px; border-bottom: 1px solid var(--line); transition: background .2s ease; }
.identity-benefits > div:hover { background: var(--accent-wash); }
.identity-benefits > div:last-child { border-bottom: 0; }
.identity-benefits span { grid-row: span 2; color: var(--gold-text); font-family: var(--display); font-size: 11px; }
.identity-benefits b { font-size: 14px; }
.identity-benefits p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }

.profile-dashboard { display: grid; gap: 18px; }
.profile-overview, .profile-section { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color .24s ease, box-shadow .24s ease; }
.profile-section:hover { border-color: var(--accent-wash-strong); box-shadow: 0 16px 34px rgba(0,0,0,.12); }
.profile-overview { overflow: hidden; border-color: var(--line-strong); background: linear-gradient(135deg, var(--accent-wash), transparent 46%), var(--surface); }
.profile-overview-main { min-height: 154px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; padding: 26px 28px; }
.profile-rank-crest { width: 92px; }
.profile-identity h2 { margin-top: 7px; font-size: 31px; }
.profile-identity p { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.profile-identity p b { color: var(--gold-text); text-transform: uppercase; }
.profile-identity p span::before { content: "·"; margin-right: 9px; color: var(--muted-2); }
.profile-logout { align-self: start; }
.profile-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.profile-stat { min-height: 116px; display: grid; align-content: center; gap: 5px; padding: 20px 28px; }
.profile-stat + .profile-stat { border-left: 1px solid var(--line); }
.profile-stat span { color: var(--muted); font-size: 11px; }
.profile-stat b { color: var(--text); font-family: var(--display); font-size: 25px; }
.profile-stat small { color: var(--muted-2); font-size: 9px; }
.profile-progress-block { display: grid; gap: 10px; padding: 20px 28px 24px; }
.profile-progress-block .rank-progress-head { justify-content: space-between; }
.profile-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(300px, .78fr); gap: 18px; align-items: start; }
.profile-section { padding: 26px; }
.profile-section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.profile-section h2 { margin-top: 6px; font-size: 25px; }
.order-filters { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; }
.order-filters button { min-height: 44px; border: 0; border-radius: 5px; padding: 0 13px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 800; cursor: pointer; }
.order-filters button.active { background: var(--accent-wash); color: var(--gold-text); }
.order-list { display: grid; }
.store-order { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 20px; padding: 18px 0; border-top: 1px solid var(--line); }
.store-order[hidden] { display: none; }
.store-order-main { min-width: 0; }
.store-order-top { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.store-order h3 { font-size: 14px; }
.order-status { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; padding: 5px 8px; background: var(--hairline); color: var(--muted); font-size: 9px; font-weight: 800; }
.order-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.order-status.paid { color: var(--gold-text); }
.order-status.completed { color: var(--green); }
.order-status.refunded { color: var(--blue); }
.order-meta { display: flex; flex-wrap: wrap; gap: 7px 13px; margin-top: 8px; color: var(--muted-2); font-size: 10px; }
.order-status-copy { max-width: 620px; margin: 9px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.order-amount { align-self: center; font-family: var(--display); font-size: 16px; }
.orders-empty { min-height: 290px; display: grid; place-items: start; align-content: center; gap: 10px; border-top: 1px solid var(--line); }
.orders-empty[hidden] { display: none; }
.orders-empty > span { color: var(--gold-text); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.orders-empty h3 { font-family: var(--display); font-size: 20px; text-transform: uppercase; }
.orders-empty p { max-width: 520px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.orders-empty .button { margin-top: 5px; }
.profile-sidebar { display: grid; gap: 18px; }
.profile-sidebar .profile-section { padding: 22px; }
.profile-sidebar h2 { font-size: 20px; }
.referral-card > p { margin: 11px 0 18px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.referral-metrics { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; border-top: 1px solid var(--line); }
.referral-metrics > div { display: grid; gap: 5px; padding-top: 16px; }
.referral-metrics > div + div { border-left: 1px solid var(--line); padding-left: 16px; }
.referral-metrics span { color: var(--muted); font-size: 10px; }
.referral-metrics b { font-family: var(--display); font-size: 18px; }
.account-lines { display: grid; margin-top: 16px; border-top: 1px solid var(--line); }
.account-lines > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.account-lines b { max-width: 62%; overflow-wrap: anywhere; color: var(--text); text-align: right; }
.account-support { min-height: 44px; display: inline-flex; align-items: center; margin-top: 10px; color: var(--gold-text); font-size: 11px; font-weight: 800; }
.checkout-counter { display: flex; align-items: baseline; gap: 9px; margin: 14px 0 24px; }
.checkout-counter b { color: var(--gold-text); font-family: var(--display); font-size: 38px; }
.checkout-counter span { color: var(--muted); font-size: 12px; }
.checkout-counter [data-checkout-total] { font-size: clamp(28px, 3vw, 38px); }
.checkout-summary-line { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: -10px 0 20px; border-radius: 7px; padding: 12px 14px; background: var(--accent-wash); }
.checkout-summary-line span { color: var(--muted); font-size: 11px; }
.checkout-summary-line b { color: var(--gold-text); font-size: 13px; }
.checkout-state { position: relative; margin-top: 18px; border: 1px solid var(--line); border-radius: 7px; padding: 13px 15px 13px 39px; color: var(--muted); font-size: 11px; font-weight: 750; line-height: 1.45; }
.checkout-state::before { content: ""; position: absolute; left: 15px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border: 2px solid currentColor; border-radius: 50%; opacity: .8; }
.checkout-state.loading::before { border-right-color: transparent; animation: spin .75s linear infinite; }
.checkout-state.success { border-color: rgba(159,211,155,.24); color: var(--green); background: rgba(159,211,155,.035); }
.checkout-state.success::before { width: 7px; height: 4px; margin-top: -4px; border-width: 0 0 2px 2px; border-radius: 0; transform: rotate(-45deg); }
.checkout-state.warning { border-color: var(--accent-border-soft); color: var(--gold-text); background: var(--accent-wash); }
.checkout-state.error { border-color: rgba(235,121,121,.26); color: var(--red); background: rgba(235,121,121,.035); }
.checkout-note { display: grid; gap: 7px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0; }
.checkout-note b { font-size: 12px; }
.checkout-note span { color: var(--muted); font-size: 11px; line-height: 1.45; }
.checkout-side .button { margin-top: 20px; }
.checkout-help { display: block; margin-top: 18px; color: var(--gold-text); font-size: 11px; font-weight: 800; }
.checkout-empty { display: grid; justify-items: start; gap: 12px; margin-top: 22px; border: 1px dashed var(--line); border-radius: var(--radius); padding: 30px; background: var(--hairline); }
.checkout-empty h2 { font-size: 25px; }
.checkout-empty p { max-width: 430px; margin: 0; color: var(--muted); }

.faq-layout { display: grid; grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr); gap: 44px; }
.faq-layout h2 { font-size: 34px; }
.faq-list { display: grid; gap: 8px; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 17px 32px 17px 0; cursor: pointer; font-weight: 800; font-size: 14px; list-style: none; transition: color .18s ease, padding-left .18s ease; }
.faq-list summary:hover { color: var(--gold-text); padding-left: 4px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 13px; color: var(--gold-text); font-size: 22px; font-weight: 400; transition: transform .22s cubic-bezier(.2,.75,.25,1); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details[open] > p { animation: details-reveal .24s ease both; }
.faq-list p { max-width: 760px; margin: 0 0 17px; color: var(--muted); font-size: 13px; }
.faq-list p a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }
.help-grid { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 52px; }
.help-head { border-bottom: 1px solid var(--line); padding: 24px 0 18px; }
.help-head .container { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.help-head h1 { margin: 0; font-size: clamp(34px, 4vw, 48px); }
.help-nav { position: sticky; top: 140px; display: grid; align-content: start; gap: 4px; height: fit-content; border-left: 1px solid var(--line); }
.help-nav a { padding: 8px 0 8px 14px; color: var(--muted); font-size: 13px; }
.help-nav a:hover { color: var(--gold-text); }
.help-faq { gap: 42px; }
.help-faq > div { scroll-margin-top: 150px; }
.help-faq h2 { margin: 8px 0 16px; font-size: 28px; }

@media (max-width: 1060px) {
  h1 { font-size: 52px; }
  .commerce-board { grid-template-columns: 220px 1fr; }
  .board-brand { grid-row: span 2; }
  .board-fields { border-right: 0; }
  .board-summary { grid-column: 2; border-top: 1px solid var(--line); }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .game-row { grid-template-columns: repeat(3, 1fr); }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .service-launchpad { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .catalog-grid.game-logo-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .game-configurator { grid-template-columns: minmax(260px, .65fr) minmax(0, 1.5fr); }
  .workspace { grid-template-columns: 1fr 330px; }
  .steam-flow-grid { grid-template-columns: 1fr 1fr; }
  .steam-order { grid-column: 1 / -1; min-height: auto; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 22px; }
  .steam-order .button { min-width: 230px; margin: 0; }
  .storefront-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-service:first-child { grid-column: 1 / -1; }
  .checkout-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; }
  .profile-dashboard-grid { grid-template-columns: minmax(0, 1fr) 300px; }
  .profile-stat { padding-inline: 22px; }
  .voucher-service-switch { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .voucher-layout { grid-template-columns: minmax(0, 1fr) 310px; }
  .home-order-layout { grid-template-columns: minmax(0, 1fr) 260px; }
}

@media (max-width: 780px) {
  body { padding-bottom: 88px; }
  body.menu-open { overflow: hidden; }
  body.menu-open .mobile-dock { opacity: 0; pointer-events: none; }
  .site-header { background: rgba(18,19,16,.98); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .mobile-dock { position: fixed; z-index: 150; left: 50%; bottom: 10px; width: min(calc(100% - 20px), 560px); min-height: 66px; display: grid; grid-template-columns: repeat(5, 1fr); transform: translateX(-50%); border: 1px solid var(--hairline); border-radius: 20px; background: var(--surface); padding: 6px; box-shadow: 0 18px 50px rgba(0,0,0,.44); backdrop-filter: blur(18px); }
  .mobile-dock a { min-width: 0; display: grid; place-items: center; align-content: center; gap: 3px; border-radius: 14px; color: var(--muted-2); font-size: 9px; font-weight: 700; }
  .mobile-dock a.active { background: var(--accent-wash); color: var(--gold-text); }
.mobile-dock svg { width: 21px; height: 21px; }
.mobile-dock .dock-telegram { width: 23px; height: 23px; }
  .container { width: min(calc(100% - 28px), var(--max)); }
  .header-main { grid-template-columns: auto 1fr auto; gap: 12px; }
  .site-search { max-width: none; }
  .site-search kbd { display: none; }
  .header-actions .support-button { display: none; }
  .menu-button { display: grid; }
  .header-nav { position: fixed; inset: 0; z-index: 190; display: block; visibility: hidden; overflow: hidden; background: rgba(3,4,3,.72); opacity: 0; transition: opacity .18s ease, visibility .18s ease; }
  .header-nav.open { visibility: visible; opacity: 1; }
  .desktop-nav { display: none; }
  .mobile-menu-panel { position: absolute; top: 0; right: 0; width: min(100%, 420px); height: 100dvh; display: flex; flex-direction: column; overflow-y: auto; transform: translateX(100%); border-left: 1px solid var(--line); background: var(--bg); padding: max(16px, env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom)); box-shadow: -24px 0 70px rgba(0,0,0,.5); transition: transform .22s cubic-bezier(.2,.75,.25,1); }
  .header-nav.open .mobile-menu-panel { transform: translateX(0); }
  .mobile-menu-head { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 2px 14px; border-bottom: 1px solid var(--line); }
  .mobile-menu-list { display: grid; gap: 6px; padding: 18px 0; }
  .mobile-menu-list a { min-height: 58px; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; border: 1px solid transparent; border-radius: 14px; color: var(--muted); padding: 7px 12px; font-size: 16px; }
  .mobile-menu-list a > span { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--hairline); }
  .mobile-menu-list svg { width: 21px; height: 21px; }
  .mobile-menu-list a.active { border-color: var(--accent-border-soft); background: var(--accent-wash); color: var(--text); }
  .mobile-menu-list a.active > span { border-color: var(--accent-border-soft); color: var(--gold-text); background: var(--accent-wash); }
  .mobile-menu-bottom { display: grid; gap: 14px; margin-top: auto; }
  .mobile-menu-support { min-height: 68px; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; border: 1px solid var(--accent-border-soft); border-radius: 16px; background: linear-gradient(135deg, var(--accent-wash), var(--accent-wash)); padding: 11px 12px; }
  .mobile-menu-support > span:first-child { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--gold-fill); color: var(--gold-ink); }
  .mobile-menu-support svg { width: 21px; height: 21px; }
  .mobile-menu-support b, .mobile-menu-support small { display: block; }
  .mobile-menu-support b { font-size: 14px; }
  .mobile-menu-support small { margin-top: 3px; color: var(--muted); font-size: 12px; }
  .mobile-menu-legal { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0 4px; }
  .mobile-menu-legal a { min-height: 36px; display: inline-flex; align-items: center; color: var(--muted-2); font-size: 11px; }
  .nav-spacer, .nav-status { display: none; }
  .section { padding: 52px 0; }
  .section-head, .page-hero-row { display: grid; grid-template-columns: 1fr; align-items: start; }
  h1 { font-size: 42px; }
  h2 { font-size: 32px; }
  .hero-copy p { font-size: 16px; }
  .commerce-board { grid-template-columns: 1fr; }
  .board-brand { min-height: 130px; grid-row: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .board-fields { grid-template-columns: 1fr; }
  .quick-row { grid-column: auto; }
  .board-summary { grid-column: auto; }
  .workspace { grid-template-columns: 1fr; }
  .workspace-side { position: static; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .catalog-grid.game-logo-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 10px; }
  .service-launchpad { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .game-configurator { grid-template-columns: 1fr; }
  .game-configurator-visual { min-height: 300px; }
  .game-configurator-visual > img { min-height: 300px; max-height: 380px; }
  .telegram-product-card { grid-template-columns: 58px minmax(0, 1fr) auto; padding: 18px; }
  .telegram-product-card > img { width: 56px; height: 56px; }
  .package-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
  .assurance-row { grid-template-columns: 1fr; }
  .assurance-row span + span { border-left: 0; border-top: 1px solid var(--line); }
  .faq-layout, .help-grid { grid-template-columns: 1fr; gap: 28px; }
  .help-nav { position: static; display: flex; flex-wrap: wrap; border-left: 0; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
  .help-nav a { padding: 6px 10px; border: 1px solid var(--line); border-radius: 5px; }
  .store-hero-top { grid-template-columns: 1fr; gap: 18px; }
  .store-hero-top > p { max-width: 590px; margin: 0; }
  .steam-flow-grid { grid-template-columns: 1fr; }
  .steam-step { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .steam-order { grid-column: auto; display: flex; min-height: 190px; }
  .steam-order .button { min-width: 0; margin-top: 20px; }
  .flow-proofs { grid-template-columns: 1fr; }
  .flow-proofs span + span, .flow-proofs a { border-left: 0; border-top: 1px solid var(--line); }
  .checkout-layout { grid-template-columns: 1fr; }
  .game-checkout-form { grid-template-columns: 1fr; }
  .checkout-side { position: static; }
  .legal-layout { grid-template-columns: 1fr; gap: 30px; }
  .legal-meta { position: static; order: -1; }
  .legal-copy .legal-title { font-size: clamp(30px, 7vw, 42px); }
  .identity-grid { grid-template-columns: 1fr; }
  .identity-entry-grid, .profile-dashboard-grid { grid-template-columns: 1fr; }
  .identity-benefits { grid-template-columns: repeat(3, 1fr); }
  .identity-benefits > div { min-height: 150px; grid-template-columns: 1fr; align-content: start; border-right: 1px solid var(--line); border-bottom: 0; }
  .identity-benefits > div:last-child { border-right: 0; }
  .identity-benefits span { grid-row: auto; }
  .profile-sidebar { grid-template-columns: 1fr 1fr; }
  .rank-grid { grid-template-columns: repeat(2, 1fr); }
  .rank-card:nth-child(2n) { border-right: 0; }
  .rank-card:nth-child(n+3) { border-top: 1px solid var(--line); }
  .login-methods { grid-template-columns: 1fr; }
  .voucher-layout { grid-template-columns: 1fr; }
  .voucher-summary { position: static; }
  .checkout-layout { grid-template-columns: minmax(0, 1fr); }
  .checkout-main, .checkout-side { width: 100%; }
  .voucher-service-switch { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  body[data-checkout] { padding-bottom: 0; }
    .header-main { height: 64px; grid-template-columns: auto 1fr auto; }
  .brand-word { height: 14px; width: 59px; }
  .brand-mark { height: 18px; }
  .site-search input { height: 40px; padding-right: 12px; }
  .site-search input::placeholder { color: transparent; }
  .section, .section.compact { padding: 28px 0; }
  h1 { font-size: 31px; }
  .page-hero { padding: 20px 0 16px; }
  .page-hero h1 { max-width: 100%; margin-top: 8px; font-size: clamp(27px, 8.1vw, 32px); line-height: 1.02; overflow-wrap: anywhere; }
  .page-hero p { display: none; }
  .page-badge { display: none; }
  .breadcrumbs { margin-bottom: 8px; }
  .workspace-main, .workspace-side { padding: 20px; }
  .field label { font-size: 12px; }
  .workspace-title { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
  h2 { font-size: 28px; }
  .identity-hero, .help-head { padding: 14px 0 10px; }
  .identity-hero h1, .help-head h1 { font-size: 26px; }
  .help-head .button { min-height: 44px; padding-inline: 14px; }
  .identity-hero p { display: none; }
  .identity-panel-head { min-height: 58px; padding: 0 18px; }
  .identity-panel-body { padding: 18px; }
  .identity-head-note { display: none; }
  .login-method-secondary { grid-template-columns: 1fr; }
  .login-method { min-height: 48px; }
  .identity-benefits { grid-template-columns: 1fr; }
  .identity-benefits > div { min-height: auto; grid-template-columns: 34px 1fr; border-right: 0; border-bottom: 1px solid var(--line); }
  .identity-benefits > div:last-child { border-bottom: 0; }
  .identity-benefits span { grid-row: span 2; }
  .profile-overview-main { grid-template-columns: auto 1fr; gap: 16px; padding: 22px 20px; }
  .profile-rank-crest { width: 72px; }
  .profile-identity h2 { font-size: 23px; }
  .profile-logout { grid-column: 1 / -1; width: 100%; }
  .profile-stat-grid { grid-template-columns: 1fr; }
  .profile-stat { min-height: 88px; padding: 16px 20px; }
  .profile-stat + .profile-stat { border-left: 0; border-top: 1px solid var(--line); }
  .profile-progress-block { padding: 18px 20px 21px; }
  .profile-sidebar { grid-template-columns: 1fr; }
  .profile-section { padding: 19px; }
  .profile-section-head { display: grid; grid-template-columns: 1fr; align-items: stretch; }
  .order-filters { width: 100%; justify-self: stretch; }
  .order-filters button { flex: 1; }
  .store-order { grid-template-columns: 1fr; gap: 9px; }
  .order-amount { justify-self: start; }
  .rank-board-head p { display: none; }
  .home-hero { padding-top: 34px; }
  .store-hero { padding: 20px 0 26px; }
  .store-hero-top { gap: 8px; margin-bottom: 16px; }
  .store-hero-top h1 { margin-top: 8px; font-size: 31px; }
  .home-title-desktop { display: none; }
  .home-title-mobile { display: inline; white-space: nowrap; }
  .store-hero-top > p { display: none; }
  .home-showcase { margin-top: 18px; }
  .home-showcase-head { margin-bottom: 11px; }
  .home-showcase-head h2 { font-size: 20px; }
  .home-showcase-head > a { font-size: 11px; }
  .home-showcase-grid { display: grid; grid-template-rows: repeat(2, auto); grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 164px; gap: 10px; overflow-x: auto; margin-inline: -14px; padding: 0 14px 8px; scroll-padding-inline: 14px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .home-showcase-grid::-webkit-scrollbar { display: none; }
  .home-showcase-card { width: 164px; min-width: 164px; grid-template-rows: 92px auto; border-radius: 14px; scroll-snap-align: start; }
  .home-showcase-card:hover, .home-showcase-card:focus-visible { transform: none; }
  .home-showcase-card.stars .home-showcase-art img, .home-showcase-card.premium .home-showcase-art img, .home-showcase-card.service .home-showcase-art img { width: 52px; height: 52px; }
  .home-showcase-copy { padding: 11px 12px 13px; }
  .home-showcase-copy b { font-size: 13px; }
  .home-showcase-copy em { font-size: 10px; }
  .board-brand, .board-fields, .board-summary { padding: 20px; }
  .service-grid, .game-row, .catalog-grid, .info-grid { grid-template-columns: 1fr; }
  .catalog-grid.game-logo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px 9px; }
  .service-launchpad { display: flex; gap: 11px; margin: 0 0 16px; padding: 2px 2px 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .service-launchpad::-webkit-scrollbar { display: none; }
  .launch-service { width: 74px; min-width: 74px; align-content: start; justify-items: center; gap: 7px; padding: 2px; scroll-snap-align: start; }
  .launch-service b { min-height: 30px; font-size: 11px; line-height: 1.3; }
  .launch-icon { width: 64px; height: 64px; }
  .home-order-layout { grid-template-columns: 1fr; gap: 10px; }
  .home-order-layout.compact-action, .workspace.compact-action { gap: 0; }
  .home-order-layout.compact-action .home-order-card, .workspace.compact-action .workspace-main { border-radius: 16px 16px 0 0; }
  .home-order-layout.compact-action .action-only, .workspace.compact-action .action-only { position: static; border-top: 0; border-radius: 0 0 16px 16px; background: var(--surface); padding: 10px 14px 14px; }
  .home-order-card { padding: 0 14px 14px; border-radius: 16px; }
  .home-order-head { min-height: 56px; margin: 0 -14px 13px; padding: 0 14px; }
  .home-order-head .steam-flow-brand img { width: 34px; height: 34px; padding: 6px; }
  .home-order-head .status-chip { font-size: 10px; }
  .home-order-fields { grid-template-columns: minmax(0, 1fr) 118px; gap: 9px; }
  .home-order-fields .input-wrap input { height: 50px; padding-inline: 12px 34px; font-size: 14px; }
  .home-order-fields .field label { font-size: 10px; }
  .home-presets { grid-column: 1 / -1; }
  .home-presets .quick-row { gap: 6px; }
  .home-presets .quick { min-height: 44px; padding-inline: 4px; font-size: 10px; }
  .home-order-summary { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(142px, auto); align-items: center; gap: 10px; border-radius: 16px; padding: 14px; }
  .home-order-summary .order-total { gap: 3px; }
  .home-order-summary .order-total b { font-size: 23px; }
  .home-order-summary .button { min-height: 50px; margin: 0; }
  .home-order-summary .button { min-width: 0; padding-inline: 12px; }
  .home-order-summary.action-only { display: flex; border-top: 0; border-radius: 0 0 16px 16px; padding: 10px 14px 14px; }
  .telegram-home-fields .home-recipient { grid-column: 1; }
  .home-stars-input { grid-template-columns: minmax(0, 1fr) auto; }
  .home-stars-input img { display: none; }
  .home-stars-input input { font-size: 20px; }
  .home-stars-input span { font-size: 9px; }
  .home-premium-packages { grid-column: 1 / -1; }
  .home-premium-packages .package-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .home-premium-packages .telegram-package { min-height: 82px; padding: 9px; }
  .home-premium-packages .telegram-package img { width: 24px; height: 24px; }
  .home-order-summary.telegram-home-summary { grid-template-columns: 1fr; gap: 10px; }
  .telegram-home-summary .telegram-summary-icon { width: 42px; height: 42px; }
  .telegram-home-summary .telegram-summary-icon img { width: 31px; height: 31px; }
  .telegram-home-summary h3, .telegram-home-summary .home-price { display: none; }
  .telegram-home-summary .order-total b { font-size: 14px; }
  .telegram-product-switch { grid-template-columns: 1fr; }
  .telegram-product-card { min-height: 100px; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 13px; padding: 15px; }
  .telegram-product-card > img { width: 48px; height: 48px; border-radius: 12px; padding: 8px; }
  .telegram-product-card b { font-size: 18px; }
  .stars-quantity { grid-template-columns: 1fr; gap: 8px; }
  .stars-quantity-input { min-height: 60px; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 9px; padding: 8px 11px; }
  .stars-quantity-input img { width: 36px; height: 36px; padding: 6px; }
  .stars-quantity-input input { font-size: 25px; }
  .stars-quantity-input span { font-size: 10px; }
  .stars-presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin: 0; padding: 0; overflow: visible; }
  .stars-presets button { min-width: 0; min-height: 44px; padding: 0 2px; font-size: 9.5px; }
  .product-choice-grid, .account-fields { grid-template-columns: 1fr; }
  .product-choice-grid { max-height: 340px; }
  .config-step-title b { font-size: 14px; }
  .config-step-title small { font-size: 10.5px; line-height: 1.35; }
  .region-choice b { font-size: 12px; }
  .region-choice small { font-size: 10px; }
  .account-fields .field > span { font-size: 12px; }
  .account-fields input, .account-fields select { height: 50px; border-radius: 11px; font-size: 14px; }
  .account-fields small { font-size: 10px; line-height: 1.35; }
  .voucher-product { border-radius: 12px; }
  .voucher-product b { font-size: 12px; }
  .voucher-product small { font-size: 10px; }
  .voucher-product em { font-size: 11px; }
  .game-configurator-main { padding: 20px; }
  .game-configurator-visual > div { left: 20px; right: 20px; bottom: 20px; }
  .configurator-footer { align-items: stretch; flex-direction: column; }
  .configurator-action { width: 100%; min-width: 0; }
  .catalog-tools { grid-template-columns: 1fr; }
  .catalog-tools select { display: none; }
  .catalog-search input { height: 50px; }
  .catalog-category-tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: 0; padding: 0 0 8px; scrollbar-width: none; }
  .catalog-category-tabs .filter { min-height: 44px; padding-inline: 12px; }
  .live-catalog-head { display: none; }
  .catalog-result { margin-bottom: 10px; }
  .game-logo-card { padding: 2px; }
  .game-logo-card h3 { min-height: 30px; font-size: 10.5px; }
  .catalog-category-tabs::-webkit-scrollbar { display: none; }
  .game-cover-generated .cover-name { right: 96px; font-size: 19px; }
  .method-grid { grid-template-columns: 1fr; }
  .info-item, .info-item + .info-item { min-height: auto; padding: 18px 0; border-left: 0; }
  .site-footer { border-top-color: var(--hairline); background: none; padding: 7px 0 82px; opacity: .72; }
  .footer-compact { display: none; }
  .footer-bottom { border-top: 0; flex-direction: column; gap: 0; padding-top: 0; }
  .footer-bottom > span:first-child { display: none; }
  .footer-legal-links { justify-content: center; gap: 0 10px; }
  .footer-legal-links a { min-height: 24px; font-size: 9px; font-weight: 600; }
  .trademark { display: none; }
  .rank-grid { grid-template-columns: 1fr; }
  .rank-card, .rank-card:nth-child(2n) { min-height: 0; display: grid; grid-template-columns: 58px 1fr; align-items: center; border-right: 0; border-top: 1px solid var(--line); }
  .rank-card:first-child { border-top: 0; }
  .steam-flow-head { min-height: auto; align-items: center; flex-direction: row; gap: 11px; padding: 12px 14px; }
  .steam-flow-head .status-chip { display: none; }
  .steam-flow-brand { gap: 12px; }
  .steam-flow-brand img { width: 38px; height: 38px; padding: 7px; }
  .steam-flow-brand span { font-size: 11px; }
  .store-hero .steam-flow-grid { grid-template-columns: minmax(0, 1fr) 120px; }
  .store-hero .steam-step { min-height: 0; padding: 13px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .store-hero .steam-step:nth-child(2) { border-right: 0; }
  .store-hero .steam-step .step-number, .store-hero .steam-step .helper, .store-hero .amount-presets { display: none; }
  .store-hero .steam-step .field { gap: 5px; }
  .store-hero .steam-step .field label { font-size: 11px; }
  .store-hero .steam-step .input-wrap input, .store-hero .amount-input input { height: 48px; border-radius: 11px; padding-inline: 12px 34px; font-size: 14px; }
  .store-hero .amount-input input { padding: 0 28px 0 10px; font-size: 17px; }
  .store-hero .amount-input span { right: 10px; }
  .store-hero .steam-order { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: 1fr minmax(126px, auto); align-items: center; gap: 10px; padding: 12px 14px; }
  .store-hero .steam-order .order-kicker, .store-hero .steam-order p { display: none; }
  .store-hero .steam-order .order-amount { margin: 0; font-size: 21px; white-space: nowrap; }
  .store-hero .steam-order .button { min-width: 112px; min-height: 46px; margin: 0; font-size: 0; }
  .store-hero .steam-order .button::before { content: "Далее →"; position: relative; z-index: 1; font-size: 13px; }
  .store-hero .flow-proofs { display: none; }
  .steam-step, .steam-order { padding: 18px; }
  .amount-presets { grid-template-columns: repeat(2, 1fr); }
  .storefront-grid { grid-template-columns: 1fr; }
  .featured-service:first-child { grid-column: auto; }
  .featured-service { min-height: 176px; }
  .checkout-page { padding: 14px 0 20px; }
  .checkout-header-main { height: 64px; }
  .checkout-header-title { font-size: 11px; }
  .checkout-layout { gap: 10px; }
  .checkout-main > .breadcrumbs, .checkout-main > .eyebrow, .checkout-main > h1, .checkout-intro, .checkout-steps { display: none; }
  .checkout-items { border-top: 0; }
  .checkout-item { min-height: 70px; align-items: flex-start; gap: 10px; padding: 10px 0; }
  .checkout-item span { font-size: 10px; }
  .checkout-item h3 { margin-top: 3px; font-size: 14px; }
  .checkout-item p { margin-top: 3px; font-size: 11px; line-height: 1.35; }
  .checkout-state { margin-top: 8px; border-radius: 12px; padding: 10px 12px 10px 34px; font-size: 11px; }
  .checkout-state::before { left: 13px; }
  .checkout-side { border-radius: 16px; padding: 15px; }
  /* «Итого» скрывалось на телефоне, а меньшая строка «К зачислению» подпись
     сохраняла: крупное число списания висело без имени, а подписанным
     оказывалось второе, меньшее по величине. На шаге денег имя нужно
     прежде всего главному числу. */
  .checkout-side > .helper,
  .checkout-help { display: none; }
  .checkout-counter { justify-content: space-between; margin: 0 0 10px; }
  .checkout-counter b { font-size: 27px; }
  .checkout-counter span { font-size: 11px; }
  .checkout-summary-line { margin: 0 0 10px; border-radius: 11px; padding: 9px 11px; }
  .checkout-note { padding: 9px 0; }
  .checkout-note span { display: none; }
  .checkout-side .button { min-height: 50px; margin-top: 10px; }
  .checkout-legal { margin-top: 9px; font-size: 9.5px; line-height: 1.4; }
  .steam-page .page-hero { display: none; }
  .steam-page main > .section:nth-of-type(n+3) { display: none; }
  .steam-page .section.compact { padding: 14px 0 18px; }
  .section-banner { height: 86px; margin-bottom: 12px; border-radius: 14px; }
  .section-banner h1 { left: 16px; font-size: 18px; }
  .steam-page .workspace { gap: 0; }
  .steam-page .workspace-main { border-radius: 16px 16px 0 0; padding: 14px; }
  .steam-page .workspace-side { border-radius: 0 0 16px 16px; padding: 14px; }
  .steam-page .workspace-title { align-items: center; flex-wrap: nowrap; gap: 10px; margin-bottom: 11px; }
  .steam-page .workspace-title > img { width: 40px; height: 40px; padding: 8px; }
  .steam-page .form-grid { grid-template-columns: minmax(0, 1fr) 118px; gap: 9px; }
  .steam-page .form-grid > .field { min-width: 0; }
  .steam-page .form-grid > .field:nth-child(1) { grid-column: 1; }
  .steam-page .form-grid > .field:nth-child(2) { grid-column: 2; }
  .steam-page .form-grid > .field:nth-child(3) { grid-column: 1 / -1; }
  .steam-page .form-grid > .field:nth-child(4) { display: none; }
  .steam-page .field label { font-size: 11px; }
  .steam-page .field .helper { display: none; }
  .steam-page .input-wrap input { height: 48px; padding-inline: 12px 32px; font-size: 14px; }
  .steam-page .quick-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .steam-page .quick { min-width: 0; min-height: 42px; padding: 0 4px; font-size: 10px; }
  .steam-page .workspace-side h3 { display: none; }
  .steam-page .workspace-side .order-lines, .steam-page .workspace-side .helper { display: none; }
  .steam-page .workspace-side.action-only { padding-top: 10px; }
  .telegram-page .page-hero, .games-page .page-hero, .services-page .page-hero { display: none; }
  .telegram-page main > .section:nth-of-type(n+3), .games-page main > .section:nth-of-type(n+3), .services-page main > .section:nth-of-type(n+3) { display: none; }
  .telegram-page .section.compact, .games-page .section.compact, .services-page .section.compact { padding-top: 14px; }
  .telegram-page .section-banner { height: 72px; }
  .telegram-page .telegram-product-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-bottom: 9px; }
  .telegram-page .telegram-product-card { width: 100%; min-width: 0; min-height: 64px; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; padding: 8px; border-radius: 14px; }
  .telegram-page .telegram-product-card > img { width: 38px; height: 38px; border-radius: 11px; padding: 6px; }
  .telegram-page .telegram-product-card small, .telegram-page .telegram-product-card em, .telegram-page .telegram-product-card > i { display: none; }
  .telegram-page .telegram-product-card b { min-width: 0; margin: 0; font-size: 11px; line-height: 1.15; overflow-wrap: anywhere; }
  .telegram-page .telegram-workspace { gap: 0; }
  .telegram-page .workspace-main { padding: 15px; }
  .telegram-page .telegram-recipient-field { margin-bottom: 13px; }
  .telegram-page .field label { margin-bottom: 6px; font-size: 10px; }
  .telegram-page .input-wrap input { height: 48px; }
  .telegram-page .telegram-summary { padding: 10px 14px 14px; }
  .telegram-page .telegram-summary-icon, .telegram-page .telegram-summary h3, .telegram-page .telegram-summary .order-lines, .telegram-page .telegram-summary .helper { display: none; }
  .telegram-page .telegram-submit { min-height: 50px; margin: 0; }
  .voucher-service-switch { display: flex; gap: 11px; margin: 0 0 12px; padding: 2px 2px 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }.voucher-service-switch::-webkit-scrollbar { display: none; }.voucher-service-card { width: 74px; min-width: 74px; padding: 2px; scroll-snap-align: start; }.voucher-service-card > span { width: 64px; }.voucher-service-card b { min-height: 30px; font-size: 11px; }
  .voucher-main { padding: 16px; }.voucher-product-grid { grid-template-columns: 1fr; max-height: 360px; }.voucher-flow-head { align-items: flex-start; padding-bottom: 12px; }
  .voucher-region-grid, .region-choice-grid { width: 100%; max-width: 100%; flex-wrap: nowrap; margin-inline: 0; padding: 0 0 6px; overflow-x: auto; overflow-y: hidden; max-height: none; scrollbar-width: none; }.voucher-region-grid::-webkit-scrollbar, .region-choice-grid::-webkit-scrollbar { display: none; }
  .voucher-region, .region-choice { min-width: 148px; scroll-snap-align: start; }
}

/* Provider ownership token is machine-readable only and must never affect layout. */
.site-verification {
  display: none !important;
}

/* Games + services: one catalogue language and one focused product sheet. */
html.catalog-sheet-open,
html.catalog-sheet-open body {
  overflow: hidden;
}

.games-page .section.compact,
.services-page .section.compact {
  padding-top: 22px;
}

.games-page .catalog-tools {
  grid-template-columns: minmax(0, 1fr) 156px;
  gap: 8px;
  margin-bottom: 10px;
}

.games-page .catalog-search,
.games-page .catalog-tools select {
  height: 48px;
  border: 0;
  border-radius: 14px;
  background-color: var(--ui-control);
}

.games-page .catalog-category-tabs {
  gap: 6px;
  margin-bottom: 22px;
}

.games-page .catalog-category-tabs .filter {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  padding: 0 14px;
  background: var(--hairline);
}

.games-page .catalog-category-tabs .filter.active {
  background: var(--accent-wash);
  box-shadow: inset 0 -2px var(--ui-gold);
}

.games-page .catalog-result {
  min-height: 0;
  margin: 0;
}

.catalog-grid.game-logo-grid,
.services-page .voucher-service-switch {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  align-items: start;
  gap: 20px 12px;
  margin: 0;
  padding: 0;
  overflow: visible;
  mask-image: none;
}

.game-logo-card,
.services-page .voucher-service-card {
  width: auto;
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(32px, auto);
  justify-items: center;
  gap: 8px;
  border: 0;
  border-radius: 16px;
  padding: 6px;
  background: transparent;
  color: var(--ui-text);
  scroll-snap-align: none;
}

.game-logo-card > span,
.services-page .voucher-service-card > span {
  width: min(100%, 92px);
  height: auto;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface-2);
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease;
}

.game-logo-card > span img,
.services-page .voucher-service-card > span img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.services-page .voucher-service-card > span img {
  padding: 19%;
  object-fit: contain;
}

.game-logo-card:hover > span,
.game-logo-card:focus-visible > span,
.services-page .voucher-service-card:hover > span,
.services-page .voucher-service-card:focus-visible > span {
  transform: translateY(-2px);
  border-color: var(--accent-border-soft);
  background: #171914;
  box-shadow: none;
}

.game-logo-card:focus-visible,
.services-page .voucher-service-card:focus-visible {
  outline: 2px solid var(--ui-gold);
  outline-offset: 2px;
}

.game-logo-card h3,
.services-page .voucher-service-card b {
  width: 100%;
  min-height: 32px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--ui-text);
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
}

.game-logo-icon > i {
  top: -4px;
  right: -4px;
  min-height: 22px;
  border: 2px solid var(--ui-bg);
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 10px;
}

.services-page .voucher-service-card.active {
  background: transparent;
  box-shadow: none;
}

.services-page .voucher-service-card.active > span {
  border-color: var(--ui-gold);
  background: var(--accent-wash);
  box-shadow: inset 0 0 0 1px var(--accent-wash-strong);
}

.services-page .voucher-service-card.active b {
  color: var(--gold-text);
}

/* The selected product stays in context: centre dialog on desktop, bottom sheet on phones. */
.games-page .game-checkout-panel,
.services-page .voucher-layout {
  position: fixed;
  inset: 0;
  z-index: 220;
  width: 100%;
  height: 100dvh;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 20px;
  background: rgba(5, 6, 5, .72);
  backdrop-filter: blur(10px);
  box-shadow: none;
}

.games-page .game-checkout-panel {
  display: grid;
  place-items: center;
}

.games-page .game-checkout-panel[hidden],
.services-page .voucher-layout[hidden] {
  display: none !important;
}

.games-page .game-configurator {
  width: min(1040px, 100%);
  max-height: min(780px, calc(100dvh - 40px));
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: 24px;
  background: var(--ui-surface);
  box-shadow: 0 20px 70px rgba(0, 0, 0, .42);
}

.games-page .game-configurator-visual {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  background: #0b0d0b;
}

.games-page .game-configurator-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 8, 7, .12) 12%, rgba(7, 8, 7, .92) 88%);
}

.games-page .game-configurator-visual > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.games-page .game-configurator-visual > div {
  position: absolute;
  inset: auto 22px 24px;
  z-index: 1;
}

.games-page .game-configurator-badge {
  display: none;
}

.games-page .game-configurator-visual span {
  color: var(--gold-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.games-page .game-configurator-visual h2 {
  margin: 7px 0 4px;
  font-size: clamp(25px, 3vw, 38px);
  line-height: 1;
}

.games-page .game-configurator-visual p {
  margin: 0;
  color: var(--ui-muted);
  font-size: 13px;
}

.games-page .game-configurator-main {
  min-width: 0;
  max-height: inherit;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0 22px;
  scrollbar-width: thin;
  scrollbar-color: var(--ui-line-strong) transparent;
}

.games-page .game-checkout-heading {
  position: sticky;
  top: 0;
  z-index: 4;
  min-height: 68px;
  align-items: center;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--ui-line);
  background: var(--ui-surface);
}

.games-page .game-checkout-heading h3 {
  font-family: var(--body);
  font-size: 18px;
}

.games-page .config-step,
.services-page .config-step {
  margin: 0;
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  background: transparent;
}

.games-page .config-step-title,
.services-page .config-step-title {
  margin-bottom: 12px;
}

.games-page .config-step-title > span,
.services-page .config-step-title > span {
  width: 24px;
  height: 24px;
  border: 0;
  background: var(--accent-wash);
  color: var(--gold-text);
  font-size: 11px;
}

.games-page .region-choice-grid,
.services-page .voucher-region-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-height: none;
  overflow: visible;
  padding: 0;
  mask-image: none;
}

.games-page .region-choice,
.services-page .voucher-region {
  min-width: 0;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--ui-control);
  padding: 8px 11px;
}

.games-page .region-choice.active,
.services-page .voucher-region.active {
  border-color: var(--accent-border-soft);
  background: var(--accent-wash);
  box-shadow: inset 0 0 0 1px var(--accent-wash);
}

.games-page .product-choice-grid,
.services-page .voucher-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  max-height: none;
  overflow: visible;
  padding: 0;
}

.games-page .product-choice,
.services-page .voucher-product {
  min-height: 64px;
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--ui-control);
  padding: 10px;
}

.games-page .product-choice.active,
.services-page .voucher-product.active {
  border-color: var(--accent-border-soft);
  background: var(--accent-wash);
}

.games-page .product-choice > img,
.services-page .voucher-product > img {
  width: 40px;
  height: 40px;
  border-radius: 11px;
}

.games-page .product-choice b,
.services-page .voucher-product b {
  font-size: 12px;
  line-height: 1.25;
}

.games-page .product-choice small,
.services-page .voucher-product em {
  color: var(--gold-text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.games-page .account-fields {
  gap: 10px;
}

.games-page .account-fields input,
.games-page .account-fields select,
.games-page .product-choice-search,
.services-page .choice-search {
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: var(--ui-control);
}

.games-page .configurator-footer {
  position: sticky;
  bottom: 0;
  z-index: 4;
  margin: 0 -22px;
  padding: 12px 22px;
  border-top: 1px solid var(--ui-line);
  background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
  backdrop-filter: blur(14px);
}

.games-page .configurator-footer > div {
  min-width: 0;
}

.games-page .configurator-footer b {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.services-page .voucher-layout {
  display: grid;
  grid-template-columns: minmax(0, 720px) 300px;
  place-content: center;
  align-items: stretch;
  gap: 1px;
}

.services-page .voucher-main,
.services-page .voucher-summary {
  max-height: min(780px, calc(100dvh - 40px));
  border: 1px solid var(--ui-line);
  background: var(--ui-surface);
  box-shadow: 0 20px 70px rgba(0, 0, 0, .42);
}

.services-page .voucher-main {
  position: relative;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 24px 0 0 24px;
  padding: 22px;
}

.services-page .voucher-summary {
  position: static;
  display: flex;
  flex-direction: column;
  border-radius: 0 24px 24px 0;
  padding: 22px;
}

.services-page .voucher-sheet-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
}

.services-page .voucher-sheet-close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.choice-search[hidden],
.product-choice-search[hidden] {
  display: none !important;
}

.services-page .voucher-flow-head {
  min-height: 58px;
  padding: 0 58px 14px 0;
  border-bottom: 1px solid var(--ui-line);
}

.services-page .voucher-flow-head img {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--surface-2);
  padding: 8px;
}

.services-page .voucher-summary .button {
  margin-top: auto;
}

@media (max-width: 780px) {
  .games-page .section.compact,
  .services-page .section.compact {
    padding-top: 10px;
  }

  .games-page .catalog-tools {
    grid-template-columns: minmax(0, 1fr) 112px;
  }

  .games-page .catalog-tools select {
    display: block;
    width: 112px;
    padding: 0 28px 0 10px;
    font-size: 11px;
  }

  .games-page .catalog-category-tabs {
    margin-inline: -12px;
    padding-inline: 12px 26px;
  }

  .catalog-grid.game-logo-grid,
  .services-page .voucher-service-switch {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 7px;
  }

  .game-logo-card,
  .services-page .voucher-service-card {
    padding: 2px;
  }

  .game-logo-card > span,
  .services-page .voucher-service-card > span {
    width: min(100%, 72px);
    border-radius: 18px;
  }

  .game-logo-card h3,
  .services-page .voucher-service-card b {
    min-height: 31px;
    font-size: 10.5px;
  }

  .games-page .game-checkout-panel,
  .services-page .voucher-layout {
    align-items: end;
    align-content: end;
    padding: 0;
    background: var(--surface);
    backdrop-filter: blur(7px);
  }

  .games-page .game-configurator {
    width: 100%;
    max-height: 91dvh;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 92px minmax(0, 1fr);
    border-width: 1px 0 0;
    border-radius: 24px 24px 0 0;
  }

  .games-page .game-configurator-visual {
    min-height: 92px;
    background: var(--ui-surface);
  }

  .games-page .game-configurator-visual::after {
    display: none;
  }

  .games-page .game-configurator-visual > img:not(.game-configurator-badge) {
    display: none;
  }

  .games-page .game-configurator-visual > div {
    inset: 14px 72px 14px 16px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 12px;
  }

  .games-page .game-configurator-badge {
    width: 54px;
    height: 54px;
    display: block;
    grid-row: 1 / 3;
    border-radius: 14px;
    object-fit: cover;
  }

  .games-page .game-configurator-visual span,
  .games-page .game-configurator-visual h2 {
    grid-column: 2;
  }

  .games-page .game-configurator-visual h2 {
    margin: 2px 0 0;
    font-size: 21px;
    line-height: 1.05;
  }

  .games-page .game-configurator-visual p {
    display: none;
  }

  .games-page .game-configurator-main {
    padding-inline: 14px;
  }

  .games-page .game-checkout-heading {
    min-height: 58px;
    padding: 8px 0;
  }

  .games-page .game-checkout-heading h3 {
    font-size: 16px;
  }

  .games-page .config-step,
  .services-page .config-step {
    padding: 14px 0;
  }

  .games-page .region-choice-grid,
  .services-page .voucher-region-grid {
    flex-wrap: nowrap;
    margin-inline: -14px;
    padding: 0 22px 3px 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .games-page .region-choice,
  .services-page .voucher-region {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .games-page .product-choice-grid,
  .services-page .voucher-product-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .games-page .configurator-footer {
    margin-inline: -14px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  }

  .services-page .voucher-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    place-content: end stretch;
    gap: 0;
  }

  .services-page .voucher-main {
    max-height: calc(91dvh - 86px);
    border-width: 1px 0 0;
    border-radius: 24px 24px 0 0;
    padding: 16px 14px;
  }

  .services-page .voucher-summary {
    max-height: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, .8fr);
    align-items: center;
    gap: 10px;
    border-width: 1px 0 0;
    border-radius: 0;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 30px rgba(0, 0, 0, .22);
  }

  .services-page .voucher-summary-icon,
  .services-page .voucher-summary > h3,
  .services-page .voucher-summary .order-line:not(:last-child) {
    display: none;
  }

  .services-page .voucher-summary .order-lines,
  .services-page .voucher-summary .button {
    margin: 0;
  }

  .services-page .voucher-summary .order-line {
    min-height: 44px;
    border: 0;
    padding: 0;
  }
}

@media (max-width: 350px) {
  .catalog-grid.game-logo-grid,
  .services-page .voucher-service-switch {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .services-page .voucher-summary {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-logo-card > span,
  .services-page .voucher-service-card > span {
    transition: none;
  }
}

/* Light storefront: warm paper, graphite navigation and a single brass accent. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { color-scheme: light; }
}
[data-theme="light"] {
  color-scheme: light;
  /* SLARP tokens r4, light theme: neutral grey page + white cards */
  --bg: #F2F2F1;
  --bg-2: #FAFAF9;
  --surface: #FFFFFF;
  --surface-2: #FAFAF9;
  --surface-3: #F2F2F1;
  --text: #191918;
  --muted: #66665F;
  --muted-2:#63625B;
  --text-primary: #191918;
  --text-secondary: #66665F;
  --text-tertiary: #706F68;
  --gold: #AF831D;
  --gold-fill:#DCB45C;
  --gold-text:#7A5B12;
  --gold-strong: #7E5116;
  --gold-ink:#241C12;
  --paint-cobalt: #2F4DA8;
  --paint-patina: #1F6B57;
  --paint-plum: #5E3E96;
  --paint-master: #221E18;
  --line: #E7E7E4;
  --line-strong: #D8D8D5;
  --surface-highlight: rgba(255, 255, 255, .82);
  --color-success: #2E6B44;
  --color-error: #A8271B;
  --color-disabled: #706F68;
  --shadow: 0 1px 2px rgba(34, 30, 24, .06), 0 4px 16px rgba(34, 30, 24, .05);
  --shadow-soft: 0 1px 2px rgba(34, 30, 24, .06), 0 4px 16px rgba(34, 30, 24, .05);
  --sheet-shadow: 0 -8px 32px rgba(34, 30, 24, .14);
  --red: #A8271B;
  --green: #2E6B44;
  --intent-wash: rgba(143, 87, 20, .10);
  --accent-wash: rgba(143, 87, 20, .07);
  --accent-wash-strong: rgba(143, 87, 20, .13);
  --accent-border-soft: rgba(143, 87, 20, .42);
  --hairline: rgba(25, 25, 24, .07);
  --hairline-strong: rgba(25, 25, 24, .12);
;--focus-ring:#7E5116}

[data-theme="light"] .site-header {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(55, 45, 21, .07);
}

[data-theme="light"] .site-search input,
[data-theme="light"] .catalog-search input,
[data-theme="light"] .choice-search,
[data-theme="light"] .input-wrap,
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: var(--muted-2);
  opacity: 1;
}

[data-theme="light"] .site-search svg,
[data-theme="light"] .catalog-search svg {
  color: var(--muted-2);
}

[data-theme="light"] .site-search input:focus,
[data-theme="light"] .catalog-search:focus-within,
[data-theme="light"] .input-wrap:focus-within {
  border-color: var(--gold);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--intent-wash);
}

[data-theme="light"] .icon-button {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
}

[data-theme="light"] .icon-button:hover {
  border-color: var(--line-strong);
  background: var(--intent-wash);
  color: var(--gold-text);
}

[data-theme="light"] .nav-row {
  color: var(--muted);
}

[data-theme="light"] .nav-row-icon {
  color: var(--muted-2);
}

[data-theme="light"] .nav-row a:hover {
  background: var(--intent-wash);
  color: var(--text);
}

[data-theme="light"] .nav-row a.active { background: transparent;
  color: var(--gold-text);
}

[data-theme="light"] .nav-row a.active .nav-row-icon {
  color: var(--gold-text);
}

.telegram-nav-icon {
  width: 20px;
  height: 20px;
  display: block;
  flex: 0 0 20px;
}

.mobile-menu-list .telegram-nav-icon {
  width: 21px;
  height: 21px;
}

.mobile-dock .telegram-nav-icon {
  width: 21px;
  height: 21px;
}

[data-theme="light"] .search-suggestions,
[data-theme="light"] .catalog-sort-menu {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

[data-theme="light"] .search-suggestions a:hover,
[data-theme="light"] .search-suggestions a.active,
[data-theme="light"] .catalog-sort-menu button:hover,
[data-theme="light"] .catalog-sort-menu button[aria-selected="true"] {
  background: var(--intent-wash);
  color: var(--gold-text);
}

[data-theme="light"] .home-order-layout.compact-action,
[data-theme="light"] .home-order-layout[data-home-panel="telegram"],
[data-theme="light"] .telegram-page .telegram-workspace,
[data-theme="light"] .voucher-main,
[data-theme="light"] .voucher-summary,
[data-theme="light"] .game-checkout-panel,
[data-theme="light"] .identity-panel,
[data-theme="light"] .profile-overview,
[data-theme="light"] .profile-section,
[data-theme="light"] .brand-asset,
[data-theme="light"] .brand-colors article,
[data-theme="light"] .brand-guide-grid > div {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

[data-theme="light"] .service-launchpad,
[data-theme="light"] .telegram-product-tabs,
[data-theme="light"] .voucher-service-switch {
  border-color: var(--line);
  background: var(--surface);
}

[data-theme="light"] .service-launchpad .launch-service,
[data-theme="light"] .telegram-product-card,
[data-theme="light"] .voucher-service-card {
  color: var(--muted);
}

[data-theme="light"] .service-launchpad .launch-service:hover,
[data-theme="light"] .telegram-product-card:hover,
[data-theme="light"] .voucher-service-card:hover {
  background: var(--intent-wash);
  color: var(--text);
}

[data-theme="light"] .service-launchpad .launch-service.selected,
[data-theme="light"] .telegram-product-card.active,
[data-theme="light"] .voucher-service-card.active {
  border-color: var(--line-strong);
  background: var(--intent-wash);
  color: var(--gold-text);
  box-shadow: inset 0 0 0 1px var(--intent-wash);
}

[data-theme="light"] .service-launchpad .launch-icon,
[data-theme="light"] .service-launchpad .launch-all-services .launch-icon,
[data-theme="light"] .service-launchpad .launch-service.selected .launch-icon,
[data-theme="light"] .telegram-product-card > img,
[data-theme="light"] .game-logo-card > span,
[data-theme="light"] .voucher-service-card > span {
  border-color: var(--line);
  background: var(--surface-2);
}

[data-theme="light"] .quick,
[data-theme="light"] .package,
[data-theme="light"] .filter,
[data-theme="light"] .stars-presets button {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--muted);
}

[data-theme="light"] .quick.active,
[data-theme="light"] .quick[aria-pressed="true"],
[data-theme="light"] .package.active,
[data-theme="light"] .package[aria-selected="true"],
[data-theme="light"] .filter.active,
[data-theme="light"] .filter[aria-pressed="true"],
[data-theme="light"] .stars-presets button.active,
[data-theme="light"] .stars-presets button[aria-pressed="true"] {
  border-color: var(--gold);
  background: var(--intent-wash);
  color: var(--gold-text);
  box-shadow: inset 0 0 0 1px var(--intent-wash);
}

[data-theme="light"] .mobile-menu-panel {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
  box-shadow: -18px 0 46px rgba(31, 27, 17, .13);
}

[data-theme="light"] .mobile-menu-head {
  border-color: var(--line);
}

[data-theme="light"] .mobile-menu-list {
  gap: 5px;
}

[data-theme="light"] .mobile-menu-list a {
  min-height: 58px;
  color: var(--muted);
}

[data-theme="light"] .mobile-menu-list a > span {
  width: 42px;
  height: 42px;
  border-color: var(--line);
  background: var(--surface);
  color: var(--muted);
}

[data-theme="light"] .mobile-menu-list a:hover {
  background: var(--surface-2);
  color: var(--text);
}

[data-theme="light"] .mobile-menu-list a.active {
  border-color: var(--line-strong);
  background: var(--intent-wash);
  color: var(--text);
}

[data-theme="light"] .mobile-menu-list a.active > span {
  border-color: var(--line-strong);
  background: var(--intent-wash);
  color: var(--gold-text);
}

[data-theme="light"] .mobile-menu-theme {
  min-height: 52px;
  border-color: var(--line);
  background: var(--surface);
  color: var(--muted);
}

[data-theme="light"] .mobile-menu-theme:hover {
  border-color: var(--line-strong);
  background: var(--intent-wash);
  color: var(--gold-text);
}

.mobile-menu-theme .theme-moon,
.theme-button .theme-moon {
  width: 21px;
  height: 21px;
}

[data-theme="light"] .mobile-menu-support {
  border-color: var(--line-strong);
  background: var(--intent-wash);
}

[data-theme="light"] .mobile-menu-support > span:first-child {
  background: var(--gold-fill);
  color: var(--surface);
}

[data-theme="light"] .mobile-menu-support b {
  color: var(--text);
}

[data-theme="light"] .mobile-menu-support small,
[data-theme="light"] .mobile-menu-legal a {
  color: var(--muted-2);
}

[data-theme="light"] .mobile-dock {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 14px 34px rgba(36, 31, 19, .15);
}

[data-theme="light"] .mobile-dock a {
  color: var(--muted-2);
}

[data-theme="light"] .mobile-dock a.active {
  color: var(--gold-text);
}

[data-theme="light"] .mobile-dock-indicator {
  border-color: var(--line-strong);
  background: var(--intent-wash);
  box-shadow: none;
}

[data-theme="light"] .site-footer {
  border-color: var(--line);
  background: var(--surface);
}

@media (max-width: 780px) {
  [data-theme="light"] .site-header {
    background: var(--surface);
  }

  .mobile-menu-head .icon-button {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }

  .mobile-menu-list a > span,
  .mobile-menu-support > span:first-child {
    flex: 0 0 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .motion-ready .reveal-item, .motion-ready .reveal-item.reveal-card { opacity: 1; transform: none; filter: none; }
  .motion-ready .gold { background: none; color: var(--gold-text); }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@keyframes header-arrival { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes page-out { to { opacity: 0; transform: scale(.995); } }
@keyframes page-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes menu-pop { from { opacity: 0; transform: translateY(-5px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes status-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(159,211,155,0); } 50% { box-shadow: 0 0 0 4px rgba(159,211,155,.12); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes gold-arrival { from { background-position: 120% 0; } to { background-position: -70% 0; } }
@keyframes details-reveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

/* 2026-07 responsive and accessibility polish */
.site-search input { padding-right: 76px; }
.field label,
.home-order-fields .field label,
.account-fields .field > span,
.telegram-page .field label { color: var(--text-secondary); font-size: 13px; }
.helper,
.field-error,
.account-fields small,
.config-step-title small,
.checkout-legal,
.identity-status { font-size: 12px; }
.field-error { min-height: 18px; margin-top: var(--space-1); }
.field-error[hidden] { display: block !important; visibility: hidden; }
.input-wrap input,
.field select,
.catalog-search input,
.choice-search,
.product-choice-search,
.account-fields input,
.account-fields select { max-width: 100%; border-radius: var(--radius-input); }
.input-wrap input { padding-right: 52px; }
.button, .quick, .filter, .icon-button, .login-method, .referral-copy { border-radius: var(--radius-button); }
.button:disabled { opacity: 1; border-color: var(--line); background: var(--hairline); color: var(--color-disabled); box-shadow: none; }
.quick.active,
.filter.active,
.order-filters button.active,
.launch-service.selected .launch-icon,
.voucher-service-card[aria-selected="true"] > span,
.telegram-product-card[aria-selected="true"],
.region-choice[aria-pressed="true"],
.voucher-region[aria-pressed="true"],
.product-choice[aria-pressed="true"],
.voucher-product[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 1px var(--accent-wash); }
.quick.active::after,
.filter.active::after,
.order-filters button.active::after { content: ""; width: 6px; height: 6px; margin-left: 7px; border-radius: 50%; background: currentColor; }
.launch-service.selected .launch-icon::after,
.voucher-service-card[aria-selected="true"] > span::after { content: ""; position: absolute; right: 8px; bottom: 8px; border: 3px solid var(--surface-2); border-radius: 50%; background: var(--gold-fill); box-shadow: 0 0 0 1px var(--gold); }
.telegram-product-card,
.package { position: relative; }
.telegram-product-card[aria-selected="true"]::after,
.package[aria-pressed="true"]::after { content: ""; position: absolute; right: 12px; top: 12px; width: 8px; height: 8px; border: 3px solid var(--surface); border-radius: 50%; background: var(--gold-fill); box-shadow: 0 0 0 1px var(--gold); }
.telegram-product-card[aria-selected="true"] > i { visibility: hidden; }
.launch-icon,
.voucher-service-card > span { position: relative; }
.region-choice,
.voucher-region { position: relative; padding-right: 34px; }
.region-choice[aria-pressed="true"]::after,
.voucher-region[aria-pressed="true"]::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; transform: translateY(-50%); border-radius: 50%; background: var(--gold-fill); }
.launch-service b,
.voucher-service-card b,
.game-logo-card h3,
.home-showcase-copy b,
.home-showcase-copy em,
.product-choice b,
.voucher-product b,
.configurator-footer b,
.profile-identity h2,
.account-lines b,
.store-order h3 { overflow-wrap: anywhere; }
.home-showcase-copy b,
.home-showcase-copy em { white-space: normal; }
.home-showcase-copy b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.home-showcase-copy em { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 12px; }
.home-showcase-copy small,
.home-showcase-head span,
.game-logo-icon i,
.order-status,
.order-meta,
.profile-stat small,
.account-lines > div,
.referral-metrics span { font-size: 12px; }
.home-order-layout.compact-action { position: relative; grid-template-columns: minmax(0, 1fr); }
.home-order-layout.compact-action .action-only { position: absolute; right: 0; bottom: 0; width: 262px; border: 0; background: transparent; box-shadow: none; padding: 10px 22px 20px; }
.home-order-layout.compact-action .home-presets { padding-right: 240px; }
.home-order-layout.compact-action .home-order-fields { grid-template-columns: minmax(0, 1fr) minmax(150px, 180px); }
.service-launchpad,
.home-showcase-grid,
.catalog-category-tabs,
.voucher-service-switch,
.voucher-region-grid,
.region-choice-grid,
.rank-grid { scroll-padding-inline: var(--space-4); }
.catalog-grid.game-logo-grid { grid-template-columns: repeat(10, minmax(82px, 1fr)); gap: 22px 14px; }
.game-logo-card h3 { min-height: 34px; font-size: 12px; line-height: 1.35; }
.game-logo-card:focus-visible { outline-offset: 1px; }
.game-logo-icon i { min-height: 22px; padding-inline: 8px; }
.game-checkout-panel { scroll-margin-top: 126px; scroll-margin-bottom: 110px; }
.product-choice-grid,
.voucher-region-grid,
.voucher-product-grid { max-height: none; overflow-y: visible; padding-right: 0; }
.product-choice b,
.voucher-product b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
.product-choice,
.voucher-product { min-height: 78px; }
.configurator-footer b { max-width: min(100%, 420px); white-space: normal; }
.voucher-summary { top: 136px; }
.voucher-code-row button,
.store-order-code button { min-height: 44px; }
.checkout-layout { grid-template-columns: minmax(0, 760px) minmax(300px, 360px); justify-content: center; gap: var(--space-8); }
.checkout-main h1 { max-width: 720px; font-size: clamp(34px, 5vw, 58px); }
.checkout-item > div { min-width: 0; }
.checkout-item h3 { overflow-wrap: anywhere; }
.checkout-state { min-height: 48px; display: flex; align-items: center; font-size: 13px; }
.checkout-state.loading { border-style: dashed; }
.checkout-state.warning { box-shadow: inset 3px 0 var(--gold); }
.checkout-state.error { box-shadow: inset 3px 0 var(--red); }
.checkout-state.success { box-shadow: inset 3px 0 var(--green); }
.checkout-counter [data-checkout-total]:empty::after,
.checkout-counter [data-checkout-total][data-empty="true"]::after { content: "Цена уточняется"; color: var(--text-secondary); font-family: var(--body); font-size: 14px; }
.profile-identity { min-width: 0; }
.profile-identity h2 { max-width: 100%; font-family: var(--body); font-size: clamp(18px, 3vw, 31px); line-height: 1.15; text-transform: none; }
.profile-identity p b { text-transform: none; }
.profile-logout { color: var(--red); }
.referral-link input { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.referral-copy[aria-live] { min-width: 110px; }
.account-lines b { font-size: 12px; }
.referral-field summary { min-height: 44px; display: inline-flex; align-items: center; font-size: 13px; }
.referral-field summary::after { content: "+"; margin-left: 8px; color: var(--gold-text); font-size: 18px; }
.referral-field[open] summary::after { content: "−"; }

@media (max-width: 1060px) {
  .catalog-grid.game-logo-grid { grid-template-columns: repeat(8, minmax(74px, 1fr)); }
}

@media (max-width: 780px) {
  body { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  main { padding-bottom: var(--space-3); }
  .mobile-dock { bottom: max(8px, env(safe-area-inset-bottom)); min-height: 68px; padding-bottom: calc(6px + env(safe-area-inset-bottom) * .15); }
  .mobile-dock a { position: relative; min-height: 54px; font-size: 11px; }
  .mobile-dock a.active { box-shadow: inset 0 0 0 1px var(--accent-border-soft); }
  .mobile-dock a.active::before { content: none; }
  .toast { bottom: calc(88px + env(safe-area-inset-bottom)); }
  input, select, button, a, summary, [role="button"], [role="tab"] { scroll-margin-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .home-order-layout.compact-action .action-only { position: static; justify-self: stretch; width: 100%; }
  .home-order-layout.compact-action .home-presets { padding-right: 0; }
  .home-order-layout.compact-action .home-order-fields { grid-template-columns: minmax(0, 1fr) 160px; }
  .catalog-grid.game-logo-grid { grid-template-columns: repeat(6, minmax(72px, 1fr)); }
  .game-configurator { min-height: 0; }
  .game-configurator-visual { min-height: 200px; }
  .game-configurator-visual > img { min-height: 200px; max-height: 230px; }
  .voucher-summary { position: static; }
  .checkout-layout { grid-template-columns: minmax(0, 1fr); }
  .checkout-main, .checkout-side { width: 100%; }
  .profile-dashboard-grid { grid-template-columns: 1fr; }
  .rank-grid { display: flex; gap: var(--space-3); overflow-x: auto; border: 0; border-radius: 0; background: transparent; padding: 3px 20px var(--space-3) 0; margin-inline: 0; scroll-padding-inline: 0 20px; scroll-snap-type: x proximity; scrollbar-width: none; mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%); }
  .rank-grid::-webkit-scrollbar { display: none; }
  .rank-card, .rank-card:nth-child(2n), .rank-card:nth-child(n+3) { width: 210px; min-width: 210px; min-height: 132px; display: grid; grid-template-columns: 58px 1fr; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-4); scroll-snap-align: start; }
}

@media (max-width: 520px) {
  .container { width: min(calc(100% - 24px), var(--max)); }
  .header-main { gap: var(--space-2); }
  .header-actions { gap: var(--space-2); }
  .icon-button { width: 44px; height: 44px; }
  .site-search input { height: 44px; padding-left: 42px; padding-right: 44px; }
  .site-search svg { left: 13px; }
  .section-banner { height: clamp(82px, 24vw, 106px); }
  .service-launchpad,
  .voucher-service-switch { gap: var(--space-3); margin-inline: -12px; padding: 3px 12px 12px; scroll-padding-inline: 12px; mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%); }
  .launch-service,
  .voucher-service-card { width: 82px; min-width: 82px; }
  .launch-icon,
  .voucher-service-card > span { width: 70px; height: 70px; }
  .launch-service b,
  .voucher-service-card b { min-height: 34px; font-size: 12px; }
  .home-showcase-grid { margin-inline: -12px; padding-inline: 12px 30px; scroll-padding-inline: 12px; mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%); }
  .home-order-layout.compact-action .home-order-fields { grid-template-columns: minmax(0, 1fr) minmax(104px, 34%); }
  .home-order-fields .field label { font-size: 12px; }
  .home-presets .quick { min-height: 44px; font-size: 11px; }
  .stars-presets button { min-height: 44px; }
  .catalog-tools select { display: block; width: 100%; height: 46px; }
  .catalog-category-tabs { flex-wrap: nowrap; gap: var(--space-2); margin-inline: -12px; padding: 3px 30px 10px 12px; scroll-padding-inline: 12px; scroll-snap-type: x proximity; mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%); }
  .catalog-category-tabs .filter { min-height: 44px; scroll-snap-align: start; font-size: 12px; }
  .catalog-grid.game-logo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 10px; }
  .game-logo-card h3 { min-height: 34px; font-size: 11.5px; }
  .game-logo-icon i { top: -8px; right: -6px; font-size: 10px; }
  .game-configurator-main { padding: var(--space-4); }
  .game-configurator-visual > div { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); }
  .region-choice-grid,
  .voucher-region-grid { gap: var(--space-2); margin-inline: -16px; padding: 3px 32px 10px 16px; scroll-padding-inline: 16px; scroll-snap-type: x proximity; mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%); }
  .region-choice,
  .voucher-region { min-width: min(78vw, 250px); min-height: 56px; scroll-snap-align: start; font-size: 12px; }
  .product-choice-grid,
  .voucher-product-grid { grid-template-columns: 1fr; }
  .voucher-main { padding: var(--space-4); }
  .voucher-summary { padding: var(--space-4); }
  .checkout-page { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  body[data-checkout] { padding-bottom: 0; }
  .checkout-layout { gap: var(--space-3); }
  .checkout-main h1 { font-size: clamp(27px, 8vw, 34px); }
  .checkout-side { padding: var(--space-4); }
  .profile-overview-main { grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--space-3); padding: var(--space-4); }
  .profile-rank-crest { width: 64px; }
  .profile-logout { grid-column: auto; align-self: center; width: auto; min-width: 72px; min-height: 44px; padding: 0 14px; color: var(--red); }
  .profile-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .profile-stat { min-height: 92px; padding: var(--space-3); }
  .profile-stat + .profile-stat { border-top: 0; border-left: 1px solid var(--line); }
  .profile-stat span { font-size: 12px; }
  .profile-stat b { font-size: clamp(16px, 5vw, 21px); overflow-wrap: anywhere; }
  .profile-progress-block { padding: var(--space-4); }
  .profile-section-head { gap: var(--space-3); }
  .order-filters { overflow-x: auto; scroll-snap-type: x proximity; }
  .order-filters button { min-width: max-content; min-height: 44px; scroll-snap-align: start; font-size: 12px; }
  .referral-link { align-items: stretch; }
  .referral-link input, .referral-copy { height: 46px; font-size: 12px; }
  .site-footer { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .footer-legal-links a { min-height: 44px; font-size: 11px; }
}

@media (max-width: 380px) {
  .home-order-layout.compact-action .home-order-fields,
  .home-order-fields { grid-template-columns: 1fr; }
  .telegram-home-fields .home-recipient,
  .home-presets { grid-column: 1; }
  .home-presets .quick-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-grid.game-logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .profile-overview-main { grid-template-columns: 56px minmax(0, 1fr); }
  .profile-rank-crest { width: 56px; }
  .profile-logout { grid-column: 1 / -1; width: 100%; color: var(--red); }
  .profile-stat-grid { grid-template-columns: 1fr; }
  .profile-stat + .profile-stat { border-left: 0; border-top: 1px solid var(--line); }
  .referral-link { flex-direction: column; }
  .referral-copy { width: 100%; }
}

/* Precise alignment for the primary order form and catalogue controls. */
.home-order-layout.compact-action .home-order-fields > .field:not(.home-presets) > label {
  height: 34px;
  min-height: 34px;
  display: flex;
  align-items: center;
}
.catalog-tools select {
  width: 100%;
  height: 54px;
  appearance: none;
  border-radius: 12px;
  background-color: var(--surface);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 19px) 24px,
    calc(100% - 14px) 24px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding: 0 42px 0 16px;
  font: 700 14px/1 var(--body);
  cursor: pointer;
}
.catalog-tools select:hover,
.catalog-tools select:focus-visible {
  border-color: var(--line-strong);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-wash);
}

@media (max-width: 780px) {
  .home-order-layout.compact-action .home-order-fields > .field:not(.home-presets) > label { min-height: 34px; }
  .catalog-tools select { height: 50px; background-position: calc(100% - 19px) 22px, calc(100% - 14px) 22px; }
}

/* Unified service iconography and Telegram controls */
.launch-service:not(.games) .launch-icon img,
.voucher-service-card > span img {
  width: 54%;
  height: 54%;
  filter: brightness(0) saturate(100%) invert(88%) sepia(35%) saturate(718%) hue-rotate(355deg) brightness(104%) contrast(92%);
}
.launch-service.telegram-stars .launch-icon img,
.launch-service.telegram-premium .launch-icon img { width: 58%; height: 58%; }
.launch-service:not(.games) .launch-icon,
.voucher-service-card > span {
  border-color: var(--accent-wash-strong);
  background: linear-gradient(145deg, var(--accent-wash), transparent 54%), var(--surface-2);
}
.home-showcase-card:not(.game) .home-showcase-art img {
  filter: brightness(0) saturate(100%) invert(88%) sepia(35%) saturate(718%) hue-rotate(355deg) brightness(104%) contrast(92%);
}
.telegram-product-card > img,
.telegram-package img,
.steam-flow-brand img,
.stars-quantity-input img {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 3px;
}
.telegram-product-card > img { filter: none; }
.telegram-product-card.stars > img { filter: drop-shadow(0 7px 14px rgba(246,184,35,.18)); }
.telegram-product-card.premium > img { filter: drop-shadow(0 7px 14px rgba(154,108,255,.17)); }

.telegram-page .stars-quantity { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.telegram-page .stars-quantity-input {
  min-height: 68px;
  grid-template-columns: 48px minmax(76px, 1fr) auto 48px;
  gap: 10px;
  border-color: var(--line-strong);
  border-radius: var(--radius-input);
  background: var(--bg);
  padding: 8px 10px;
}
.telegram-page .stars-quantity-input:focus-within {
  border-color: var(--gold);
  background: linear-gradient(135deg, var(--accent-wash), transparent 62%), var(--bg);
}
.telegram-page .stars-quantity-input input { font-size: clamp(27px, 4vw, 34px); }
.telegram-page .stars-quantity-input span { color: var(--gold-text); font-size: 13px; }
.stars-adjust {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--gold-text);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.stars-adjust:hover { border-color: var(--accent-border-soft); background: var(--accent-wash); }
.stars-adjust:active { transform: scale(.96); }
.telegram-page .stars-range { margin: 8px 0 0; color: var(--text-tertiary); }
.telegram-page .stars-presets { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.telegram-page .stars-presets button {
  min-height: 48px;
  border-radius: var(--radius-button);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 13px;
}
.telegram-page .stars-presets button:hover,
.telegram-page .stars-presets button.active {
  border-color: var(--gold);
  background: var(--accent-wash);
  color: var(--gold-text);
  transform: none;
}

.telegram-package.premium {
  --term-accent: #b997f4;
  --term-wash: rgba(185,151,244,.09);
}
.telegram-package.premium.term-3,
.telegram-package.premium.term-option-1 { --term-accent: #d8bcff; --term-wash: rgba(216,188,255,.08); }
.telegram-package.premium.term-6,
.telegram-package.premium.term-option-2 { --term-accent: #ad87f3; --term-wash: rgba(173,135,243,.09); }
.telegram-package.premium.term-12,
.telegram-package.premium.term-option-3 { --term-accent: #e4c66c; --term-wash: rgba(228,198,108,.09); }
.telegram-package.premium { border-top: 3px solid var(--term-accent); background: linear-gradient(145deg, var(--term-wash), transparent 54%), var(--bg-2); }
.telegram-package.premium:hover,
.telegram-package.premium.active,
.telegram-package.premium[aria-pressed="true"] { border-color: var(--term-accent); background: linear-gradient(145deg, var(--term-wash), transparent 68%), var(--surface); }
.telegram-package.premium b { color: var(--term-accent); }
.telegram-package.premium[aria-pressed="true"]::after { background: var(--term-accent); color: #15120d; }

@media (max-width: 520px) {
  .telegram-page .workspace-main { padding: 16px; }
  .telegram-page .field label { font-size: 13px; }
  .telegram-page .stars-quantity-input { min-height: 70px; grid-template-columns: 46px minmax(70px, 1fr) auto 46px; gap: 8px; padding: 9px; }
  .stars-adjust { width: 46px; height: 46px; }
  .telegram-page .stars-quantity-input input { font-size: 28px; }
  .telegram-page .stars-quantity-input span { font-size: 12px; }
  .telegram-page .stars-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .telegram-page .stars-presets button { min-height: 48px; font-size: 13px; }
  .premium-package-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .premium-package-grid .telegram-package { min-height: 106px; padding: 12px 10px; }
  .premium-package-grid .telegram-package img { width: 28px; height: 28px; }
  .premium-package-grid .telegram-package b { font-size: 14px; }
}

@media (max-width: 360px) {
  .telegram-page .stars-quantity-input { grid-template-columns: 44px minmax(58px, 1fr) 44px; }
  .telegram-page .stars-quantity-input span { display: none; }
  .stars-adjust { width: 44px; height: 44px; }
  .telegram-page .stars-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .premium-package-grid { grid-template-columns: 1fr; }
  .premium-package-grid .telegram-package { min-height: 82px; }
}

/* Compact SLARP ID entry on phones */
@media (max-width: 520px) {
  .identity-hero { padding: 12px 0 10px; }
  .identity-hero h1 { font-size: clamp(24px, 8vw, 29px); letter-spacing: -.025em; }
  .identity-grid { gap: 12px; }
  .identity-entry-grid { width: 100%; }
  .identity-panel { border-radius: 18px; }
  .identity-panel-head { min-height: 54px; padding-inline: 18px; }
  .identity-panel-head h2 { font-size: 23px; }
  .identity-panel-body { padding: 16px 18px 18px; }
  .identity-entry-copy { margin-bottom: 14px; font-size: 13px; line-height: 1.45; }
  .login-methods { gap: 8px; }
  .login-method,
  .login-method-primary { min-height: 52px; padding-inline: 14px; font-size: 14px; }
  .login-method .login-method-icon { width: 30px; height: 30px; margin-right: 8px; border-radius: 8px; }
  .login-method .login-method-icon img { width: 20px; height: 20px; }
  .identity-status { margin-top: 10px; }
  .referral-field { margin-top: 10px; }
  .rank-board { padding-top: 22px; }
  .rank-board-head { margin-bottom: 12px; }
  .rank-board-head h2 { font-size: 26px; }
  .rank-grid { gap: 10px; padding: 2px 20px 10px 0; scroll-padding-inline: 0 20px; outline-offset: 3px; }
  .rank-card,
  .rank-card:nth-child(2n),
  .rank-card:nth-child(n+3) {
    width: 176px;
    min-width: 176px;
    min-height: 108px;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    border-radius: 14px;
    padding: 13px;
  }
  .rank-card .rank-crest { width: 46px; }
  .rank-card h3 { font-size: 14px; }
  .rank-card strong { font-size: 12px; }
  .rank-card p { font-size: 11px; }
  .telegram-page .telegram-product-card { padding-right: 27px; }
  .telegram-page .telegram-product-card > span { min-width: 0; }
  .telegram-page .telegram-product-card b { display: -webkit-box; overflow: hidden; overflow-wrap: normal; word-break: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .telegram-page .telegram-product-card[aria-selected="true"]::after { right: 6px; top: 6px; width: 18px; height: 18px; font-size: 10px; }
}

/* 2026-07 single-surface storefront pass */
.service-launchpad {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface-2);
  box-shadow: 0 16px 38px rgba(0,0,0,.18);
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.service-launchpad::-webkit-scrollbar { display: none; }
.launch-service {
  flex: 1 1 96px;
  width: 96px;
  min-width: 96px;
  max-width: 144px;
  min-height: 92px;
  align-content: center;
  gap: 5px;
  padding: 7px 5px;
  border-radius: 14px;
  font: inherit;
  scroll-snap-align: start;
}
.launch-service:hover,
.launch-service:focus-visible { background: var(--hairline); }
.launch-service.selected {
  background: linear-gradient(145deg, var(--accent-wash-strong), var(--accent-wash));
  box-shadow: inset 0 0 0 1px var(--accent-border-soft);
}
.launch-service .launch-icon { width: 54px; height: 54px; border-radius: 14px; }
.launch-service b { min-height: 28px; font-size: 11px; }
.launch-service.selected .launch-icon::after { right: -2px; bottom: -2px; }

.home-quick-order { scroll-margin-top: 90px; }
.home-order-card,
.home-voucher-layout .voucher-main,
.home-voucher-layout .voucher-summary { background: var(--surface); }
.home-order-fields .field > label:first-child,
.field > label:has(.field-help) { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.field-help {
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  padding: 0 10px;
  font: 700 12px/1 var(--body);
  cursor: pointer;
}
.field-help:hover,
.field-help:focus-visible { background: transparent; color: var(--text); }
.home-quick-order .field-error[hidden],
.telegram-page .field-error[hidden] { display: none !important; }
.home-voucher-order { display: block; }
.home-voucher-status { min-height: 126px; display: grid; place-items: center; }
.home-voucher-status[hidden],
.home-voucher-layout[hidden] { display: none; }
.home-voucher-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; }
.home-voucher-layout .voucher-main,
.home-voucher-layout .voucher-summary { border-radius: 18px; }
.home-voucher-layout .voucher-main { padding: 18px; }
.home-voucher-layout .voucher-flow-head { padding-bottom: 12px; }
.home-voucher-layout .config-step { padding: 14px 0; }
.home-voucher-layout .voucher-region-grid { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
.home-voucher-layout .voucher-region-grid::-webkit-scrollbar { display: none; }
.home-voucher-layout .voucher-region { min-width: 150px; }
.home-voucher-layout .voucher-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }

.steam-help-dialog {
  width: min(620px, calc(100% - 28px));
  max-height: min(760px, calc(100dvh - 28px));
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  background: #1b1d19;
  color: var(--text);
  padding: 0;
  box-shadow: 0 30px 100px rgba(0,0,0,.65);
}
.steam-help-dialog::backdrop { background: rgba(5,6,5,.76); backdrop-filter: blur(8px); }
.steam-help-head { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.steam-help-head span { color: #82b8ff; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.steam-help-head h2 { margin: 3px 0 0; font-size: clamp(23px,5vw,31px); }
.steam-help-head .icon-button { flex: 0 0 44px; font-size: 28px; }
.steam-help-dialog > p { margin: 20px 22px 14px; color: var(--text-secondary); font-size: 15px; line-height: 1.55; }
.steam-account-link { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 22px 18px; border-radius: 14px; background: linear-gradient(135deg,#2672e8,#289de1); color: #fff; padding: 0 18px; font-weight: 800; }
.steam-country-block { padding: 18px 22px 24px; border-top: 1px solid var(--line); }
.steam-country-block h3 { margin: 0 0 12px; font-size: 15px; }
.steam-country-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.steam-country-grid span { min-width: 0; min-height: 42px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); padding: 7px 9px; font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.steam-country-grid img { width: 25px; height: 19px; flex: 0 0 auto; border-radius: 5px; object-fit: cover; }

.home-showcase { margin-top: 18px; }
.home-showcase-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.home-showcase-card { min-height: 88px; grid-template-columns: 76px minmax(0,1fr); grid-template-rows: 1fr; border-radius: 14px; box-shadow: none; }
.home-showcase-art { min-height: 88px; }
.home-showcase-card.stars .home-showcase-art img,
.home-showcase-card.premium .home-showcase-art img,
.home-showcase-card.service .home-showcase-art img { width: 42px; height: 42px; }
.home-showcase-copy { align-content: center; padding: 10px 11px; }
.home-showcase-copy b { font-size: 13px; }
.home-showcase-copy em { font-size: 11px; }

.telegram-page .workspace-main { display: grid; gap: 18px; }
.telegram-page .telegram-recipient-field { margin-bottom: 0; }
.telegram-page .telegram-panel .field { gap: 8px; }
.telegram-page .stars-quantity-input input {
  font-family: var(--body);
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  letter-spacing: -.025em;
}
.telegram-page .stars-presets { grid-template-columns: repeat(5,minmax(0,1fr)); }
.telegram-page .stars-presets button {
  padding-inline: 4px;
  font-family: var(--body);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}
.telegram-page .telegram-product-card[aria-selected="true"]::after {
  right: auto;
  top: auto;
  left: 43px;
  bottom: 8px;
}
.premium-package-grid .telegram-package {
  font-family: var(--body);
  font-variant-numeric: tabular-nums;
}

.login-method .login-method-icon {
  flex: 0 0 32px;
  min-width: 32px;
  aspect-ratio: 1;
}
.identity-status:empty { display: none; }
.checkout-layout { width: min(960px, calc(100% - 32px)); grid-template-columns: minmax(0,1fr) 320px; gap: 14px; }
.checkout-main { align-self: start; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); padding: 22px; }
.checkout-main h1 { font-size: clamp(30px,4vw,42px); }
.checkout-side { top: 92px; border-radius: 20px; padding: 22px; }

@media (max-width: 780px) {
  .account-button { display: none; }
  .header-actions { flex: 0 0 44px; }
  .service-launchpad { margin-inline: 0; padding: 7px; mask-image: linear-gradient(to right,#000 0,#000 calc(100% - 20px),transparent 100%); }
  .launch-service { width: 78px; min-width: 78px; min-height: 82px; padding: 5px 3px; }
  .launch-service .launch-icon { width: 50px; height: 50px; border-radius: 14px; }
  .launch-service b { min-height: 27px; font-size: 10.5px; line-height: 1.25; }
  .home-voucher-layout { grid-template-columns: 1fr; }
  .home-voucher-layout .voucher-summary { padding: 14px; }
  .home-voucher-layout .voucher-summary-icon,
  .home-voucher-layout .voucher-summary h3, .voucher-summary h2,
  .home-voucher-layout .order-lines { display: none; }
  .home-voucher-layout .voucher-summary .button { margin: 0; }
  .home-showcase-grid {
    display: flex;
    grid-template: none;
    gap: 9px;
    overflow-x: auto;
    margin-inline: -12px;
    padding: 0 30px 6px 12px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .home-showcase-grid::-webkit-scrollbar { display: none; }
  .home-showcase-card { width: 214px; min-width: 214px; min-height: 88px; grid-template-columns: 70px minmax(0,1fr); scroll-snap-align: start; }
  .checkout-layout { width: min(calc(100% - 24px),560px); grid-template-columns: 1fr; gap: 8px; }
  .checkout-main { border-radius: 16px; padding: 14px; }
  .checkout-side { border-radius: 16px; padding: 14px; }
}

@media (max-width: 520px) {
  .store-hero .container { width: min(calc(100% - 20px),var(--max)); }
  .service-launchpad { gap: 2px; }
  .launch-service { flex: 0 0 72px; width: 72px; min-width: 72px; max-width: 72px; }
  .launch-service .launch-icon { width: 48px; height: 48px; }
  .home-order-card { padding: 0; }
  .home-order-head { padding: 10px 12px; }
  .home-order-fields { padding: 12px; }
  .home-order-layout.compact-action .action-only { padding: 9px 12px 12px; }
  .home-quick-order .input-wrap input { height: 50px; }
  .home-voucher-layout .voucher-main { padding: 13px; }
  .home-voucher-layout .voucher-product-grid { grid-template-columns: 1fr; }
  .home-voucher-layout .voucher-region { min-width: min(70vw,220px); }
  .field-help { min-height: 30px; font-size: 11px; }
  .steam-help-head { min-height: 72px; padding: 14px 16px; }
  .steam-help-dialog > p { margin: 16px 16px 12px; font-size: 14px; }
  .steam-account-link { min-height: 54px; margin: 0 16px 14px; padding-inline: 15px; }
  .steam-country-block { padding: 15px 16px 18px; }
  .steam-country-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .steam-country-grid span { font-size: 11px; }
  .home-showcase-head { align-items: center; }
  .home-showcase-head h2 { font-size: 21px; }
  .telegram-page .section.compact { padding-top: 10px; }
  .telegram-page .section-banner { height: 66px; margin-bottom: 8px; }
  .telegram-page .telegram-product-switch { margin-bottom: 8px; }
  .telegram-page .telegram-product-card { min-height: 66px; padding: 8px 24px 8px 8px; }
  .telegram-page .telegram-product-card b { font-size: 11px; }
  .telegram-page .workspace-main { gap: 14px; padding: 13px; }
  .telegram-page .stars-quantity-input { min-height: 64px; }
  .telegram-page .stars-presets { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 5px; }
  .telegram-page .stars-presets button { min-height: 44px; font-size: 11px; }
  .telegram-page .stars-range { margin-top: 4px; font-size: 11px; }
  .telegram-page .telegram-summary { padding: 8px 12px 12px; }
  .identity-hero h1,
  .identity-panel-head h2,
  .rank-board-head h2 { text-align: center; }
  .identity-panel-head { justify-content: center; min-height: 50px; }
  .identity-panel-body { padding: 13px 14px 14px; }
  .identity-entry-copy { margin: 0 0 10px; text-align: center; }
  .login-method,
  .login-method-primary { min-height: 50px; }
  .referral-field { margin-top: 7px; }
  .referral-field summary { min-height: 44px; margin-inline: auto; }
  .rank-board-head { justify-content: center; margin-bottom: 10px; }
  .rank-board { padding-top: 18px; }
}

@media (max-width: 340px) {
  .telegram-page .stars-quantity-input { grid-template-columns: 42px minmax(54px,1fr) 42px; }
  .telegram-page .stars-quantity-input span { display: none; }
  .telegram-page .stars-presets { grid-template-columns: repeat(5,minmax(44px,1fr)); overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
}

/* Catalog taxonomy and compact service rail */
.services-page .voucher-service-switch {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 3px 2px 12px;
  scroll-padding-inline: 2px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.services-page .voucher-service-switch::-webkit-scrollbar { display: none; }
.services-page .voucher-service-card { width: 92px; min-width: 92px; scroll-snap-align: start; text-decoration: none; }
.services-page .voucher-service-card > span { width: 76px; }
.services-page .voucher-service-card img {
  filter: brightness(0) saturate(100%) invert(88%) sepia(31%) saturate(716%) hue-rotate(358deg) brightness(105%) contrast(91%);
}
.services-page .voucher-steam-card > span { border-color: var(--accent-border-soft); background: var(--accent-wash); }

.quick.active::after,
.filter.active::after,
.order-filters button.active::after,
.launch-service.selected .launch-icon::after,
.voucher-service-card[aria-selected="true"] > span::after,
.telegram-product-card[aria-selected="true"]::after,
.package[aria-pressed="true"]::after,
.region-choice[aria-pressed="true"]::after,
.voucher-region[aria-pressed="true"]::after { display: none !important; content: none !important; }
.telegram-product-card[aria-selected="true"] > i { visibility: visible; }
.region-choice,
.voucher-region { padding-right: 12px; }
.voucher-product { grid-template-columns: 42px minmax(0,1fr); }
.voucher-product > i { display: none; }

@media (max-width: 520px) {
  .services-page .voucher-service-switch {
    margin-inline: -10px;
    padding-inline: 10px 28px;
    scroll-padding-inline: 10px;
    mask-image: linear-gradient(to right,#000 0,#000 calc(100% - 22px),transparent 100%);
  }
  .services-page .voucher-service-card { width: 78px; min-width: 78px; }
  .services-page .voucher-service-card > span { width: 64px; }
  .services-page .voucher-service-card b { font-size: 11px; }
}

@media (max-width: 380px) {
  .home-order-layout.compact-action .home-order-fields,
  .home-order-fields { grid-template-columns: minmax(0,1fr) 86px; }
  .home-presets { grid-column: 1 / -1; }
  .home-presets .quick-row { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .telegram-home-fields .home-recipient,
  .telegram-home-fields [data-telegram-panel="stars"],
  .home-premium-packages { grid-column: 1 / -1; }
}

/* 2026-07 mobile-first storefront: fixed choices, one surface, no side rails */
.launch-all-services { display: none; }

.home-order-layout.compact-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--accent-wash-strong);
  border-radius: 20px;
  background: linear-gradient(145deg, var(--accent-wash), transparent 42%), var(--surface);
  box-shadow: 0 18px 44px rgba(0,0,0,.17);
}
.home-order-layout.compact-action .home-order-card {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 18px 4px;
}
.home-order-layout.compact-action .home-order-head {
  min-height: 58px;
  margin: 0;
  border: 0;
  padding: 0;
}
.home-order-layout.compact-action .home-order-fields {
  grid-template-columns: minmax(0, 1fr) minmax(132px, 170px);
  gap: 12px;
  padding: 0;
}
.home-order-layout.compact-action .home-presets { padding-right: 0; }
.home-order-layout.compact-action .action-only {
  position: static;
  right: auto;
  bottom: auto;
  width: auto;
  min-width: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 10px 18px 18px;
}
.home-order-layout.compact-action .action-only .button {
  min-height: 54px;
  border-radius: 14px;
  font-size: 16px;
}
.home-order-layout.compact-action .field-help {
  min-height: 34px;
  padding-inline: 11px;
}
.home-order-layout.compact-action .quick-row { gap: 7px; }
.home-order-layout.compact-action .quick {
  min-height: 46px;
  border-radius: 12px;
  font-size: 12px;
}

.services-page .voucher-service-switch {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 16px 10px;
  overflow: visible;
  margin: 0 0 18px;
  padding: 2px 0 8px;
  mask-image: none;
}
.services-page .voucher-service-card {
  width: auto;
  min-width: 0;
  min-height: 108px;
  align-content: start;
  gap: 8px;
  padding: 4px;
  border-radius: 14px;
  scroll-snap-align: none;
}
.services-page .voucher-service-card > span {
  width: min(100%, 72px);
  height: auto;
  margin-inline: auto;
}
.services-page .voucher-service-card b {
  min-height: 34px;
  font-size: 12px;
  line-height: 1.3;
}

@media (max-width: 780px) {
  .store-hero .container { width: min(calc(100% - 20px), var(--max)); }
  .service-launchpad {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
    overflow: visible;
    margin: 0 0 10px;
    padding: 8px;
    border-radius: 18px;
    mask-image: none;
  }
  .service-launchpad .launch-service {
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 78px;
    gap: 5px;
    padding: 5px 2px;
    border-radius: 12px;
    scroll-snap-align: none;
  }
  .service-launchpad .launch-service[data-voucher-service] { display: none; }
  .service-launchpad .launch-icon {
    width: 48px;
    height: 48px;
    margin-inline: auto;
    border-radius: 14px;
  }
  .service-launchpad .launch-service b {
    min-height: 30px;
    font-size: 11px;
    line-height: 1.25;
  }
  .service-launchpad .launch-all-services {
    grid-column: auto;
    min-height: 78px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 5px;
    border: 0;
    background: transparent;
    padding: 5px 2px;
  }
  .service-launchpad .launch-all-services .launch-icon {
    width: 48px;
    height: 48px;
    border: 1px solid var(--accent-wash-strong);
    background: linear-gradient(145deg, var(--accent-wash), transparent 54%), var(--surface-2);
    box-shadow: 0 10px 22px rgba(0,0,0,.18);
  }
  .service-launchpad .launch-all-services .launch-icon img { width: 54%; height: 54%; }
  .service-launchpad .launch-all-services > span:nth-child(2) { width: 100%; }
  .service-launchpad .launch-all-services b {
    min-height: 30px;
    display: -webkit-box;
    overflow: hidden;
    font-size: 11px;
    -webkit-line-clamp: 2;
  }

  .home-order-layout.compact-action { border-radius: 18px; }
  .home-order-layout.compact-action .home-order-card { padding: 0 12px 2px; }
  .home-order-layout.compact-action .home-order-head { display: none; }
  .home-order-layout.compact-action .home-order-head .steam-flow-brand img { width: 34px; height: 34px; }
  .home-order-layout.compact-action .home-order-fields {
    grid-template-columns: minmax(0, 1fr) 118px;
    gap: 10px;
    padding-top: 12px;
  }
  .home-order-layout.compact-action .home-order-fields .field label { min-height: 34px; font-size: 12px; }
  .home-order-layout.compact-action .input-wrap input { height: 52px; font-size: 15px; }
  .home-order-layout.compact-action .home-presets { grid-column: 1 / -1; }
  .home-order-layout.compact-action .action-only { padding: 9px 12px 12px; }
  .home-order-layout.compact-action .action-only .button { min-height: 52px; }
  .telegram-home-fields > .field { grid-column: 1 / -1; }
  .telegram-home-fields .home-stars-input { min-height: 58px; }
  .telegram-home-fields .home-stars-input input { font-size: 25px; }

  .home-showcase-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 9px;
    overflow: visible;
    margin: 0;
    padding: 0;
    mask-image: none;
  }
  .home-showcase-card {
    width: auto;
    min-width: 0;
    min-height: 92px;
    grid-template-columns: 58px minmax(0, 1fr);
    border-radius: 14px;
    scroll-snap-align: none;
  }
  .home-showcase-art { min-height: 92px; }
  .home-showcase-card:nth-child(n+5) { display: none; }
  .home-showcase-copy { padding: 9px 8px; }
  .home-showcase-copy b { font-size: 12px; }
  .home-showcase-copy em { font-size: 11px; -webkit-line-clamp: 1; }
  .home-showcase-card.stars .home-showcase-art img,
  .home-showcase-card.premium .home-showcase-art img,
  .home-showcase-card.service .home-showcase-art img { width: 36px; height: 36px; }

  .services-page .voucher-service-switch {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 8px;
    overflow: visible;
    margin: 0 0 14px;
    padding: 2px 0 6px;
    mask-image: none;
  }
  .services-page .voucher-service-card {
    width: auto;
    min-width: 0;
    min-height: 98px;
    padding: 3px 1px;
  }
  .services-page .voucher-service-card > span { width: min(100%, 64px); }
  .services-page .voucher-service-card b { min-height: 32px; font-size: 11px; }
}

@media (max-width: 380px) {
  .service-launchpad { gap: 5px; padding: 7px; }
  .service-launchpad .launch-service { min-height: 74px; }
  .service-launchpad .launch-icon { width: 44px; height: 44px; }
  .service-launchpad .launch-all-services { min-height: 74px; }
  .service-launchpad .launch-all-services .launch-icon { width: 44px; height: 44px; }
  .home-order-layout.compact-action .home-order-fields,
  .home-order-fields { grid-template-columns: minmax(0, 1fr) 96px; }
  .home-order-layout.compact-action .home-presets { grid-column: 1 / -1; }
  .home-order-layout.compact-action .home-presets .quick-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-order-layout.compact-action .quick { padding-inline: 2px; font-size: 10.5px; }
  .services-page .voucher-service-switch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-showcase-grid { gap: 7px; }
  .home-showcase-card { grid-template-columns: 52px minmax(0, 1fr); }
  .home-showcase-copy small { font-size: 10px; }
  .home-showcase-copy b { font-size: 11px; }
  .home-showcase-copy em { display: none; }
}

/* Final compact Telegram and catalogue polish. */
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { margin: 0; appearance: none; -webkit-appearance: none; }

.input-wrap.recipient-confirmed input { color: transparent; caret-color: transparent; }
.input-wrap.recipient-confirmed:focus-within input { color: var(--text); caret-color: var(--text); }
.recipient-identity {
  position: absolute;
  z-index: 1;
  left: 12px;
  right: 48px;
  top: 50%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  transform: translateY(-50%);
  pointer-events: none;
}
.input-wrap.recipient-confirmed:focus-within .recipient-identity { opacity: 0; }
.recipient-identity > span { min-width: 0; display: grid; gap: 1px; }
.recipient-identity b,
.recipient-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipient-identity b { color: var(--text); font-size: 14px; line-height: 1.15; }
.recipient-identity small { color: var(--text-secondary); font-size: 11px; line-height: 1.15; }
.recipient-avatar {
  position: static;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin: 0;
  border: 1px solid var(--accent-border-soft);
  border-radius: 50%;
  object-fit: cover;
}
.recipient-avatar[hidden] { display: none; }

.telegram-submit.stars,
.telegram-submit.stars:hover {
  border-color: var(--gold);
  background: var(--gold-fill);
  color: var(--gold-ink);
}
.telegram-page .stars-quantity {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.telegram-page .stars-quantity-input {
  width: min(100%, 420px);
  min-height: 58px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  border-color: var(--line-strong);
  border-radius: 12px;
  background: var(--bg);
  padding: 7px 14px;
}
.telegram-page .stars-quantity-input:focus-within {
  border-color: var(--gold);
  background: var(--bg);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.telegram-page .stars-quantity-input input {
  font-family: var(--body);
  font-size: 24px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}
.telegram-page .stars-quantity-input span { color: var(--gold-text); font-size: 12px; }
.telegram-page .stars-presets { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.telegram-page .stars-presets button {
  min-height: 44px;
  border-radius: 11px;
  font-size: 12px;
  transform: none;
}
.telegram-page .stars-presets button:hover { transform: none; }
.telegram-page .stars-presets button.active {
  border-color: var(--gold);
  background: var(--accent-wash);
  color: var(--gold-text);
}
.telegram-page .stars-range { margin: 3px 0 0; }

.premium-package-grid .telegram-package,
.home-premium-packages .telegram-package {
  min-height: 78px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 9px;
  row-gap: 2px;
  padding: 10px;
  border-top-width: 1px;
}
.premium-package-grid .telegram-package img,
.home-premium-packages .telegram-package img {
  grid-row: 1 / 3;
  width: 24px;
  height: 24px;
  align-self: center;
  margin: 0;
}
.premium-package-grid .telegram-package b,
.home-premium-packages .telegram-package b { font-size: 13px; line-height: 1.2; }
.premium-package-grid .telegram-package span,
.home-premium-packages .telegram-package span { font-size: 11px; }

.game-region-search { width: 100%; margin: 0 0 10px; }

@media (min-width: 781px) {
  .service-launchpad { align-items: center; padding-block: 10px; }
  .service-launchpad .launch-service { height: 96px; min-height: 96px; align-content: center; }
}

@media (max-width: 520px) {
  .telegram-page .workspace-main { gap: 11px; padding: 12px; }
  .telegram-page .telegram-recipient-field { margin: 0; }
  .telegram-page .stars-quantity-input { width: 100%; min-height: 56px; padding: 6px 12px; }
  .telegram-page .stars-quantity-input input { font-size: 23px; }
  .telegram-page .stars-presets { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .telegram-page .stars-presets button { min-height: 42px; padding-inline: 2px; font-size: 11px; }
  .premium-package-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .premium-package-grid .telegram-package { min-height: 76px; grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: start; padding: 9px; }
  .premium-package-grid .telegram-package img { display: none; }
  .premium-package-grid .telegram-package b { font-size: 12px; }
  .premium-package-grid .telegram-package span { font-size: 10px; }
}

@media (max-width: 360px) {
  .telegram-page .stars-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .premium-package-grid { grid-template-columns: 1fr; }
  .premium-package-grid .telegram-package { min-height: 64px; }
}

/* Native service colours and vertically balanced selectors. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}
.launch-service:not(.games) .launch-icon img,
.voucher-service-card > span img,
.home-showcase-card:not(.game) .home-showcase-art img { filter: none; }
.services-page .voucher-service-card > span img { filter: none; }
.launch-service.playstation .launch-icon img,
.voucher-service-card[data-voucher-service="playstation"] > span img,
.home-showcase-card.playstation .home-showcase-art img {
  filter: brightness(0) saturate(100%) invert(35%) sepia(91%) saturate(1500%) hue-rotate(183deg) brightness(91%) contrast(101%);
}
.launch-service.app-store .launch-icon img,
.voucher-service-card[data-voucher-service="app-store"] > span img,
.home-showcase-card.app-store .home-showcase-art img {
  filter: brightness(0) saturate(100%) invert(48%) sepia(89%) saturate(2352%) hue-rotate(176deg) brightness(101%) contrast(94%);
}
.services-page .voucher-service-card[data-voucher-service="battle-net"] > span img {
  filter: brightness(0) saturate(100%) invert(48%) sepia(98%) saturate(4218%) hue-rotate(195deg) brightness(101%) contrast(102%);
}
.services-page .voucher-service-card[data-voucher-service="ea"] > span img {
  filter: brightness(0) saturate(100%) invert(38%) sepia(99%) saturate(3112%) hue-rotate(337deg) brightness(104%) contrast(101%);
}
.services-page .voucher-service-card[data-voucher-service="meta-quest"] > span img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(91%) saturate(1747%) hue-rotate(195deg) brightness(95%) contrast(106%);
}
.services-page .voucher-service-card[data-voucher-service="nintendo"] > span img {
  filter: brightness(0) saturate(100%) invert(12%) sepia(98%) saturate(6484%) hue-rotate(352deg) brightness(94%) contrast(105%);
}
.services-page .voucher-service-card[data-voucher-service="twitch"] > span img {
  filter: brightness(0) saturate(100%) invert(38%) sepia(98%) saturate(2534%) hue-rotate(245deg) brightness(101%) contrast(102%);
}
.telegram-product-card > img {
  width: 48px;
  height: 48px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface-2);
  padding: 8px;
}
.telegram-product-card:hover,
.telegram-product-card.active { transform: none; }
.package-loading.retry {
  width: 100%;
  background: transparent;
  cursor: pointer;
}
.package-loading.retry:hover,
.package-loading.retry:focus-visible { border-color: var(--gold); color: var(--gold-text); }

@media (min-width: 781px) {
  .service-launchpad .launch-service {
    grid-template-rows: 54px 28px;
    gap: 5px;
    align-content: center;
  }
}

/* 2026-07-24: compact catalogue controls, resilient promos and theme support. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  display: none;
  -webkit-appearance: none;
}

.catalog-search button[data-catalog-clear] {
  right: 4px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 11px;
}
.catalog-search button[data-catalog-clear] svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.catalog-sort {
  position: relative;
  min-width: 0;
}
.catalog-sort > select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
.catalog-sort-trigger {
  width: 100%;
  height: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid var(--edge);
  border-radius: var(--radius-input);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.catalog-sort-trigger svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  transition: transform .16s ease;
}
.catalog-sort-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.catalog-sort-menu {
  position: absolute;
  z-index: 35;
  top: calc(100% + 6px);
  right: 0;
  width: max(100%, 190px);
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface-2);
  box-shadow: var(--shadow);
}
.catalog-sort-menu button {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 11px;
  padding: 0 11px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.catalog-sort-menu button:hover,
.catalog-sort-menu button[aria-selected="true"] {
  background: var(--accent-wash);
  color: var(--gold-text);
}

.telegram-official-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.theme-button .theme-moon,
[data-theme="light"] .theme-button .theme-sun,
.mobile-menu-theme .theme-moon,
[data-theme="light"] .mobile-menu-theme .theme-sun { display: none; }
[data-theme="light"] .theme-button .theme-moon,
[data-theme="light"] .mobile-menu-theme .theme-moon { display: block; }
.mobile-menu-theme {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 14px;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 700;
}
.mobile-menu-theme svg { width: 22px; height: 22px; }

[data-theme="light"] .site-header {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 8px 28px rgba(48,42,25,.08);
}
[data-theme="light"] .site-search input,
[data-theme="light"] .catalog-search input,
[data-theme="light"] .choice-search,
[data-theme="light"] .input-wrap,
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] .game-logo-card > span,
[data-theme="light"] .voucher-service-card > span {
  background-color: var(--surface);
  color: var(--text);
}
[data-theme="light"] .site-search input:focus { background: var(--surface); }
[data-theme="light"] .mobile-dock,
[data-theme="light"] .mobile-menu-panel,
[data-theme="light"] .catalog-sort-menu { background: var(--surface); }

@media (max-width: 780px) {
  .theme-button { display: none !important; }
  .service-launchpad {
    margin: 0 0 10px;
    padding-block: 5px;
    align-items: stretch;
  }
  .service-launchpad .launch-service,
  .service-launchpad .launch-all-services {
    align-self: stretch;
    margin: 0;
  }
  .catalog-tools {
    grid-template-columns: minmax(0, 1fr) minmax(118px, 138px);
    align-items: start;
    gap: 7px;
  }
  .catalog-sort-trigger {
    padding-inline: 11px;
    font-size: 12px;
  }
  .catalog-sort-menu { width: 176px; }
  .catalog-category-tabs {
    max-width: 100%;
    padding: 0 2px 5px;
    scroll-padding-inline: 2px;
  }
  .game-logo-icon i {
    top: 4px;
    right: 4px;
    min-height: 19px;
    border: 0;
    padding-inline: 6px;
    font-size: 8px;
  }
}

@media (max-width: 360px) {
  .catalog-tools {
    grid-template-columns: minmax(0, 1fr) 112px;
  }
  .catalog-sort-trigger { padding-inline: 9px; font-size: 11px; }
  .service-launchpad { gap: 2px; }
}

/* A direct checkout visit has no order context: keep the sheet small and useful. */
.checkout-layout:has(.checkout-empty) {
  width: min(420px, 100%);
}
.checkout-layout:has(.checkout-empty) .checkout-main {
  padding: 20px;
}
.checkout-layout:has(.checkout-empty) .checkout-empty {
  margin: 0;
  border: 0;
  padding: 8px 0 2px;
  background: transparent;
}
.checkout-layout:has(.checkout-empty) .checkout-empty h2 {
  font-size: clamp(22px, 6vw, 28px);
}
.checkout-layout:has(.checkout-empty) .checkout-side {
  display: none;
}

/* 2026-07 usability audit: immediate navigation and compact loading states. */
.nav-row-icon img {
  width: 19px;
  height: 19px;
  display: block;
  object-fit: contain;
}

.catalog-loading {
  margin-top: var(--space-5);
}
.catalog-loading[hidden] { display: none; }
.catalog-loading-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--space-4);
}
.catalog-loading-grid i {
  aspect-ratio: 1;
  border-radius: 20px;
  background: linear-gradient(110deg, var(--hairline) 25%, var(--hairline-strong) 42%, var(--hairline) 60%);
  background-size: 220% 100%;
  animation: loading-sheen 1.5s ease-in-out infinite;
}
.services-loading-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  max-width: 920px;
}
.services-loading-panel i {
  min-height: 74px;
  border-radius: var(--radius-input);
  background: linear-gradient(110deg, var(--hairline) 25%, var(--hairline-strong) 42%, var(--hairline) 60%);
  background-size: 220% 100%;
  animation: loading-sheen 1.5s ease-in-out infinite;
}
.identity-loading {
  min-height: 92px;
  justify-content: stretch;
  padding: var(--space-4);
}
.profile-loading-skeleton {
  width: 100%;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 112px;
  align-items: center;
  gap: var(--space-4);
}
.profile-loading-skeleton i,
.profile-loading-skeleton b,
.profile-loading-skeleton em {
  display: block;
  border-radius: 999px;
  background: linear-gradient(110deg, var(--hairline) 25%, var(--hairline-strong) 42%, var(--hairline) 60%);
  background-size: 220% 100%;
  animation: loading-sheen 1.5s ease-in-out infinite;
}
.profile-loading-skeleton i { width: 52px; height: 52px; }
.profile-loading-skeleton span { display: grid; gap: 10px; }
.profile-loading-skeleton b { width: min(220px, 70%); height: 13px; }
.profile-loading-skeleton b + b { width: min(150px, 48%); height: 10px; }
.profile-loading-skeleton em { width: 112px; height: 44px; border-radius: var(--radius-input); }
@keyframes loading-sheen {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@media (max-width: 780px) {
  .catalog-loading-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
  .catalog-loading-grid i { border-radius: 16px; }
  .services-loading-panel { grid-template-columns: 1fr; }
  .profile-loading-skeleton { grid-template-columns: 46px minmax(0, 1fr); }
  .profile-loading-skeleton i { width: 46px; height: 46px; }
  .profile-loading-skeleton em { display: none; }
}

@media (min-width: 400px) and (max-width: 780px) {
  .games-page .catalog-tools {
    grid-template-columns: minmax(0, 1fr) 164px;
    align-items: stretch;
  }
  .games-page .catalog-tools select {
    min-width: 0;
    padding-left: 13px;
    font-size: 12px;
  }
}

.games-page .checkout-empty,
.services-page .checkout-empty {
  justify-items: start;
  gap: 4px;
  margin-top: var(--space-5);
  border-style: solid;
  padding: var(--space-5);
  background: var(--hairline);
}
.games-page .checkout-empty h2,
.services-page .checkout-empty h2 {
  font-size: clamp(18px, 3vw, 22px);
  text-transform: none;
}
.games-page .checkout-empty p,
.services-page .checkout-empty p {
  font-size: 13px;
}

@media (max-width: 520px) {
  .site-search input::placeholder { color: var(--text-tertiary); }
  .games-page .checkout-empty,
  .services-page .checkout-empty { padding: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-loading-grid i,
  .services-loading-panel i,
  .profile-loading-skeleton i,
  .profile-loading-skeleton b,
  .profile-loading-skeleton em {
    animation: none;
    background: var(--hairline);
  }}
.home-showcase-head > a,
.help-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.field-help { min-height: 44px !important; }
.stars-quantity-input input,
.home-stars-input input { min-height: 44px; }
.telegram-page .stars-presets button { min-height: 44px; }

@media (max-width: 780px) {
  .section.compact { padding-top: 12px; }
  .service-launchpad .launch-service,
  .service-launchpad .launch-all-services {
    grid-template-rows: 48px 30px;
    gap: 5px;
    align-content: center;
  }
}

@media (max-width: 380px) {
  .service-launchpad .launch-service,
  .service-launchpad .launch-all-services { grid-template-rows: 44px 30px; }
}

/* One compact Telegram control system on the home and Telegram pages. */
.telegram-product-switch {
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.telegram-product-card {
  min-height: 66px;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  border-color: transparent;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: none;
}
.telegram-product-card > img {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  padding: 7px;
}
.telegram-product-card b {
  margin: 0;
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.2;
}
.telegram-product-card em,
.telegram-product-card > i,
.telegram-product-card::after { display: none !important; }
.telegram-product-card.active,
.telegram-product-card[aria-selected="true"] { box-shadow: inset 0 0 0 1px currentColor; }

.premium-package-grid .telegram-package,
.home-premium-packages .telegram-package {
  min-height: 66px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  place-content: center;
  justify-items: center;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  padding: 9px 6px;
  text-align: center;
}
.premium-package-grid .telegram-package img,
.home-premium-packages .telegram-package img { display: none; }
.premium-package-grid .telegram-package b,
.home-premium-packages .telegram-package b {
  color: var(--text);
  font-size: 13px;
  line-height: 1.15;
}
.premium-package-grid .telegram-package span,
.home-premium-packages .telegram-package span { color: var(--text-secondary); font-size: 11px; }
.premium-package-grid .telegram-package:hover,
.home-premium-packages .telegram-package:hover { border-color: var(--line-strong); background: var(--surface); }
.premium-package-grid .telegram-package[aria-pressed="true"],
.home-premium-packages .telegram-package[aria-pressed="true"] {
  border-color: var(--gold);
  background: var(--accent-wash);
  box-shadow: inset 0 0 0 1px var(--accent-wash-strong);
}
.premium-package-grid .telegram-package[aria-pressed="true"] b,
.home-premium-packages .telegram-package[aria-pressed="true"] b { color: var(--gold-text); }

.stars-home-presets { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Stars always use the full row on wide layouts. The compact-action rule above
   intentionally makes generic amount presets four columns, but Stars has five
   equally important presets and must not leave the last option orphaned. */
.home-order-layout.compact-action .home-presets .stars-home-presets {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
/* The Stars quantity is the primary value, not a narrow amount side-field.
   Keep the control and its presets on the full form width at every breakpoint. */
.telegram-home-fields [data-telegram-panel="stars"] {
  grid-column: 1 / -1;
}
.telegram-home-fields .stars-range { margin: 5px 0 0; color: var(--text-tertiary); font-size: 11px; }

@media (max-width: 520px) {
  .telegram-product-switch { margin-bottom: 8px; padding: 5px; }
  .telegram-page .telegram-product-card {
    min-height: 62px;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 8px;
    padding: 8px 9px;
  }
  .telegram-page .telegram-product-card > img { width: 36px; height: 36px; padding: 6px; }
  .telegram-page .telegram-product-card b { font-size: 13px; }
  .premium-package-grid .telegram-package,
  .home-premium-packages .telegram-package { min-height: 64px; padding: 8px 4px; }
  .premium-package-grid .telegram-package b,
  .home-premium-packages .telegram-package b { font-size: 12px; }
  .stars-home-presets { gap: 5px; }
  .stars-home-presets .quick { min-height: 42px; padding-inline: 2px; font-size: 11px; }
}

@media (max-width: 360px) {
  .premium-package-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Home Stars mirrors the compact Telegram control at every phone width. */
@media (max-width: 780px) {
  .telegram-home-fields { gap: 8px; }
  .telegram-home-fields > .field > label {
    min-height: 0 !important;
    margin-bottom: 2px;
  }
  .telegram-home-fields .home-presets > label { display: none; }
  .telegram-home-fields .home-presets { margin-top: -2px; }
  .telegram-home-fields .home-presets .stars-home-presets {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
  }
  .telegram-home-fields .stars-home-presets .quick {
    min-width: 0;
    min-height: 44px;
    padding-inline: 2px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }
  .telegram-home-fields .stars-range { margin-top: 0; }
  .telegram-page .telegram-product-card b {
    line-height: 1.35;
    padding-block: 1px 2px;
  }
}

/* Lighter below-the-fold rendering and consistent showcase artwork. */
.home-showcase,
.site-footer,
.rank-board,
.profile-section,
.game-checkout-panel {
  content-visibility: auto;
  contain-intrinsic-size: 1px 420px;
}
.home-showcase-card.game .home-showcase-art {
  background: radial-gradient(circle at 50% 44%, var(--accent-wash), transparent 62%), var(--surface-2);
}
.home-showcase-card.game .home-showcase-art img {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  object-fit: cover;
}
.home-order-layout[data-home-panel="telegram"] {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 16px 36px rgba(0,0,0,.14);
}
.stars-quantity-input .stars-unit {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--accent-wash);
}
.stars-quantity-input .stars-unit img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  padding: 0;
  filter: none;
}

/* Stars use the same compact control on the home screen and Telegram page. */
.telegram-page .stars-quantity-input,
.telegram-home-fields .stars-quantity-input {
  grid-template-columns: minmax(0, 1fr) auto;
}
.telegram-page .stars-quantity-input .stars-unit,
.telegram-home-fields .stars-quantity-input .stars-unit {
  display: grid !important;
}
.telegram-page .stars-quantity-input .stars-unit img,
.telegram-home-fields .stars-quantity-input .stars-unit img {
  display: block !important;
}
.home-order-layout[data-home-panel="telegram"] {
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.home-order-layout[data-home-panel="telegram"] .home-order-card,
.home-order-layout[data-home-panel="telegram"] .action-only {
  background: var(--surface);
}
.home-order-layout[data-home-panel="telegram"] .home-order-card {
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
}
.home-order-layout[data-home-panel="telegram"] .action-only {
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 18px 18px;
}

/* Home is one compact purchase surface: artwork, primary services, then the
   active form. Keep visual hierarchy without stacking heavy framed cards. */
@media (max-width: 780px) {
  .store-hero { padding-top: 10px; }
  .store-hero > .container { gap: 0; }
  .service-launchpad {
    position: relative;
    z-index: 2;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    margin: 0 0 8px;
    padding: 6px;
    overflow: visible;
    border-color: var(--hairline);
    border-radius: 18px;
    background: var(--surface-2);
    mask-image: none;
    box-shadow: none;
  }
  .service-launchpad .launch-service,
  .service-launchpad .launch-all-services {
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 76px;
    height: 76px;
    grid-template-rows: 44px 25px;
    gap: 3px;
    padding: 4px 2px;
    border: 0;
    border-radius: 12px;
    background: transparent;
  }
  .service-launchpad .launch-service:hover,
  .service-launchpad .launch-service:focus-visible {
    background: var(--hairline);
  }
  .service-launchpad .launch-service.selected {
    background: var(--accent-wash);
    box-shadow: inset 0 0 0 1px var(--accent-border-soft);
  }
  .service-launchpad .launch-icon,
  .service-launchpad .launch-all-services .launch-icon {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 12px;
    background: var(--surface-2);
    box-shadow: none;
  }
  .service-launchpad .launch-service.selected .launch-icon {
    border: 1px solid var(--accent-border-soft);
    box-shadow: none;
  }
  .service-launchpad .launch-service b,
  .service-launchpad .launch-all-services b {
    min-height: 25px;
    font-size: 10.5px;
    line-height: 1.15;
  }
  .home-order-layout.compact-action,
  .home-order-layout[data-home-panel="telegram"] {
    overflow: hidden;
    border: 1px solid var(--hairline);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: none;
  }
  .home-order-layout.compact-action .home-order-card,
  .home-order-layout[data-home-panel="telegram"] .home-order-card {
    padding: 12px 12px 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .home-order-layout.compact-action .action-only,
  .home-order-layout[data-home-panel="telegram"] .action-only {
    padding: 8px 12px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .home-order-layout.compact-action .home-order-fields { gap: 9px 8px; }
  .home-order-layout.compact-action .home-order-fields .field label {
    min-height: 28px;
    margin-bottom: 3px;
    align-items: center;
  }
  .home-order-layout.compact-action .input-wrap input,
  .telegram-home-fields .stars-quantity-input { height: 50px; }
  .home-order-layout.compact-action .quick { min-height: 44px; }
  .home-order-layout.compact-action .action-only .button { min-height: 52px; }
}

@media (max-width: 360px) {
  .service-launchpad { padding-inline: 4px; }
  .service-launchpad .launch-service,
  .service-launchpad .launch-all-services { min-height: 72px; height: 72px; }
  .service-launchpad .launch-icon,
  .service-launchpad .launch-all-services .launch-icon { width: 40px; height: 40px; }
  /* 11px это решённый пол читаемости для служебных подписей. Названия
     категорий в переключателе стояли на 10px, то есть НИЖЕ пола — и это не
     служебная подпись, а название товара, по которому человек выбирает. */
  .service-launchpad .launch-service b,
  .service-launchpad .launch-all-services b { font-size: 11px; }
}

/* Checkout is a focused bottom sheet; the payment provider remains the next screen. */
body.sheet-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
.checkout-sheet {
  position: fixed;
  z-index: 180;
  inset: 0;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  padding: 24px 24px 0;
  background: transparent;
  isolation: isolate;
}

.checkout-dismiss {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: rgba(4,5,4,.46);
  cursor: pointer;
}
.checkout-layout {
  position: relative;
  z-index: 2;
}
.checkout-gate {
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  padding: 32px;
  color: var(--text-secondary);
  text-align: center;
}
.checkout-gate p {
  margin: 0;
  font-size: 14px;
  font-weight: 750;
}
.checkout-gate .button {
  min-width: 190px;
}
.checkout-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--line-strong);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: checkout-spin .72s linear infinite;
}
.checkout-gate.error .checkout-spinner { display: none; }
@keyframes checkout-spin { to { transform: rotate(360deg); } }
.checkout-layout {
  width: min(680px, 100%);
  max-height: calc(100dvh - 24px);
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(145deg, var(--accent-wash), transparent 42%), var(--surface);
  box-shadow: 0 -24px 80px rgba(0,0,0,.48);
  animation: checkout-sheet-in .24s cubic-bezier(.2,.75,.25,1) both;
}
.checkout-main,
.checkout-side {
  position: static;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.checkout-main { padding: 22px 24px 12px; }
.checkout-main h1 { display: none; }
.checkout-items { border: 0; }
.checkout-item {
  min-height: 0;
  align-items: flex-start;
  border-bottom: 0;
  padding: 0;
}
.checkout-item span { font-size: 10px; }
.checkout-item h3 { margin-top: 5px; font-size: clamp(17px,3vw,21px); }
.checkout-item p { margin-top: 5px; font-size: 12px; }
.checkout-state {
  min-height: 46px;
  margin-top: 14px;
  border-radius: 12px;
  padding: 11px 13px 11px 38px;
  font-size: 12px;
}
.checkout-state.success { display: none; }
.checkout-side {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: end;
  gap: 8px 18px;
  border-top: 1px solid var(--line);
  padding: 16px 24px max(22px, env(safe-area-inset-bottom));
}
.checkout-side .order-kicker { grid-column: 1; grid-row: 1; color: var(--muted); font-size: 11px; }
.checkout-counter { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.checkout-counter [data-checkout-total] { font-size: clamp(28px,5vw,38px); }
.checkout-summary-line {
  grid-column: 1;
  grid-row: 2;
  justify-content: flex-start;
  gap: 7px;
  margin: 0;
  background: transparent;
  padding: 0;
}
.checkout-summary-line span::after { content: ":"; }
.checkout-note { display: none; }
.checkout-payment-methods {
  grid-column: 1 / -1;
  display: grid;
  gap: 9px;
  margin-top: 8px;
}
.checkout-payment-methods[hidden] { display: none; }
.checkout-payment-methods > span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}
.checkout-payment-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.checkout-payment-method {
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text);
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
}
.checkout-payment-method:hover { border-color: var(--line-strong); }
.checkout-payment-method.selected {
  border-color: var(--gold);
  background: var(--accent-wash);
  box-shadow: inset 0 0 0 1px var(--accent-wash-strong);
}
.checkout-payment-method:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.checkout-payment-method > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.checkout-payment-method b {
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.15;
}
.checkout-payment-method small {
  color: var(--text-secondary);
  font-size: 11px;
}
.checkout-payment-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #10110f;
}
.checkout-payment-mark.sbp {
  background: #fff;
}
.checkout-payment-mark.sbp img {
  width: 25px;
  height: 25px;
  display: block;
  object-fit: contain;
}
.checkout-payment-mark.crypto {
  background: #171912;
}
.checkout-payment-mark.crypto img {
  width: 34px;
  height: 34px;
  display: block;
}
.checkout-payment-mark.stars {
  background: #15130b url("/img/store/telegram-stars.svg?v=8") center/22px 22px no-repeat;
}

/* 2026-07 minimal storefront surfaces
   One visual surface per action: no framed icon inside a framed service tile. */
.service-launchpad {
  gap: 6px;
  margin-block: 10px 14px;
  padding: 0;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.launch-service {
  min-height: 86px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  transition: color .16s ease, background-color .16s ease;
}
.launch-service .launch-icon,
.launch-service.selected .launch-icon {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.launch-service:hover,
.launch-service:focus-visible {
  background: var(--hairline);
}
.launch-service:hover .launch-icon,
.launch-service:focus-visible .launch-icon {
  transform: translateY(-2px);
  border: 0;
  box-shadow: none;
}
.launch-service.selected {
  background: var(--accent-wash);
  box-shadow: none;
}
.launch-service.selected b { color: var(--gold-text); }

.home-order-layout.compact-action {
  border: 0;
  background: rgba(31,33,28,.92);
  box-shadow: none;
}
.home-order-layout.compact-action .home-order-head { display: none; }
.home-order-layout.compact-action .home-order-card {
  padding-top: 18px;
}
.home-order-layout.compact-action .quick {
  border-color: transparent;
  background: var(--hairline);
}
.home-order-layout.compact-action .quick:hover,
.home-order-layout.compact-action .quick:focus-visible {
  border-color: var(--accent-border-soft);
  background: var(--accent-wash);
}
.home-order-layout.compact-action .quick.active {
  border-color: var(--accent-border-soft);
  background: var(--accent-wash);
  box-shadow: none;
}

.home-showcase-card {
  border: 0;
  background: var(--hairline);
  box-shadow: none;
}
.home-showcase-card .home-showcase-art {
  background: transparent !important;
}
.home-showcase-card:hover,
.home-showcase-card:focus-visible {
  border-color: transparent;
  background: var(--hairline-strong);
  box-shadow: none;
}

@media (max-width: 780px) {
  .service-launchpad {
    gap: 2px;
    margin-bottom: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .service-launchpad .launch-service,
  .service-launchpad .launch-all-services {
    min-height: 74px;
    height: 74px;
    border-radius: 14px;
  }
  .service-launchpad .launch-icon,
  .service-launchpad .launch-all-services .launch-icon,
  .service-launchpad .launch-service.selected .launch-icon {
    border: 0;
    background: transparent;
  }
  .service-launchpad .launch-service.selected {
    background: var(--accent-wash);
    box-shadow: none;
  }
  .home-order-layout.compact-action,
  .home-order-layout[data-home-panel="telegram"] {
    border: 0;
    background: rgba(31,33,28,.92);
  }
  .home-order-layout.compact-action .home-order-card {
    padding-top: 12px;
  }
}
.checkout-side .button {
  grid-column: 1 / -1;
  min-height: 56px;
  margin-top: 8px;
  border-radius: 14px;
  font-size: 16px;
}
.checkout-legal {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  text-align: center;
}
@keyframes checkout-sheet-in {
  from { opacity: 0; transform: translateY(42px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 780px) {
  .checkout-page { padding: 12px 0 0; }
  .checkout-layout {
    width: 100%;
    max-height: calc(100dvh - 12px);
    border-inline: 0;
    border-radius: 22px 22px 0 0;
  }
  .checkout-main { padding: 18px 18px 10px; }
  .checkout-side { padding: 14px 18px max(18px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .checkout-layout { animation: none; }
  .checkout-spinner { animation-duration: 1.4s; }
}

/* Premium uses the same clear SLARP purchase action as the rest of the store. */
.telegram-submit.premium,
.telegram-submit.premium:hover {
  border-color: var(--gold);
  background: var(--gold-fill);
  color: var(--gold-ink);
}

/* Checkout is a centred confirmation modal on desktop and a bottom sheet on touch screens. */
@keyframes checkout-modal-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (min-width: 781px) {
  .checkout-sheet {
    align-items: center;
    padding: 24px;
  }
  .checkout-layout {
    max-height: calc(100dvh - 48px);
    border: 1px solid var(--line-strong);
    border-radius: 24px;
    box-shadow: 0 24px 90px rgba(0,0,0,.58);
    animation-name: checkout-modal-in;
  }
}

/* 2026-07-24 — unified public page system
   Keep every public surface on the same rhythm, density and mobile geometry. */
.site-search,
.header-actions,
.header-main > *,
.legal-layout > *,
.help-grid > *,
.identity-grid > *,
.profile-dashboard-grid > *,
.voucher-layout > *,
.game-configurator > * {
  min-width: 0;
  max-width: 100%;
}

.section.compact {
  padding-block: 24px 40px;
}

.workspace,
.voucher-main,
.game-checkout-panel,
.identity-panel,
.profile-overview,
.profile-section {
  border-color: rgba(245,241,232,.10);
  border-radius: var(--radius-panel);
  background: var(--surface);
  box-shadow: none;
}

.workspace-main,
.voucher-main,
.game-configurator-main,
.profile-section,
.identity-panel-body {
  padding: clamp(18px, 2.25vw, 28px);
}

.field label,
.config-step-title b,
.profile-section .eyebrow,
.checkout-item span {
  color: var(--text-secondary);
  font-size: 12px;
}

.field input,
.field select,
.choice-search,
.input-wrap,
.amount-input,
.catalog-search input {
  max-width: 100%;
  border-radius: var(--radius-input);
}

.quick,
.filter,
.order-filters button,
.stars-presets button,
.package,
.telegram-package,
.voucher-region,
.voucher-product,
.region-choice,
.product-choice {
  border-radius: var(--radius-button);
}

/* Help uses the same single-panel hierarchy as catalogue configurators. */
.help-head {
  padding: 22px 0 12px;
  border-bottom: 0;
}
.help-head .container {
  align-items: center;
}
.help-head h1 {
  font-size: clamp(28px, 3vw, 40px);
}
.help-grid {
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.help-nav {
  top: 110px;
  gap: 4px;
  border: 0;
  border-radius: var(--radius-card);
  padding: 7px;
  background: var(--hairline);
}
.help-nav a {
  min-height: 44px;
  border-radius: 11px;
  padding: 0 12px;
  font-weight: 700;
}
.help-nav a:hover,
.help-nav a:focus-visible {
  color: var(--text);
  background: var(--accent-wash);
}
.help-faq {
  gap: 26px;
  border: 1px solid rgba(245,241,232,.10);
  border-radius: var(--radius-panel);
  padding: clamp(20px, 2.5vw, 32px);
  background: var(--surface);
}
.help-faq h2 {
  margin: 0 0 12px;
  font-size: clamp(21px, 2.2vw, 28px);
}
.help-faq details:first-of-type {
  border-top-color: transparent;
}
.help-faq summary {
  min-height: 50px;
  display: flex;
  align-items: center;
  padding-block: 12px;
  font-size: 14px;
}
.help-faq p {
  font-size: 13px;
  line-height: 1.6;
}

/* Legal pages are readable documents, not oversized campaign pages. */
.legal-page {
  padding: 32px 0 64px;
}
.legal-layout {
  grid-template-columns: minmax(0, 820px) minmax(190px, 230px);
  gap: 24px;
}
.legal-copy {
  overflow: hidden;
  border: 1px solid rgba(245,241,232,.10);
  border-radius: var(--radius-panel);
  padding: clamp(24px, 3.5vw, 44px);
  background: var(--surface);
  font-size: 14px;
}
.legal-copy .legal-title {
  max-width: 100%;
  margin: 8px 0 18px;
  font-size: clamp(30px, 3.4vw, 46px);
  overflow-wrap: anywhere;
}
.legal-copy h2 {
  max-width: 100%;
  margin: 34px 0 12px;
  font-family: var(--body);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.legal-copy p,
.legal-copy li,
.legal-copy a {
  overflow-wrap: anywhere;
}
.legal-meta {
  top: 112px;
  border: 1px solid rgba(245,241,232,.10);
  border-radius: var(--radius-card);
  padding: 18px;
  background: var(--hairline);
  font-size: 12px;
}

/* SLARP ID follows the same compact content width as purchase forms. */
.identity-grid {
  width: min(100%, 1120px);
}
.identity-entry-grid {
  width: min(100%, 540px);
}
.identity-panel {
  width: 100%;
}
.identity-panel-head {
  min-height: 64px;
  padding-inline: clamp(18px, 2.5vw, 28px);
}
.login-method {
  border-radius: var(--radius-button);
}
.rank-board {
  border-top: 0;
  padding-top: 22px;
}
.rank-board-head {
  margin-bottom: 16px;
}
.rank-board-head h2 {
  font-size: clamp(26px, 3vw, 36px);
}
.rank-grid {
  border-radius: var(--radius-panel);
}

/* Payment result pages use the same panel proportions and typography. */
.payment-result-page .container {
  width: min(calc(100% - 40px), 720px);
}
.payment-result-card {
  border-radius: var(--radius-panel);
  box-shadow: none;
}

@media (max-width: 780px) {
  .container,
  .store-hero .container,
  .payment-result-page .container {
    width: min(calc(100% - 24px), var(--max));
  }

  .header-main {
    width: 100%;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
  }
  .brand {
    min-width: 44px;
    justify-content: flex-start;
  }
  .brand-word {
    height: 14px;
    width: 59px;
  }
  .brand-mark {
    height: 18px;
  }
  .mobile-menu-head .brand {
    width: auto;
    min-width: 0;
    max-width: calc(100% - 64px);
    justify-content: flex-start;
    gap: 10px;
  }
  .site-search {
    width: 100%;
    min-width: 0;
  }
  .site-search input {
    width: 100%;
    min-width: 0;
  }
  .header-actions {
    flex: 0 0 auto;
  }
  .header-actions .account-button {
    display: none;
  }

  .section,
  .section.compact {
    padding-block: 12px 24px;
  }

  .workspace-main,
  .voucher-main,
  .game-configurator-main,
  .profile-section,
  .identity-panel-body {
    padding: 16px;
  }

  .help-head {
    padding: 12px 0 8px;
  }
  .help-head .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }
  .help-head h1 {
    font-size: 27px;
  }
  .help-head .button {
    min-width: 44px;
    max-width: 128px;
    white-space: nowrap;
  }
  .help-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .help-nav {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    overflow: visible;
    border: 0;
    padding: 5px;
  }
  .help-nav a {
    min-width: 0;
    justify-content: center;
    border: 0;
    padding: 0 6px;
    text-align: center;
    font-size: 12px;
  }
  .help-faq {
    gap: 22px;
    border-radius: 18px;
    padding: 18px 16px;
  }
  .help-faq h2 {
    font-size: 21px;
  }

  .legal-page {
    padding: 12px 0 24px;
  }
  .legal-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .legal-meta {
    position: static;
    order: -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 14px;
    border-radius: 16px;
    padding: 14px 16px;
  }
  .legal-meta br {
    display: none;
  }
  .legal-copy {
    border-radius: 18px;
    padding: 20px 16px 24px;
    font-size: 13px;
    line-height: 1.65;
  }
  .legal-copy .breadcrumbs {
    font-size: 11px;
  }
  .legal-copy .legal-title {
    font-size: clamp(27px, 9vw, 36px);
    line-height: 1.08;
  }
  .legal-copy h2 {
    margin-top: 28px;
    font-size: clamp(16px, 4.8vw, 19px);
  }

  .identity-entry-grid,
  .identity-panel,
  .profile-overview,
  .profile-section,
  .rank-board,
  .rank-grid {
    max-width: 100%;
  }
  .identity-panel-head {
    min-height: 56px;
    padding-inline: 16px;
  }
  .identity-panel-head h2 {
    font-size: 22px;
  }
  .identity-panel-body {
    padding: 14px 16px 16px;
  }
  .identity-entry-copy {
    margin-bottom: 12px;
  }
  .rank-board {
    padding-top: 16px;
  }
  .rank-board-head {
    justify-content: flex-start;
    margin-bottom: 10px;
  }
  .rank-board-head h2 {
    font-size: 25px;
    text-align: left;
  }
  .rank-grid {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding-left: 0;
  }

  .site-footer {
    margin-top: 12px;
    padding-bottom: 18px;
  }
  .footer-main {
    gap: 10px;
  }
  .footer-brand,
  .footer-note {
    display: none;
  }
  .footer-links {
    justify-content: center;
  }
}

@media (max-width: 360px) {
  .container,
  .store-hero .container,
  .payment-result-page .container {
    width: min(calc(100% - 18px), var(--max));
  }
  .header-main {
    gap: 6px;
  }
  .help-head .button {
    padding-inline: 11px;
    font-size: 12px;
  }
  .legal-copy {
    padding-inline: 14px;
  }
  .legal-copy .legal-title {
    font-size: 26px;
  }
  .login-method {
    padding-inline: 12px;
  }

  .catalog-category-tabs {
    width: calc(100% + 18px);
    max-width: calc(100% + 18px);
    margin-inline: -9px;
    padding-left: 9px;
    padding-right: 27px;
    scroll-padding-inline: 9px;
  }
}

/* 2026-07-24 — SLARP design system, phase 1
   A quiet game-launcher shell: one surface per task, gold only for intent. */
:root {
  --ease-ui: cubic-bezier(.25, 1, .5, 1);
}

body {
  background: var(--canvas);
  font-size: 14px;
}
body::before {
  opacity: .52;
  background-size: 72px 72px;
}
.container {
  width: min(calc(100% - 32px), var(--max));
}
.page {
  padding-bottom: 12px;
}

/* Shell */
.site-header {
  border-bottom-color: var(--edge);
  background: rgba(20, 21, 17, .92);
  box-shadow: none;
}
.header-main {
  height: 68px;
  gap: 20px;
}
.brand {
  gap: 10px;
}
.brand:hover img {
  transform: none;
  filter: none;
  opacity: .86;
}
.site-search {
  max-width: 620px;
}
.site-search input {
  height: 46px;
  border-color: var(--edge);
  border-radius: var(--radius-input);
  background: #10110e;
  padding-right: 70px;
}
.site-search input:hover {
  border-color: var(--edge-strong);
}
.site-search input:focus {
  border-color: var(--accent-border-soft);
  background: var(--surface-2);
}
.icon-button {
  border-color: var(--edge);
  background: var(--canvas-raised);
  transition: border-color .16s ease, background-color .16s ease;
}
.icon-button:hover {
  border-color: var(--accent-border-soft);
  background: var(--intent-wash);
}
.icon-button:hover svg {
  transform: none;
}
.nav-row {
  min-height: 48px;
  justify-content: flex-start;
  gap: 2px;
}
.nav-row a {
  min-height: 44px;
  padding-inline: 12px;
  font-size: 13px;
}
.nav-row a.active {
  box-shadow: inset 0 -2px var(--intent);
  border-radius: 0; background: transparent;
}
.button {
  border-radius: var(--radius-button);
  box-shadow: none;
  transition: background-color .16s ease, transform .16s var(--ease-ui);
}
.button::after {
  display: none;
}
.button:hover {
  transform: none;
  background: var(--intent-hover);
  box-shadow: none;
}

/* Hero is the only expressive surface on the storefront. */
.store-hero {
  padding-top: 16px;
}

/* Fast launch: the selection itself is the structure, not another card. */
.service-launchpad {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 4px;
  margin: 8px 0 12px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.service-launchpad .launch-service,
.service-launchpad .launch-all-services {
  width: auto;
  min-width: 0;
  max-width: none;
  min-height: 82px;
  height: auto;
  display: grid;
  grid-template-rows: 44px minmax(26px, auto);
  align-content: center;
  justify-items: center;
  gap: 5px;
  border: 0;
  border-radius: var(--radius-card);
  padding: 6px 4px;
  background: transparent;
}
.service-launchpad .launch-service:hover,
.service-launchpad .launch-service:focus-visible {
  background: var(--hairline);
}
.service-launchpad .launch-service.selected {
  background: var(--intent-wash);
  box-shadow: inset 0 0 0 1px var(--accent-wash-strong);
}
.service-launchpad .launch-icon,
.service-launchpad .launch-all-services .launch-icon,
.service-launchpad .launch-service.selected .launch-icon {
  border: 0;
  border-radius: 12px;
  background: #10110e;
  box-shadow: none;
}
.service-launchpad .launch-service b,
.service-launchpad .launch-all-services b {
  min-height: 26px;
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-secondary);
  font-size: 11px;
  line-height: 1.18;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.service-launchpad .launch-service.selected b {
  color: var(--gold-text);
}

/* One task, one surface. */
.home-order-layout.compact-action,
.home-order-layout[data-home-panel="telegram"],
.telegram-page .telegram-workspace {
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: var(--radius-panel);
  background: var(--panel);
  box-shadow: none;
}
.home-order-layout.compact-action .home-order-card,
.home-order-layout[data-home-panel="telegram"] .home-order-card {
  padding: 18px 18px 4px;
  background: transparent;
}
.home-order-layout.compact-action .home-order-fields {
  gap: 10px 12px;
}
.field label,
.home-order-layout.compact-action .home-order-fields .field label {
  min-height: 28px;
  margin: 0 0 5px;
  color: var(--ink-secondary);
  font-size: 12px;
  font-weight: 700;
}
.input-wrap,
.stars-quantity-input,
.choice-search,
.catalog-search {
  border-color: var(--edge);
  background: var(--surface-2);
}
.input-wrap:focus-within,
.stars-quantity-input:focus-within,
.choice-search:focus,
.catalog-search:focus-within {
  border-color: var(--accent-border-soft);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.home-order-layout.compact-action .input-wrap input,
.telegram-home-fields .stars-quantity-input,
.telegram-page .input-wrap input {
  height: 52px;
}
.home-order-layout.compact-action .quick,
.stars-presets button {
  min-height: 44px;
  border-color: transparent;
  background: var(--hairline);
}
.home-order-layout.compact-action .quick.active,
.stars-presets button.active,
.stars-presets button[aria-pressed="true"] {
  border-color: var(--accent-border-soft);
  background: var(--intent-wash);
  box-shadow: inset 0 0 0 1px var(--accent-wash);
}
.home-order-layout.compact-action .action-only,
.home-order-layout[data-home-panel="telegram"] .action-only {
  padding: 10px 18px 18px;
}
.home-order-layout.compact-action .action-only .button,
.home-order-layout[data-home-panel="telegram"] .action-only .button {
  min-height: 54px;
}
.field-help {
  min-height: 32px;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
}

/* Popular choices: stable rows, same optical weight for art and icon cards. */
.home-showcase {
  margin-top: 20px;
}
.home-showcase-head {
  align-items: end;
  margin-bottom: 10px;
}
.home-showcase-head h2 {
  margin-top: 2px;
  font-size: clamp(22px, 2.5vw, 30px);
}
.home-showcase-head > a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--ink-secondary);
  font-size: 12px;
  font-weight: 700;
}
.home-showcase-grid {
  gap: 8px;
}
.home-showcase-card {
  min-height: 86px;
  grid-template-columns: 68px minmax(0, 1fr);
  border: 0;
  border-radius: var(--radius-card);
  background: var(--panel);
}
.home-showcase-card:hover,
.home-showcase-card:focus-visible {
  background: var(--panel-hover);
}
.home-showcase-art {
  min-height: 86px;
  background: var(--surface-2) !important;
}
.home-showcase-art img {
  max-width: 44px;
  max-height: 44px;
  object-fit: contain;
}
.home-showcase-card.game .home-showcase-art img {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}
.home-showcase-copy {
  padding: 10px 11px;
}
.home-showcase-copy small {
  color: var(--gold-text);
  font-size: 10px;
}
.home-showcase-copy b {
  color: var(--ink);
  font-size: 13px;
}
.home-showcase-copy em {
  color: var(--ink-tertiary);
  font-size: 11px;
}

/* Telegram: the same purchase grammar as Steam. */
.telegram-page .section.compact {
  padding-top: 16px;
}
.telegram-product-switch {
  gap: 8px;
  margin-bottom: 10px;
}
.telegram-product-card {
  min-height: 70px;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  border-color: transparent;
  border-radius: var(--radius-card);
  background: var(--panel);
  padding: 10px 14px;
}
.telegram-product-card > img {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--surface-2);
  padding: 8px;
}
.telegram-product-card > span {
  min-width: 0;
}
.telegram-product-card b {
  overflow: visible;
  font-size: 14px;
  line-height: 1.2;
}
.telegram-product-card em {
  margin-top: 2px;
  color: var(--ink-tertiary);
  font-size: 11px;
}
.telegram-product-card > i {
  display: none;
}
.telegram-product-card[aria-selected="true"] {
  border-color: var(--accent-border-soft);
  background: var(--intent-wash);
  box-shadow: inset 0 0 0 1px var(--accent-wash);
}
.telegram-page .workspace-main {
  gap: 14px;
  padding: 16px;
}
.telegram-page .stars-quantity-input {
  min-height: 58px;
}
.telegram-page .stars-quantity-input input {
  min-width: 0;
  font-size: 25px;
}
.telegram-page .stars-presets {
  gap: 6px;
}
.telegram-page .telegram-summary {
  padding: 10px 16px 16px;
}
.premium-package-grid {
  gap: 7px;
}
.premium-package-grid .telegram-package {
  min-height: 78px;
  border-color: transparent;
  background: var(--hairline);
  padding: 12px;
}
.premium-package-grid .telegram-package:hover,
.premium-package-grid .telegram-package:focus-visible {
  border-color: var(--accent-border-soft);
}
.premium-package-grid .telegram-package[aria-pressed="true"] {
  border-color: var(--accent-border-soft);
  background: var(--intent-wash);
}

/* Games and services share a catalogue language. */
.games-page .section.compact,
.services-page .section.compact {
  padding-top: 16px;
}
.catalog-tools {
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 8px;
  margin-bottom: 10px;
}
.catalog-search input,
.catalog-tools select,
.choice-search {
  height: 48px;
  border-color: var(--edge);
  border-radius: var(--radius-input);
  background-color: var(--surface-2);
}
.catalog-tools select {
  padding-inline: 14px 38px;
}
.catalog-category-tabs {
  gap: 6px;
  margin-bottom: 16px;
}
.filter {
  min-height: 44px;
  border-color: transparent;
  background: var(--hairline);
  padding-inline: 14px;
}
.filter.active {
  border-color: var(--accent-border-soft);
  background: var(--intent-wash);
}
.catalog-grid.game-logo-grid {
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 20px 12px;
}
.game-logo-card {
  min-width: 0;
}
.game-logo-card > span,
.voucher-service-card > span {
  border-color: transparent;
  background: var(--surface-2);
  box-shadow: none;
}
.game-logo-card:hover > span,
.game-logo-card:focus-visible > span,
.voucher-service-card:hover > span,
.voucher-service-card:focus-visible > span {
  border-color: var(--accent-border-soft);
  transform: translateY(-2px);
}
.game-logo-card b,
.voucher-service-card b {
  color: var(--ink-secondary);
  line-height: 1.25;
}
.services-page .voucher-service-switch {
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 18px 12px;
  margin-bottom: 20px;
}
.services-page .voucher-service-card {
  min-height: 104px;
  padding: 2px;
}
.services-page .voucher-service-card > span {
  width: 68px;
  height: 68px;
}
.services-page .voucher-service-card img {
  filter: none;
}
.voucher-layout,
.game-configurator {
  gap: 10px;
}
.voucher-main,
.game-checkout-panel,
.voucher-summary,
.game-configurator-main {
  border-color: var(--edge);
  background: var(--panel);
}
.voucher-summary,
.game-configurator-side {
  top: 92px;
}
.config-step {
  border-color: var(--edge);
}
.config-step-title > span {
  border-color: var(--accent-border-soft);
  background: var(--intent-wash);
}
.voucher-region,
.voucher-product,
.region-choice,
.product-choice,
.package {
  border-color: transparent;
  background: var(--hairline);
}
.voucher-region:hover,
.voucher-product:hover,
.region-choice:hover,
.product-choice:hover,
.package:hover {
  border-color: var(--accent-border-soft);
}
[aria-pressed="true"].voucher-region,
[aria-pressed="true"].voucher-product,
[aria-pressed="true"].region-choice,
[aria-pressed="true"].product-choice,
[aria-pressed="true"].package {
  border-color: var(--accent-border-soft);
  background: var(--intent-wash);
}

/* Identity and repeat-use surfaces. */
.identity-hero {
  padding: 16px 0 8px;
  border: 0;
}
.identity-hero h1 {
  font-size: clamp(28px, 3vw, 38px);
}
.identity-entry-grid {
  width: min(100%, 500px);
}
.identity-panel,
.profile-overview,
.profile-section {
  border-color: var(--edge);
  background: var(--panel);
}
.identity-panel-head {
  min-height: 58px;
  border-bottom-color: var(--edge);
  background: transparent;
}
.identity-panel-head h2 {
  font-size: 22px;
}
.identity-panel-body {
  padding: 18px 20px 20px;
}
.identity-entry-copy {
  margin-bottom: 12px;
}
.login-method {
  min-height: 54px;
  border-color: transparent;
  background: var(--hairline);
}
.login-method:hover,
.login-method:focus-visible {
  border-color: var(--accent-border-soft);
  background: var(--intent-wash);
}
.profile-overview-main,
.profile-stat-grid,
.profile-progress-block,
.profile-section-head {
  border-color: var(--edge);
}
.profile-stat {
  background: var(--hairline);
}
.rank-grid {
  border-color: var(--edge);
  background: var(--panel);
}
.rank-card {
  border-color: var(--edge);
}

/* Footer is utility, never a competing section. */
.site-footer {
  margin-top: 20px;
  border-top-color: var(--edge);
  color: var(--ink-tertiary);
}
.footer-links a:hover,
.footer-legal a:hover {
  color: var(--ink);
}

@media (max-width: 1024px) {
  .service-launchpad {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .service-launchpad .launch-service:nth-child(n+8) {
    display: none;
  }
  .catalog-grid.game-logo-grid {
    grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  }
}

@media (max-width: 780px) {
  body {
    font-size: 14px;
  }
  .container,
  .store-hero .container,
  .payment-result-page .container {
    width: min(calc(100% - 20px), var(--max));
  }
  .page {
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
  }
  .header-main {
    height: 64px;
    grid-template-columns: auto minmax(0, 1fr) 44px;
    gap: 8px;
  }
  .site-search input {
    height: 44px;
    padding-right: 44px;
  }
  .site-search kbd {
    display: none;
  }
  .header-nav {
    display: none;
  }
  .store-hero {
    padding-top: 10px;
  }
  .service-launchpad {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    margin: 6px 0 8px;
    padding: 0;
  }
  .service-launchpad .launch-service,
  .service-launchpad .launch-all-services {
    min-height: 76px;
    height: 76px;
    grid-template-rows: 42px 26px;
    border-radius: 12px;
    padding: 4px 2px;
  }
  .service-launchpad .launch-service:nth-child(n+6):not(.launch-all-services) {
    display: none;
  }
  .service-launchpad .launch-all-services {
    display: grid;
  }
  .service-launchpad .launch-icon,
  .service-launchpad .launch-all-services .launch-icon {
    width: 42px;
    height: 42px;
  }
  .service-launchpad .launch-service b,
  .service-launchpad .launch-all-services b {
    font-size: 10.5px;
  }
  .home-order-layout.compact-action,
  .home-order-layout[data-home-panel="telegram"] {
    border-radius: 16px;
  }
  .home-order-layout.compact-action .home-order-card,
  .home-order-layout[data-home-panel="telegram"] .home-order-card {
    padding: 12px 12px 2px;
  }
  .home-order-layout.compact-action .home-order-fields {
    grid-template-columns: minmax(0, 1fr) minmax(102px, 34%);
    gap: 8px;
    padding-top: 0;
  }
  .home-order-layout.compact-action .home-order-fields .field label {
    min-height: 32px;
    margin-bottom: 3px;
  }
  .home-order-layout.compact-action .input-wrap input,
  .telegram-home-fields .stars-quantity-input {
    height: 50px;
  }
  .home-order-layout.compact-action .home-presets {
    grid-column: 1 / -1;
  }
  .home-order-layout.compact-action .quick-row {
    gap: 5px;
  }
  .home-order-layout.compact-action .quick {
    min-height: 44px;
    font-size: 11px;
  }
  .home-order-layout.compact-action .action-only,
  .home-order-layout[data-home-panel="telegram"] .action-only {
    padding: 8px 12px 12px;
  }
  .home-showcase {
    margin-top: 16px;
  }
  .home-showcase-head h2 {
    font-size: clamp(21px, 6vw, 25px);
  }
  .home-showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .home-showcase-card {
    min-height: 84px;
    grid-template-columns: 56px minmax(0, 1fr);
  }
  .home-showcase-art {
    min-height: 84px;
  }
  .home-showcase-copy {
    padding: 8px;
  }
  .home-showcase-copy em {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .telegram-page .section.compact,
  .games-page .section.compact,
  .services-page .section.compact {
    padding-top: 10px;
  }
  .telegram-product-switch {
    gap: 6px;
  }
  .telegram-product-card {
    min-height: 64px;
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 8px;
  }
  .telegram-product-card > img {
    width: 38px;
    height: 38px;
    padding: 7px;
  }
  .telegram-product-card b {
    font-size: 12px;
  }
  .telegram-product-card em {
    display: none;
  }
  .telegram-page .workspace-main {
    gap: 12px;
    padding: 12px;
  }
  .telegram-page .stars-presets {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
  }
  .premium-package-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .premium-package-grid .telegram-package {
    min-height: 70px;
    padding: 9px 7px;
  }

  .catalog-tools {
    grid-template-columns: minmax(0, 1fr);
  }
  .catalog-tools select {
    display: block;
    width: 100%;
  }
  .catalog-category-tabs {
    width: calc(100% + 20px);
    max-width: calc(100% + 20px);
    margin-inline: -10px;
    overflow-x: auto;
    padding: 0 24px 6px 10px;
    scroll-padding-inline: 10px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
  }
  .catalog-category-tabs::-webkit-scrollbar {
    display: none;
  }
  .catalog-category-tabs .filter {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  .catalog-grid.game-logo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 8px;
  }
  .services-page .voucher-service-switch {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px 8px;
  }
  .services-page .voucher-service-card {
    min-height: 96px;
  }
  .services-page .voucher-service-card > span {
    width: 60px;
    height: 60px;
  }
  .voucher-layout,
  .game-configurator {
    grid-template-columns: minmax(0, 1fr);
  }
  .voucher-summary,
  .game-configurator-side {
    position: static;
  }
  .voucher-main,
  .game-checkout-panel,
  .identity-panel,
  .profile-overview,
  .profile-section {
    border-radius: 16px;
  }

  .identity-hero {
    display: none;
  }
  .identity-grid {
    gap: 10px;
  }
  .identity-panel-head {
    min-height: 54px;
    justify-content: center;
    padding-inline: 16px;
  }
  .identity-panel-body {
    padding: 14px;
  }
  .identity-entry-copy {
    text-align: center;
  }
  .rank-board {
    padding-top: 12px;
  }
  .rank-board-head {
    justify-content: flex-start;
  }
  .rank-board-head h2 {
    font-size: 24px;
    text-align: left;
  }

  .site-footer {
    margin-top: 10px;
    padding-bottom: 8px;
  }
  .footer-main {
    min-height: 0;
    padding-block: 10px;
  }
}

@media (max-width: 360px) {
  .container,
  .store-hero .container,
  .payment-result-page .container {
    width: min(calc(100% - 16px), var(--max));
  }
  .home-order-layout.compact-action .home-order-fields {
    grid-template-columns: minmax(0, 1fr) 92px;
  }
  .home-order-layout.compact-action .quick {
    font-size: 10px;
  }
  .home-showcase-card {
    grid-template-columns: 50px minmax(0, 1fr);
  }
  .home-showcase-copy b {
    font-size: 11px;
  }
  .home-showcase-copy em {
    display: none;
  }
  .catalog-grid.game-logo-grid,
  .services-page .voucher-service-switch {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Phase 1 visual QA corrections — keep last in the cascade. */
@media (min-width: 1025px) {
  .service-launchpad {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }}

@media (max-width: 360px) {
  .catalog-category-tabs {
    width: calc(100% + 16px);
    max-width: calc(100% + 16px);
    margin-inline: -8px;
    padding-inline: 8px;
  }
}

/* Phase 1 spacing and reading flow. */
.home-showcase-head h2 {
  font-size: clamp(22px, 3vw, 34px);
}

.home-showcase-head > a {
  min-height: 44px;
  align-self: end;
  display: inline-flex;
  align-items: center;
}

input,
select,
textarea,
button,
[role="button"],
[role="tab"],
[role="option"] {
  scroll-margin-block: 90px;
}

@media (max-width: 780px) {
  body {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  .page {
    padding-bottom: 12px;
  }

  .home-showcase-head h2 {
    font-size: clamp(20px, 6vw, 24px);
    line-height: 1;
  }

  .site-footer {
    padding-bottom: 8px;
  }
}

/* Brandbook — the public source of truth for the SLARP visual system. */
.brandbook-page {
  --brandbook-rule: var(--accent-border-soft);
}

.brandbook-page .page {
  overflow: clip;
}

.brandbook-hero {
  position: relative;
  border-bottom: 1px solid var(--line);
  padding: clamp(56px, 8vw, 112px) 0 clamp(48px, 7vw, 88px);
}

.brandbook-hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 78% 32%, var(--accent-wash), transparent 28%),
    linear-gradient(115deg, transparent 0 59%, var(--hairline) 59% 60%, transparent 60%);
  content: "";
}

.brandbook-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
  align-items: center;
  gap: clamp(40px, 8vw, 112px);
}

.brandbook-kicker,
.brandbook-section-head > span,
.brandbook-component-label,
.brandbook-download span {
  color: var(--gold-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.brandbook-intro h1 {
  max-width: 780px;
  margin: 20px 0 0;
  font-size: clamp(42px, 6vw, 82px);
  line-height: .98;
}

.brandbook-intro h1 span {
  color: var(--gold-text);
}

.brandbook-intro > p {
  max-width: 610px;
  margin: 24px 0 0;
  color: var(--text-secondary);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.7;
}

.brandbook-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.brandbook-signal {
  position: relative;
  min-height: 390px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid var(--brandbook-rule);
  border-radius: var(--radius-panel);
  padding: clamp(24px, 4vw, 48px);
  background: var(--bg);
}

.brandbook-signal::before,
.brandbook-signal::after {
  position: absolute;
  border: 1px solid var(--accent-wash-strong);
  border-radius: 50%;
  content: "";
}

.brandbook-signal::before {
  width: 310px;
  height: 310px;
  top: -120px;
  right: -80px;
}

.brandbook-signal::after {
  width: 160px;
  height: 160px;
  top: -45px;
  right: -5px;
}

.brandbook-lockup {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 18px;
}

.brandbook-lockup img {
  width: clamp(58px, 6vw, 88px);
  height: auto;
}

.brandbook-lockup strong {
  font: 700 clamp(30px, 4vw, 52px)/1 var(--display);
}

.brandbook-lockup.large img {
  width: clamp(68px, 8vw, 108px);
}

.brandbook-lockup.large strong {
  font-size: clamp(36px, 6vw, 74px);
}

.brandbook-signal-line {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 2fr 4fr 2fr 1fr;
  align-items: center;
  gap: 6px;
}

.brandbook-signal-line::after {
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--accent-wash-strong);
  content: "";
}

.brandbook-signal-line i {
  z-index: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--gold-fill);
}

.brandbook-signal-line i:nth-child(2),
.brandbook-signal-line i:nth-child(4) {
  opacity: .62;
}

.brandbook-signal-line i:first-child,
.brandbook-signal-line i:last-child {
  opacity: .28;
}

.brandbook-signal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 700;
}

.brandbook-index {
  position: sticky;
  top: 126px;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgba(21, 22, 19, .88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.brandbook-index .container {
  display: flex;
  overflow-x: auto;
  gap: 4px;
  padding-block: 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.brandbook-index .container::-webkit-scrollbar {
  display: none;
}

.brandbook-index a {
  min-height: 44px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  border-radius: var(--radius-input);
  padding: 0 14px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  scroll-snap-align: start;
}

.brandbook-index a:hover {
  background: var(--accent-wash);
  color: var(--text-primary);
}

.brandbook-section {
  padding: clamp(64px, 8vw, 112px) 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 190px;
}

.brandbook-section-head {
  display: grid;
  grid-template-columns: minmax(240px, .72fr) minmax(280px, 1fr);
  gap: 12px clamp(32px, 6vw, 96px);
  margin-bottom: clamp(32px, 5vw, 64px);
}

.brandbook-section-head > span {
  grid-column: 1 / -1;
}

.brandbook-section-head h2 {
  margin: 0;
  font-size: clamp(30px, 4.5vw, 58px);
  line-height: 1;
}

.brandbook-section-head p {
  max-width: 620px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.7;
}

.brandbook-principles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--line);
}

.brandbook-principles article {
  min-height: 190px;
  padding: 28px 24px;
  border-right: 1px solid var(--line);
}

.brandbook-principles article:last-child {
  border-right: 0;
}

.brandbook-principles b {
  font: 600 20px/1.2 var(--display);
}

.brandbook-principles p {
  margin: 22px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.brandbook-do-dont {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.brandbook-rule {
  border-radius: var(--radius-card);
  padding: 22px;
  background: var(--surface);
}

.brandbook-rule > span {
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.brandbook-rule.good > span {
  color: var(--color-success);
}

.brandbook-rule.bad > span {
  color: var(--color-error);
}

.brandbook-rule strong {
  display: block;
  margin-top: 12px;
  font-size: 17px;
}

.brandbook-rule p {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.brandbook-logo-grid {
  display: grid;
  grid-template-columns: 1.55fr .75fr 1fr;
  gap: 12px;
}

.brandbook-logo-grid figure {
  min-height: 310px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-panel);
  padding: 28px;
  background: var(--surface);
}

.brandbook-logo-stage.primary {
  align-items: center;
  justify-content: center;
  background: #0c0d0b;
}

.brandbook-logo-stage.mark {
  align-items: center;
  justify-content: center;
  background: var(--gold-fill);
}

.brandbook-logo-stage.mark > img {
  width: 116px;
  filter: brightness(0);
}

.brandbook-logo-grid figcaption {
  width: 100%;
  margin-top: 24px;
  color: var(--text-tertiary);
  font-size: 12px;
}

.brandbook-logo-stage.primary figcaption {
  position: static;
  align-self: center;
  width: 100%;
  margin-top: 32px;
  padding-inline: 24px;
  text-align: center;
}

.brandbook-logo-stage.mark figcaption {
  color: rgba(37, 32, 21, .68);
}

.brandbook-clearspace {
  position: relative;
}

.brandbook-clearspace-mark {
  position: relative;
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
  align-self: center;
  border: 1px dashed var(--line-strong);
}

.brandbook-clearspace-mark img {
  width: 72px;
}

.brandbook-clearspace-mark span {
  position: absolute;
  top: 5px;
  left: 8px;
  color: var(--gold-text);
  font-size: 12px;
}

.brandbook-clearspace-mark i {
  position: absolute;
  inset: 25%;
  border: 1px solid var(--accent-wash-strong);
}

.brandbook-usage-list,
.brandbook-type-rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.brandbook-usage-list p,
.brandbook-type-rules p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.brandbook-usage-list b {
  color: var(--text-primary);
}

.brandbook-palette {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  overflow: hidden;
  border-radius: var(--radius-panel);
}

.brandbook-palette article {
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
}

.brandbook-palette span {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.brandbook-palette strong {
  margin-top: 5px;
  font-size: 13px;
}

.brandbook-palette code {
  margin-top: 16px;
  font: 600 12px/1 var(--body);
  opacity: .68;
}

.brandbook-palette .ink { background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.brandbook-palette .panel { background: var(--surface); color: var(--text); }
.brandbook-palette .paper { background: var(--text); color: var(--gold-ink); }
.brandbook-palette .gold { background: var(--gold-fill); color: var(--gold-ink); }
.brandbook-palette .blue { background: #58a8ee; color: #102433; }
.brandbook-palette .green { background: #9fd39b; color: #183119; }
.brandbook-palette .red { background: #e49a8f; color: #3a1714; }

.brandbook-color-note {
  display: grid;
  grid-template-columns: minmax(160px, .3fr) minmax(0, 1fr);
  gap: 24px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.brandbook-color-note p {
  max-width: 720px;
  margin: 0;
  color: var(--text-secondary);
}

.brandbook-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
}

.brandbook-display-sample,
.brandbook-body-sample {
  min-height: 400px;
  padding: clamp(24px, 4vw, 48px);
}

.brandbook-display-sample {
  border-right: 1px solid var(--line);
  background: var(--bg);
}

.brandbook-display-sample > span,
.brandbook-body-sample > span {
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 700;
}

.brandbook-display-sample strong {
  display: block;
  margin-top: 74px;
  font: 700 clamp(38px, 5vw, 72px)/.98 var(--display);
}

.brandbook-display-sample p,
.brandbook-body-sample p {
  margin: 24px 0 0;
  color: var(--text-secondary);
}

.brandbook-body-sample strong {
  display: block;
  margin-top: 74px;
  font-size: clamp(28px, 3.8vw, 50px);
  line-height: 1.15;
}

.brandbook-type-scale {
  display: flex;
  align-items: end;
  gap: 12px;
  margin-top: 42px;
}

.brandbook-type-scale i {
  display: grid;
  width: 54px;
  place-items: end center;
  border-bottom: 2px solid var(--gold);
  color: var(--text-tertiary);
  font-size: 12px;
  font-style: normal;
}

.brandbook-type-scale i:nth-child(1) { height: 24px; }
.brandbook-type-scale i:nth-child(2) { height: 34px; }
.brandbook-type-scale i:nth-child(3) { height: 46px; }
.brandbook-type-scale i:nth-child(4) { height: 70px; }
.brandbook-type-scale i:nth-child(5) { height: 106px; }

.brandbook-ui-stage {
  display: grid;
  grid-template-columns: 1fr 1.25fr .85fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.brandbook-component {
  min-width: 0;
  padding: 28px;
  border-right: 1px solid var(--line);
}

.brandbook-component:last-child {
  border-right: 0;
}

.brandbook-component-label {
  display: block;
  margin-bottom: 24px;
}

.brandbook-button-row {
  display: grid;
  gap: 8px;
}

.brandbook-field {
  display: grid;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.brandbook-field .input-wrap input {
  width: 100%;
}

.brandbook-field .input-wrap b {
  position: absolute;
  right: 16px;
  top: 50%;
  color: var(--gold-text);
  transform: translateY(-50%);
}

.brandbook-choice-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}

.brandbook-choice-row button {
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.brandbook-choice-row button.selected {
  border-color: var(--gold);
  background: var(--accent-wash);
  color: var(--gold-text);
  box-shadow: inset 0 0 0 1px var(--accent-wash-strong);
}

.brandbook-status-row {
  display: grid;
  gap: 8px;
}

.brandbook-status-row span {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-input);
  padding: 0 12px;
  background: var(--hairline);
  font-size: 12px;
  font-weight: 800;
}

.brandbook-status-row span::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.brandbook-status-row .ready { color: var(--color-success); }
.brandbook-status-row .pending { color: var(--gold-text); }
.brandbook-status-row .error { color: var(--color-error); }

.brandbook-measure {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  margin-top: 32px;
}

.brandbook-measure span {
  min-width: 0;
  display: grid;
  place-items: end center;
  border-bottom: 3px solid var(--gold);
  color: var(--text-tertiary);
  font-size: 12px;
}

.brandbook-measure span:nth-child(1) { height: 20px; }
.brandbook-measure span:nth-child(2) { height: 28px; }
.brandbook-measure span:nth-child(3) { height: 36px; }
.brandbook-measure span:nth-child(4) { height: 44px; }
.brandbook-measure span:nth-child(5) { height: 52px; }
.brandbook-measure span:nth-child(6) { height: 60px; }
.brandbook-measure span:nth-child(7) { height: 76px; }
.brandbook-measure span:nth-child(8) { height: 92px; }

.brandbook-caption {
  margin: 14px 0 0;
  color: var(--text-tertiary);
  font-size: 12px;
}

.brandbook-imagery-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, .75fr);
  gap: 12px;
}

.brandbook-imagery-grid figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.brandbook-banner-sample img {
  width: 100%;
  aspect-ratio: 5 / 1;
  object-fit: cover;
}

.brandbook-imagery-grid figcaption {
  padding: 16px 20px;
  color: var(--text-secondary);
  font-size: 12px;
}

.brandbook-icon-sample {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.brandbook-icon-sample > div {
  display: grid;
  grid-template-columns: repeat(2, 72px);
  justify-content: center;
  gap: 18px;
  padding: 40px 20px 20px;
}

.brandbook-icon-sample img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 18px;
  padding: 12px;
  background: var(--surface-2);
}

.brandbook-icon-sample img:last-child {
  padding: 0;
}

.brandbook-copy-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--line);
}

.brandbook-copy-grid article {
  min-height: 190px;
  padding: 24px;
  border-right: 1px solid var(--line);
}

.brandbook-copy-grid article:last-child {
  border-right: 0;
}

.brandbook-copy-grid span {
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.brandbook-copy-grid b {
  display: block;
  margin-top: 22px;
  font-size: 16px;
}

.brandbook-copy-grid p {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.brandbook-language-rule {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 24px;
  color: var(--text-secondary);
  font-size: 13px;
}

.brandbook-language-rule strong {
  color: var(--color-error);
}

.brandbook-access-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.brandbook-access-grid article {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: var(--radius-card);
  padding: 24px;
  background: var(--surface);
}

.brandbook-access-grid strong {
  color: var(--gold-text);
  font: 600 clamp(28px, 3.5vw, 46px)/1 var(--display);
}

.brandbook-access-grid p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.brandbook-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 32px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.brandbook-checklist li {
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding-left: 28px;
  color: var(--text-secondary);
  font-size: 14px;
}

.brandbook-checklist li::before {
  position: absolute;
  left: 0;
  width: 14px;
  height: 14px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  content: "";
}

.brandbook-download {
  padding: clamp(56px, 7vw, 88px) 0;
}

.brandbook-download .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
  border-radius: var(--radius-panel);
  padding: clamp(28px, 5vw, 56px);
  background: var(--gold-fill);
  color: var(--gold-ink);
}

.brandbook-download h2 {
  max-width: 760px;
  margin: 16px 0 0;
  font-size: clamp(28px, 4vw, 48px);
}

.brandbook-download p {
  max-width: 680px;
  margin: 16px 0 0;
  color: rgba(37, 32, 21, .72);
}

.brandbook-download span {
  color: rgba(37, 32, 21, .66);
}

.brandbook-download .brandbook-actions {
  justify-content: flex-end;
  margin-top: 0;
}

.brandbook-download .button {
  background: var(--gold-ink);
  color: var(--gold-text);
}

.brandbook-download .button.secondary {
  border-color: rgba(37, 32, 21, .3);
  background: transparent;
  color: var(--gold-ink);
}

@media (max-width: 1024px) {
  .brandbook-index {
    top: 72px;
  }

  .brandbook-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .brandbook-signal {
    min-height: 320px;
  }

  .brandbook-palette {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .brandbook-palette article {
    min-height: 190px;
  }

  .brandbook-ui-stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brandbook-component:last-child {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
  }

  .brandbook-status-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .brandbook-imagery-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 780px) {
  .brandbook-hero {
    padding: 40px 0 44px;
  }

  .brandbook-intro h1 {
    font-size: clamp(34px, 11vw, 52px);
  }

  .brandbook-intro > p {
    margin-top: 18px;
    font-size: 15px;
  }

  .brandbook-signal {
    min-height: 250px;
    padding: 24px;
  }

  .brandbook-signal::before {
    width: 220px;
    height: 220px;
  }

  .brandbook-signal::after {
    width: 110px;
    height: 110px;
  }

  .brandbook-lockup {
    gap: 12px;
  }

  .brandbook-index {
    top: 64px;
  }

  .brandbook-index .container {
    width: 100%;
    padding-inline: 12px 28px;
    scroll-padding-inline: 12px;
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
  }

  .brandbook-section {
    padding: 56px 0;
    scroll-margin-top: 128px;
  }

  .brandbook-section-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 28px;
  }

  .brandbook-section-head h2 {
    font-size: clamp(28px, 9vw, 40px);
  }

  .brandbook-section-head p {
    margin-top: 6px;
    font-size: 14px;
  }

  .brandbook-principles,
  .brandbook-copy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brandbook-principles article,
  .brandbook-copy-grid article {
    min-height: 170px;
    padding: 20px 16px;
    border-bottom: 1px solid var(--line);
  }

  .brandbook-principles article:nth-child(2n),
  .brandbook-copy-grid article:nth-child(2n) {
    border-right: 0;
  }

  .brandbook-principles article:nth-last-child(-n+2),
  .brandbook-copy-grid article:nth-last-child(-n+2) {
    border-bottom: 0;
  }

  .brandbook-do-dont,
  .brandbook-logo-grid,
  .brandbook-type-grid,
  .brandbook-ui-stage,
  .brandbook-access-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .brandbook-logo-grid figure {
    min-height: 250px;
  }

  .brandbook-logo-stage.primary figcaption {
    position: static;
    align-self: center;
    margin-top: 32px;
    text-align: center;
  }

  .brandbook-usage-list,
  .brandbook-type-rules,
  .brandbook-checklist {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .brandbook-palette {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brandbook-palette article {
    min-height: 150px;
  }

  .brandbook-palette article:last-child {
    grid-column: 1 / -1;
  }

  .brandbook-color-note {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .brandbook-display-sample,
  .brandbook-body-sample {
    min-height: 320px;
    padding: 24px;
  }

  .brandbook-display-sample {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .brandbook-display-sample strong,
  .brandbook-body-sample strong {
    margin-top: 48px;
  }

  .brandbook-component {
    padding: 22px 18px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .brandbook-component:last-child {
    grid-column: auto;
    border-top: 0;
    border-bottom: 0;
  }

  .brandbook-status-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .brandbook-measure {
    gap: 4px;
  }

  .brandbook-imagery-grid figcaption {
    padding: 14px 16px;
  }

  .brandbook-banner-sample img {
    aspect-ratio: 2.2 / 1;
  }

  .brandbook-access-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brandbook-access-grid article {
    min-height: 150px;
    padding: 18px;
  }

  .brandbook-download .container {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .brandbook-download .brandbook-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 380px) {
  .brandbook-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .brandbook-principles,
  .brandbook-copy-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .brandbook-principles article,
  .brandbook-copy-grid article,
  .brandbook-principles article:nth-last-child(-n+2),
  .brandbook-copy-grid article:nth-last-child(-n+2) {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .brandbook-principles article:last-child,
  .brandbook-copy-grid article:last-child {
    border-bottom: 0;
  }

  .brandbook-access-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .brandbook-access-grid article {
    min-height: 130px;
  }
}

/* 2026-07-24 — final unified storefront layer.
   One expressive promo, one quiet purchase surface, one interaction grammar. */
:root {
  --ui-radius-control: var(--radius-input);
  --ui-radius-card: var(--radius-card);
}

html,
body {
  background-color: var(--ui-bg);
}

.page,
.store-hero,
.section,
.section.compact {
  min-width: 0;
}

.service-launchpad {
  align-items: stretch;
  border: 0;
  background: transparent;
}

.service-launchpad .launch-service,
.service-launchpad .launch-all-services {
  position: relative;
  border-radius: 14px;
  background: transparent;
}

.service-launchpad .launch-service.selected {
  background: var(--accent-wash);
  box-shadow: none;
}

.service-launchpad .launch-service.selected::after {
  position: absolute;
  right: 26%;
  bottom: 0;
  left: 26%;
  height: 2px;
  border-radius: 999px;
  background: var(--ui-gold);
  content: "";
}

.service-launchpad .launch-icon,
.service-launchpad .launch-all-services .launch-icon,
.service-launchpad .launch-service.selected .launch-icon {
  border: 0;
  background: var(--surface-2);
}

.home-order-layout.compact-action,
.home-order-layout[data-home-panel="telegram"],
.telegram-page .telegram-workspace,
.voucher-main,
.game-checkout-panel,
.identity-panel,
.profile-overview,
.profile-section {
  border-color: var(--ui-line);
  border-radius: var(--ui-radius-panel);
  background: var(--ui-surface);
}

.home-order-layout.compact-action .home-order-card,
.home-order-layout[data-home-panel="telegram"] .home-order-card,
.telegram-page .workspace-main {
  background: transparent;
}

.input-wrap,
.stars-quantity-input,
.choice-search,
.catalog-search,
.catalog-tools select {
  border-color: transparent;
  border-radius: var(--ui-radius-control);
  background: var(--ui-control);
}

.home-order-layout.compact-action .input-wrap input,
.telegram-home-fields .input-wrap input,
.telegram-page .input-wrap input,
.telegram-home-fields .stars-quantity-input,
.telegram-page .stars-quantity-input {
  height: 52px;
  min-height: 52px;
}

.telegram-home-fields .stars-quantity-input,
.telegram-page .stars-quantity-input {
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 8px;
  padding: 5px 8px 5px 14px;
}

.telegram-home-fields .stars-quantity-input input,
.telegram-page .stars-quantity-input input {
  height: 42px;
  min-height: 42px;
  font-size: 24px;
  line-height: 1;
}

.stars-quantity-input .stars-unit {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--accent-wash);
}

.stars-quantity-input .stars-unit img {
  width: 22px;
  height: 22px;
}

.telegram-home-fields .stars-presets,
.telegram-page .stars-presets {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.telegram-home-fields .stars-presets button,
.telegram-page .stars-presets button,
.home-order-layout.compact-action .quick {
  min-width: 0;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--hairline);
}

.telegram-product-switch {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 0;
  border-radius: 0;
  background: transparent;
}

.telegram-product-card {
  border: 0;
  background: var(--ui-surface);
}

.telegram-product-card[aria-selected="true"] {
  border: 0;
  background: var(--accent-wash);
  box-shadow: inset 0 -2px var(--ui-gold);
}

.telegram-product-card > img {
  background: var(--surface-2);
}

.premium-package-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.premium-package-grid .telegram-package {
  min-height: 68px;
  border: 1px solid transparent;
  border-radius: 12px;
}

.catalog-tools,
.catalog-category-tabs,
.voucher-service-switch {
  min-width: 0;
}

.catalog-grid.game-logo-grid,
.services-page .voucher-service-switch {
  align-items: start;
}

.game-logo-card > span,
.voucher-service-card > span {
  border: 0;
  background: var(--surface-2);
}

.site-footer {
  border-top-color: var(--ui-line);
  background: transparent;
}

/* Public brand page: short, useful and intentionally non-technical. */
.brandbook-page .page,
.brand-page {
  padding-top: 0;
}

.brand-hero {
  padding: clamp(52px, 8vw, 104px) 0 48px;
  border-bottom: 1px solid var(--ui-line);
  background:
    radial-gradient(circle at 75% 24%, var(--accent-wash-strong), transparent 34%),
    linear-gradient(180deg, var(--surface-2), var(--ui-bg));
}

.brand-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  align-items: center;
  gap: 48px;
}

.brand-kicker,
.brand-section-head > span {
  color: var(--gold-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.brand-hero h1 {
  margin: 14px 0 16px;
  font-size: clamp(38px, 6vw, 76px);
  line-height: .98;
}

.brand-hero p {
  margin: 0;
  color: var(--ui-muted);
  font-size: clamp(15px, 1.5vw, 19px);
}

.brand-lockup {
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border: 1px solid var(--ui-line);
  border-radius: 24px;
  background: var(--hairline);
}

.brand-lockup img {
  width: 104px;
}

.brand-lockup strong {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 48px);
}

.brand-section {
  padding: 56px 0;
  border-bottom: 1px solid var(--ui-line);
}

.brand-section-head {
  margin-bottom: 22px;
}

.brand-section-head h2 {
  margin: 7px 0 0;
  font-size: clamp(26px, 3.5vw, 40px);
}

.brand-assets {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 12px;
}

.brand-asset {
  min-width: 0;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-panel);
  padding: 16px;
  background: var(--ui-surface);
}

.brand-asset > img {
  width: 82px;
  height: 62px;
  object-fit: contain;
  border-radius: 12px;
}

.brand-asset-og > img {
  background: #090b09;
}

.brand-asset div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.brand-asset small {
  color: var(--ui-muted);
}

.brand-colors {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.brand-colors article {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 4px 12px;
  border-radius: var(--ui-radius-card);
  padding: 12px;
  background: var(--ui-surface);
}

.brand-colors i {
  width: 44px;
  height: 44px;
  grid-row: 1 / 3;
  border: 1px solid var(--ui-line);
  border-radius: 50%;
  background: var(--swatch);
}

.brand-colors code {
  color: var(--ui-muted);
  font-size: 11px;
}

.brand-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.brand-guide-grid > div {
  border-radius: var(--ui-radius-panel);
  padding: 24px;
  background: var(--ui-surface);
}

.brand-type {
  display: grid;
  gap: 5px;
}

.brand-type strong {
  margin-top: 10px;
  font-family: var(--display);
  font-size: 26px;
}

.brand-type .body-font {
  font-family: var(--body);
}

.brand-type p {
  margin: 0;
  color: var(--ui-muted);
}

.brand-rules {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brand-rules li {
  display: grid;
  gap: 3px;
  padding: 13px 0;
  border-top: 1px solid var(--ui-line);
}

.brand-rules span {
  color: var(--ui-muted);
}

@media (max-width: 780px) {
  .header-nav {
    position: fixed;
    inset: 0;
    z-index: 190;
    display: block !important;
    visibility: hidden;
    overflow: hidden;
    pointer-events: none;
    background: rgba(3, 4, 3, .62);
    opacity: 0;
    transition: opacity .18s ease, visibility .18s ease;
  }

  .header-nav.open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
  }

  .mobile-menu-panel {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(88vw, 390px);
    height: 100dvh;
    display: flex !important;
    flex-direction: column;
    overflow-y: auto;
    transform: translateX(100%);
    border-left: 1px solid var(--ui-line);
    background: var(--surface-2);
    padding: max(14px, env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom));
    transition: transform .22s cubic-bezier(.2, .75, .25, 1);
  }

  .header-nav.open .mobile-menu-panel {
    transform: translateX(0);
  }

  .menu-button {
    display: grid !important;
  }

  .mobile-menu-head .brand {
    width: auto;
    justify-content: flex-start;
  }

  .service-launchpad {
    margin-block: 4px 8px;
  }

  .service-launchpad .launch-service,
  .service-launchpad .launch-all-services {
    min-height: 72px;
    height: 72px;
  }

  .home-order-layout.compact-action .home-order-card,
  .home-order-layout[data-home-panel="telegram"] .home-order-card,
  .telegram-page .workspace-main {
    padding: 12px 12px 2px;
  }

  .home-order-layout.compact-action .action-only,
  .home-order-layout[data-home-panel="telegram"] .action-only,
  .telegram-page .telegram-summary {
    padding: 8px 12px 12px;
  }

  .telegram-product-switch {
    margin-bottom: 8px;
  }

  .telegram-product-card {
    min-height: 58px;
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 7px 9px;
  }

  .telegram-product-card > img {
    width: 36px;
    height: 36px;
  }

  .telegram-page .stars-quantity-input,
  .telegram-home-fields .stars-quantity-input {
    height: 50px;
    min-height: 50px;
  }

  .telegram-page .stars-quantity-input input,
  .telegram-home-fields .stars-quantity-input input {
    height: 44px;
    min-height: 44px;
    font-size: 23px;
  }

  .telegram-page .stars-presets,
  .telegram-home-fields .stars-presets {
    gap: 5px;
  }

  .premium-package-grid .telegram-package {
    min-height: 64px;
    padding: 9px;
  }

  .brand-hero {
    padding: 36px 0 28px;
  }

  .brand-hero-inner,
  .brand-guide-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .brand-lockup {
    min-height: 150px;
  }

  .brand-lockup img {
    width: 72px;
  }

  .brand-section {
    padding: 36px 0;
  }

  .brand-assets {
    grid-template-columns: minmax(0, 1fr);
  }

  .brand-asset {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .brand-asset > img {
    width: 64px;
    height: 54px;
  }

  .brand-asset .button {
    grid-column: 1 / -1;
  }

  .brand-colors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brand-guide-grid > div {
    padding: 18px;
  }
}

@media (max-width: 360px) {
  .telegram-home-fields .stars-presets,
  .telegram-page .stars-presets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .brand-colors {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* One restrained scrollbar language across the public store. */
html {
  scrollbar-color: var(--accent-border-soft) var(--hairline);
  scrollbar-width: thin;
}

* {
  scrollbar-color: var(--accent-border-soft) var(--hairline);
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  border-radius: 999px;
  background: var(--hairline);
}

*::-webkit-scrollbar-thumb {
  min-height: 42px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--accent-border-soft);
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent-border-soft);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

.games-page .game-configurator-main,
.services-page .voucher-main {
  scrollbar-gutter: stable;
}

@media (min-width: 781px) {
  /* Product choice is the task. Large catalogue art stays behind the dialog. */
  .games-page .game-configurator {
    width: min(780px, 100%);
    grid-template-columns: minmax(0, 1fr);
  }

  .games-page .game-configurator-visual {
    display: none;
  }

  .games-page .game-configurator-main {
    width: 100%;
  }
}

[data-theme="light"] body,
[data-theme="light"] .page,
[data-theme="light"] .store-hero,
[data-theme="light"] .section {
  color: var(--ui-text);
}

[data-theme="light"] .home-order-layout.compact-action,
[data-theme="light"] .home-order-layout[data-home-panel="telegram"],
[data-theme="light"] .telegram-page .telegram-workspace,
[data-theme="light"] .voucher-main,
[data-theme="light"] .game-checkout-panel,
[data-theme="light"] .identity-panel,
[data-theme="light"] .profile-overview,
[data-theme="light"] .profile-section,
[data-theme="light"] .brand-asset,
[data-theme="light"] .brand-colors article,
[data-theme="light"] .brand-guide-grid > div {
  background: var(--ui-surface);
}

[data-theme="light"] .service-launchpad .launch-icon,
[data-theme="light"] .service-launchpad .launch-all-services .launch-icon,
[data-theme="light"] .service-launchpad .launch-service.selected .launch-icon,
[data-theme="light"] .telegram-product-card > img,
[data-theme="light"] .game-logo-card > span,
[data-theme="light"] .voucher-service-card > span {
  background: var(--surface-2);
}

[data-theme="light"] .input-wrap,
[data-theme="light"] .stars-quantity-input,
[data-theme="light"] .choice-search,
[data-theme="light"] .catalog-search,
[data-theme="light"] .catalog-tools select {
  background: var(--ui-control);
}

[data-theme="light"] .telegram-home-fields .stars-presets button,
[data-theme="light"] .telegram-page .stars-presets button,
[data-theme="light"] .home-order-layout.compact-action .quick {
  background: rgba(25, 26, 23, .045);
}

[data-theme="light"] .mobile-menu-panel {
  background: var(--surface);
}

[data-theme="light"] .icon-button {
  border-color: var(--edge);
  background: var(--surface);
  color: var(--ink);
}

[data-theme="light"] .site-search input {
  border-color: var(--edge);
  background: var(--surface);
  color: var(--ink);
}

[data-theme="light"] .service-launchpad .launch-service b,
[data-theme="light"] .service-launchpad .launch-all-services b,
[data-theme="light"] .field label,
[data-theme="light"] .home-showcase-copy b {
  color: var(--ink-secondary);
  opacity: 1;
}

[data-theme="light"] .service-launchpad .launch-service.selected b,
[data-theme="light"] .home-showcase-copy small {
  color: var(--gold-text);
}

[data-theme="light"] .home-showcase-copy em,
[data-theme="light"] .helper,
[data-theme="light"] .stars-range {
  color: var(--ink-tertiary);
  opacity: 1;
}

[data-theme="light"] .brand-hero {
  background:
    radial-gradient(circle at 75% 24%, var(--intent-wash), transparent 34%),
    linear-gradient(180deg, var(--surface), var(--ui-bg));
}

/* Motion system: one restrained spring curve for navigation and sheets. */
:root {
  --motion-fast: var(--t-press);
  --motion-panel: var(--t-sheet);
  --motion-spring: var(--spring);
}

.games-page .game-checkout-panel:not([hidden]) .game-configurator,
.services-page .voucher-layout:not([hidden]) .voucher-main,
.services-page .voucher-layout:not([hidden]) .voucher-summary {
  animation: slarp-panel-pop var(--motion-panel) var(--motion-spring) both;
}

.mobile-menu-panel {
  transition:
    transform var(--motion-panel) var(--motion-spring),
    opacity var(--motion-fast) ease,
    visibility var(--motion-fast) linear;
}

.mobile-dock {
  isolation: isolate;
}

.mobile-dock-indicator {
  position: absolute;
  z-index: 0;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: var(--dock-w, 20%);
  transform: translate3d(var(--dock-x, 0), 0, 0);
  border: 1px solid var(--accent-border-soft);
  border-radius: 14px;
  background:
    linear-gradient(180deg, var(--accent-wash-strong), var(--accent-wash)),
    var(--hairline);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
  transition:
    transform 280ms var(--motion-spring),
    width 280ms var(--motion-spring),
    border-radius 280ms var(--motion-spring);
  pointer-events: none;
}

.mobile-dock-indicator.no-motion {
  transition: none;
}

.mobile-dock a {
  position: relative;
  z-index: 1;
}

/* Заливка выбранного раздела в доке. Тут стояло `background: transparent
   !important`, потому что выбор рисовала отдельная бегущая рамка. Рамок
   больше нет: выбор показывается залитым боксом, как плитки на главной. */
.mobile-dock a.active { background: var(--accent-wash) !important; box-shadow: none !important; }

@keyframes slarp-panel-pop {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (max-width: 780px) {
  .games-page .game-checkout-panel:not([hidden]) .game-configurator,
  .services-page .voucher-layout:not([hidden]) .voucher-main,
  .services-page .voucher-layout:not([hidden]) .voucher-summary {
    animation-name: slarp-sheet-rise;
  }

  @keyframes slarp-sheet-rise {
    from {
      opacity: .72;
      transform: translate3d(0, 24px, 0) scale(.99);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .games-page .game-checkout-panel:not([hidden]) .game-configurator,
  .services-page .voucher-layout:not([hidden]) .voucher-main,
  .services-page .voucher-layout:not([hidden]) .voucher-summary {
    animation: none !important;
  }

  .mobile-menu-panel,
  .mobile-dock-indicator {
    transition: none !important;
  }
}

/* Mobile service checkout: one calm action surface instead of a dark nested footer. */
@media (max-width: 780px) {
  .services-page .voucher-summary {
    grid-template-columns: minmax(88px, .55fr) minmax(160px, 1fr);
    gap: 12px;
    border: 0;
    border-radius: 0;
    background:
      linear-gradient(180deg, var(--accent-wash), transparent 72%),
      var(--ui-surface);
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 26px rgba(0, 0, 0, .12);
  }

  .services-page .voucher-summary .order-lines {
    min-width: 0;
  }

  .services-page .voucher-summary .order-line:last-child {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 2px;
    border: 0;
    background: transparent;
  }

  .services-page .voucher-summary .order-line:last-child span {
    color: var(--ui-muted);
    font-size: 12px;
    font-weight: 650;
  }

  .services-page .voucher-summary .order-line:last-child b {
    max-width: none;
    color: var(--ui-text);
    font-size: clamp(18px, 5vw, 22px);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
  }

  .services-page .voucher-summary .button {
    min-height: 52px;
    border: 0;
    border-radius: 14px;
    box-shadow: none;
  }
}

[data-theme="light"] .services-page .voucher-summary {
  background:
    linear-gradient(180deg, rgba(140, 108, 24, .055), transparent 72%),
    var(--ui-surface);
}

/* Final catalogue rhythm: services use the same large, legible tile language as games. */
.services-page .voucher-service-switch {
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  align-items: start;
  gap: 20px 14px;
}

.services-page .voucher-service-card,
.services-page .voucher-family-toggle {
  width: 100%;
  min-width: 0;
  min-height: 122px;
  display: grid;
  grid-template-rows: 86px minmax(32px, auto);
  place-items: center;
  align-content: start;
  gap: 9px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--ui-text);
  padding: 5px;
  cursor: pointer;
}

.services-page .voucher-service-card > span,
.services-page .voucher-family-toggle > span:first-child {
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--accent-wash);
  border-radius: 22px;
  background: var(--surface-2);
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}

.services-page .voucher-service-card > span img,
.services-page .voucher-family-toggle > span:first-child img {
  width: 100%;
  height: 100%;
  padding: 18%;
  object-fit: contain;
}

.services-page .voucher-service-card > b,
.services-page .voucher-family-toggle > span:nth-child(2) {
  width: 100%;
  min-width: 0;
  color: var(--ui-text);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
}

.services-page .voucher-family-toggle > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.services-page .voucher-family-toggle small {
  color: var(--ui-muted);
  font-size: 10px;
  font-weight: 650;
}

.services-page .voucher-service-card:hover > span,
.services-page .voucher-service-card:focus-visible > span,
.services-page .voucher-family-toggle:hover > span:first-child,
.services-page .voucher-family-toggle:focus-visible > span:first-child,
.services-page .voucher-family-toggle[aria-expanded="true"] > span:first-child {
  transform: translateY(-2px);
  border-color: var(--accent-border-soft);
  background: var(--accent-wash);
}

.services-page .voucher-service-card:focus-visible,
.services-page .voucher-family-toggle:focus-visible {
  outline: 2px solid var(--ui-gold);
  outline-offset: 2px;
}

.services-page .voucher-family-toggle[aria-expanded="true"] > span:nth-child(2) {
  color: var(--gold-text);
}

.services-page .voucher-service-family {
  display: contents;
}

.services-page .voucher-family-options {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  justify-content: start;
  gap: 8px;
  margin: -6px 0 4px;
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  background: var(--ui-surface);
  padding: 10px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .16);
}

.services-page .voucher-family-options[hidden] {
  display: none;
}

.services-page .voucher-family-option {
  min-height: 58px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: 1fr;
  align-items: center;
  justify-items: start;
  gap: 10px;
  border: 0;
  border-radius: 12px;
  background: var(--ui-control);
  color: var(--ui-text);
  padding: 8px 10px;
  text-align: left;
}

.services-page .voucher-family-option > span {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 11px;
  background: var(--hairline);
}

.services-page .voucher-family-option > span img {
  padding: 18%;
}

.services-page .voucher-family-option > b {
  min-height: 0;
  display: block;
  font-size: 13px;
  line-height: 1.25;
  text-align: left;
}

.services-page .voucher-family-option:hover,
.services-page .voucher-family-option:focus-visible {
  background: var(--accent-wash);
}

/* Steam keeps its official mark, with a calmer navy treatment in the light theme. */

/* Stable section rhythm shared by store, catalogue, profile and brand pages. */
.store-hero,
.games-page .section.compact,
.services-page .section.compact,
.telegram-page .section.compact,
.profile-page .section.compact,
.brand-page .section.compact {
  padding-top: clamp(14px, 2vw, 24px);
}

.site-footer {
  margin-top: clamp(28px, 5vw, 56px);
}

@media (max-width: 780px) {
  .services-page .voucher-service-switch {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 8px;
  }

  .services-page .voucher-service-card,
  .services-page .voucher-family-toggle {
    min-height: 114px;
    grid-template-rows: 76px minmax(30px, auto);
    gap: 7px;
    border-radius: 14px;
    padding: 3px;
  }

  .services-page .voucher-service-card > span,
  .services-page .voucher-family-toggle > span:first-child {
    width: 76px;
    height: 76px;
    border-radius: 20px;
  }

  .services-page .voucher-service-card > b,
  .services-page .voucher-family-toggle > span:nth-child(2) {
    font-size: 11px;
  }

  .services-page .voucher-family-toggle small {
    display: none;
  }

  .services-page .voucher-family-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin: -2px 0 2px;
    padding: 8px;
  }

  .services-page .voucher-family-option {
    min-height: 56px;
  }

  .store-hero,
  .games-page .section.compact,
  .services-page .section.compact,
  .telegram-page .section.compact,
  .profile-page .section.compact,
  .brand-page .section.compact {
    padding-top: 12px;
  }

  .site-footer {
    margin-top: 24px;
  }
}

@media (max-width: 350px) {
  .services-page .voucher-service-switch {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ===== Stage 9 · направление Б: hero-панель и 3D-иконки ===== */
.home-hero { margin: 2px 0 14px; }
.home-hero-panel { position: relative; border-radius: var(--radius-card); overflow: hidden; background: var(--bg); }
/* The panel is a band, not a 16:9 plate: the main scenario must stay above
   the fold on desktop (closed decision). */
.home-hero-art {
  width: 100%;
  height: clamp(210px, 34vh, 320px);
  display: block;
  margin-left: auto;
  width: auto;
  max-width: 46%;
  object-fit: contain;
  object-position: right center;
}
.home-hero-copy { position: absolute; left: clamp(18px, 4.5vw, 48px); top: 50%; transform: translateY(-50%); max-width: min(54%, 520px); display: flex; flex-direction: column; align-items: flex-start; gap: clamp(6px, 1.2vw, 12px); }
.home-hero-copy h1 { margin: 0; color: var(--text); font-size: clamp(26px, 4.2vw, 44px); line-height: 1.0; }
.home-hero-copy p { margin: 0; color: var(--muted); font-size: clamp(12px, 1.5vw, 15px); line-height: 1.45; }
.home-hero-cta { margin-top: clamp(2px, 0.8vw, 8px); }
@media (max-width: 640px) {
  .home-hero-art { height: clamp(170px, 26vh, 220px); max-width: 42%; }
  .home-hero-copy { max-width: 58%; }
  .home-hero-copy p { font-size: 12px; }
  .home-hero-cta { min-height: 44px; padding: 0 16px; font-size: 13.5px; }
}
.launch-icon-3d { border: 1px solid var(--line); border-radius: 23%; background: var(--surface); box-shadow: none; }
/* one optical scale for the whole 3D set, per-shape trim compensated in the asset */
.launch-icon-3d img,
.launch-service.telegram-stars .launch-icon-3d img,
.launch-service.telegram-premium .launch-icon-3d img,
.launch-service.games .launch-icon-3d img {
  width: 72%;
  height: 72%;
  border-radius: 0;
  object-fit: contain;
}
.button, .quick { transition: transform var(--t-press) var(--spring), background-color var(--t-move) ease, border-color var(--t-move) ease; }
.button:active, .quick:active, .launch-service:active .launch-icon { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .button, .quick, .brand-mark, .launch-icon, .mobile-dock-indicator { transition: none !important; }
}

/* ===== Stage 9 · route-backed checkout sheet (same document, no iframe) ===== */
.checkout-sheet .checkout-dismiss {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(4, 5, 4, .46);
  opacity: 0;
  transition: opacity var(--t-sheet) ease;
}
.checkout-sheet.is-open .checkout-dismiss { opacity: 1; }
.checkout-sheet .checkout-layout {
  transform: translateY(12%);
  opacity: 0;
  transition: transform var(--t-sheet) var(--spring), opacity var(--t-move) ease;
  animation: none;
}
.checkout-sheet.is-open .checkout-layout { transform: translateY(0); opacity: 1; }
.sheet-grip {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 6px;
  touch-action: none;
}
.sheet-grip-bar {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 40px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 5px;
  background: var(--line-strong);
}
.sheet-grip-title {
  grid-column: 2;
  padding-top: 6px;
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
}
.sheet-close { grid-column: 3; }
/* A direct /checkout/ visit is an ordinary page, not an overlay. */
.checkout-standalone .sheet-grip { display: none; }
@media (prefers-reduced-motion: reduce) {
  .checkout-sheet .checkout-layout,
  .checkout-sheet .checkout-dismiss { transition: none; }
  .checkout-sheet .checkout-layout { transform: none; opacity: 1; }
}

/* ===== Stage 9 · category marks in tabs (paint per category, token-driven) ===== */
.nav-row-icon .cat-mark { width: 20px; height: 20px; display: block; }
.nav-row a .nav-row-icon.cat-steam { color: var(--gold-text); }
.nav-row a .nav-row-icon.cat-stars { color: var(--paint-plum); }
.nav-row a .nav-row-icon.cat-games { color: var(--paint-cobalt); }
.nav-row a .nav-row-icon.cat-services { color: var(--paint-patina); }
/* category-paint.nav-exception: the tab row is the one place several paints coexist */
.nav-row a.active { position: relative; }
.nav-row a.active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px; background: transparent;
}
.brand-lockup-word { width: auto; height: clamp(22px, 4vw, 34px); color: var(--text); }
/* wide asset: the wordmark spans the card instead of the square icon slot */
.brand-asset:has(.brand-asset-word) { grid-template-columns: minmax(0, 1fr) auto; }
.brand-asset-word { width: 100%; max-width: 190px; height: auto; color: var(--text); }
@media (max-width: 640px) {
  .brand-asset:has(.brand-asset-word) { grid-template-columns: minmax(0, 1fr); }
  .brand-asset-word { max-width: 150px; }
}

/* ===== Stage 9 · touch targets: project floor is 44px ===== */
.footer-links a,
.footer-legal-links a,
.mobile-menu-legal a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.nav-row a,
.filters .filter,
.catalog-sort select,
.stars-quantity-input input { min-height: 44px; }
.catalog-sort select { min-width: 44px; }

/* ===== Stage 9 · page shell: footer sits at the bottom on short pages ===== */
body > main,
body > .page { flex: 1 0 auto; }
body > footer,
body > .site-footer { flex: none; }
body.sheet-open { display: block; }

/* L2-09: sheet chrome must not leak onto a direct /checkout/ visit */
.checkout-standalone .checkout-layout {
  max-height: none;
  overflow: visible;
  border-radius: var(--radius-card);
  box-shadow: none;
  animation: none;
}
.checkout-standalone .checkout-main h1 { display: block; }

/* T12: the segmented control on /help needs a real selected state */
.help-nav a[aria-current="true"],
.help-nav a.active {
  border-color: var(--gold);
  background: var(--intent-wash);
  color: var(--text);
  font-weight: 700;
}
.help-nav a { color: var(--text-secondary); }

/* ===== Polish-1 · phase-1 spring: every interactive surface answers a tap ===== */
.button,
.quick,
.filter,
.package,
.telegram-package,
.icon-button,
.launch-service,
.launch-icon,
.launch-icon-3d,
.home-showcase-card,
.catalog-card,
.voucher-service-card,
.voucher-product,
.voucher-region,
.product-choice,
.region-choice,
.login-method,
.mobile-menu-list a,
.mobile-dock a,
.nav-row a,
.stars-presets button,
.order-filters button,
.help-nav a,
.brand-asset .button {
  transition:
    transform var(--t-press) var(--spring),
    background-color var(--t-move) ease,
    border-color var(--t-move) ease,
    color var(--t-move) ease,
    box-shadow var(--t-move) ease;
}
.button:active,
.quick:active,
.filter:active,
.package:active,
.telegram-package:active,
.icon-button:active,
.stars-presets button:active,
.order-filters button:active,
.help-nav a:active,
.login-method:active,
.mobile-menu-list a:active { transform: scale(.965); }
.launch-service:active,
.voucher-service-card:active > span,
.product-choice:active,
.region-choice:active,
.voucher-product:active,
.voucher-region:active { transform: scale(.94); }
.home-showcase-card:active,
.catalog-card:active { transform: scale(.985); }
.mobile-dock a:active { transform: scale(.9); }
/* the 3D tiles lift on pointer, the spring carries them back */
@media (hover: hover) {
  .launch-service:hover .launch-icon,
  .voucher-service-card:hover > span { transform: translateY(-2px) scale(1.04); }
  .home-showcase-card:hover,
  .catalog-card:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .button, .quick, .filter, .package, .telegram-package, .icon-button,
  .launch-service, .launch-icon, .launch-icon-3d, .home-showcase-card,
  .catalog-card, .voucher-service-card, .voucher-product, .voucher-region,
  .product-choice, .region-choice, .login-method, .mobile-menu-list a,
  .mobile-dock a, .nav-row a, .stars-presets button, .order-filters button,
  .help-nav a { transition: none !important; }
  .button:active, .quick:active, .filter:active, .icon-button:active,
  .launch-service:active .launch-icon-3d, .mobile-dock a:active,
  .home-showcase-card:active, .catalog-card:active { transform: none !important; }
}


/* ===== Polish-1 · Г7: one icon family in the login rows ===== */
.login-method-icon-mail svg { width: 22px; height: 22px; display: block; color: var(--text-secondary); }
.login-method-icon-mail { display: grid; place-items: center; }

/* ===== Polish-1 · Г6: one divider before the footer ===== */
.site-footer { border-top: 1px solid var(--line); }
.page > .section:last-of-type,
main > section:last-of-type { border-bottom: 0; }

/* ===== Polish-1 · Г3: one line style across the whole tab bar ===== */
.mobile-dock a { border: 1px solid transparent; border-radius: 14px; background: transparent; }
.mobile-dock a.active { border-color: var(--accent-border-soft); background: var(--accent-wash); color: var(--gold-text); }
.mobile-dock a svg,
.mobile-dock a .telegram-nav-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mobile-dock a .telegram-nav-icon path { fill: none; stroke: currentColor; }

/* ===== Polish-1 · Г1: product switcher rebuilt as one component =====
   One box size, object fills 70-80% of it, label centred under it with real
   padding, nothing escapes the plate. Both themes from tokens. */
.service-launchpad.product-switch {
  --tile: 68px;
  --tile-pad: 13px;
  display: flex;
  gap: 10px;
  align-items: stretch;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.service-launchpad.product-switch::-webkit-scrollbar { display: none; }
.service-launchpad.product-switch .launch-service,
.service-launchpad.product-switch .launch-all-services {
  flex: 0 0 auto;
  width: calc(var(--tile) + var(--tile-pad) * 2);
  min-width: calc(var(--tile) + var(--tile-pad) * 2);
  min-height: auto;
  height: auto;
  margin: 0;
  display: grid;
  grid-template-rows: var(--tile) auto;
  justify-items: center;
  align-content: center;
  gap: 8px;
  padding: var(--tile-pad);
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  background: transparent;
  scroll-snap-align: start;
  text-align: center;
}
.service-launchpad.product-switch .launch-icon,
.service-launchpad.product-switch .launch-all-services .launch-icon {
  width: var(--tile);
  height: var(--tile);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 22%;
  background: var(--surface-2);
  box-shadow: none;
  overflow: hidden;
}
.service-launchpad.product-switch .launch-icon img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}
.service-launchpad.product-switch .launch-service b,
.service-launchpad.product-switch .launch-all-services b {
  max-width: 100%;
  min-height: 0;
  height: auto;
  margin: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* the switcher is a row of products: sublines and arrows belong to the card,
   not to the tile */
.service-launchpad.product-switch .launch-service small,
.service-launchpad.product-switch .launch-all-services small,
.service-launchpad.product-switch .launch-service i,
.service-launchpad.product-switch .launch-all-services i { display: none; }
.service-launchpad.product-switch .launch-service.selected,
.service-launchpad.product-switch .launch-service.active[aria-current="true"] {
  border-color: var(--accent-border-soft);
  background: var(--accent-wash);
}
.service-launchpad.product-switch .launch-service.selected b { color: var(--gold-text); }
.service-launchpad.product-switch .launch-service.selected .launch-icon { border-color: var(--accent-border-soft); }
@media (min-width: 781px) {
  .service-launchpad.product-switch { --tile: 64px; --tile-pad: 11px; gap: 6px; justify-content: flex-start; }
}

/* ===== Polish-1 · В: short viewports keep the funnel in the first screen ===== */
@media (max-height: 730px) {
  .home-hero-art { height: clamp(120px, 17vh, 150px); }
  .home-hero { margin: 0 0 8px; }
  .home-hero-copy { gap: 5px; }
  .home-hero-copy h1 { font-size: clamp(21px, 6.4vw, 28px); }
  .home-hero-copy p { font-size: 11.5px; }
  .service-launchpad.product-switch { --tile: 60px; --tile-pad: 10px; padding: 7px; gap: 7px; }
  .home-order-card { padding: 12px; }
  .home-order-fields { gap: 8px; }
}

/* ===== Polish-1 · Б3: the character carries the states ===== */
.state-note {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  text-align: left;
}
.state-note p { margin: 0; color: var(--text); font-size: 13px; line-height: 1.45; }
/* the state is carried by the character and a quiet accent edge, never by a
   shouting box: red stays the signal, not the frame */
.state-note-stop { border-inline-start: 3px solid var(--color-error); }
.state-note-success { border-inline-start: 3px solid var(--color-success); }
.state-note-art { display: grid; place-items: center; }
/* the object carries the state: one asset for both themes, and on the light
   one a contact shadow so it is standing on the surface, not floating */
.state-object { width: 100%; height: auto; max-height: 62px; object-fit: contain; }
[data-theme="light"] .state-object {
  filter: drop-shadow(0 6px 10px rgba(25, 25, 24, .16));
}
.identity-status:has(.state-note) { min-height: 0; font-size: inherit; }
.identity-status.error:has(.state-note),
.identity-status.ok:has(.state-note) { color: inherit; }
@media (max-width: 380px) {
  .state-note { grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 10px 12px; }
  .state-object { max-height: 52px; }
}

/* ===== Polish-1 · Б2: the live star sits in the switcher ===== */
.launch-icon .icon-loop {
  position: absolute;
  inset: 11%;
  width: 78%;
  height: 78%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-move) ease;
}
.product-switch .launch-icon { position: relative; }
.launch-icon.is-playing .icon-loop { opacity: 1; }
.launch-icon.is-playing img { opacity: 0; }
.launch-icon img { transition: opacity var(--t-move) ease; }
@media (prefers-reduced-motion: reduce) {
  .launch-icon .icon-loop { display: none; }
  .launch-icon.is-playing img { opacity: 1; }
}

/* ===== Polish-2 · icon motion: welcome, hover loop, idle on the active tile ===== */
.product-switch .launch-icon { position: relative; overflow: hidden; }
.product-switch .launch-icon .icon-loop {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78%;
  height: 78%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity 90ms linear;
}
/* the swap is a crossfade of two identically-scaled layers, so nothing jumps */
.product-switch .launch-icon.is-playing .icon-loop { opacity: 1; }
.product-switch .launch-icon.is-playing img { opacity: 0; }
.product-switch .launch-icon img { transition: opacity 90ms linear; }

/* welcome: the whole row springs in once on first load */
@keyframes slarp-icon-welcome {
  0%   { transform: scale(.86); }
  55%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.product-switch .launch-service.is-welcome .launch-icon {
  animation: slarp-icon-welcome 620ms var(--spring) both;
}
/* Layer 1 of the motion model: the whole row breathes on one common idle,
   phases spread so the five never pulse together. Layer 2, the signature
   gesture of each object, lives in the WebM loop and overrides nothing. */
@keyframes slarp-icon-idle {
  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
  50%      { transform: translateY(calc(-2px * var(--idle-lift, 1)))
                        scale(calc(1 + .014 * var(--idle-lift, 1)))
                        rotate(calc(.45deg * var(--idle-tilt, 1))); }
}
/* declared here, written by JS per tile: the phase spread and the tilt sign */
.product-switch .launch-service { --idle-phase: 0s; --idle-tilt: 1; --idle-lift: 1; }
.product-switch .launch-service.is-idle .launch-icon {
  animation: slarp-icon-idle 4.4s ease-in-out infinite;
  animation-delay: var(--idle-phase, 0s);
}
/* the chosen one breathes deeper, so the row still has a centre of gravity */
.product-switch .launch-service.selected.is-idle .launch-icon { --idle-lift: 1.6; }
.product-switch .launch-service:hover .launch-icon,
.product-switch .launch-service:focus-within .launch-icon { animation: none; }
.product-switch.motion-off .launch-icon,
.product-switch.motion-off .launch-service .launch-icon { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .product-switch .launch-icon .icon-loop { display: none; }
  .product-switch .launch-icon.is-playing img { opacity: 1; }
  .product-switch .launch-service.is-welcome .launch-icon,
  .product-switch .launch-service.is-idle .launch-icon { animation: none; }
}

/* ===== Polish-2 · Stars form: optical centring and Steam-comparable height ===== */
.stars-quantity-input {
  min-height: 56px;
  align-items: center;
  padding-block: 0;
}
.stars-quantity-input input {
  height: 100%;
  min-height: 0;
  padding: 0;
  line-height: 1;
  /* the numeral is the value: centre it on the field axis, not on its own box */
  display: flex;
  align-items: center;
}
.stars-quantity-input .stars-unit,
.stars-quantity-input img {
  align-self: center;
  margin: 0;
}
.stars-quantity-input .stars-unit {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
}
.stars-quantity-input .stars-unit img { width: 30px; height: 30px; padding: 0; background: none; filter: none; }
/* one row of presets, a compact range note, tighter rhythm */
.telegram-home-fields .stars-presets,
.stars-home-presets {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  overflow: visible;
}
.stars-home-presets button,
.telegram-home-fields .stars-presets button { padding-inline: 2px; font-size: 11px; }
.helper.stars-range { margin-top: 4px; font-size: 11px; }
.telegram-home-fields { gap: 10px; }
.telegram-home-fields .field { gap: 6px; }
@media (max-width: 380px) {
  .stars-home-presets button,
  .telegram-home-fields .stars-presets button { font-size: 10px; }
}

/* the field IS the touch target, so the input simply fills it: no competing
   min-height, no padding fighting the row box */
.telegram-page .stars-quantity-input,
.telegram-home-fields .stars-quantity-input {
  align-items: stretch;
  padding-block: 0;
}
.telegram-page .stars-quantity-input input,
.telegram-home-fields .stars-quantity-input input {
  height: 100%;
  min-height: 0;
  align-self: stretch;
  margin: 0;
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}
.telegram-page .stars-quantity-input .stars-unit,
.telegram-home-fields .stars-quantity-input .stars-unit {
  align-self: center;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}

/* ===== Polish-2 · Stars form matches the Steam gabarit =====
   Steam puts login and amount on one row; Stars stacked recipient and count,
   which cost ~100px of height for no reason. Same structure, same height. */
.telegram-home-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(136px, 168px);
  align-items: start;
  gap: 10px;
}
/* the count column is narrow: the numeral steps down a notch so the value and
   its star both fit on the field axis */
.telegram-home-fields .stars-quantity-input { grid-template-columns: minmax(0, 1fr) 34px; gap: 6px; padding-inline: 12px 6px; }
.telegram-home-fields .stars-quantity-input input { font-size: 21px; }
.telegram-home-fields .field > label { font-size: 12.5px; }
.telegram-home-fields .home-recipient { grid-column: 1; }
.telegram-home-fields [data-telegram-panel="stars"]:not(.home-presets) { grid-column: 2; }
.telegram-home-fields .home-presets,
.telegram-home-fields .home-premium-packages { grid-column: 1 / -1; }
.telegram-home-fields .field > label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.telegram-home-fields .helper.stars-range { margin-top: 4px; font-size: 11px; }
@media (max-width: 360px) {
  .telegram-home-fields { grid-template-columns: minmax(0, 1fr) 132px; gap: 8px; }
  .telegram-home-fields .stars-quantity-input { grid-template-columns: minmax(0, 1fr) 30px; gap: 4px; padding-inline: 10px 5px; }
  .telegram-home-fields .stars-quantity-input input { font-size: 18px; }
  .telegram-home-fields .stars-quantity-input .stars-unit { width: 30px; height: 30px; }
  .telegram-home-fields .stars-quantity-input .stars-unit img { width: 20px; height: 20px; }
  .telegram-home-fields .field > label { font-size: 11.5px; }
}

/* ===== Polish-2 · header: one boundary, system surfaces =====
   The light header carried a hairline AND a soft shadow, and the active tab
   added a filled plate on top of its own underline: three stacked edges read
   as "two stripes". One border, one underline, no plate. */
.site-header {
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  background: var(--surface);
}
[data-theme="light"] .site-header { box-shadow: none; background: var(--surface); }
.header-nav { border-top: 0; border-bottom: 0; }
.nav-row a.active,
.nav-row a[aria-current="true"] { background: transparent;
  border-radius: var(--radius-button) var(--radius-button) 0 0;
}
.nav-row a.active::after { left: 10px; right: 10px; bottom: -1px; height: 2px; }
/* the bar is full-bleed, so its own corners stay square; the controls inside
   keep the system radii */
.site-header .site-search input,
.site-header .icon-button { border-radius: var(--radius-button); }
.site-search input { border-radius: var(--radius-button); }

/* ===== Polish-2 · switcher: no hidden horizontal scroll =====
   Desktop wraps into an auto-fit grid, so a longer product list can never be
   cut off; mobile keeps the swipe gesture but shows a fade affordance. */
@media (min-width: 781px) {
  .service-launchpad.product-switch {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(var(--tile) + var(--tile-pad) * 2), 1fr));
    gap: 8px;
    overflow: visible;
  }
  .service-launchpad.product-switch .launch-service,
  .service-launchpad.product-switch .launch-all-services { width: auto; min-width: 0; }
}
@media (max-width: 780px) {
  .service-launchpad.product-switch {
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
  }
  .service-launchpad.product-switch:not([data-scroll-end]) { --fade: 1; }
}


/* ===== Final package · rank shields: the last stock assets are gone ===== */
.rank-crest,
.rank-crest.silver,
.rank-crest.gold,
.rank-crest.platinum,
.rank-crest.diamond{
  width:56px;height:56px;flex:none;
  border:0;border-radius:0;background:none;box-shadow:none;
  clip-path:none;-webkit-clip-path:none;mask:none;-webkit-mask:none;
  transform:none;
  background-image:url("/img/store/ranks/shield-bronze.a82a23cd.webp");
  background-size:contain;background-repeat:no-repeat;background-position:center;
}
.rank-crest.silver{background-image:url("/img/store/ranks/shield-silver.4c0d66c4.webp")}
.rank-crest.gold{background-image:url("/img/store/ranks/shield-gold.ddd9b42c.webp")}
/* П1 · Platinum and Diamond stood without a shield: three metals of five.
   Same model, light cool metal and light metal with a faint blue cast, matte
   plastic of the row, no rhinestones. */
.rank-crest.platinum{background-image:url("/img/store/ranks/shield-platinum.73dd2a05.webp")}
.rank-crest.diamond{background-image:url("/img/store/ranks/shield-diamond.0be69ec5.webp")}
.profile-rank-crest{width:64px;height:64px}

/* ===== Final package · horizontal scroll rows: no slack under the cards =====
   The rank row carried a 10px bottom pad plus a visible scrollbar gutter, so
   the container floor sat below the cards. One rule for every scroll row:
   height hugs the content, the spacing step comes from the token scale, and
   the bar is hidden while the row stays swipeable. */
.rank-grid,
.home-showcase-grid.is-scroll,
.quick-row.is-scroll,
.catalog-category-tabs,
.voucher-service-switch {
  padding-block: 2px var(--space-1);
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.rank-grid::-webkit-scrollbar,
.catalog-category-tabs::-webkit-scrollbar,
.voucher-service-switch::-webkit-scrollbar,
.service-launchpad.product-switch::-webkit-scrollbar { width: 0; height: 0; display: none; }
.rank-grid { align-items: stretch; }
.rank-grid > * { align-self: stretch; }

/* ===== Final package · hero breathes without touching LCP =====
   The static render stays the LCP element with priority loading; the life is
   pure CSS on transform and opacity only, so nothing re-lays-out and no video
   enters the first screen. */
/* Р3: the float used to lift the object 7px, and the frame clips at its own
   edge, so the hero was cut on every breath. The object now breathes INSIDE a
   reserved margin: the frame keeps its air and nothing ever touches the seam.
   Lesson from the stage-9 seams, applied to motion this time. */
@keyframes slarp-hero-float { 0%,100%{transform:translate3d(0,2px,0)} 50%{transform:translate3d(0,-5px,0)} }
}
@keyframes slarp-hero-shadow {
  0%, 100% { transform: translate3d(-50%, 0, 0) scale(1); opacity: .30; }
  50%      { transform: translate3d(-50%, 0, 0) scale(.88); opacity: .18; }
}
/* written by JS on pointer move, declared here so the token guard sees them */
.home-hero-panel { perspective: 900px; --hero-rx: 0deg; --hero-ry: 0deg; }
.home-hero-art {
  animation: slarp-hero-float 5.2s ease-in-out infinite;
  will-change: transform;
}
/* the contact shadow breathes in counter-phase so the object reads as lifting */
.home-hero-panel::after {
  content: "";
  position: absolute;
  left: 74%;
  bottom: 8%;
  width: 26%;
  height: 10px;
  transform: translate3d(-50%, 0, 0);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55), transparent 70%);
  filter: blur(6px);
  opacity: .3;
  pointer-events: none;
  animation: slarp-hero-shadow 5.2s ease-in-out infinite;
}
[data-theme="light"] .home-hero-panel::after {
  background: radial-gradient(ellipse at center, rgba(34, 30, 24, .38), transparent 70%);
}
/* desktop: a couple of degrees of parallax that follows the pointer, spring-eased */
@media (hover: hover) and (min-width: 781px) {
  .home-hero-art {
    transform: rotateX(var(--hero-rx, 0deg)) rotateY(var(--hero-ry, 0deg));
    transition: transform var(--t-sheet) var(--spring);
  }
  .home-hero-panel.is-tilting .home-hero-art { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero-art, .home-hero-panel::after { animation: none; }
  .home-hero-panel::after { opacity: .24; }
}

/* ===== P0 · seamless navigation ===== */
/* Cross-document view transitions as a progressive enhancement: browsers that
   have them cross-fade instead of holding the old frame and flashing. The
   frame itself is static markup now, so this only smooths the content swap.
   Off for reduced motion, and the whole rule is simply ignored elsewhere. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
/* the chrome must not cross-fade with the content: it is the same frame */
.site-header, .mobile-dock, .site-footer { view-transition-name: none; }

/* P0 · the door reserves its own height. The skeleton was 110px and the login
   card that replaces it is 382/413px, so every visit to the profile threw the
   ranks below it down the page when auth answered: CLS 0.21 measured. */
:root { --identity-slot: 382px; }
@media (min-width: 781px) { :root { --identity-slot: 413px; } }
.identity-loading { min-height: var(--identity-slot); align-items: center; }

/* П2 · brand colour does not live in system navigation. The Telegram mark in
   the tab bar and in the mobile menu inherits the navigation tokens like every
   other icon: muted when idle, gold when active. The silhouette is enough. */
.mobile-dock a .telegram-nav-icon,
.mobile-menu-list .telegram-nav-icon { color: inherit; }

/* ===== П5 · the switcher is five categories, and it fits everywhere =====
   Composition: only Steam, Stars, Premium, Игры, Сервисы live here. The flat
   brands moved to the showcase and the services page.
   Mobile: five tiles share the width, no horizontal scroll and no clipped
   edge, measured at 320 and 390. Desktop: this is a shop window, not a strip
   of utility tabs, so the objects are large enough to be looked at. */
@media (max-width: 780px) {
  .service-launchpad.product-switch {
    --tile-pad: 6px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 8px;
    overflow-x: visible;
  }
  .service-launchpad.product-switch .launch-service,
  .service-launchpad.product-switch .launch-all-services {
    width: auto;
    min-width: 0;
    grid-template-rows: auto auto;
    gap: 6px;
  }
  .service-launchpad.product-switch .launch-icon,
  .service-launchpad.product-switch .launch-all-services .launch-icon {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
  /* the label may tighten, it may not wrap or be cut off */
  .service-launchpad.product-switch .launch-service b {
    font-size: 11px;
    letter-spacing: -.015em;
  }
}
@media (max-width: 340px) {
  .service-launchpad.product-switch { gap: 3px; padding: 6px; --tile-pad: 4px; }
  .service-launchpad.product-switch .launch-service b { font-size: 9.5px; }
}
/* Desktop, after the critic panel: variant "quiet row" won 8.5/8/8/8.5 against
   a compact row, a plated row and a segmented pill. Their mandated fixes are
   all in here, and each one is a rule, not a taste:
   - one surface per item: the icon plate is the only box, the tile itself has
     no card. Active is that same plate with its transparent border turned
     gold. Box inside a box was the top complaint about every other variant.
   - fixed footprint: the row must not twitch when the choice moves, so the
     active item changes colour only, never size.
   - left-aligned to the content column, not centred: a centred island between
     a left-aligned hero and a left-aligned form is what made it read as an
     orphan strip, and widening it would not have fixed that.
   - the row belongs to the form it drives: 48px of air above, 20px below.
   - exactly two signals for active: gold hairline, gold label. Nothing else. */
@media (min-width: 781px) {
  .service-launchpad.product-switch {
    --tile: 76px;
    --tile-pad: 0px;
    display: grid;
    grid-template-columns: repeat(5, var(--tile));
    justify-content: start;
    gap: 52px;
    width: auto;
    margin: 48px 0 20px;
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
  }
  .service-launchpad.product-switch .launch-service,
  .service-launchpad.product-switch .launch-all-services {
    width: var(--tile);
    min-width: 0;
    gap: 10px;
    padding: 0;
    border: 0;
    background: none;
    border-radius: var(--radius-card);
  }
  .service-launchpad.product-switch .launch-icon,
  .service-launchpad.product-switch .launch-all-services .launch-icon {
    width: var(--tile);
    height: var(--tile);
    border: 1px solid var(--line);
    border-radius: 22%;
    background: var(--surface-2);
  }
  .service-launchpad.product-switch .launch-service b { font-size: 12.5px; }
  /* active: the plate's own border becomes gold, the label becomes gold, the
     box does not move and no third surface appears */
  .service-launchpad.product-switch .launch-service.selected { transform: none; }
  .service-launchpad.product-switch .launch-service.selected .launch-icon {
    width: var(--tile);
    height: var(--tile);
    margin-block: 0;
    border-color: var(--accent-border-soft);
  }
  .service-launchpad.product-switch .launch-service.selected b { color: var(--gold-text); }
  /* hover moves brightness one step, it never introduces a new surface */
  .service-launchpad.product-switch .launch-service:hover .launch-icon { background: var(--surface-3); }
  .service-launchpad.product-switch .launch-service:hover b { color: var(--text); }
  /* the keyboard must not borrow the selected look: its own ring, offset out */
  .service-launchpad.product-switch .launch-service:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: var(--radius-card);
  }
  /* the row is the form's header now: the divider under the hero would cut
     between them, so it goes */
  .home-hero { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .service-launchpad.product-switch .launch-service.selected { transform: none; }
}
@media (min-width: 600px) and (max-width: 780px) {
  /* tablet shares the mobile grid, but a fifth of 768px is a 138px tile and
     the object turns into a poster. Cap the column and start the row from the
     left edge, same reasoning as the desktop treatment. */
  .service-launchpad.product-switch {
    grid-template-columns: repeat(5, minmax(0, 96px));
    justify-content: start;
    gap: 20px; padding: 12px 0; --tile-pad: 0px;
    border: 0; background: none;
  }
  .service-launchpad.product-switch .launch-service b { font-size: 12.5px; }
}

/* ===== Х · hero height, tokenised =====
   The art was 732px tall on a 1440 screen instead of the 306 its clamp asks
   for: `img[width][height]{height:auto}` in the critical core is specificity
   (0,2,1) and beat `.home-hero-art` at (0,1,0), so the image fell back to its
   own aspect ratio. The fix is a selector that wins, not a bigger number.
   One token drives every breakpoint, no magic numbers at the call sites. */
:root {
  --hero-art: clamp(150px, 19vh, 232px);
  --hero-pad: clamp(10px, 1.8vh, 22px);
}
.home-hero { padding: var(--hero-pad) 0; margin: 2px 0 12px; }
.home-hero-panel img.home-hero-art {
  height: var(--hero-art);
  width: auto;
  max-width: 46%;
  object-fit: contain;
  object-position: right center;
  margin-left: auto;
}
@media (max-width: 780px) {
  :root { --hero-art: clamp(126px, 17vh, 168px); }
  .home-hero-panel img.home-hero-art { max-width: 42%; }
}
@media (max-width: 380px) {
  :root { --hero-art: clamp(112px, 15vh, 140px); }
}

/* ===== Г · empty screens speak the object language =====
   One component for every empty or failed screen: an object from the same
   studio as the switcher row, a headline, one line of copy, at most one
   action. The character is gone; the object carries the state. */
.empty-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: clamp(28px, 6vw, 56px) 20px;
  text-align: center;
}
.empty-state .state-object {
  width: clamp(96px, 22vw, 132px);
  height: auto;
  max-height: none;
  margin-bottom: 2px;
}
/* the error pages use h1 for the same slot, and the page-level h1 scale
   (up to 52px) turns a state into a billboard */
.empty-state h1,
.empty-state h2 { font-size: clamp(19px, 2.6vw, 26px); line-height: 1.12; }
.empty-state p {
  max-width: 42ch;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.empty-state .button { margin-top: 6px; }
[data-theme="light"] .empty-state .state-object {
  filter: drop-shadow(0 10px 16px rgba(25, 25, 24, .14));
}

/* ===== П3 · one amount field for Steam and for Stars =====
   The Steam sum sat in a plain 52px input while Stars had a proper 82px box
   with a 30px number. Same job, two looks. This is the shared component; the
   Stars box keeps its own class as an alias so nothing else has to move.
   The rouble lives in the label ("Сумма, ₽") and the suffix is our category
   mark in the token colour, never a brand logo inside an input. */
.amount-field,
.stars-quantity-input {
  min-height: 82px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-input);
  background: var(--surface-2);
  padding: 12px 16px;
}
.amount-field:focus-within,
.stars-quantity-input:focus-within {
  border-color: var(--accent-border-soft);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.amount-field input,
.stars-quantity-input input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--display);
  font-size: 30px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.amount-field input::-webkit-inner-spin-button,
.amount-field input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.amount-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface-3);
  color: var(--gold-text);
}
.amount-mark svg { width: 24px; height: 24px; display: block; }
@media (max-width: 780px) {
  .amount-field,
  .stars-quantity-input { min-height: 64px; gap: 9px; padding: 8px 11px; }
  .amount-field input,
  .stars-quantity-input input { font-size: 25px; }
  .amount-mark { width: 38px; height: 38px; }
  .amount-mark svg { width: 21px; height: 21px; }
}


/* ===== П4 · one presets component =====
   Steam had 44px pills with clean "1 000 ₽" labels, Stars had a five-up grid
   of 11px chips. Judged on the owner's criteria — digit legibility, touch
   target, obvious active, and fitting 390 — the pill wins on all four, so it
   becomes the component and the chip grid goes. The row wraps instead of
   squeezing, and every preset keeps the 44px floor.
   The label format is closed: "N мес · X ₽" style, no per-month clutter. */
.preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.preset-row .quick {
  flex: 1 1 auto;
  min-width: 84px;
  height: 44px;
  min-height: 44px;
  padding-inline: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.preset-row .quick:hover { border-color: var(--line-strong); color: var(--text); }
.preset-row .quick.active {
  border-color: var(--accent-border-soft);
  background: var(--accent-wash);
  color: var(--gold-text);
}
.preset-row .quick:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (max-width: 380px) {
  .preset-row .quick { min-width: 72px; padding-inline: 10px; font-size: 12.5px; }
}

/* П3/П4, final word. The Stars box carries more than thirty overrides piled up
   across past sessions, ending at 50px tall with an 18px numeral on the home
   form while Steam beside it was 82/30. Chasing them one by one is how that
   pile grew, so the component is restated once here at matching specificity.
   The dead remainder goes out with the CSS clean-up pass. */
.telegram-home-fields .stars-quantity-input,
.home-order-fields .amount-field {
  height: auto;
  min-height: 82px;
  padding: 12px 16px;
  border-radius: var(--radius-input);
}
.telegram-home-fields .stars-quantity-input input,
.home-order-fields .amount-field input {
  height: auto;
  min-height: 44px;
  font-size: 30px;
  font-family: var(--display);
  font-weight: 800;
}
@media (max-width: 780px) {
  .telegram-home-fields .stars-quantity-input,
  .home-order-fields .amount-field { min-height: 64px; padding: 8px 12px; }
  .telegram-home-fields .stars-quantity-input input,
  .home-order-fields .amount-field input { font-size: 25px; }
}

/* A disabled control is exempt from the contrast rule, but a payment button
   that cannot be read is still a payment button nobody trusts. One step up
   puts it over 4.5 in both themes without making it look enabled. */
:root { --color-disabled: #8A8272; }
[data-theme="light"] { --color-disabled: #6B6559; }

/* ===== Блок 2 · radii and hit areas back on the system =====
   The sweep found 258 off-token radii across 17 pages: four different
   components had settled on 24px, the search kbd on 4, two chips on 10, and
   the 3D tile on 13. Two of those are real system sizes that were never given
   a name, the rest are drift. Naming the two and snapping the rest. */
:root { --radius-panel: 24px; --radius-chip: 8px; }
.site-search kbd { border-radius: var(--radius-chip); }
.field-help,
.stars-unit { border-radius: var(--radius-chip); }
.launch-icon-3d { border-radius: 22%; }
.home-order-layout.compact-action,
.legal-copy,
.payment-result-card,
.workspace.telegram-workspace { border-radius: var(--radius-panel); }
/* a link in the footer or a support handle is a target, not a line of text */
.footer-links a,
.footer-legal-links a,
.mobile-menu-support,
.mobile-menu-legal a { min-height: 44px; display: inline-flex; align-items: center; }

/* ===== Блок 2 · the readable floor =====
   The sweep found 800 runs of text under 11.5px, and the smallest were in the
   footer: a 9px trademark line and 10px legal links. Nothing on a payment site
   should ask the reader to lean in. The floor is 11px for supporting copy and
   12px for anything clickable. */
.trademark { font-size: 11px; line-height: 1.5; }
.footer-bottom { font-size: 11.5px; }
.footer-legal-links a,
.footer-links a { font-size: 12px; }
.site-search kbd { font-size: 11px; }
.eyebrow { font-size: 11.5px; letter-spacing: .06em; }
.home-showcase-copy small,
.checkout-header-title { font-size: 12.5px; }

/* ===== Х · the hero object is alive, without touching LCP =====
   The still stays the LCP element and keeps fetchpriority; the loop is laid
   over the same box at the same scale and only becomes visible once it is
   playing. Poster and loop are the same frame, so there is nothing to jump. */
.home-hero-loop {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: var(--hero-art);
  width: auto;
  max-width: 46%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.home-hero-panel.hero-live .home-hero-loop { opacity: 1; }
.home-hero-panel.hero-live .home-hero-art { opacity: 0; }
.home-hero-art { transition: opacity 220ms ease; }
@media (max-width: 780px) { .home-hero-loop { max-width: 42%; } }
@media (prefers-reduced-motion: reduce) { .home-hero-loop { display: none; } }


/* Р3 · the hero object lives inside its frame, with air on every side.
   contain-logic, not crop-logic: the panel reserves the breathing room and the
   object is sized against the reserved box, never against the frame edge. */
.home-hero-panel { padding: var(--hero-air, 10px) var(--hero-air, 10px) var(--hero-air, 10px) 0; }
.home-hero-panel img.home-hero-art,
.home-hero-loop {
  height: calc(var(--hero-art) - var(--hero-air, 10px) * 2);
  max-height: calc(100% - var(--hero-air, 10px) * 2);
}

/* the object is right-aligned, so its air on that side comes from the frame's
   own padding, not from a margin nobody can see */
.home-hero-panel img.home-hero-art,
.home-hero-loop { margin-right: 0; }
@media (min-width: 781px) { :root { --hero-air: 14px; } }

/* ============================================================
   Polish-цикл по живому превью. Каждый пункт — измеренный дефект,
   а не вкус, и каждый закрыт правилом, а не подкруткой на месте.
   ============================================================ */

/* 1 · HERO. Предмет занимал 9% ширины рамки и читался обрезком:
   ограничителем была высота, а не ширина. Кадр вырастает до трети
   вьюпорта (жёсткий потолок владельца), предмет растёт вместе с ним и
   садится справа, воздух со всех сторон держит --hero-air с учётом дыхания. */
@media (min-width: 781px) {
  :root { --hero-art: clamp(190px, 26vh, 240px); --hero-air: 16px; }
  .home-hero-panel img.home-hero-art,
  .home-hero-loop { max-width: 42%; }
}
@media (min-width: 1200px) {
  :root { --hero-art: clamp(200px, 27vh, 248px); }
}

/* 3 · ШАПКА. После удаления категорий строка навигации осталась пустой
   полосой в 48px. На десктопе она больше не нужна: знак, поиск и вход
   живут в одной строке, поддержка уже есть иконкой в действиях. */
@media (min-width: 781px) {
  .site-header .header-nav { display: none; }
  .header-main { height: var(--header-h, 68px); }
}
:root { --header-h: 64px; }
@media (min-width: 781px) { :root { --header-h: 68px; } }

/* 4 · ПЛИТКА ПЕРЕКЛЮЧАТЕЛЯ. Подпись стояла вплотную к нижнему краю:
   у плитки не было собственных полей, и активное состояние отличалось
   плотностью, а не акцентом. Поля по токенам, подпись с воздухом,
   активная плитка отличается только акцентом и подъёмом предмета. */
@media (min-width: 781px) {
  .service-launchpad.product-switch .launch-service,
  .service-launchpad.product-switch .launch-all-services {
    padding: 0 0 var(--space-1, 8px);
    gap: 12px;
  }
  .service-launchpad.product-switch .launch-service b {
    display: block;
    padding-block: 2px;
    line-height: 1.2;
  }
  /* the object lifts, the box never moves: footprint stays exact */
  .service-launchpad.product-switch .launch-service.selected .launch-icon img {
    transform: translateY(-2px) scale(1.03);
  }
  .service-launchpad.product-switch .launch-icon img { transition: transform var(--t-move) var(--spring); }
}
@media (max-width: 780px) {
  .service-launchpad.product-switch .launch-service b { padding-block: 2px 4px; }
}

/* 5 · КАЛИБР ПОЛЕЙ. Бокс суммы вырос до 82px с числом в 30px рядом с
   боксом «Получатель» в 52px — на десктопе это выглядело огромным.
   Эталон нормального размера теперь один: обычное поле формы.
   На мобильном размер владельца устраивает и остаётся прежним. */
:root { --field-h: 52px; --field-num: 22px; }
@media (max-width: 780px) { :root { --field-h: 64px; --field-num: 25px; } }
.telegram-home-fields .stars-quantity-input,
.home-order-fields .amount-field,
.amount-field,
.stars-quantity-input {
  min-height: var(--field-h);
  height: var(--field-h);
  padding: 0 14px;
}
.telegram-home-fields .stars-quantity-input input,
.home-order-fields .amount-field input,
.amount-field input,
.stars-quantity-input input {
  height: 100%;
  min-height: 0;
  font-size: var(--field-num);
  line-height: 1;
}

/* 6 · СУФФИКС-СЛОТ. Один бокс на оба поля: тот же размер, та же посадка,
   центр по вертикальной оси поля. Раньше у Stars это была картинка в 48px,
   у Steam — марка в 44px, и они не совпадали ни размером, ни отступом. */
.amount-mark,
.stars-quantity-input .stars-unit {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: var(--radius-chip, 8px);
  background: var(--surface-3);
  color: var(--gold-text);
}
.amount-mark svg,
.stars-quantity-input .stars-unit svg { width: 20px; height: 20px; display: block; }
.stars-quantity-input .stars-unit img,
.amount-mark img { width: 20px; height: 20px; padding: 0; border-radius: 0; background: none; filter: none; }
@media (max-width: 780px) {
  .amount-mark,
  .stars-quantity-input .stars-unit { width: 38px; height: 38px; }
  .amount-mark svg,
  .stars-quantity-input .stars-unit svg,
  .stars-quantity-input .stars-unit img,
  .amount-mark img { width: 22px; height: 22px; }
}

/* 7 · РАСПОРКА. Поле «Логин» растягивалось до высоты соседнего блока
   суммы, потому что грид тянет ячейки. Поля выравниваются по верху и
   стоят на базовой сетке формы, распорок нет. */
.home-order-fields { align-items: start; }
.home-order-fields > .field { align-self: start; }
/* 1 · и ещё раз про масштаб: почти весь остаток бюджета кадра отдан предмету,
   поля рамки ужаты до необходимого. Потолок владельца (треть вьюпорта) при
   этом не задет: 298 из 300 на 1440. */
@media (min-width: 1200px) {
  :root { --hero-art: clamp(210px, 30vh, 266px); --hero-pad: 16px; }
}

/* ===== Блок 2 · видимый фокус везде, без исключений =====
   Обход клавиатурой нашёл цель, у которой фокус был выражен только сменой
   цвета рамки — это читается как наведение, а не как «вы здесь». Кольцо
   даётся системно всем интерактивным элементам и снимается только там, где
   компонент уже рисует своё (плитки переключателя, пресеты). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-chip, 8px);
}
.site-search input:focus-visible,
.input-wrap input:focus-visible,
.amount-field input:focus-visible,
.stars-quantity-input input:focus-visible {
  outline-offset: 3px;
  border-radius: var(--radius-input);
}
/* :where() carries zero specificity by design, so an older `outline: none` on
   .input-wrap input beat it and the Steam login stayed without a ring. The
   inputs get the rule at real specificity; everything else keeps the cheap
   low-specificity version so components can still opt out. */
.input-wrap input:focus-visible,
.amount-field input:focus-visible,
.stars-quantity-input input:focus-visible,
.site-search input:focus-visible,
.choice-search:focus-visible,
input[type="search"]:focus-visible,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="number"]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ===== Блок 3, цикл 2: остаток свода к токенам =====
   Прогон нашёл 142 расхождения. Реальных классов три: кегль ниже пола на
   узком экране, четыре радиуса мимо шкалы и цели меньше 44px у ссылок,
   которые выглядят как ссылки, но ведут себя как кнопки. */

/* пол читаемости держится и на 320: подпись плитки и пресеты не сжимаются
   ниже 11px, вместо этого сжимаются отступы */
@media (max-width: 380px) {
  .service-launchpad.product-switch .launch-service b { font-size: 11px; }
  .preset-row .quick { font-size: 11.5px; min-width: 64px; padding-inline: 8px; }
}

/* радиусы на шкалу: 28, 21, 15 и 10 не принадлежат системе */
.brand-lockup { border-radius: var(--radius-panel); }
.voucher-service-card,
.voucher-service-card.voucher-steam-card { border-radius: var(--radius-input); }
.mobile-menu-list a,
.mobile-menu-legal a { border-radius: var(--radius-chip); }

/* цель, а не строчка: ссылка поддержки живёт в подвале и в меню как кнопка */
.mobile-menu-support,
.footer-links a[href*="t.me"],
.footer-legal-links a[href*="t.me"],
/* Голый селектор по адресу дотягивался до кнопки поддержки В ШАПКЕ
   и подменял её grid + place-items: center на inline-flex без
   горизонтального центрирования: глиф уезжал на 13.5px влево при
   том, что коробка 48x48 стояла в шапке идеально. Правило про
   подвал и меню, туда и ограничено. */
a[href*="t.me/SlarpSup"]:not(.icon-button) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
/* пол читаемости выигрывает у любого сжатия: пресеты и подпись плитки на 320
   держат 11px, ужимаются отступы, а не буквы */
@media (max-width: 380px) {
  .home-presets .quick-row .quick,
  .quick-row.preset-row .quick,
  .preset-row .quick { font-size: 11.5px; min-width: 62px; padding-inline: 8px; }
  .service-launchpad.product-switch .launch-service b { font-size: 11px; }
}

/* ============================================================
   БЛОКЕРЫ, найденные панелью критиков и подтверждённые замером.
   Общий корень первых двух: я задал рамке героя ФИКСИРОВАННУЮ высоту от
   размера предмета и оставил overflow:hidden, а копия в ней абсолютная.
   На десктопе копия короче рамки и всё сходится; на 390 копия 172px против
   рамки 143px — и рамка срезает слоган по середине букв и кнопку снизу.
   Высота кадра не может задаваться одним из двух его содержимых.
   ============================================================ */
@media (max-width: 780px) {
  /* копия возвращается в поток, рамка растёт под содержимое, резать нечего */
  .home-hero-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: var(--hero-art);
    height: auto;
    overflow: visible;
  }
  .home-hero-copy {
    position: static;
    transform: none;
    max-width: none;
    min-width: 0;
  }
  .home-hero-panel img.home-hero-art,
  .home-hero-loop {
    position: static;
    transform: none;
    max-width: 38vw;
    height: auto;
    max-height: var(--hero-art);
    margin: 0;
  }
  .home-hero-loop { position: absolute; }
  .home-hero-cta { align-self: start; }
}

/* Поле суммы на узком экране сжималось гридом до 40px на 390 и до 15px на
   320: пользователь видел «100» вместо «1000», то есть не ту сумму, которую
   платит. Поле обязано вмещать своё значение раньше, чем угождать раскладке. */
@media (max-width: 780px) {
  .home-order-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-order-fields > .field { width: 100%; }
  .amount-field,
  .stars-quantity-input {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .amount-field input,
  .stars-quantity-input input { min-width: 6ch; }
}

/* Подвал обрывался за 84px до конца документа: место под таб-баром
   резервировалось у страницы, а поверхность подвала до него не доходила. */
@media (max-width: 780px) {
  .page { padding-bottom: 0; }
  .site-footer {
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
  }
}

/* Подвал сам держит место под таб-баром: резервация висела на body и потому
   оставалась ПОСЛЕ подвала голой полосой в 84px. */
@media (max-width: 780px) {
  body { padding-bottom: 0; }
}

/* Заголовок героя: line-height 1.0 на прописных даёт переполнение строчного
   бокса (55 против 52) и оптически душит строку. Плюс иерархия: H1 был всего
   на 6% крупнее заголовка секции, то есть на экране два равных заголовка. */
.home-hero-copy h1 {
  font-size: clamp(30px, 5.2vw, 56px);
  line-height: 1.06;
}
@media (max-width: 780px) { .home-hero-copy h1 { font-size: clamp(24px, 7.4vw, 34px); } }
.home-showcase-head h2,
.section h2 { font-size: clamp(20px, 2vw, 28px); }

/* Шкала высот контролов: было пять почти одинаковых значений 44/45/46/52/55,
   что читается не как шкала, а как промахи. Три ступени, без промежуточных. */
:root { --control-sm: 40px; --control-md: 48px; --control-lg: 56px; }
.site-search input,
.icon-button { height: var(--control-md); min-height: var(--control-md); }
.icon-button { width: var(--control-md); }
.button,
.home-hero-cta { min-height: var(--control-lg); }
.preset-row .quick { height: var(--control-md); min-height: var(--control-md); }
@media (max-width: 780px) {
  .site-search input,
  .icon-button { height: 44px; min-height: 44px; }
  .icon-button { width: 44px; }
  .button, .home-hero-cta { min-height: var(--control-md); }
}

/* Тот же корень, теперь на десктопе: подняв кегль заголовка, я сделал копию
   выше рамки, и рамка снова начала резать кнопку. Высота кадра героя — это
   МИНИМУМ под предмет, а не потолок для текста. Правило на все ширины. */
.home-hero-panel {
  min-height: var(--hero-art);
  height: auto;
  overflow: visible;
}
@media (min-width: 781px) {
  .home-hero-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: clamp(16px, 3vw, 48px); }
  .home-hero-copy { position: static; transform: none; max-width: none; min-width: 0; }
  .home-hero-panel img.home-hero-art,
  .home-hero-loop { position: static; transform: none; margin: 0;
    height: auto; max-height: var(--hero-art); max-width: 42%; }
  .home-hero-loop { position: absolute; right: var(--hero-air); }
}
/* прописные Geologica переполняют строчный бокс при line-height ниже 1.1 */
.home-hero-copy h1 { line-height: 1.12; }

/* Откат моей же лишней правки: десктопную композицию (копия слева, предмет
   справа, 88% высоты рамки) владелец принял, и переводить её в грид было не
   нужно — предмет схлопнулся до 56px. Чинить надо было только обрезку.
   Копия остаётся в потоке и растит рамку, предмет возвращается абсолютным
   к правому краю по центру — композиция та же, резать нечего. */
@media (min-width: 781px) {
  .home-hero-panel { display: block; position: relative; }
  .home-hero-copy {
    position: static;
    transform: none;
    max-width: min(54%, 620px);
    padding-block: 6px;
  }
  .home-hero-panel img.home-hero-art,
  .home-hero-loop {
    position: absolute;
    right: var(--hero-air);
    top: 50%;
    transform: translateY(-50%);
    height: var(--hero-art);
    max-height: none;
    max-width: 42%;
    width: auto;
    margin: 0;
  }
}

/* Иерархию я чинил не с той стороны: поднял H1 до 56px, и копия перестала
   помещаться в бюджет кадра — герой вырос до 374 при потолке 300. Разрыв
   между уровнями даёт и уменьшение нижнего: H1 46, H2 22, отношение 2.1,
   а кадр остаётся в трети вьюпорта. */
.home-hero-copy h1 { font-size: clamp(26px, 3.4vw, 46px); }
@media (max-width: 780px) { .home-hero-copy h1 { font-size: clamp(23px, 6.6vw, 30px); } }
.home-showcase-head h2,
.section h2 { font-size: clamp(17px, 1.6vw, 22px); }
/* на 1024 кадр вылезал на 3px за треть вьюпорта: у этой ширины экран ниже,
   а бюджет считается от него */
@media (min-width: 781px) and (max-width: 1199px) {
  :root { --hero-art: clamp(170px, 24vh, 210px); }
}
/* Центрировать предмет через transform нельзя: тем же свойством его двигает
   дыхание, и анимация просто затирает центровку — предмет уезжал на 134px
   вниз. Центровка без transform, transform остаётся движению. */
@media (min-width: 781px) {
  .home-hero-panel img.home-hero-art,
  .home-hero-loop {
    top: 0;
    bottom: 0;
    margin-block: auto;
    transform: none;
  }
}
/* и последние 2px: у категорийных hero копия короче предмета, поэтому рамку
   растит сам предмет, и его высота обязана быть меньше минимума рамки на
   двойной воздух — иначе он ровно упирается в край */
@media (min-width: 781px) {
  .home-hero-panel img.home-hero-art,
  .home-hero-loop { height: calc(var(--hero-art) - var(--hero-air) * 2); }
}

/* ============================================================
   HERO КАК СИСТЕМА, а не как набор подгонок.
   Замер показал корень: постер всегда лежал в рамке, а ЖИВОЕ ВИДЕО
   вылетало на 56-67px на каждой узкой ширине — потому что постер и луп
   позиционировались разными правилами. Оба обязаны занимать ОДИН слот.

   Система из четырёх токенов, одна на все пять страниц и обе ширины:
     --hero-h     высота кадра (минимум, кадр растёт под текст)
     --hero-air   воздух рамки, он же запас на дыхание
     --hero-slot  квадратный слот предмета = высота кадра минус воздух
     --hero-gap   зазор между колонкой текста и слотом
   Предмет любой пропорции садится в слот через object-fit: contain, поэтому
   звезда, кошелёк, карта, геймпад и премиум-звезда занимают одинаковое место
   и никогда не режутся. Индивидуальных правил по страницам нет ни одного.
   ============================================================ */
:root {
  --hero-h: 176px;
  --hero-air: 12px;
  --hero-gap: 16px;
  --hero-slot: calc(var(--hero-h) - var(--hero-air) * 2);
}
@media (min-width: 781px) { :root { --hero-h: 216px; --hero-air: 16px; --hero-gap: 32px; } }
@media (min-width: 1200px) { :root { --hero-h: min(266px, calc(33vh - 28px)); --hero-gap: 48px; } }

.home-hero { padding: var(--hero-pad) 0; }
.home-hero-panel {
  position: relative;
  display: block;
  min-height: var(--hero-h);
  height: auto;
  overflow: visible;
  padding: var(--hero-air);
  border-radius: var(--radius-card);
}
/* текст занимает всё, кроме слота: столкнуться им негде */
.home-hero-copy {
  position: static;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(6px, 1.2vw, 12px);
  min-height: var(--hero-slot);
  max-width: none;
  padding-right: calc(var(--hero-slot) + var(--hero-gap));
}
/* ОДИН слот на постер и на луп: одинаковый бокс, одинаковая посадка,
   вертикальный центр без transform (его забирает дыхание) */
.home-hero-panel img.home-hero-art,
.home-hero-panel .home-hero-loop {
  position: absolute;
  right: var(--hero-air);
  top: var(--hero-air);
  bottom: var(--hero-air);
  margin-block: auto;
  width: var(--hero-slot);
  height: var(--hero-slot);
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 380px) {
  :root { --hero-h: 160px; --hero-gap: 12px; }
  .home-hero-copy { padding-right: calc(var(--hero-slot) + var(--hero-gap)); }
}
/* на 320 копия перерастала кадр на один пиксель: ужимаем её собственные
   зазоры, а не кадр — предмет и воздух остаются системными */
@media (max-width: 380px) {
  .home-hero-copy { gap: 5px; }
  .home-hero-copy p { font-size: 11.5px; line-height: 1.4; }
}
/* Ряд обязан быть ровным: min-height давал главной 257, а категорийным 207,
   потому что у главной копия из трёх строк и кнопки. Высота кадра становится
   ФИКСИРОВАННОЙ и рассчитана на самую высокую копию — тогда все пять страниц
   стоят в одну линию, а слот предмета везде один и тот же. */
:root { --hero-h: min(248px, calc(33vh - 28px)); }
@media (min-width: 781px) { :root { --hero-h: min(232px, calc(33vh - 28px)); } }
@media (min-width: 1200px) { :root { --hero-h: min(266px, calc(33vh - 28px)); } }
@media (max-width: 380px) { :root { --hero-h: min(232px, calc(33vh - 28px)); } }
.home-hero-panel { height: var(--hero-h); min-height: var(--hero-h); }
.home-hero-copy { min-height: 0; height: 100%; }
/* на узком экране длинные слова заголовка перелезали в зарезервированный
   слот, а копия переставала помещаться в фиксированный кадр */
@media (max-width: 480px) {
  .home-hero-copy > * { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
  .home-hero-copy h1 { font-size: clamp(20px, 5.6vw, 26px); line-height: 1.1; }
  .home-hero-copy p { font-size: 11.5px; line-height: 1.35; }
  .home-hero-cta { min-height: 42px; padding-inline: 14px; font-size: 13px; }
}
/* Фиксированный кадр и трёхстрочный заголовок с пояснением на 320 не уживаются.
   Решение по смыслу, а не сжатием кегля: на самых узких экранах в кадре
   остаются заголовок и кнопка, а поясняющая строка уходит — она повторяет то,
   что через 60px говорит сам переключатель категорий. */
@media (max-width: 400px) {
  .home-hero-copy p { display: none; }
}
/* на 320 экран ниже, и треть вьюпорта это 240: кадр обязан помещаться в неё
   вместе со своими полями */
@media (max-width: 380px) { :root { --hero-h: 196px; } }
/* overflow-wrap:anywhere я поставил, чтобы слово не лезло в слот предмета, и
   получил заголовки, разорванные посреди букв: «ПОБОЧН/ЫХ», «PREMIU/M».
   Это хуже того, что чинилось. Слово рвётся только если иначе никак, а место
   заголовку даёт слот: на узких экранах он уступает ширину тексту. */
@media (max-width: 480px) {
  .home-hero-copy > * {
    /* `hyphens: auto` при lang="ru" рвёт слова по слогам, и баннер читался как
       «донат без по-бочных кве-стов». На баннере это не перенос, а брак:
       крупная фраза переносится только по СЛОВАМ. */
    overflow-wrap: break-word;
    hyphens: manual;
  }
  :root { --hero-slot: calc((var(--hero-h) - var(--hero-air) * 2) * 0.78); }
  .home-hero-copy { padding-right: calc(var(--hero-slot) + var(--hero-gap)); }
}

/* Якорь /profile/#orders вёл в пустоту: страницы после оплаты предлагают
   «Открыть заказ», а секции с таким id в документе не было. Теперь id есть,
   и вместе с ним обязателен отступ прокрутки: шапка липкая, без него
   заголовок «Заказы» уезжает ПОД неё, и человек после оплаты видит середину
   списка вместо его начала. */
.orders-section { scroll-margin-top: calc(var(--header-h, 64px) + 20px); }

/* Состояния заказа. Бейдж красится по UI-группе, а не по сырому статусу:
   под `created` живут три разных состояния словаря, и одинаковый вид врал бы
   про разницу между «ждём оплату», «оплата не создалась» и «заказ устарел».
   Кегль был 9px, ниже собственного пола продукта в 11px. */
.order-status { font-size: 11px; padding: 5px 9px; }
.order-status.active { color: var(--gold-text); }
.order-status.attention { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.order-status.completed { color: var(--green); }
.order-status.refunded { color: var(--blue); }

/* Действие заказа: неоплаченный заказ был тупиком, теперь у него есть выход */
.store-order-actions { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); margin-top: 12px; }
.order-action { min-height: var(--control-md, 44px); padding-inline: 18px; font-size: 13.5px; }
.order-action.ghost { border-color: var(--line-strong); background: transparent; color: var(--text); }

/* Кольцо фокуса у карточки витрины было убито строкой `outline: 0`, написанной
   в одном селекторе с `:hover`. Наведение мышью и фокус с клавиатуры это
   РАЗНЫЕ состояния: подъём карточки нужен обоим, снятие обводки не нужно
   никому. Замер: 754 интерактивных элемента, кольца не было только здесь. */
.home-showcase-card:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* Кольцо фокуса берёт СВОЙ токен, а не золото бренда. Токен --focus-ring
   существовал в обеих темах, но правило рисовало var(--gold): в тёмной это
   одно и то же, а в светлой золото #AF831D на светлой поверхности давало
   контраст 2.68 при пороге 3.0 для нетекстовых индикаторов. Замер по всем
   17 страницам: ниже порога были только ссылки в тексте, потому что вокруг
   них нет собственной тёмной подложки. */
:focus-visible,
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible,
[role="button"]:focus-visible, [role="tab"]:focus-visible,
.home-showcase-card:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Реферальная ссылка на 320px схлопывалась в 258x17 при кнопке 46px: ряд
   переставал держать высоту, и поле оседало до высоты собственной строки.
   Высота поля это высота КОНТРОЛА, а не текста в нём, на любой ширине. */
.referral-link { flex-wrap: wrap; }
.referral-link input { min-height: var(--control-md, 44px); }
@media (max-width: 360px) {
  .referral-link input,
  .referral-copy { flex: 1 1 100%; }
}

/* Переключатель категорий на категорийных страницах: тот же компонент, что на
   главной, но только на десктопе. На мобильном единственная навигация
   категорий это таб-бар, второй ряд плиток там был бы дублем. */
.service-launchpad.category-switch { display: none; }
@media (min-width: 781px) {
  .service-launchpad.category-switch { display: grid; margin: 0 0 var(--space-5, 22px); }
}

/* --blue был единственным семантическим токеном без светлого значения: в обеих
   темах #5B8FE8. На светлой поверхности бейдж «Возврат» давал 2.79 при пороге
   4.5 для мелкого текста. Остальные бейджи проходят (5.38-5.52), провал был
   ровно один и ровно по этой причине. */
[data-theme="light"] { --blue: #2B5EA8; }

/* Полоса прогресса до следующего ранга при нулевом прогрессе была невидима в
   ОБЕИХ темах: жёлоб красился в var(--bg) поверх карточки, контраст 1.05 в
   тёмной и 1.12 в светлой. Пустой жёлоб это тоже элемент интерфейса: он
   показывает, сколько всего пути, а не только пройденную часть. */
.rank-track { background: rgba(244, 239, 228, .38); }
[data-theme="light"] .rank-track { background: rgba(25, 25, 24, .48); }

/* ЧИСЛОВОЕ ПОЛЕ КАК ОДИН КОМПОНЕНТ.
   Сумма Steam и количество звёзд делают одну работу, а собраны были по-разному:
   на главной уже жил нормальный `.amount-field` с `.amount-mark`, а /steam/
   был примитивом `.input-wrap` с голым текстовым «₽» 9x21, звёзды же имели
   собственный `.stars-quantity-input` с блоком 44x44. Отсюда «суффиксы снова
   разного размера»: чинить было нечего, общего компонента не существовало.
   Теперь размеры задаёт одна пара токенов, а разметка у всех одна. */
:root { --num-size: 24px; --num-suffix: 44px; }
@media (max-width: 780px) { :root { --num-size: 23px; --num-suffix: 40px; } }

.amount-field { position: relative; }
.amount-field > input {
  width: 100%;
  font-size: var(--num-size);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  padding-right: calc(var(--num-suffix) + 8px);
}
/* суффикс это СЛОТ фиксированного размера, а не строчка текста рядом */
.amount-field > .amount-mark {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: var(--num-suffix);
  height: var(--num-suffix);
  display: grid;
  place-items: center;
  color: var(--muted);
  pointer-events: none;
}
.amount-field > .amount-mark svg,
.amount-field > .amount-mark img { width: 24px; height: 24px; display: block; }

/* Подпись диапазона у всех форм одна и на одном месте: у Steam лимиты были в
   разметке (min 100, max 15 000), но человеку их не показывали, и рядом со
   Stars форма выглядела недоделанной. */
.helper.steam-range, .helper.stars-range {
  margin: 8px 0 0;
  color: var(--muted-2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Ряд главной и кегль её поля перебивались более специфичными правилами
   страницы: колонки возвращались к двум, кегль к 25px. Повышаем вес адресно,
   без !important: класс дублируется, у поля добавлен атрибутный селектор. */
@media (max-width: 780px) {
  .home-order-fields.home-order-fields:has(.amount-field) {
    grid-template-columns: minmax(0, 1fr);
  }
}
.amount-field > input[data-steam-amount],
.amount-field > input[data-stars-count] { font-size: var(--num-size); }

/* На десктопе колонка суммы у главной оставалась узкой (128px под цифры при
   слоте суффикса 44px), и максимум «15 000» кеглем 24 в неё не влезал.
   Колонка суммы получает минимум, рассчитанный от самого длинного значения. */



/* Ряд Telegram на узком экране: поле количества звёзд имеет минимальную
   ширину (кегль 23 плюс слот суффикса 40px), и в двухколоночном ряду шириной
   344px оно забирало всё, а колонка получателя схлопывалась в 0 — подписи
   «Получатель» и «Количество звёзд» вставали на одну строку. Ряд складывается,
   и размещение детей сбрасывается: без сброса они остаются в своих колонках. */
@media (max-width: 780px) {
  .home-order-fields.telegram-home-fields { grid-template-columns: minmax(0, 1fr); }
  .home-order-fields.telegram-home-fields > * { grid-column: 1 / -1; min-width: 0; }
}

/* Колонку схлопывало не правило сетки, а min-content самого поля: кегль 23
   плюс слот суффикса 40px давали ему минимум 336px, и в ряду 344px соседу
   оставался ноль. Поле обязано уметь сжиматься. */
.home-order-fields .field,
.home-order-fields .amount-field,
.home-order-fields .amount-field > input { min-width: 0; }
.home-order-fields .amount-field > input { width: 100%; }

/* Секция Stars устроена как секция Steam.
   Причина перекоса: ряд Telegram держат правила `.home-order-layout
   .compact-action .home-order-fields` (вес 0,3,0) со второй колонкой
   `minmax(102px, 34%)`, и поле количества звёзд стояло именно в ней — отсюда
   узкое поле, прижатое вправо, при полноширинном «Получателе». У Steam все
   поля занимают строку целиком, поэтому его секция и читается правильно.
   Здесь то же самое: на узком экране каждое поле ряда занимает всю строку. */
@media (max-width: 780px) {
  .home-order-layout .telegram-home-fields > .field { grid-column: 1 / -1; min-width: 0; }
}

/* Слот суффикса у звёзд шёл от собственных правил `.stars-unit` и давал 30px
   на 320 и 44px на 390, тогда как у суммы он 40px на обеих ширинах. Это тот
   же класс «суффиксы разного размера»: размер обязан идти от токена, а не от
   правил конкретной формы. */
.amount-field > .amount-mark.stars-unit {
  width: var(--num-suffix);
  height: var(--num-suffix);
}

/* Кольцо фокуса обводит ПОЛЕ ЦЕЛИКОМ, а не только строку ввода.
   Слот суффикса это часть поля, и когда кольцо обрывалось перед ним, поле
   читалось как две отдельные коробки, а обводка как обрубок. Кольцо уезжает
   на обёртку по :focus-within, у самой строки ввода своей обводки больше нет:
   замена видимая и на том же токене, так что правило «outline: none без
   видимой замены запрещён» не нарушено. */
.amount-field:focus-within {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-input, 14px);
}
.amount-field > input:focus,
.amount-field > input:focus-visible { outline: none; }

/* Колонка суммы на десктопе: страничные правила `.home-order-layout
   .compact-action .home-order-fields` (вес 0,3,0) сжимали её до 128px, и
   «15 000» кеглем 24 в поле не помещалось. Задаём ДОРОЖКУ, а не минимум на
   элементе: первая колонка остаётся сжимаемой, ряд за карточку не выходит. */
@media (min-width: 781px) {
  .home-order-layout .home-order-fields:has(.amount-field) {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
  }
}

/* ОДИН ШАБЛОН ФОРМЫ для всех воронок главной.
   Компонент поля свели дважды, а формы продолжали расходиться, потому что
   ритм задавался не шаблоном, а правилами каждой панели: зазор ряда 8px у
   Steam против 6px у Telegram, подпись диапазона 12/18/8 против 11/16.5/4,
   подпись пресетов разной высоты. Различаться должно СОДЕРЖИМОЕ (логин против
   получателя, рубли против звёзд), а не геометрия. */
.home-order-card .field { gap: var(--form-row-gap, 8px); }
.home-order-card .field > label {
  display: block;
  margin: 0 0 3px;
  min-height: 18px;
  font-size: 12px;
  line-height: 18px;
}
.home-order-card .field > .helper {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 18px;
}

/* Подпись блока пресетов: у Steam на ней висел `min-height: 32px`, у Stars 0,
   отсюда 14px разницы в высоте ряда. Высоту подписи задаёт шаблон, а не панель. */
.home-order-card .field.home-presets > label { min-height: 18px; }
/* Внешний ритм панели тот же, что у рядов формы */
.home-order-card [data-home-panel] { row-gap: 8px; }

/* Подпись блока пресетов и ритм рядов задаёт ШАБЛОН, а не панель.
   Побеждало `.home-order-layout.compact-action .home-order-fields .field label`
   с min-height 32px (вес 0,4,1) — оно выравнивает подписи двухколоночного ряда
   логин/сумма и к полноширинному блоку пресетов отношения не имеет. */
@media (max-width: 780px) {
  .home-order-layout.compact-action .home-order-fields .field.home-presets > label {
    min-height: 18px;
  }
  .home-order-layout.compact-action .home-order-fields { row-gap: 8px; }
}
.home-order-layout.compact-action .home-order-fields { row-gap: 8px; }

/* Ручная подгонка `margin-top: -2px` на блоке пресетов Telegram давала зазор
   6px против 8px у Steam. Ритм задаёт шаблон, подгонок в нём нет. */
.home-order-card .field.home-presets { margin-top: 0; }

/* Автозаполнение браузера — последний слой состояния поля, который жил сам по
   себе: Chrome кладёт свою жёлтую заливку и синий текст, которые не
   переопределяются `background-color`. Приём с внутренней тенью на всю высоту
   поля закрывает заливку поверхностью продукта, а `-webkit-text-fill-color`
   возвращает текст в токен. Работает в обеих темах, потому что берёт токены,
   а не константы. Тень ВНУТРЕННЯЯ: кольцом фокуса она не считается. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset;
  box-shadow: 0 0 0 1000px var(--surface-2) inset;
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  /* Chrome возвращает свой фон анимацией; отодвигаем её за горизонт */
  transition: background-color 100000s ease 0s;
}

/* Ритм шаблона формы отдельным токеном: он задаёт и зазор внутри ряда, и
   расстояние между рядами, поэтому менять его можно только в одном месте. */
:root { --form-row-gap: 8px; }

/* Пустое состояние стояло слева: блок 379px при контейнере 1200 с отступом
   21px слева и 800px справа. Текст внутри был центрирован, а сам блок нет,
   поэтому «Сервисы недоступны» читалось как обрезанный кусок, а не как
   состояние всей страницы. Состояние занимает ширину страницы и стоит по
   её центру. */
.checkout-empty { display: grid; place-items: center; }
.checkout-empty > .empty-state,
.empty-state { margin-inline: auto; }

/* Активный чип фильтра выглядит ОДИНАКОВО на всех каталогах.
   Вид задавали правила, привязанные к классу страницы: у `.games-page`
   подчёркивание снизу и радиус 12, у `.services-page` полная золотая рамка и
   радиус 16. Один и тот же элемент в одном и том же ряду не может выглядеть
   по-разному в зависимости от того, на какой странице он оказался. */
.filters .filter.active,
.games-page .filters .filter.active,
.services-page .filters .filter.active {
  border: 0;
  border-radius: 12px;
  background: var(--accent-wash);
  box-shadow: inset 0 -2px 0 0 var(--gold);
  color: var(--gold-text);
}

/* Чип фильтра в ПОКОЕ тоже един. Активное состояние я свёл, а спокойное
   осталось разным: на сервисах у чипа рамка 1px, плотная заливка и радиус 16,
   на играх рамки нет, заливка полупрозрачная, радиус 12. Именно эта рамка и
   читается как «обводка, которой быть не должно». */
.filters .filter,
.games-page .filters .filter,
.services-page .filters .filter {
  border: 0;
  border-radius: 12px;
  background: var(--hairline);
}
.filters .filter:hover,
.services-page .filters .filter:hover {
  background: var(--accent-wash);
  border: 0;
}

/* Чип фильтра выглядит одинаково на всех каталогах и в ПОКОЕ, не только
   активным. Неактивный чип на сервисах нёс рамку 1px, плотную заливку и
   радиус 16 против безрамочного полупрозрачного чипа радиусом 12 у игр —
   отсюда «обводка, которой быть не должно». Вид элемента не может зависеть
   от того, на какой странице он оказался. */
.filters .filter,
.games-page .filters .filter,
.services-page .filters .filter {
  border: 0;
  border-radius: 12px;
  background: var(--hairline);
  color: var(--muted);
}
.filters .filter:hover,
.games-page .filters .filter:hover,
.services-page .filters .filter:hover {
  background: var(--accent-wash);
  color: var(--text);
}

/* Выбранная плитка переключателя выглядит одинаково везде.
   Кольцо, которое видел владелец, сидело не на плитке, а на её ИКОНКЕ: у
   «Игр» `border: 0px none`, у «Сервисов» `1px solid` золотом. Замер плитки
   этого не показывал, потому что различие было на вложенном элементе. */
.launch-service.selected .launch-icon,
.services-page .launch-service.selected .launch-icon,
.launch-service.launch-all-services.selected .launch-icon { border: 0; }

/* Собачка в поле получателя стояла СПРАВА, где у суммы стоит «₽», и читалась
   как единица измерения, а не как часть ника. Ник начинается с собачки, значит
   и она стоит перед вводом. Плейсхолдер повторял её второй раз. */
.input-wrap:has(> input[data-telegram-recipient]) > span {
  right: auto;
  left: 14px;
  color: var(--muted-2);
  pointer-events: none;
}
.input-wrap > input[data-telegram-recipient] {
  padding-left: 34px;
  padding-right: 12px;
}

/* Каталог обязан пользоваться шириной экрана. На 1440 сетка рисовала
   ДВЕНАДЦАТЬ колонок карточками 89x131 — ровно того же размера, что на
   телефоне: вместо карточек товара получалась стена мелких иконок, и название
   игры в 14px оказывалось шире собственной карточки. Колонка растёт вместе с
   экраном, число колонок падает. */
@media (min-width: 781px) {
  .catalog-grid.game-logo-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 22px 16px;
  }
}
@media (min-width: 1200px) {
  .catalog-grid.game-logo-grid {
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  }
}

/* Контекст заказа на шаге оплаты. Человек нажал «Продолжить» и видел шторку
   с ошибкой поверх витрины: что именно он оплачивает, на экране не было. */
.gate-order {
  display: grid;
  gap: 4px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  text-align: left;
}
.gate-order b { color: var(--text); font-size: 14px; }
.gate-order span { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ================================================================
   ПРОФИЛЬ ПО СИСТЕМЕ.
   Аудит дал набор расхождений, у которых один корень: кабинет собирали
   отдельными правилами, а не компонентами витрины. Панели держали радиус 24px
   на всех ширинах, хотя система на мобильном его уменьшает; паддинги соседних
   карточек расходились (16 против 22 на 390, 28 против 22 на 1440); поле
   реферальной ссылки имело радиус 5px и кегль 11px мимо компонента поля;
   у сегментированного контрола вложенный радиус 16px был больше внешнего 6px;
   один класс .eyebrow рендерился двумя кеглями; пустое состояние заказов не
   похоже на пустое состояние каталога; в двух местах кегль 10px при
   собственном поле продукта 11px; на экране жили три разные высоты кнопок.
   ================================================================ */

/* панели: радиус и паддинг по системе, одинаково у соседей */
.profile-section,
.profile-overview,
.identity-panel { border-radius: var(--radius-card); }
@media (max-width: 780px) {
  .profile-section,
  .profile-overview,
  .identity-panel { border-radius: 16px; }
}
.profile-section,
.profile-sidebar .profile-section { padding: var(--space-4, 16px); }
@media (min-width: 781px) {
  .profile-section,
  .profile-sidebar .profile-section { padding: var(--space-6, 24px); }
}

/* поле реферальной ссылки это ПОЛЕ, а не своя коробка */
.referral-link input {
  height: var(--control-md, 48px);
  min-height: var(--control-md, 48px);
  border-radius: var(--radius-input, 14px);
  background: var(--surface-2);
  font-size: 13px;
}
.referral-copy {
  height: var(--control-md, 48px);
  min-height: var(--control-md, 48px);
  border-radius: var(--radius-input, 14px);
  font-size: 12px;
}

/* сегментированный контрол: внутренний радиус меньше внешнего на паддинг */
.order-filters { border-radius: 14px; padding: 4px; }
.order-filters button { border-radius: 11px; }

/* один класс — один кегль */
.profile-identity .eyebrow,
.profile-section .eyebrow { font-size: 11.5px; }

/* пустое состояние заказов выглядит как пустое состояние каталога */
.orders-empty {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-2);
}
@media (max-width: 780px) { .orders-empty { border-radius: 16px; } }

/* пол кегля продукта — 11px, ниже не опускаемся нигде */
.orders-empty > span,
.rank-card p { font-size: 11px; }

/* «Выйти» перестаёт быть самым громким на экране: красный это цвет
   ПОСЛЕДСТВИЯ, он включается при наведении и фокусе, а не в покое */
.profile-logout { color: var(--muted); }
.profile-logout:hover,
.profile-logout:focus-visible { color: var(--red); }

/* имя человека крупнее заголовка секции и набрано витринной гарнитурой */
.profile-identity h2 {
  font-family: var(--display);
  font-size: 26px;
  letter-spacing: .01em;
}
@media (max-width: 780px) { .profile-identity h2 { font-size: 21px; } }

/* список заказов резервирует место: без него подвал прыгает вверх, пока
   список пуст, и обратно вниз, когда заказы приезжают */
.order-list { min-height: 240px; }

/* Пол кегля 11px без исключений: кнопка копирования кода жила на 9px */
.store-order-code button,
.orders-empty button,
.profile-dashboard button { font-size: max(11px, 1em); }
.store-order-code button { font-size: 11px; }

/* ПОРЯДОК КАБИНЕТА ПО ПРИОРИТЕТУ ВОЗВРАЩАЮЩЕГОСЯ.
   Панель критиков ответила замером, а не вкусом: перенос истории заказов над
   карточкой профиля поднимает первый заказ с y=565 на y=223 на 390 (минус
   342px) и с 567 на 190 на 1440; число целиком видимых заказов растёт с 0 до 2
   и с 1 до 3, доступных без прокрутки кнопок действия — с 0 до 2 и с 1 до 3.
   Ниже сгиба уходит только то, на что нельзя нажать: счётчик заказов не
   кликабелен, бонусы негде потратить, прогресс ранга дублирует блок «Ранги» на
   этой же странице. Сам продукт уже голосует за такой порядок: после оплаты он
   уводит на /profile/#orders и тратит анимацию, чтобы обойти собственную
   вёрстку.
   Сверху остаётся только строка «имя, ранг, выйти»: возвращающийся должен
   видеть, что вошёл в свой аккаунт. */
.profile-dashboard { display: grid; }
.profile-overview { display: contents; }
.profile-overview-main { order: 1; }
.profile-dashboard-grid { order: 2; }
.profile-stat-grid { order: 3; }
.profile-progress-block { order: 4; }
/* «display: contents» снимает с обзора собственный фон и рамку, поэтому
   вернём их тем частям, которые остались панелями */
.profile-overview-main,
.profile-stat-grid,
.profile-progress-block {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}
@media (max-width: 780px) {
  .profile-overview-main,
  .profile-stat-grid,
  .profile-progress-block { border-radius: 16px; }
}
.profile-dashboard { row-gap: var(--space-4, 16px); }

/* Строка личности это СТРОКА, а не блок. Критик замерил: карточка профиля
   занимала 46% полезной высоты мобильного экрана, из них надпись «Твой
   профиль» и герб — украшение. Оставляем то, ради чего строка нужна
   возвращающемуся: он видит, что вошёл в свой аккаунт, и может выйти. */
.profile-overview-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
}
.profile-overview-main .rank-crest { width: 36px; height: 36px; }
.profile-overview-main .profile-identity { display: grid; gap: 0; }
.profile-overview-main .profile-identity .eyebrow { display: none; }
.profile-overview-main .profile-identity h2 { font-size: 17px; line-height: 1.2; }
.profile-overview-main .profile-identity p { font-size: 11.5px; line-height: 1.3; margin: 0; }
@media (min-width: 781px) {
  .profile-overview-main { padding: 12px 18px; }
  .profile-overview-main .rank-crest { width: 40px; height: 40px; }
  .profile-overview-main .profile-identity h2 { font-size: 19px; }
}
.profile-overview-main { min-height: 0; grid-auto-rows: min-content; }

/* Поля конфигуратора игры собраны мимо компонента: радиус 6px против
   системного, высота своя. Тот же класс, что был у поля реферальной ссылки в
   кабинете: экран собран правилами, а не компонентами витрины.
   Рамка ошибки при этом на месте: правило [aria-invalid] существует и живо,
   заявленного правила `.games-page … border: 0`, которое её якобы убивало, в
   текущей таблице нет. */
.account-fields input,
.account-fields select {
  border-radius: var(--radius-input, 14px);
  min-height: var(--control-md, 48px);
}

/* Плавающий док стоит поверх страницы и на 390 накрывал ряд пресетов и строку
   итога: единственное место, где живёт сумма, оказывалось под ним. Страница
   получает снизу запас на высоту дока, чтобы прокрутка доводила до конца и
   ничего не оставалось под ним навсегда. */
@media (max-width: 780px) {
  main.page { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}

/* Лист покупки в каталоге обязан называть игру, по которой человек кликнул.
   Имя жило только в визуальной колонке, а она на десктопе скрыта правилом
   `min-width: 781px`, и на широком экране лист говорил «Выбери вариант» без
   единого упоминания игры: подтверждения выбора не было вообще. Имя перенесено
   в заголовок правой колонки, который виден всегда. */
.game-checkout-heading h3 { line-height: 1.12; }
.game-checkout-sub { margin: 4px 0 0; color: var(--ui-muted); font-size: 13px; }
@media (max-width: 780px) {
  /* На узком экране игру называет верхняя полоса с бейджем: второе имя подряд
     это шум, а не подтверждение. */
  .games-page .game-checkout-heading h3 { display: none; }
  .games-page .game-checkout-sub { margin: 0; }
}
@media (min-width: 781px) {
  /* `min-height: 610px` держался за колонку с обложкой: она задавала рост листа.
     На десктопе обложка скрыта, а высота осталась, и лист с коротким набором
     шагов заканчивался пустой полосой в сотню пикселей под кнопкой. Высота
     обязана идти от содержимого там, где содержимое единственное. */
  .games-page .game-configurator { min-height: 0; }
}

/* Объёмный знак на экранах, где он единственный крупный предмет.
   Кадр квадратный 512×512, сам знак внутри 492×277: широкая марка в
   квадратном кадре, поэтому по высоте остаётся воздух, и это нормально —
   так предмет не прыгает между режимами, у которых разная амплитуда.
   Подмена постера на видео идёт через тот же класс, что у героя: постер это
   первый кадр лупа, поэтому переход невидим. */
.bolt-art {
  position: relative;
  display: block;
  width: var(--bolt-size, 132px);
  margin-inline: auto;
}
/* Высоту бокса задаёт САМ постер, а не выписанная пропорция.
   Первая попытка ставила боксу aspect-ratio по обмеру марки, и это была
   ошибка: файл был квадратным, а `object-fit: contain` вписывает квадрат в
   широкий бокс по высоте — марка осталась на 52% высоты и потеряла ширину,
   уменьшившись почти вдвое. Холст файла теперь облегает марку
   (tools/3d/encode_loops.py --tight), поэтому постер в потоке даёт боксу
   ровно ту высоту, что у предмета, и любое новое применение получает свою
   пропорцию само. */
.bolt-art > img[width][height],
.bolt-art > img {
  display: block;
  width: 100%;
  height: auto;
}
.bolt-art > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Постер и видео гаснут и проявляются одной длительностью. Раньше переход
   стоял только на видео: постер снимался мгновенно, и знак на 300 мс уходил
   в ноль — на всех пяти экранах подмена читалась рывком, а не подменой. */
.bolt-art > img,
.bolt-art > video {
  transition: opacity .3s ease;
}
.bolt-art > video { opacity: 0; pointer-events: none; }
.bolt-art.bolt-live > video { opacity: 1; }
.bolt-art.bolt-live > img { opacity: 0; }
/* Знак на экране успеха занимает место значка-галочки. Значок был чипом с
   рамкой 58×58; марка в чипе не читается и спорит с ним за роль. Рамка снята,
   размер поднят: на этом экране громкий элемент один, и это знак. */
.payment-result-icon.bolt-art {
  width: 148px;
  /* базовый чип держит height: 58px, и без снятия бокс выходил 148x58 вместо
     пропорции марки: высоту задаёт aspect-ratio, а не остаток от значка */
  height: auto;
  border: 0;
  background: none;
  border-radius: 0;
  margin: 0 auto 14px;
}
@media (max-width: 520px) {
  .payment-result-icon.bolt-art { width: 124px; }
  .empty-state-art.bolt-art { --bolt-size: 116px; }
}

/* Витрина бренда. Раньше в ней лежал плоский локап знак-плюс-слово, ровно тот
   же, что этажом ниже отдаётся файлом для скачивания: две одинаковые марки на
   одном экране, из них ни одна не главная. Витрине отдан объёмный знак, он
   здесь единственный громкий элемент; плоский канон остался в секции файлов,
   где его и ищут. */
.brand-lockup.bolt-art {
  width: min(100%, 420px);
  place-self: center;
}

/* ПЕЧАТЬ НА ГЕРБЕ РАНГА НЕ ПОСТАВЛЕНА, и это измерение, а не пропуск.
   Герб живёт 56 px, при 58% ширины знак получает 32×18 px. На такой площади
   зигзаг перестаёт быть зигзагом: на снимке пяти металлов печать читается
   грязным пятном, а не маркой, на серебре и платине почти исчезает. Канон
   мелкого кегля прямо говорит обратное — на малых размерах живёт плоский
   Vector.svg, и объёмная печать этому канону противоречит. Место для марки
   на карте рангов есть, но оно не здесь: нужна карточка ранга крупнее 64 px,
   а её в текущем макете нет. Файл печати оставлен собранным
   (/img/store/ranks/crest-stamp.e808d559.webp), правило снято. */

/* Ожидание денег в чекауте. Крутящееся кольцо сообщает «идёт процесс» и
   больше ничего; на шаге, где человек уже нажал «оплатить», это самая
   тревожная секунда всего пути. Знак вместо кольца сообщает «работаем мы»,
   и пульс у него мягкий, без рывка.
   Второй спиннер сайта, .identity-loader, живёт 24 px и остаётся кольцом:
   на такой площади марка не читается, а канон мелкого кегля прямо запрещает
   объёмный знак в мелком размере. */
.checkout-spinner.bolt-art {
  width: 96px;
  border: 0;
  border-radius: 0;
  animation: none;
}
@media (max-width: 520px) {
  .checkout-spinner.bolt-art { width: 78px; }
}

/* Строка котировки в воронке. Появляется только когда сервер назвал цифру:
   пустое место лучше выдуманной цены. Место под неё зарезервировано формой
   одного шаблона, поэтому появление не двигает кнопку. */
.funnel-quote {
  margin: 0 0 var(--space-2, 10px);
  color: var(--text-secondary, var(--muted));
  font-size: 13px;
  font-weight: 700;
}
.funnel-quote[hidden] { display: none; }

/* Подложка листа покупки в светлой теме была СПЛОШЬ белой, и сам лист белый:
   контраст между ними 1.000, каталог за листом стирался полностью, и человек
   переставал понимать, что это оверлей поверх страницы, а не новый экран.
   В тёмной теме подложка всегда была вуалью rgba(5,6,5,.72) с размытием и
   работала правильно. Светлой нужна такая же вуаль, только светлее по
   плотности: страница позади обязана просвечивать. */
[data-theme="light"] .games-page .game-checkout-panel,
[data-theme="light"] .services-page .voucher-layout,
[data-theme="light"] .games-page .game-checkout-panel[hidden="false"] {
  background: rgba(20, 22, 26, .42);
  backdrop-filter: blur(10px);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .games-page .game-checkout-panel,
  :root:not([data-theme="dark"]) .services-page .voucher-layout {
    background: rgba(20, 22, 26, .42);
    backdrop-filter: blur(10px);
  }
}

@media (max-width: 780px) {
  /* Тот же класс на мобильном, в обеих темах: контейнер шторки заливался
     цветом поверхности на всю высоту окна, и страница НАД шторкой закрывалась
     наглухо. Нижняя шторка обязана оставлять каталог видимым сверху, иначе
     она читается как новый экран, из которого некуда вернуться.
     Цвет поверхности живёт на самом листе, контейнеру нужна вуаль. */
  .games-page .game-checkout-panel,
  .services-page .voucher-layout {
    background: rgba(6, 7, 9, .58);
  }
  [data-theme="light"] .games-page .game-checkout-panel,
  [data-theme="light"] .services-page .voucher-layout {
    background: rgba(20, 22, 26, .42);
  }
}

/* Поддон под 3D-иконками витрины. Слой арта заливается var(--surface-2) под
   цветным радиальным пятном: в тёмной теме этот слой растворяется (замер
   1.04:1 к карточке), ради этого он и рисовался. В светлой теме тот же слой
   даёт серое пятно контрастом 2.2:1 к белой карточке и читается как артефакт
   рендера или битая картинка. Цветное пятно остаётся — оно несёт опознание
   товара, — а база сводится к цвету карточки.
   Затемняющий градиент снизу тоже был рассчитан на тёмное: в светлой теме он
   кладёт грязь под предметом. */
[data-theme="light"] .home-showcase-card .home-showcase-art {
  background-color: var(--surface);
}
[data-theme="light"] .home-showcase-art::after {
  background: linear-gradient(180deg, transparent 55%, rgba(28, 26, 22, .07));
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .home-showcase-card .home-showcase-art {
    background-color: var(--surface);
  }
  :root:not([data-theme="dark"]) .home-showcase-art::after {
    background: linear-gradient(180deg, transparent 55%, rgba(28, 26, 22, .07));
  }
}

/* Цена в плитке каталога. Мелкая и вторичная: плитку узнают по знаку товара,
   а цена отвечает на второй вопрос, не на первый. Появляется только когда
   цифра есть, поэтому высота плитки не должна от неё зависеть. */
.catalog-card-price {
  display: block;
  margin-top: 2px;
  color: var(--text-secondary, var(--muted));
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Брендбук: охранное поле, минимальный размер и запреты.
   В брендбуке этих правил не было вовсе, а без них марку и ломают: на гербе
   ранга объёмная печать в 32×18 превратилась в пятно, и правило пришлось
   выводить замером задним числом. Правило должно лежать на странице раньше,
   чем его нарушат. */
.brand-guard-grid {
  display: grid;
  gap: var(--space-4, 18px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.brand-guard {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: var(--space-4, 18px);
  border: 1px solid var(--line);
  border-radius: var(--radius-card, 18px);
  background: var(--surface);
}
.brand-guard b { font-size: 15px; }
.brand-guard > span { color: var(--text-secondary, var(--muted)); font-size: 13px; }
.brand-guard-demo {
  display: grid;
  place-items: center;
  gap: 12px;
  min-height: 132px;
  border-radius: var(--radius-input, 14px);
  background: var(--surface-2, rgba(127, 127, 127, .08));
  color: var(--gold);
}
/* Два размера обязаны стоять РЯДОМ: карточка объясняет их сравнением, а
   раскидав их по краям бокса, она объяснения не даёт. */
.brand-guard-sizes {
  grid-auto-flow: column;
  justify-content: center;
  align-items: end;
  gap: 20px;
}
/* Охранное поле показано пунктиром: это и есть предмет объяснения. */
.brand-guard-field {
  display: grid;
  place-items: center;
  padding: 22px;
  border: 1px dashed var(--line-strong);
  border-radius: 11px;
}
/* Запрет показан перечёркиванием, а не словами: правило читается взглядом. */
.brand-guard-no { position: relative; }
.brand-guard-no::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 50%;
  height: 2px;
  background: var(--red, #d24b4b);
  transform: rotate(-18deg);
}
.brand-volume { width: min(100%, 360px); margin-inline: 0; }
.brand-note { margin: 12px 0 0; color: var(--text-secondary, var(--muted)); font-size: 13px; }

/* Хлебные крошки: ссылка была 43×13 px, то есть ниже минимальной цели по
   WCAG 2.5.8 (24×24). Высота добирается отступом с обратным полем, чтобы
   ритм строки не поехал: цель растёт, вид остаётся тем же. */
.breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 6px;
  margin-block: -6px;
}

/* Габарит героя это треть высоты окна, а не число в пикселях. Высота стояла
   фиксированной, и на коротких окнах (1024×768, 320×720) герой вылезал за
   бюджет на 4–8 px: бюджет держался только тем, что кто-то помнит цифру.
   `min(px, 33vh)` делает его конструктивным — вылезти больше нечем. */

/* Хлебные крошки: ряд получает свою высоту, чтобы ссылка в нём доросла до цели
   в 40 px без отрицательных полей. Отрицательные поля дали бы цель, налезающую
   на заголовок рядом, и промах пальца вместо перехода. */
.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 6px;
  min-height: 40px;
}
.breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-block: 0;
  margin-block: 0;
}

@media (max-width: 780px) {
  /* Главная кнопка воронки Telegram стояла ровно под фиксированным доком:
     перекрытие 52 px при высоте кнопки 52, то есть кнопка была закрыта
     ЦЕЛИКОМ, а тап по её координатам попадал в док и уводил на «Главную»,
     уничтожая введённые ник и количество. Отступ снизу у страницы решал конец
     документа, а не кнопку в потоке: страница прокручивалась, но в покое
     человек видел док вместо кнопки.
     Кнопка получает собственный зазор высотой дока — она больше не может
     оказаться под ним ни при какой длине содержимого. */
  /* Отступ снизу кнопку НЕ поднимает: он удлиняет страницу под ней, а сама
     кнопка остаётся там, куда её поставил поток — замер показал перекрытие
     ровно 52 px при отступе 68. Липкая посадка тоже не сработала: предок
     `.workspace` имеет `overflow: hidden`, а он обрезает липкость.
     Остаётся то, что на денежном шаге и делают все магазины на телефоне:
     кнопка становится полосой над доком. Место под неё резервируется отступом
     страницы, поэтому она ничего не закрывает. */
  .telegram-page .telegram-summary .telegram-submit,
  .telegram-page .telegram-summary [data-telegram-add] {
    position: fixed;
    /* Отступ по краям берётся у существующего токена сетки: --page-pad я
       придумал, а такого в системе нет, и ворота честно это поймали. */
    left: var(--space-4, 16px);
    right: var(--space-4, 16px);
    bottom: calc(76px + env(safe-area-inset-bottom));
    z-index: 40;
    width: auto;
    margin: 0;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .34);
  }
  .telegram-page main.page {
    padding-bottom: calc(160px + env(safe-area-inset-bottom));
  }
}

/* Сообщение о ненайденном получателе. Красным, потому что это не подсказка, а
   препятствие: звёзды уйдут тому, кто указан, и исправить это после оплаты
   нельзя. */
.recipient-missing {
  margin: 8px 0 0;
  color: var(--red, #d24b4b);
  font-size: 12px;
  font-weight: 700;
}
.recipient-missing[hidden] { display: none; }

/* Переносов по слогам нет на крупном тексте нигде. */
.home-hero-copy > *,
.home-showcase-copy *,
.section-head *,
h1, h2, h3 { hyphens: manual; }

/* Цена в плитке висела на 52 px ниже иконки: заголовок резервирует ровно две
   строки (34 px) даже под коротким «Roblox», и сверху ложились зазоры 8 и 10.
   Резерв нужен, иначе цены в ряду встанут на разной высоте; зазоры лишние. */
.game-logo-card { row-gap: 6px; }
.game-logo-card .catalog-card-price { margin-top: 0; line-height: 1.2; }
@media (max-width: 520px) {
  .game-logo-card,
  .services-page .voucher-service-card { gap: 6px; }
}

/* Пустое состояние заказов стояло на place-items: start — надпись, заголовок и
   кнопка жались к левому краю карточки высотой 290 px. */
.orders-empty {
  place-items: center;
  text-align: center;
}

/* На телефоне нажатие иногда не срабатывало: без touch-action браузер держит
   палец до 300 мс, ожидая двойной тап для зума, и быстрый второй тап по
   соседней плитке съедается этим ожиданием. */
.launch-service,
.launch-all-services,
.mobile-dock a,
.mobile-menu-list a,
[data-game-card],
[data-home-mode],
.filter,
.catalog-sort-trigger { touch-action: manipulation; }

/* Отказ по получателю в строке котировки. Красным, потому что это не подсказка,
   а препятствие: звёзды уйдут тому, кто указан, и после оплаты не вернутся. */
.funnel-quote-warn { color: var(--red, #d24b4b); }

/* Пояснение под денежным полем: почему число стало другим. Раньше поле молча
   подменяло введённое, и человек видел 15 000 вместо своих 20 000 без единого
   слова. Подмена без объяснения на шаге денег читается как обман. */
.numeric-note { margin: 6px 0 0; color: var(--text-secondary, var(--muted)); font-size: 12px; font-weight: 700; }
.numeric-note[hidden] { display: none; }

/* Отказ в каталожной шторке. Всплывающее сообщение накрывалось самой шторкой,
   и человек жал «Продолжить» в пустоту: ни текста, ни подсветки поля. */
.configurator-error { margin: 8px 0 0; color: var(--red, #d24b4b); font-size: 13px; font-weight: 700; grid-column: 1 / -1; }
.configurator-error[hidden] { display: none; }

/* Цена страны и подсказка о дешёвой стране. Плитка обещала минимум по всем
   регионам, а шторка открывалась на первом по рангу: обещание выглядело
   сломанным, и проверить его было негде. Теперь цена стоит на каждой стране,
   а подсказка называет ту, где обещание выполняется, и ведёт туда одним
   нажатием. */
.choice-copy { min-width: 0; display: grid; gap: 2px; }
.choice-price {
  color: var(--gold-text);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.choice-hint {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--gold-text);
  padding: 0 15px;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.choice-hint:hover { border-color: var(--gold); }
.choice-hint[hidden] { display: none; }

/* Сумма в контексте заказа на воротах оплаты. Раньше «Итого» заполнялось
   только после входа, и стена логина просила регистрацию за товар без цены. */
.gate-order-price {
  display: block;
  margin-top: 8px;
  color: var(--gold-text);
  font-family: var(--display, inherit);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.gate-order-price[hidden] { display: none; }

/* Ответ на «а если Premium уже есть» стоит в самой воронке: ни в ней, ни в
   помощи, ни в политике возврата этого вопроса не было, а он возникает у
   каждого дарителя ровно перед оплатой. */
.premium-owned-note {
  margin-top: 12px;
  max-width: 52ch;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.55;
}

/* Золотая обводка выбранной плитки переключателя товаров (Steam, Stars,
   Premium, Игры, Сервисы) убрана по решению владельца: её тут не должно быть
   в принципе, ни на какой ширине и ни в какой теме.

   Замер показал ТРИ источника одного кольца: собственная рамка плитки
   rgba(233,200,124,.45), внутренняя тень в светлой теме и золотая линия
   `::after` внизу. Правил, красящих плитку, в файле полтора десятка, поэтому
   гасим по месту применения, а не гоняясь за каждым.

   `:not(:focus-visible)` обязателен: кольцо клавиатурного фокуса рисуется той
   же тенью, и без исключения оно исчезло бы вместе с украшением. За фокус
   отвечает отдельная проверка ворот. Подпись остаётся золотой — выбор виден
   по ней и по заливке, а не по обводке. */
.launch-service.selected:not(:focus-visible),
.service-launchpad .launch-service.selected:not(:focus-visible),
.service-launchpad.product-switch .launch-service.selected:not(:focus-visible),
[data-theme="light"] .service-launchpad .launch-service.selected:not(:focus-visible),
[data-theme="dark"] .service-launchpad .launch-service.selected:not(:focus-visible) {
  border-color: transparent;
  box-shadow: none;
}
.launch-service.selected::after,
.service-launchpad .launch-service.selected::after,
.service-launchpad.product-switch .launch-service.selected::after,
[data-theme="light"] .service-launchpad .launch-service.selected::after {
  content: none;
}
.launch-service.selected .launch-icon,
.service-launchpad .launch-service.selected .launch-icon,
.service-launchpad.product-switch .launch-service.selected .launch-icon,
[data-theme="light"] .service-launchpad .launch-service.selected .launch-icon {
  border-color: transparent;
}
.launch-service.selected .launch-icon::after,
.service-launchpad .launch-service.selected .launch-icon::after {
  content: none;
}

/* Секции Telegram (Stars и Premium) — тот же выбор раздела, что и плитки
   переключателя, и золото на них того же рода: в тёмной теме золотая линия
   тенью 0 -2px, в светлой золотая внутренняя рамка. Убрано вместе с плитками,
   чтобы выбор раздела нигде не обводился золотом. Выбор читается заливкой и
   цветом подписи. Фокус, как и там, не трогаем. */
.telegram-product-card[aria-selected="true"]:not(:focus-visible),
.telegram-product-card.active:not(:focus-visible),
[data-theme="light"] .telegram-product-card[aria-selected="true"]:not(:focus-visible),
[data-theme="light"] .telegram-product-card.active:not(:focus-visible) {
  box-shadow: none;
  border-color: transparent;
}
.telegram-product-card[aria-selected="true"]::after,
.telegram-product-card.active::after {
  content: none;
}

/* Выбор секции Telegram обязан быть виден и без золота. Замер после снятия
   линии: в тёмной теме выбранная и невыбранная карточки совпали полностью —
   одна заливка rgb(26,23,20) и одна подпись rgb(244,239,228), то есть выбор
   исчез. Различие возвращаю нейтральное: выбранная карточка чуть светлее
   подложки, невыбранные подписи приглушены. Ни рамки, ни золота. */
.telegram-product-card[aria-selected="true"] {
  background-image: linear-gradient(0deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .07));
}
[data-theme="light"] .telegram-product-card[aria-selected="true"] {
  background-image: linear-gradient(0deg, rgba(25, 25, 24, .05), rgba(25, 25, 24, .05));
}
.telegram-product-card:not([aria-selected="true"]) b {
  color: var(--muted);
}

/* Активный раздел в доке нёс ту же золотую рамку rgba(233,200,124,.45), что и
   плитки переключателя: то же кольцо вокруг выбранного раздела, только внизу
   экрана. Снято по тому же решению. Активный раздел остаётся видным: золотая
   подпись против приглушённой у остальных плюс тёплая заливка. Фокус не
   трогаем — кольцо клавиатуры рисуется отдельно. */
.mobile-dock a.active:not(:focus-visible) {
  border-color: transparent;
  box-shadow: none;
}
.mobile-dock-indicator {
  border-color: transparent;
}

/* Последние два места с тем же кольцом, найденные сплошным прочёсыванием
   страниц: активный раздел в выдвижном меню (та же рамка rgba(233,200,124,.45)
   на ссылке и на её значке) и золотая линия под активным чипом категории.
   Выбор раздела нигде не обводится золотом — правило одно на весь сайт.

   Что осталось золотым сознательно и обводкой не является: главная кнопка
   действия, быстрые суммы и пресеты количества (это выбор ЗНАЧЕНИЯ, а не
   раздела) и ссылка поддержки. Про них решения не было. */
.mobile-menu-list a.active:not(:focus-visible),
.mobile-menu-list a.active > span {
  border-color: transparent;
}
.filters .filter.active,
.games-page .filters .filter.active,
.services-page .filters .filter.active,
.games-page .catalog-category-tabs .filter.active,
.catalog-category-tabs .filter.active {
  box-shadow: none;
}

/* ===== ВЫБОР ОДНИМ СПОСОБОМ НА ВЕСЬ САЙТ =====================================
   Решение владельца: выбранное показывается ЗАЛИТЫМ чуть более ярким
   скруглённым боксом — так, как это сделано на главной у плиток товара
   (Steam, Stars, Premium, Игры, Сервисы). Никаких обводок.

   Эталон замерен на живой главной: заливка var(--accent-wash)
   (rgba(233,200,124,.09) в тёмной, rgba(143,87,20,.07) в светлой), подпись
   var(--gold-text), рамки нет. Скругление у каждого элемента своё, менять его
   нельзя — бокс должен повторять форму самого элемента.

   `:not(:focus-visible)` там, где гасим рамку: кольцо клавиатурного фокуса
   рисуется теми же свойствами и без исключения исчезло бы вместе с
   украшением. */
.mobile-dock a.active:not(:focus-visible),
.mobile-menu-list a.active:not(:focus-visible),
.filters .filter.active:not(:focus-visible),
.catalog-category-tabs .filter.active:not(:focus-visible),
.quick.active:not(:focus-visible),
[data-stars-preset].active:not(:focus-visible),
.stars-presets button.active:not(:focus-visible),
.telegram-product-card[aria-selected="true"]:not(:focus-visible) {
  border-color: transparent;
  box-shadow: none;
  background-color: var(--accent-wash);
  background-image: none;
  color: var(--gold-text);
}
.mobile-dock a.active svg,
.mobile-menu-list a.active svg { color: var(--gold-text); }
.mobile-dock a.active > span,
.mobile-menu-list a.active > span { border-color: transparent; background: transparent; }
.telegram-product-card[aria-selected="true"] b { color: var(--gold-text); }

/* ===== ФОРМА TELEGRAM = ФОРМА ГЛАВНОЙ ========================================
   Владелец: «не надо делать особенную там». Замер на iPhone 13 показал, чем
   она отличалась: подпись поля 13px против 12, скругление ввода 16 против 12,
   размер ввода 14 против 15, кнопка 52px с золотой рамкой и шрифтом 14 против
   54px без рамки и шрифтом 16. Приводим к главной поштучно. */
.telegram-page .field label,
.telegram-page .telegram-recipient-field label { font-size: 12px; }
.telegram-page .input-wrap input { border-radius: 12px; font-size: 15px; }
.telegram-page .button.telegram-submit,
.button.telegram-submit {
  min-height: 54px;
  border: 0;
  border-radius: 14px;
  padding-inline: 12px;
  font-size: 16px;
}

/* Те же выборы, но записанные сильнее: у быстрых сумм и пресетов количества
   выбранное состояние красили правила вида
   `.home-order-layout.compact-action .quick.active` — четыре класса против
   трёх у общего правила выше, поэтому золотая рамка там оставалась. Список
   повторяет их один в один, чтобы вес совпал, а не угадывался. */
.home-order-layout.compact-action .quick.active:not(:focus-visible),
.preset-row .quick.active:not(:focus-visible),
.stars-presets button.active:not(:focus-visible),
.stars-presets button[aria-pressed="true"]:not(:focus-visible),
.telegram-page .stars-presets button.active:not(:focus-visible),
[data-theme="light"] .quick.active:not(:focus-visible),
[data-theme="light"] .filter.active:not(:focus-visible),
[data-theme="light"] .telegram-product-card[aria-selected="true"]:not(:focus-visible) {
  border-color: transparent;
  box-shadow: none;
  background-color: var(--accent-wash);
  background-image: none;
  color: var(--gold-text);
}

/* Кнопка Telegram возвращена в поток, как на главной, а лишняя полоска убрана.

   Кнопку когда-то вынесли из потока (`position: fixed`) по честной причине:
   она стояла ровно под фиксированным доком, перекрытие было 52 пикселя при
   высоте кнопки 52, то есть тап уходил в док и уничтожал введённое. Но у
   вынесенной кнопки остаётся пустой контейнер, и он продолжал рисовать свою
   подложку с рамкой — ту самую лишнюю полоску под ценой.

   Перед возвратом померил, воскреснет ли старый дефект: с кнопкой в потоке
   она стоит на 712–766 в покое и на 252–306 в самом низу страницы при доке на
   588–656. Перекрытие ноль в обоих положениях — с тех пор у страницы появился
   отступ снизу, и причина, по которой кнопку выносили, исчезла. Отступ
   уменьшен со 160 до 96: столько нужно, чтобы кнопка в конце страницы не
   упиралась в док, а больше не нужно — лишнее читалось как пустая чернота. */
@media (max-width: 780px) {
  .telegram-page .telegram-summary .telegram-submit,
  .telegram-page .telegram-summary [data-telegram-add] {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    box-shadow: none;
  }
  .telegram-page .workspace-side.action-only {
    border: 0;
    background: transparent;
    padding: 8px 12px 12px;
  }
  .telegram-page main.page {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
}