/* Копия design/components.css без строк @import Google Fonts: шрифты лежат локально (static/fonts.css).
   Правки делаются в design/components.css, сюда — только копия. */
/* GoPoTa shop — компоненты. Цвета, отступы и скругления берутся из tokens.css,
   размеры текста — из классов стилей (.display, .title, .headline, .section, .price,
   .body, .callout, .footnote, .label, .button, .key). Движение — переменные ниже. */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);
  --dur-press: 120ms;
  --dur-quick: 180ms;
  --dur-base: 280ms;
  --dur-sheet: 420ms;
  --dur-reveal: 520ms;
  --dur-celebrate: 1100ms;
}

body { margin: 0; font-family: var(--font-sans); background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; }
.gp-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-4); }
.gp-stack { display: grid; gap: var(--space-3); padding: var(--space-4); }
.gp-caps { text-transform: uppercase; }
.gp-muted { color: var(--ink-2); }
.gp-num-tab { font-variant-numeric: tabular-nums; }
.gp-icon { width: 20px; height: 20px; flex: none; display: block; }
.gp-icon--sm { width: 16px; height: 16px; }
:where(button, a, input, [tabindex]):focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

/* ---------- Радужная полоска ---------- */
.gp-stripe { display: grid; grid-template-columns: repeat(6, 1fr); height: 6px; border-radius: var(--radius-full); overflow: hidden; }
.gp-stripe > i { display: block; }
.gp-stripe > i:nth-child(1) { background: var(--rainbow-green); }
.gp-stripe > i:nth-child(2) { background: var(--rainbow-orange); }
.gp-stripe > i:nth-child(3) { background: var(--rainbow-red); }
.gp-stripe > i:nth-child(4) { background: var(--rainbow-purple); }
.gp-stripe > i:nth-child(5) { background: var(--rainbow-blue); }
.gp-stripe > i:nth-child(6) { background: var(--rainbow-yellow); }
.gp-stripe--hair { height: 3px; }
.gp-stripe--bold { height: 8px; }
.gp-stripe--loading > i { opacity: .22; animation: gp-seg 1.8s var(--ease-out) infinite; }
.gp-stripe--loading > i:nth-child(2) { animation-delay: .15s; }
.gp-stripe--loading > i:nth-child(3) { animation-delay: .3s; }
.gp-stripe--loading > i:nth-child(4) { animation-delay: .45s; }
.gp-stripe--loading > i:nth-child(5) { animation-delay: .6s; }
.gp-stripe--loading > i:nth-child(6) { animation-delay: .75s; }
@keyframes gp-seg { 0%, 100% { opacity: .22; } 30% { opacity: 1; } 60% { opacity: .22; } }
/* Полоска в тон товара: те же шесть отрезков с резкими стыками, но оттенками цвета товара —
   от светлого к тёмному. Ставится на обложках и картинках товаров: радуга на их зелёном и оранжевом спорит с фоном. */
.gp-stripe--chatgpt, .gp-art--chatgpt { --gp-t: var(--product-chatgpt); --gp-t-ink: var(--green-ink); --gp-t-bg: var(--green-soft); }
.gp-stripe--claude, .gp-art--claude { --gp-t: var(--product-claude); --gp-t-ink: var(--orange-ink); --gp-t-bg: var(--orange-soft); }
:is(.gp-stripe--chatgpt, .gp-stripe--claude, .gp-art .gp-stripe) > i { background: var(--gp-t); }
:is(.gp-stripe--chatgpt, .gp-stripe--claude, .gp-art .gp-stripe) > i:nth-child(1) { background: color-mix(in srgb, var(--gp-t) 40%, var(--gp-t-bg)); }
:is(.gp-stripe--chatgpt, .gp-stripe--claude, .gp-art .gp-stripe) > i:nth-child(2) { background: color-mix(in srgb, var(--gp-t) 65%, var(--gp-t-bg)); }
:is(.gp-stripe--chatgpt, .gp-stripe--claude, .gp-art .gp-stripe) > i:nth-child(4) { background: color-mix(in srgb, var(--gp-t), var(--gp-t-ink) 33%); }
:is(.gp-stripe--chatgpt, .gp-stripe--claude, .gp-art .gp-stripe) > i:nth-child(5) { background: color-mix(in srgb, var(--gp-t), var(--gp-t-ink) 66%); }
:is(.gp-stripe--chatgpt, .gp-stripe--claude, .gp-art .gp-stripe) > i:nth-child(6) { background: var(--gp-t-ink); }

/* ---------- Буквы-ожидание: имя загорается по буквам, у каждой буквы свой цвет ---------- */
.gp-name { display: inline-flex; align-items: baseline; margin: 0; font: 800 34px/1 var(--font-sans); letter-spacing: -.02em; }
.gp-name > i { display: inline-block; font-style: normal; color: var(--gp-c); opacity: .22; animation: gp-name-lit 2.4s var(--ease-out) infinite both; }
.gp-name > i:nth-child(1) { --gp-c: var(--rainbow-green); }
.gp-name > i:nth-child(2) { --gp-c: var(--rainbow-orange); animation-delay: .12s; }
.gp-name > i:nth-child(3) { --gp-c: var(--rainbow-red); animation-delay: .24s; }
.gp-name > i:nth-child(4) { --gp-c: var(--rainbow-purple); animation-delay: .36s; }
.gp-name > i:nth-child(5) { --gp-c: var(--rainbow-blue); animation-delay: .48s; }
.gp-name > i:nth-child(6) { --gp-c: var(--rainbow-yellow); animation-delay: .6s; }
.gp-name--still > i { animation: none; opacity: 1; }
.gp-name--sm { font-size: 22px; }
@keyframes gp-name-lit { 0% { opacity: .22; transform: none; } 10% { opacity: 1; transform: translateY(-.1em); } 20% { transform: none; } 62% { opacity: 1; } 82%, 100% { opacity: .22; } }

/* ---------- Номерный значок ---------- */
.gp-num { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: var(--radius-badge); color: var(--on-rainbow); font: 800 14px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.gp-num--green { background: var(--rainbow-green); }
.gp-num--orange { background: var(--rainbow-orange); }
.gp-num--red { background: var(--rainbow-red); }
.gp-num--purple { background: var(--rainbow-purple); }
.gp-num--blue { background: var(--rainbow-blue); }
.gp-num--yellow { background: var(--rainbow-yellow); color: var(--on-yellow); }
.gp-num--ink { background: var(--action); color: var(--on-action); }

/* ---------- Заголовок раздела и заголовок с точкой ---------- */
.gp-section { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.gp-section__title { margin: 0; text-transform: uppercase; color: var(--ink); }
.gp-dot { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; text-transform: uppercase; color: var(--ink); }
.gp-dot::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--gp-tone, var(--rainbow-orange)); }
.gp-dot--green { --gp-tone: var(--rainbow-green); }
.gp-dot--blue { --gp-tone: var(--rainbow-blue); }
.gp-dot--purple { --gp-tone: var(--rainbow-purple); }

/* ---------- Плашка, метка, жетон ---------- */
.gp-chip { display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 10px; border-radius: var(--radius-full); background: var(--surface-soft); color: var(--ink-2); font: 700 12px/1 var(--font-sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gp-chip--green { background: var(--green-soft); color: var(--green-ink); }
.gp-chip--orange { background: var(--orange-soft); color: var(--orange-ink); font-weight: 800; }
.gp-chip--red { background: var(--red-soft); color: var(--red-ink); }
.gp-chip--purple { background: var(--purple-soft); color: var(--purple-ink); }
.gp-chip--blue { background: var(--blue-soft); color: var(--blue-ink); }
.gp-chip--yellow { background: var(--yellow-soft); color: var(--ink); }
.gp-chip--outline { background: var(--surface-raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.gp-chip__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.gp-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: var(--radius-full); font: 800 10.5px/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.gp-tag--yellow { background: var(--rainbow-yellow); color: var(--on-yellow); }
.gp-tag--purple { background: var(--rainbow-purple); color: var(--on-rainbow); }

/* ---------- Цена в рублях ---------- */
.gp-price { display: inline-flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gp-price__unit { color: var(--ink-2); }
.gp-price__old { color: var(--ink-2); font-weight: 600; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.gp-price--sm { font: 800 17px/22px var(--font-sans); }

/* ---------- Карточка товара ---------- */
.gp-card { position: relative; display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5) var(--space-4) var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; color: var(--ink); text-align: left; transition: transform var(--dur-quick) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.gp-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--gp-accent, var(--rainbow-blue)); }
.gp-card--chatgpt { --gp-accent: var(--product-chatgpt); }
.gp-card--claude { --gp-accent: var(--product-claude); }
.gp-card__label { margin: 0; color: var(--ink-2); text-transform: uppercase; }
.gp-card__name { margin: 0; }
.gp-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); }
.gp-card__tag { position: absolute; top: var(--space-4); right: var(--space-4); }
.gp-card--feature { background: var(--feature); border-color: var(--feature); color: var(--on-feature); }
.gp-card--feature::before { content: none; }
.gp-card--feature .gp-card__label, .gp-card--feature .gp-price__unit { color: var(--on-feature-2); }
.gp-card--out { opacity: var(--opacity-disabled); }
.gp-press { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--dur-press) var(--ease-out); }
.gp-press:active { transform: scale(.97); }
.gp-press.is-released { transition: transform var(--dur-base) var(--ease-spring); }

/* ---------- Обложка товара (вместо логотипов сервисов) ---------- */
.gp-art { position: relative; display: grid; align-content: space-between; aspect-ratio: 16 / 10; max-width: 100%; padding: var(--space-4); border-radius: var(--radius-card); overflow: hidden; background: var(--gp-art-bg, var(--surface-soft)); color: var(--gp-art-ink, var(--ink)); }
.gp-art--chatgpt { --gp-art-bg: var(--green-soft); --gp-art-ink: var(--green-ink); }
.gp-art--claude { --gp-art-bg: var(--orange-soft); --gp-art-ink: var(--orange-ink); }
.gp-art__brand { margin: 0; text-transform: uppercase; }
.gp-art__word { margin: 0; font: 800 clamp(48px, 16vw, 88px)/.9 var(--font-sans); letter-spacing: -.04em; }
.gp-art__stripe { width: 96px; }

/* ---------- Плитки, контакты, заметка, список ---------- */
.gp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
.gp-tile { display: grid; gap: var(--space-1); align-content: start; padding: var(--space-4); border-radius: var(--radius-card); background: var(--surface-soft); }
.gp-tile__value { margin: 0; font: 800 26px/30px var(--font-sans); letter-spacing: -.01em; color: var(--gp-tone, var(--ink)); }
.gp-tile--green { --gp-tone: var(--green-ink); }
.gp-tile--orange { --gp-tone: var(--orange-ink); }
.gp-tile--purple { --gp-tone: var(--purple-ink); }
.gp-tile__text { margin: 0; color: var(--ink-2); }
.gp-contact { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 14px var(--space-4); border-radius: var(--radius-card); background: var(--surface-raised); border: 1px solid var(--line); color: var(--ink); text-align: left; font: inherit; width: 100%; }
.gp-contact__text { display: grid; gap: 2px; min-width: 0; }
.gp-contact__label { margin: 0; color: var(--ink-2); text-transform: uppercase; }
.gp-contact__value { margin: 0; font: 700 15px/20px var(--font-sans); }
.gp-contact .gp-icon { color: var(--ink-2); }
.gp-callout { margin: 0; padding: 14px var(--space-4); border-radius: var(--radius-control); background: var(--yellow-soft); box-shadow: inset 4px 0 0 var(--warning); color: var(--ink); }
.gp-callout strong { font-weight: 700; }
.gp-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.gp-list > li { position: relative; padding-left: 18px; }
.gp-list > li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--rainbow-orange); }

/* ---------- Кнопки ---------- */
.gp-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 52px; padding: 0 22px; border: 0; border-radius: var(--radius-control); background: var(--action); color: var(--on-action); font: 700 16px/20px var(--font-sans); letter-spacing: -.005em; cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent; transition: transform var(--dur-press) var(--ease-out), opacity var(--dur-quick) var(--ease-out); }
.gp-btn:active { transform: scale(.97); }
.gp-btn.is-released { transition: transform var(--dur-base) var(--ease-spring); }
.gp-btn--secondary { background: var(--surface-soft); color: var(--ink); }
.gp-btn--ghost { background: transparent; color: var(--ink); }
.gp-btn--on-feature { background: var(--feature-soft); color: var(--on-feature); }
.gp-btn--block { width: 100%; }
.gp-btn--sm { height: 40px; padding: 0 16px; font-size: 15px; }
.gp-btn[disabled] { opacity: var(--opacity-disabled); cursor: default; transform: none; }
.gp-btn.is-loading::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 3px; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--rainbow-green) 0 16.66%, var(--rainbow-orange) 0 33.33%, var(--rainbow-red) 0 50%, var(--rainbow-purple) 0 66.66%, var(--rainbow-blue) 0 83.33%, var(--rainbow-yellow) 0); transform-origin: left; animation: gp-load 1.4s var(--ease-out) infinite; }
@keyframes gp-load { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* ---------- Переключатель ---------- */
.gp-seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: var(--radius-control); background: var(--surface-soft); }
.gp-seg__thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--gp-count, 3)); border-radius: 11px; background: var(--surface-raised); box-shadow: var(--shadow-lift); transform: translateX(calc(100% * var(--gp-index, 0))); transition: transform var(--dur-base) var(--ease-spring); }
.gp-seg__item { position: relative; z-index: 1; height: 36px; border: 0; background: none; color: var(--ink-2); font: 700 14px/1 var(--font-sans); cursor: pointer; border-radius: 11px; transition: color var(--dur-quick) var(--ease-out); }
.gp-seg__item[aria-pressed="true"] { color: var(--ink); }

/* ---------- Чекбокс ---------- */
.gp-check { display: inline-flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; color: var(--ink); }
.gp-check input { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 22px; height: 22px; margin: 0; border-radius: 7px; border: 1.5px solid var(--ink-2); background: var(--surface-raised); cursor: pointer; transition: background var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out), transform var(--dur-base) var(--ease-spring); }
.gp-check input::after { content: ""; position: absolute; left: 6.5px; top: 2.5px; width: 5px; height: 10px; border: solid var(--on-action); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform var(--dur-base) var(--ease-spring); }
.gp-check input:checked { background: var(--action); border-color: var(--action); }
.gp-check input:checked::after { transform: rotate(45deg) scale(1); }
.gp-check input:active { transform: scale(.9); }

/* ---------- Лист оплаты ---------- */
.gp-scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--dur-sheet) var(--ease-sheet); }
.gp-sheet { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: var(--space-4); padding: var(--space-2) var(--space-4) var(--space-6); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; background: var(--surface-raised); box-shadow: var(--shadow-float); transform: translateY(105%); transition: transform var(--dur-sheet) var(--ease-sheet); }
.gp-sheet__grab { justify-self: center; width: 36px; height: 5px; border-radius: var(--radius-full); background: var(--line-strong); }
.gp-sheet__rows { display: grid; gap: 10px; margin: 0; }
.gp-sheet__row { display: flex; justify-content: space-between; gap: var(--space-3); margin: 0; }
.gp-sheet__row dt { color: var(--ink-2); }
.gp-sheet__row dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.gp-sheet__total { padding-top: 10px; border-top: 1px solid var(--line); }
.gp-sheet__total dt, .gp-sheet__total dd { color: var(--ink); font-weight: 800; }
.is-open > .gp-scrim { opacity: 1; pointer-events: auto; }
.is-open > .gp-sheet { transform: translateY(0); }
.gp-field { display: flex; gap: var(--space-2); }
.gp-field input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 15px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .04em; }
.gp-field input::placeholder { color: var(--ink-2); text-transform: none; letter-spacing: 0; font-weight: 500; }

/* ---------- Карточка ключа ---------- */
.gp-key { position: relative; display: grid; gap: var(--space-3); padding: var(--space-5) var(--space-4) var(--space-4); border-radius: var(--radius-card); background: var(--feature); color: var(--on-feature); box-shadow: var(--shadow-lift); overflow: hidden; }
.gp-key__top { position: absolute; inset: 0 0 auto; border-radius: 0; }
.gp-key__label { margin: 0; color: var(--on-feature-2); text-transform: uppercase; }
.gp-key__box { position: relative; display: block; width: 100%; padding: 14px; border: 0; border-radius: 12px; background: var(--feature-soft); color: var(--on-feature); text-align: left; cursor: pointer; }
.gp-key__code { display: block; filter: blur(var(--blur-key)); transition: filter var(--dur-reveal) var(--ease-out), letter-spacing var(--dur-reveal) var(--ease-out); letter-spacing: .14em; user-select: none; overflow-wrap: anywhere; }
.gp-key__hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-2); font: 700 14px/1 var(--font-sans); color: var(--on-feature); transition: opacity var(--dur-quick) var(--ease-out); }
.gp-key.is-shown .gp-key__code { filter: none; letter-spacing: .04em; user-select: all; }
.gp-key.is-shown .gp-key__hint { opacity: 0; pointer-events: none; }
.gp-key__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

/* ---------- Праздник после оплаты ---------- */
@property --gp-sweep { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
.gp-burst { display: grid; justify-items: center; gap: var(--space-3); text-align: center; padding: var(--space-6) var(--space-4); }
.gp-burst__ring { position: relative; width: 84px; height: 84px; border-radius: var(--radius-full); background: conic-gradient(from -90deg, var(--rainbow-green) 0 60deg, var(--rainbow-orange) 0 120deg, var(--rainbow-red) 0 180deg, var(--rainbow-purple) 0 240deg, var(--rainbow-blue) 0 300deg, var(--rainbow-yellow) 0 360deg); -webkit-mask: conic-gradient(from -90deg, #000 var(--gp-sweep), transparent 0); mask: conic-gradient(from -90deg, #000 var(--gp-sweep), transparent 0); }
.gp-burst__ring::after { content: ""; position: absolute; inset: 7px; border-radius: var(--radius-full); background: var(--surface); }
.gp-burst__check { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: var(--success); }
.gp-burst__check svg { width: 36px; height: 36px; }
.gp-burst__mark { position: relative; width: 84px; height: 84px; }
.gp-burst__dots { position: absolute; inset: 0; pointer-events: none; }
.gp-burst__dots > i { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: var(--radius-full); opacity: 0; }
.gp-burst__dots > i:nth-child(1) { background: var(--rainbow-green); --x: 0px; --y: -62px; }
.gp-burst__dots > i:nth-child(2) { background: var(--rainbow-orange); --x: 54px; --y: -31px; }
.gp-burst__dots > i:nth-child(3) { background: var(--rainbow-red); --x: 54px; --y: 31px; }
.gp-burst__dots > i:nth-child(4) { background: var(--rainbow-purple); --x: 0px; --y: 62px; }
.gp-burst__dots > i:nth-child(5) { background: var(--rainbow-blue); --x: -54px; --y: 31px; }
.gp-burst__dots > i:nth-child(6) { background: var(--rainbow-yellow); --x: -54px; --y: -31px; }
.gp-burst.is-on .gp-burst__ring { animation: gp-sweep var(--dur-celebrate) var(--ease-out) both; }
.gp-burst.is-on .gp-burst__check svg { animation: gp-pop var(--dur-base) var(--ease-spring) .5s both; }
.gp-burst.is-on .gp-burst__dots > i { animation: gp-fly var(--dur-celebrate) var(--ease-out) .55s both; }
.gp-burst__title, .gp-burst__text { margin: 0; }
.gp-burst__text { color: var(--ink-2); max-width: 32ch; }
@keyframes gp-sweep { from { --gp-sweep: 0deg; } to { --gp-sweep: 360deg; } }
@keyframes gp-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes gp-fly { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(1); opacity: 0; } }

/* ---------- Тост ---------- */
.gp-toast { display: inline-flex; align-items: center; gap: var(--space-2); padding: 12px 18px; border-radius: var(--radius-full); background: var(--action); color: var(--on-action); box-shadow: var(--shadow-float); font: 700 14px/1 var(--font-sans); transform: translateY(16px); opacity: 0; transition: transform var(--dur-base) var(--ease-spring), opacity var(--dur-quick) var(--ease-out); }
.gp-toast.is-shown { transform: translateY(0); opacity: 1; }
.gp-toast .gp-icon { color: var(--success); }

/* ---------- Способ оплаты ---------- */
.gp-pay { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.gp-pay__legend { margin-bottom: var(--space-1); padding: 0; color: var(--ink-2); text-transform: uppercase; }
.gp-pay__opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: 10px 14px 10px 10px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-raised); color: var(--ink); cursor: pointer; transition: border-color var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out), transform var(--dur-press) var(--ease-out); -webkit-tap-highlight-color: transparent; }
.gp-pay__opt:active { transform: scale(.98); }
.gp-pay__opt:has(input:checked) { border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); }
.gp-pay__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface-soft); color: var(--ink); }
.gp-pay__text { display: grid; gap: 2px; min-width: 0; }
.gp-pay__name { font: 700 16px/20px var(--font-sans); }
.gp-pay__hint { color: var(--ink-2); }
.gp-pay__opt input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border-radius: var(--radius-full); border: 2px solid var(--line-strong); background: var(--surface); transition: border-width var(--dur-quick) var(--ease-spring), border-color var(--dur-quick) var(--ease-out); }
.gp-pay__opt input:checked { border: 7px solid var(--action); }
.gp-pay__opt input:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

/* ---------- Собери GOPOTA: буквы за покупки ---------- */
.gp-collect { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-4) 14px; border-radius: var(--radius-card); background: var(--feature); color: var(--on-feature); }
.gp-collect__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.gp-collect__title { margin: 0; font: 700 16px/22px var(--font-sans); }
.gp-collect__count { flex: none; color: var(--on-feature-2); font: 600 13px/18px var(--font-sans); font-variant-numeric: tabular-nums; }
.gp-collect__word { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.gp-collect__word > li { display: grid; gap: 10px; text-align: center; font: 800 26px/28px var(--font-sans); color: var(--on-feature-2); }
.gp-collect__word > li::before { content: ""; height: 8px; background: var(--feature-soft); transform-origin: left center; }
.gp-collect__word > li:first-child::before { border-radius: var(--radius-full) 0 0 var(--radius-full); }
.gp-collect__word > li:last-child::before { border-radius: 0 var(--radius-full) var(--radius-full) 0; }
.gp-collect__word > li > span { opacity: .3; }
.gp-collect__word > li:nth-child(1) { --gp-c: var(--rainbow-green); }
.gp-collect__word > li:nth-child(2) { --gp-c: var(--rainbow-orange); }
.gp-collect__word > li:nth-child(3) { --gp-c: var(--rainbow-red); }
.gp-collect__word > li:nth-child(4) { --gp-c: var(--rainbow-purple); }
.gp-collect__word > li:nth-child(5) { --gp-c: var(--rainbow-blue); }
.gp-collect__word > li:nth-child(6) { --gp-c: var(--rainbow-yellow); }
.gp-collect__word > li.is-on { color: var(--gp-c); }
.gp-collect__word > li.is-on > span { opacity: 1; }
.gp-collect__word > li.is-on::before { background: var(--gp-c); }
.gp-collect__word > li.is-new::before { animation: gp-seg-fill var(--dur-reveal) var(--ease-out) .7s both; }
.gp-collect__word > li.is-new > span { display: inline-block; animation: gp-letter-pop var(--dur-base) var(--ease-spring) 1s both; }
.gp-collect__note { margin: 0; color: var(--on-feature-2); font: 500 13px/18px var(--font-sans); }
.gp-collect--sm { gap: 10px; padding: 14px var(--space-4) 12px; }
.gp-collect--sm .gp-collect__word > li { gap: 8px; font-size: 20px; line-height: 22px; }
.gp-collect--sm .gp-collect__word > li::before { height: 6px; }
@keyframes gp-seg-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes gp-letter-pop { from { transform: translateY(8px) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Нижняя панель ---------- */
.gp-tabbar { display: inline-flex; gap: 4px; padding: 6px; border-radius: var(--radius-full); background: var(--glass); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(180%); backdrop-filter: blur(var(--blur-glass)) saturate(180%); box-shadow: var(--shadow-float), inset 0 0 0 1px var(--line); }
.gp-tab { display: grid; justify-items: center; gap: 3px; min-width: 76px; padding: 8px 12px 6px; border: 0; border-radius: var(--radius-full); background: none; color: var(--ink-2); font: 700 11px/1 var(--font-sans); cursor: pointer; transition: background var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out), transform var(--dur-press) var(--ease-out); }
.gp-tab:active { transform: scale(.94); }
.gp-tab[aria-current="page"] { background: var(--surface-soft); color: var(--ink); }

/* ---------- Строка заказа ---------- */
.gp-orders { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-raised); overflow: hidden; }
.gp-order { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--space-3); padding: 14px var(--space-4); }
.gp-order + .gp-order { border-top: 1px solid var(--line); }
.gp-order__mark { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--gp-art-bg, var(--surface-soft)); color: var(--gp-art-ink, var(--ink)); font: 800 13px/1 var(--font-sans); }
.gp-order__mark--chatgpt { --gp-art-bg: var(--green-soft); --gp-art-ink: var(--green-ink); }
.gp-order__mark--claude { --gp-art-bg: var(--orange-soft); --gp-art-ink: var(--orange-ink); }
.gp-order__text { display: grid; gap: 2px; min-width: 0; }
.gp-order__name { margin: 0; font: 700 15px/20px var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-order__meta { margin: 0; color: var(--ink-2); }
.gp-order .gp-icon { color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .gp-stripe--loading > i { opacity: 1; }
  .gp-name > i { animation: none !important; opacity: 1 !important; transform: none !important; }
  .gp-collect__word > li.is-new::before, .gp-collect__word > li.is-new > span { animation-delay: 0s !important; }
}