/* Стикерокрад — мини-приложение, вид №4 (12.10, «ярче, для зумеров»). Основа — вид №3: фон и текст из темы Telegram,
   свои цвета сняты с енота. Цвет — как свет, а не краска: карточки нейтральные, насыщенный цвет только у источников
   (значки, стикеры, кубок), тонкой цветной кромкой и свечением под мелкими предметами (полупрозрачная заливка тёплым
   на тёмном давала «грязь»). Фишки: глитч-заголовок в цветах ТикТока, голографический VIP, блик-ламинат на стикерах,
   неоновая лампа на вкладке, радужное кольцо у №1. Анимации — только transform/opacity, «рывок и пауза»;
   .lite (слабый телефон, «меньше движения») — без бесконечных. */
@font-face {
  font-family: "TTS";
  src: url("/s/tts.woff") format("woff");
  font-weight: 300 900;
  font-stretch: 75% 150%;
  font-display: swap;
}
:root {
  /* запасные цвета (вне Telegram) — тёмная тема; внутри их перекрывает app.js из themeParams */
  --bg: #0f0f12;
  --surface: #1c1c21;
  --text: #f5f5f7;
  --hint: #8e8e96;
  --line: rgba(255, 255, 255, .09);
  --dot: rgba(255, 255, 255, .07);
  --sticker-edge: #fff;
  --shadow: 0 6px 16px rgba(0, 0, 0, .38);
  /* свои цвета */
  --grape: #6e45ff;         /* плакат на главной, выбранное */
  --grape-2: #5a33f0;
  --pink: #ff4fa3;
  --cyan: #22c8f0;
  --lime: #8fdc3a;
  --orange: #ff8a3d;
  --loot: #ffd60a;          /* действия и ценники */
  --loot-ink: #111;
  --ok: #34c759;
  --tint-a: .16;            /* сила подложки цветных карточек */
  --r: 18px;
  --tab-h: 62px;
  --maxw: 640px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-tg]) { --bg: #f1f1f6; --surface: #fff; --text: #111; --hint: #85858c; --line: rgba(0, 0, 0, .08);
    --dot: rgba(0, 0, 0, .07); --shadow: 0 6px 16px rgba(30, 20, 60, .14); color-scheme: light; }
}
:root[data-light] { --line: rgba(0, 0, 0, .08); --dot: rgba(0, 0, 0, .07); --shadow: 0 6px 14px rgba(30, 20, 60, .14);
  --tint-a: .14; color-scheme: light; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font: 15px/1.38 "TTS", -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  padding-bottom: calc(var(--tab-h) + var(--safe-b) + 34px);
  overscroll-behavior-y: contain;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--loot); outline-offset: 2px; }
[hidden] { display: none !important; }
img { display: block; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; }

/* ---- шапка ---- */
.top {
  position: sticky; top: 0; z-index: 10;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--bg);
}
.top-in { display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
.top-ava { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.top-name { flex: 1; min-width: 0; font-weight: 850; font-stretch: 112%; font-size: 18px; letter-spacing: -.1px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  font-weight: 800; font-size: 13.5px; white-space: nowrap; font-variant-numeric: tabular-nums;
  background: rgba(110, 69, 255, .18); color: var(--text);
}
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grape); }
.pill.low::before { background: var(--pink); }
.pill.unl, .pill.vip { background: var(--loot); color: var(--loot-ink); }
.pill.unl::before, .pill.vip::before { background: var(--loot-ink); }

main { padding: 0 16px; }
.view { animation: fade .22s ease both; }
@keyframes fade { from { opacity: 0; } }

/* ---- главная: плакат со строкой ссылки ---- */
.hero {
  position: relative; overflow: hidden; margin-top: 4px; padding: 22px 18px 18px;
  border-radius: 28px; background-color: var(--grape); color: #fff;
  background-image: radial-gradient(rgba(255, 255, 255, .13) 1.3px, transparent 1.4px); background-size: 16px 16px;
}
.hero h1 {
  position: relative; z-index: 1; margin: 0; max-width: calc(100% - 128px); font-size: 27px; line-height: 1.17; font-weight: 900;
  font-stretch: 112%; letter-spacing: -.4px; text-wrap: balance;
}
/* маркер: подложка только под буквами (12–90 % высоты строки), строки чуть разнесены — соседние не слипаются */
.hero h1 em { font-style: normal; color: var(--loot-ink); padding: 0 .14em; border-radius: 7px;
  background: linear-gradient(transparent 12%, var(--loot) 12%, var(--loot) 90%, transparent 90%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero-sub { position: relative; z-index: 1; margin: 12px 0 18px; max-width: 27ch; color: rgba(255, 255, 255, .86); font-size: 15px; }
/* добыча енота: сам енот и пара стикеров, которые сейчас забирают */
.hero-loot { position: absolute; right: 10px; top: 14px; width: 132px; height: 138px; pointer-events: none; }
.hero-ava {
  position: absolute; right: 6px; top: 0; width: 84px; height: 84px; border-radius: 50%;
  border: 4px solid #fff; box-shadow: 0 8px 18px rgba(20, 0, 80, .35); transform: rotate(8deg); z-index: 2;
}
.hero-loot .lt {
  position: absolute; width: 58px; height: 58px; border-radius: 12px; border: 3.5px solid #fff; background: #fff;
  object-fit: cover; box-shadow: 0 6px 14px rgba(20, 0, 80, .35); animation: drop .5s cubic-bezier(.2, 1.3, .4, 1) both;
}
.hero-loot .lt:nth-of-type(2) { left: 16px; top: 74px; transform: rotate(-11deg); animation-delay: .08s; }
.hero-loot .lt:nth-of-type(3) { right: -2px; top: 92px; transform: rotate(9deg); animation-delay: .16s; }
@keyframes drop { from { opacity: 0; translate: 0 -14px; scale: .7; } }
.link {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 16px;
  border-radius: 22px; background: #fff; color: #111; box-shadow: 0 8px 20px rgba(20, 0, 80, .28);
}
.link input {
  flex: 1; min-width: 0; height: 44px; border: 0; background: none; color: #111;
  font: inherit; font-size: 16px; outline: none;
}
.link input::placeholder { color: #8b8b93; }
.chip { padding: 8px 10px; border-radius: 12px; background: #efeaff; color: var(--grape-2); font-weight: 800; font-size: 13.5px; white-space: nowrap; }
.go {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--loot); color: var(--loot-ink); transition: transform .12s ease;
}
.go svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.go.busy svg { animation: spin 1s linear infinite; }
.go.busy { pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.how { position: relative; z-index: 1; display: flex; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; flex-wrap: wrap; }
.how li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .15); font-size: 12.5px; font-weight: 650; }
.how b { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #fff; color: var(--grape-2); font-size: 11.5px; font-weight: 900; }

/* «куда кладём» — строка под ссылкой и в шторке стикера */
.dest { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; padding: 8px 12px;
  border-radius: 14px; background: rgba(255, 255, 255, .15); color: #fff; font-size: 13.5px; text-align: left; }
.dest img, .dest .dot { flex: none; width: 26px; height: 26px; border-radius: 7px; object-fit: cover; background: #fff; border: 2px solid #fff; }
.dest .dot { display: grid; place-items: center; color: var(--grape-2); font-weight: 900; font-size: 15px; }
.dest span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dest span b { font-weight: 800; }
.dest i { font-style: normal; font-weight: 800; opacity: .85; }
.dest.in-sheet { margin: 0 0 14px; background: var(--bg); color: var(--text); }
.dest.in-sheet i { color: var(--grape); opacity: 1; }

/* ---- разделы ---- */
.sec-h { display: flex; align-items: center; justify-content: space-between; margin: 28px 0 10px; }
.sec-h h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 20px; font-weight: 850; font-stretch: 108%; letter-spacing: -.2px; }
.badge { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; }
.badge svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.b-hot { background: var(--orange); }
.b-pk { background: var(--cyan); }
.v-title { margin: 8px 0 0; font-size: 24px; font-weight: 900; font-stretch: 110%; letter-spacing: -.3px; }
.v-sub { margin: 4px 0 14px; color: var(--hint); }
.more { padding: 6px 12px; border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 750; font-size: 13.5px; }
.more::after { content: " ›"; color: var(--hint); }
.row {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity;
  margin: 0 -16px; padding: 10px 16px 16px; scrollbar-width: none;
}
.row::-webkit-scrollbar { display: none; }
.row > * { scroll-snap-align: start; flex: none; }

/* наклейка */
.st {
  position: relative; display: block; width: 104px; aspect-ratio: 1; padding: 0;
  border-radius: 14px; background: var(--sticker-edge); box-shadow: var(--shadow);
  transform: rotate(var(--tilt, 0deg)); transition: transform .16s ease;
}
.st:nth-child(4n+1) { --tilt: -2.5deg; }
.st:nth-child(4n+2) { --tilt: 1.8deg; }
.st:nth-child(4n+3) { --tilt: -1deg; }
.st:nth-child(4n) { --tilt: 2.6deg; }
.st img, .st video { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; border: 4px solid var(--sticker-edge); }
.st .n {                   /* ценник: сколько человек забрали */
  position: absolute; right: -6px; top: -8px; padding: 2px 7px; border-radius: 7px;
  background: var(--loot); color: var(--loot-ink); font-size: 12px; font-weight: 900;
  transform: rotate(6deg); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); font-variant-numeric: tabular-nums;
}
.st.ph { background: var(--c, var(--grape)); }
.st.ph::before { content: ""; position: absolute; inset: 4px; border-radius: 10px;
  background: radial-gradient(rgba(255, 255, 255, .28) 1.3px, transparent 1.4px) 0 0 / 10px 10px; }
.st.ph::after { content: "✦"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 30px; }
.paper {                   /* бумага для наклеек: точки */
  margin: 0 -16px; padding: 18px 16px 8px;
  background-image: radial-gradient(var(--dot) 1.2px, transparent 1.3px); background-size: 14px 14px;
}
.grid3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 18px 14px; }
.grid3 .st { width: 100%; }

/* пак — цветной лист с наклейкой */
.pk { display: flex; flex-direction: column; gap: 8px; width: 148px; text-align: left; }
.pk .cv {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: 20px;
  background: linear-gradient(var(--tint, transparent), var(--tint, transparent)), var(--surface);
}
.pk .cv::before {          /* точки листа в цвет пака */
  content: ""; position: absolute; inset: 0; opacity: .5;
  background: radial-gradient(var(--c, var(--hint)) 1.1px, transparent 1.2px) 0 0 / 13px 13px;
}
.pk .cv > img {
  position: relative; width: 74%; height: 74%; object-fit: cover; border-radius: 14px; border: 4px solid var(--sticker-edge);
  background: var(--sticker-edge); box-shadow: var(--shadow); transform: rotate(-4deg); transition: transform .15s ease;
}
.pk:nth-child(even) .cv > img { transform: rotate(3.5deg); }
.pk .cv > .ph-i {
  position: relative; display: grid; place-items: center; width: 62%; aspect-ratio: 1; border-radius: 18px;
  background: var(--c, var(--grape)); color: #fff; font-size: 38px; font-weight: 900; font-stretch: 112%;
  box-shadow: var(--shadow); transform: rotate(-4deg); text-transform: uppercase;
}
.pk .tt { font-weight: 780; font-size: 14px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding: 0 2px; }
.pk .cn { margin-top: -5px; padding: 0 2px; color: var(--hint); font-size: 12.5px; }
.pk .lock { position: absolute; left: 8px; top: 8px; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; }
.pk .cv.sk { background: var(--surface); }
.pk .cv.sk::before { display: none; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 20px 14px; }
.grid2 .pk { width: 100%; }

/* предложения: безлимит — жёлтый, друг — розовый */
.promo, .invite {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 15px 16px;
  border-radius: 22px; text-align: left;
}
.promo { margin-top: 28px; background: var(--loot); color: var(--loot-ink); }
.invite { background: linear-gradient(rgba(255, 79, 163, var(--tint-a)), rgba(255, 79, 163, var(--tint-a))), var(--surface); }
.promo-i { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; }
.promo .promo-i { background: var(--loot-ink); }
.promo .promo-i svg { stroke: var(--loot); }
.invite .promo-i { background: var(--pink); }
.invite .promo-i svg { stroke: #fff; }
.promo-i svg { width: 24px; height: 24px; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.promo-t { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.promo-t b { font-weight: 850; font-size: 15.5px; }
.promo-t small { font-size: 13px; opacity: .72; }
.invite .promo-t small { color: var(--hint); opacity: 1; }
.promo-p { padding: 8px 12px; border-radius: 12px; background: var(--loot-ink); color: var(--loot); font-weight: 900; white-space: nowrap; }
.arrow { color: var(--hint); font-size: 22px; line-height: 1; }
.promo .arrow { color: var(--loot-ink); opacity: .55; }

/* поиск */
.search { display: flex; align-items: center; gap: 8px; margin: 12px 0 18px; padding: 0 14px; height: 44px;
  border-radius: 14px; background: var(--surface); }
.search svg { width: 18px; height: 18px; fill: none; stroke: var(--hint); stroke-width: 2.2; stroke-linecap: round; }
.search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 16px; outline: none; }
.search input::placeholder { color: var(--hint); }
.ghost { display: block; width: 100%; margin: 20px 0 0; height: 48px; border-radius: 14px; background: var(--surface); font-weight: 750; }

/* мои */
.me-head { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.me-head img { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--sticker-edge); box-shadow: var(--shadow); transform: rotate(-5deg); }
.me-head h2 { margin: 0; font-size: 22px; font-weight: 880; font-stretch: 108%; }
.me-head p { margin: 2px 0 0; color: var(--hint); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.stats div { padding: 14px 8px 12px; border-radius: 18px; text-align: center; background: linear-gradient(var(--tn), var(--tn)), var(--surface); }
.stats .s1 { --tn: rgba(110, 69, 255, var(--tint-a)); --cl: var(--grape); }
.stats .s2 { --tn: rgba(34, 200, 240, var(--tint-a)); --cl: var(--cyan); }
.stats .s3 { --tn: rgba(255, 79, 163, var(--tint-a)); --cl: var(--pink); }
.stats b { display: block; font-size: 24px; font-weight: 900; font-stretch: 110%; font-variant-numeric: tabular-nums; color: var(--cl); }
:root[data-light] .stats .s2 b { color: #0a98bd; }
.stats span { color: var(--hint); font-size: 12.5px; }
.sub-h { margin: 28px 0 12px; font-size: 18px; font-weight: 850; }
.empty { grid-column: 1 / -1; padding: 18px; border-radius: var(--r); background: var(--surface); color: var(--hint); text-align: center; }

/* ---- вкладки: плавающая плашка ---- */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; pointer-events: none;
  padding: 0 12px calc(10px + var(--safe-b));
}
.tabs-in {
  pointer-events: auto; display: grid; grid-template-columns: repeat(5, 1fr); max-width: 560px; height: var(--tab-h);
  margin: 0 auto; padding: 6px; border-radius: 24px;
  background: var(--surface); box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 0 0 1px var(--line);
}
:root[data-light] .tabs-in { box-shadow: 0 10px 30px rgba(30, 20, 60, .16), inset 0 0 0 1px var(--line); }
.tabs button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 18px; color: var(--hint); font-size: 11px; font-weight: 750; transition: background .18s ease, color .18s ease; }
.tabs svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tabs button.on { color: var(--text); background: rgba(110, 69, 255, .2); }
.tabs button.on svg { stroke: var(--grape); }
:root:not([data-light]) .tabs button.on svg { stroke: #a58bff; }

/* ---- шторка ---- */
.sheet-bg { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .5); animation: bgin .18s ease both; }
@keyframes bgin { from { opacity: 0; } }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; max-width: var(--maxw); margin: 0 auto; max-height: 88vh; overflow-y: auto;
  padding: 8px 18px calc(18px + var(--safe-b)); border-radius: 24px 24px 0 0; background: var(--surface);
  animation: up .28s cubic-bezier(.2, .9, .3, 1) both; overscroll-behavior: contain;
}
@keyframes up { from { transform: translateY(100%); } }
.grab-bar { width: 38px; height: 5px; margin: 0 auto 14px; border-radius: 3px; background: var(--line); }
.sh-art { position: relative; width: 180px; aspect-ratio: 1; margin: 8px auto 18px; }
.sh-art img, .sh-art video {
  width: 100%; height: 100%; object-fit: cover; border-radius: 18px; border: 6px solid var(--sticker-edge);
  background: var(--sticker-edge); box-shadow: var(--shadow); transform: rotate(-3deg);
  animation: stick .5s cubic-bezier(.2, 1.3, .4, 1) both;
}
@keyframes stick { from { transform: rotate(-14deg) scale(.6); opacity: 0; } }
.sh-art .big { display: grid; place-items: center; height: 100%; border-radius: 28px; background: rgba(110, 69, 255, .16); }
.sh-art .big svg { width: 90px; height: 90px; fill: none; stroke: var(--grape); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:root:not([data-light]) .sh-art .big svg { stroke: #a58bff; }
.sh-art .ldr { width: 100%; height: 100%; border-radius: 18px; border: 6px solid var(--sticker-edge); background: var(--grape);
  background-image: radial-gradient(rgba(255, 255, 255, .25) 1.3px, transparent 1.4px); background-size: 12px 12px;
  box-shadow: var(--shadow); transform: rotate(-3deg); animation: wobble 1.1s ease-in-out infinite; }
@keyframes wobble { 50% { transform: rotate(3deg) scale(.96); } }
.sh-t { margin: 0 0 6px; text-align: center; font-size: 22px; font-weight: 900; font-stretch: 108%; text-wrap: balance; }
.sh-s { margin: 0 auto 16px; max-width: 32ch; text-align: center; color: var(--hint); text-wrap: balance; }
.sh-btns { display: grid; gap: 8px; }
.sheet .pack-grid + .sh-btns { position: sticky; bottom: calc(-18px - var(--safe-b)); margin: 0 -18px; padding: 10px 18px calc(18px + var(--safe-b));
  background: var(--surface); box-shadow: 0 -1px 0 var(--line); }
.cta { width: 100%; height: 52px; border-radius: 16px; background: var(--loot); color: var(--loot-ink); font-weight: 900; font-size: 16px; }
.btn2 { height: 50px; border-radius: 16px; background: var(--bg); font-weight: 800; }
.pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 12px 10px; margin: 4px 0 18px; }
.pack-grid .st { width: 100%; border-radius: 10px; }
.pack-grid .st img { border-width: 3px; border-radius: 8px; }

/* выбор пака */
.picks { display: grid; gap: 6px; margin: 4px 0 14px; }
.pick { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px 8px 8px; border-radius: 16px; background: var(--bg); text-align: left; }
.pick .pi { flex: none; width: 46px; height: 46px; border-radius: 12px; object-fit: cover; border: 3px solid var(--sticker-edge); background: var(--c, var(--grape)); }
.pick .pd { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--c, var(--grape)); color: #fff; font-weight: 900; font-size: 20px; text-transform: uppercase; }
.pick .pt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pick .pt b { font-weight: 780; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick .pt small { color: var(--hint); font-size: 12.5px; }
.pick .ck { flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); }
.pick.on { box-shadow: inset 0 0 0 2px var(--grape); }
.pick.on .ck { background: var(--grape); box-shadow: none; position: relative; }
.pick.on .ck::after { content: ""; position: absolute; left: 8px; top: 4px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.pick:disabled { opacity: .45; }
.pick.new .pd { background: none; color: var(--grape); box-shadow: inset 0 0 0 2px var(--grape); font-size: 26px; }
.new-name { width: 100%; height: 48px; margin: -2px 0 14px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--bg);
  color: var(--text); font: inherit; font-size: 16px; outline: none; box-shadow: inset 0 0 0 2px var(--grape); }

/* тарифы */
.plans { display: grid; gap: 10px; margin: 4px 0 14px; }
.plan { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; text-align: left;
  background: var(--bg); }
.plan.best { box-shadow: inset 0 0 0 2px var(--loot); }
.plan .i { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--c, var(--grape)); }
.plan .i svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.plan .tx { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.plan .tx b { font-size: 16px; font-weight: 850; }
.plan .tx small { color: var(--hint); font-size: 13px; }
.plan .pr { padding: 7px 10px; border-radius: 10px; background: var(--loot); color: var(--loot-ink); font-weight: 900; white-space: nowrap; }
.plan .tag { position: absolute; top: -9px; left: 14px; padding: 2px 8px; border-radius: 6px; background: var(--loot); color: var(--loot-ink);
  font-size: 11px; font-weight: 900; letter-spacing: .4px; transform: rotate(-2deg); }
.note { margin: 4px 0 0; text-align: center; color: var(--hint); font-size: 12.5px; }
.linkish { color: var(--text); font-weight: 750; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--loot); }

/* приватность своего пака */
.priv { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 16px; padding: 12px 14px; border-radius: 16px;
  background: var(--bg); text-align: left; }
.priv .pv-t { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.priv .pv-t b { font-weight: 800; }
.priv .pv-t small { color: var(--hint); font-size: 12.5px; }
.priv .sw { flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--ok); position: relative; transition: background .2s; }
.priv .sw i { position: absolute; top: 3px; left: 21px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left .2s; }
.priv.on .sw { background: var(--line); }
.priv.on .sw i { left: 3px; }

/* скелетоны */
.sk { background: var(--surface); animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .55; } }
.st.sk { box-shadow: none; }

.toast { position: fixed; left: 50%; bottom: calc(var(--tab-h) + var(--safe-b) + 24px); z-index: 40;
  transform: translateX(-50%); width: max-content; max-width: min(calc(100% - 32px), 480px); padding: 11px 16px; border-radius: 14px;
  background: var(--text); color: var(--bg); font-weight: 650; text-align: center; animation: tin .22s ease both; pointer-events: none; }
@keyframes tin { from { opacity: 0; transform: translate(-50%, 8px); } }
#confetti { position: fixed; inset: 0; z-index: 50; pointer-events: none; width: 100%; height: 100%; }

/* «Ещё в боте» — список как в настройках Telegram, у каждого пункта свой цвет */
.list { border-radius: var(--r); background: var(--surface); overflow: hidden; }
.li { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; }
.li + .li { box-shadow: inset 0 1px 0 var(--line); }
.li .ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--c, var(--grape)); color: #fff; }
.li .ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.li .lt { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.li .lt b { font-weight: 750; }
.li .lt small { color: var(--hint); font-size: 12.5px; }
.li .arrow { font-size: 20px; }
.li:active { background: var(--line); }

/* язык */
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 16px; background: var(--surface); }
.seg button { height: 42px; border-radius: 12px; font-weight: 800; font-size: 14px; color: var(--hint); }
.seg button.on { background: var(--grape); color: #fff; }
#invite-me { margin-top: 28px; }

/* узкие телефоны */
@media (max-width: 360px) {
  .hero h1 { font-size: 25px; }
  .top-name { font-size: 16px; }
  .sec-h h2 { font-size: 18px; }
  .hero-loot { transform: scale(.82); transform-origin: top right; }
  .chip { display: none; }
}
/* широкий экран (Telegram на компьютере) */
@media (min-width: 600px) {
  .hero { padding: 30px 28px 24px; }
  .hero h1 { font-size: 36px; max-width: calc(100% - 190px); }
  .hero-loot { right: 22px; top: 22px; transform: scale(1.18); transform-origin: top right; }
  .st { width: 116px; }
  .pk { width: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- топы (12.10) ---- */
.seg3 { grid-template-columns: repeat(3, 1fr); margin-top: 4px; }
.chips { display: flex; gap: 8px; margin: 12px 0 4px; }
.chips button { padding: 7px 14px; border-radius: 999px; background: var(--surface); color: var(--hint); font-weight: 750; font-size: 13.5px; }
.chips button.on { background: rgba(110, 69, 255, .2); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--grape); }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; margin: 22px 0 6px; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.pod .av { position: relative; width: 74px; height: 74px; }
.pod.p1 .av { width: 92px; height: 92px; }
.av-i { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center; color: #fff;
  font-weight: 900; font-size: 28px; background: var(--c, var(--grape)); box-shadow: 0 0 0 3px var(--ring, var(--surface)), var(--shadow); }
.pod.p1 .av-i { font-size: 36px; }
.pod .medal { position: absolute; right: -8px; bottom: -6px; font-size: 34px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.pod .nm { max-width: 100%; font-weight: 800; font-size: 14px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod .vl { color: var(--hint); font-size: 12.5px; font-weight: 700; margin-top: -4px; }
.pod .base { width: 100%; display: grid; place-items: center; border-radius: 16px 16px 6px 6px; font-weight: 900; font-size: 26px;
  color: rgba(0,0,0,.55); }
.pod.p1 .base { height: 96px; background: linear-gradient(#ffe066, #ffc300); }
.pod.p2 .base { height: 72px; background: linear-gradient(#e9eef7, #b9c4d6); }
.pod.p3 .base { height: 56px; background: linear-gradient(#f5c08f, #d98b4e); }
.pod.p1 { --ring: #ffd60a; } .pod.p2 { --ring: #cdd6e4; } .pod.p3 { --ring: #e7a46b; }
.pod.me .nm { color: var(--grape); }
:root:not([data-light]) .pod.me .nm { color: #a58bff; }
.badge-v { margin-left: 3px; font-size: 13px; }
.trows { border-radius: var(--r); background: var(--surface); overflow: hidden; margin-top: 10px; }
.tr { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.tr + .tr { box-shadow: inset 0 1px 0 var(--line); }
.tr .rk { width: 26px; text-align: center; color: var(--hint); font-weight: 850; font-variant-numeric: tabular-nums; }
.tr .av-i { width: 40px; height: 40px; font-size: 17px; box-shadow: none; flex: none; }
.tr .nm { flex: 1; min-width: 0; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr .vl { font-weight: 850; font-variant-numeric: tabular-nums; }
.tr.me { background: rgba(110, 69, 255, .16); }
.top-empty { margin-top: 18px; padding: 26px 18px; border-radius: 22px; background: var(--surface); text-align: center; }
.top-empty .big { font-size: 54px; line-height: 1; }
.top-empty b { display: block; margin-top: 10px; font-size: 18px; font-weight: 900; }
.top-empty p { margin: 6px auto 16px; max-width: 30ch; color: var(--hint); }
.top-empty .cta { max-width: 320px; }
#v-top { padding-bottom: 92px; }
.mebar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tab-h) + var(--safe-b) + 18px); z-index: 19;
  display: flex; align-items: center; gap: 12px; width: calc(100% - 24px); max-width: 560px; padding: 10px 10px 10px 14px; border-radius: 20px;
  background: linear-gradient(rgba(110, 69, 255, .22), rgba(110, 69, 255, .22)), var(--surface);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3), inset 0 0 0 1px var(--line); animation: tin .22s ease both; }
.mebar .av-i { width: 40px; height: 40px; font-size: 17px; box-shadow: none; flex: none; }
.mebar .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mebar .tx b { font-weight: 850; }
.mebar .tx small { color: var(--hint); font-size: 12.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mebar .go2 { flex: none; height: 40px; padding: 0 16px; border-radius: 14px; background: var(--loot); color: var(--loot-ink); font-weight: 900; }

/* медали недели в «Мои» */
.medals { margin-top: 12px; padding: 14px; border-radius: 18px;
  background: linear-gradient(rgba(255, 214, 10, .13), rgba(255, 214, 10, .13)), var(--surface); }
.medals h4 { margin: 0 0 10px; font-size: 15px; font-weight: 850; }
.mrow { display: flex; align-items: center; gap: 6px; }
.mrow + .mrow { margin-top: 8px; }
.mrow .lb { flex: 1; min-width: 0; color: var(--hint); font-weight: 750; font-size: 13.5px; }
.mc { min-width: 58px; padding: 6px 8px; border-radius: 12px; background: var(--bg); text-align: center; font-weight: 850; font-size: 16px;
  font-variant-numeric: tabular-nums; }
.mc.zero { opacity: .35; }
.medals .ms { margin: 10px 0 0; color: var(--hint); font-size: 12.5px; }
.medals.empty { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.medals.empty .mi { font-size: 30px; }
.medals.empty .mt { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.medals.empty .mt b { font-weight: 850; }
.medals.empty .mt small { color: var(--hint); font-size: 13px; }

/* профиль человека из топа */
.tap { cursor: pointer; }
.tr.tap:active { background: var(--line); }
.pod .av, .pod .nm { cursor: pointer; }
.pf-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 4px; }
.pf-av { width: 96px !important; height: 96px !important; font-size: 38px !important; box-shadow: 0 0 0 4px var(--grape), var(--shadow) !important; }
.pf-head .sh-t { margin: 0; }
.pf-rank { width: max-content; margin: 8px auto 0; padding: 6px 14px; border-radius: 999px; background: var(--loot); color: var(--loot-ink);
  font-weight: 900; font-size: 14px; }
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 0; }
.pf-grid > div { padding: 14px 10px 12px; border-radius: 18px; background: var(--bg); text-align: center; }
.pf-grid > div.sk { height: 74px; }
.pf-grid b { display: block; font-size: 26px; font-weight: 900; font-stretch: 110%; font-variant-numeric: tabular-nums; }
.pf-grid > div:nth-child(1) b { color: var(--grape); }
:root:not([data-light]) .pf-grid > div:nth-child(1) b { color: #a58bff; }
.pf-grid span { color: var(--hint); font-size: 12.5px; }
.pf-medals { margin-top: 10px; background: linear-gradient(rgba(255, 214, 10, .13), rgba(255, 214, 10, .13)), var(--bg); }

/* «Ещё умею» на главной */
.feats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.feat { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 104px; padding: 14px;
  border-radius: 20px; text-align: left; overflow: hidden;
  background: linear-gradient(var(--tint), var(--tint)), var(--surface); }
.feat .fi { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--c); color: #fff; }
.feat .fi svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.feat b { font-weight: 850; font-size: 15px; line-height: 1.15; }
.feat small { color: var(--hint); font-size: 12.5px; line-height: 1.25; }
.feat .tag2 { position: absolute; top: 12px; right: 12px; padding: 2px 8px; border-radius: 999px; background: var(--loot); color: var(--loot-ink);
  font-size: 11px; font-weight: 900; }
.pack-grid .st { cursor: pointer; }
.btn2.em { background: rgba(255, 138, 61, .16); }

.tmr { display: inline-block; margin: 0 2px; padding: 1px 8px; border-radius: 8px; background: var(--loot); color: var(--loot-ink);
  font-weight: 900; font-variant-numeric: tabular-nums; }

/* ===================== вид №4: ярче (дизайн — агент, 12.10) ===================== */
:root{--grape-rgb:110,69,255;--pink-rgb:255,79,163;--cyan-rgb:34,200,240;--loot-rgb:255,214,10;--orange-rgb:255,138,61;
 --rgb:var(--grape-rgb);--grape-hi:#a58bff;--wash:.40;--halo:.55;--edge:.28;--glow:.75;--drop:rgba(0,0,0,.3);
 --g-loot:linear-gradient(180deg,#ffe55c 0%,#ffd60a 55%,#ffc400 100%);--g-hot:linear-gradient(135deg,#ff9a3d,#ff4fa3);
 --g-tt:linear-gradient(90deg,#22c8f0,#ff4fa3);--g-holo:linear-gradient(115deg,#ffe45c 0%,#ffd60a 24%,#ffc2e6 50%,#a9ecff 72%,#ffe45c 100%);
 --gloss:linear-gradient(160deg,rgba(255,255,255,.38),rgba(255,255,255,0) 55%);
 --candy:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(0,0,0,.12);}
:root[data-light]{--grape-hi:#5a33f0;--wash:.20;--halo:.35;--edge:.30;--glow:.45;--drop:rgba(30,20,60,.12);}
@media (prefers-color-scheme: light){:root:not([data-tg]){--grape-hi:#5a33f0;--wash:.20;--halo:.35;--edge:.30;--glow:.45;--drop:rgba(30,20,60,.12);}}

/* карточки «Ещё умею», цифры, медали, приглашение — без грязи */
.feat{background:radial-gradient(120px 100px at 33px 33px,rgba(var(--rgb),var(--wash)),rgba(var(--rgb),0)),linear-gradient(rgba(var(--rgb),.05),rgba(var(--rgb),.05)),var(--surface);box-shadow:inset 0 0 0 1px rgba(var(--rgb),var(--edge));}
.feat .fi{background:var(--gloss),var(--c);box-shadow:0 6px 14px -5px var(--c),inset 0 1px 0 rgba(255,255,255,.35);transform:rotate(-6deg);transition:transform .15s}
.feat:active .fi{transform:rotate(0) scale(1.08)}
.feat .tag2{background:var(--g-hot);color:#fff;letter-spacing:.5px;box-shadow:0 4px 10px -3px rgba(var(--pink-rgb),.8);animation:wiggle 3.6s ease-in-out infinite}
@keyframes wiggle{0%,82%,100%{rotate:0deg;scale:1}86%{rotate:-9deg;scale:1.12}91%{rotate:7deg;scale:1.12}96%{rotate:-3deg;scale:1}}
.stats div,.pf-grid>div{background:radial-gradient(90% 100% at 50% 0%,rgba(var(--k),var(--wash)),rgba(var(--k),0)),var(--surface);box-shadow:inset 0 0 0 1px rgba(var(--k),var(--edge))}
.pf-grid>div{background-color:var(--bg)}
.stats .s1,.pf-grid>div:nth-child(1){--k:var(--grape-rgb);--cl:var(--grape-hi)}
.stats .s2,.pf-grid>div:nth-child(3){--k:var(--cyan-rgb);--cl:var(--cyan)}
.stats .s3,.pf-grid>div:nth-child(2){--k:var(--pink-rgb);--cl:var(--pink)}
.pf-grid>div:nth-child(4){--k:var(--orange-rgb);--cl:var(--orange)}
:root[data-light] .pf-grid>div:nth-child(3){--cl:#0a98bd} :root[data-light] .pf-grid>div:nth-child(4){--cl:#e0661a}
.stats b,.pf-grid b{color:var(--cl);font-stretch:125%;font-size:26px}
.medals{background:radial-gradient(170px 120px at 26px 20px,rgba(var(--loot-rgb),.24),rgba(var(--loot-rgb),0)),var(--surface);box-shadow:inset 0 0 0 1px rgba(var(--loot-rgb),.22)}
.medals.pf-medals{background-color:var(--bg)}
.medals h4{font-weight:900;font-stretch:112%}
.mc{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)} .mc.zero{opacity:.4}
.mrow .mc:not(.zero):nth-child(2){background:linear-gradient(180deg,#fff3a6,#ffd60a 55%,#f2b100);color:#1a1300;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 5px 14px -5px rgba(255,200,0,.8)}
.mrow .mc:not(.zero):nth-child(3){background:linear-gradient(180deg,#fff,#dde4ef 55%,#b4bfd2);color:#1b2230;box-shadow:inset 0 1px 0 #fff,0 5px 14px -6px rgba(200,212,232,.7)}
.mrow .mc:not(.zero):nth-child(4){background:linear-gradient(180deg,#ffd4ad,#f0a465 55%,#c8783a);color:#2a1405;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 5px 14px -6px rgba(231,164,107,.75)}
.invite{background:radial-gradient(150px 110px at 38px 50%,rgba(var(--pink-rgb),var(--wash)),rgba(var(--pink-rgb),0)),var(--surface);box-shadow:inset 0 0 0 1px rgba(var(--pink-rgb),var(--edge))}
.invite .promo-i{background:var(--gloss),var(--pink);box-shadow:0 6px 14px -5px var(--pink);transform:rotate(-6deg)}

/* плакат и шапка */
.hero{background-color:var(--grape);background-image:radial-gradient(rgba(255,255,255,.13) 1.3px,transparent 1.4px),
 radial-gradient(70% 60% at 100% 0%,rgba(255,79,163,.6),rgba(255,79,163,0) 70%),
 radial-gradient(60% 55% at 0% 100%,rgba(34,200,240,.42),rgba(34,200,240,0) 70%),
 linear-gradient(160deg,#7c55ff 0%,#6e45ff 50%,#5b30ea 100%);background-size:16px 16px,auto,auto,auto;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 22px 40px -26px rgba(110,69,255,.95)}
.hero-ava{animation:wiggle 5.2s ease-in-out 1.2s infinite}
.intro .hero-ava{animation:ava-in .6s cubic-bezier(.2,1.3,.4,1) .12s backwards,wiggle 5.2s ease-in-out 1.6s infinite}
@keyframes bob{to{translate:0 -5px}}
.link{box-shadow:0 0 0 3px rgba(255,255,255,.16),0 12px 24px -10px rgba(20,0,80,.55);transition:box-shadow .15s}
.link:focus-within{box-shadow:0 0 0 3px var(--loot),0 12px 24px -10px rgba(20,0,80,.55)}
.top-ava{padding:2px;background:var(--g-tt);box-shadow:none}
.top-name{font-weight:900;font-stretch:120%}

/* кнопки */
.cta,.go,.mebar .go2{background:var(--g-loot);color:var(--loot-ink);box-shadow:var(--candy),0 8px 20px -8px rgba(255,196,0,var(--glow))}
.cta{font-stretch:112%;transition:transform .1s,box-shadow .1s}
.go{position:relative}
.btn2{box-shadow:inset 0 0 0 1.5px var(--line)}
.btn2.em{background:linear-gradient(135deg,rgba(var(--orange-rgb),.26),rgba(var(--pink-rgb),.14));box-shadow:inset 0 0 0 1.5px rgba(var(--orange-rgb),.45)}
.chip{background:linear-gradient(180deg,#f4efff,#e6dcff);box-shadow:inset 0 0 0 1px rgba(110,69,255,.2)}
.li .ic{background:var(--gloss),var(--c,var(--grape))}

/* жёлтая «Безлимит» и VIP */
.promo{position:relative;overflow:hidden;background:var(--g-loot);box-shadow:var(--candy),0 14px 28px -14px rgba(255,196,0,var(--glow))}
.promo .promo-i{transform:rotate(-6deg);box-shadow:0 6px 14px -6px rgba(0,0,0,.6)}
.promo-t b{font-stretch:110%}

/* пилюля статуса */
.pill{background:rgba(var(--grape-rgb),.2);box-shadow:inset 0 0 0 1px rgba(var(--grape-rgb),.45)}
.pill::before{background:var(--grape-hi);box-shadow:0 0 8px var(--grape-hi)}
.pill.low{background:rgba(var(--pink-rgb),.18);box-shadow:inset 0 0 0 1px rgba(var(--pink-rgb),.55)}
.pill.low::before{background:var(--pink);box-shadow:0 0 8px var(--pink);animation:beat 1.2s ease-in-out infinite}
@keyframes beat{50%{transform:scale(1.45);opacity:.55}}
.pill.unl{background:var(--g-loot);box-shadow:var(--candy),0 6px 14px -6px rgba(255,196,0,var(--glow))}
.pill.unl::before,.pill.vip::before{box-shadow:none}

/* заголовки разделов */
.sec-h h2{font-weight:900;font-stretch:118%}
.badge{transform:rotate(-7deg);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 14px -5px var(--bc)}
.b-hot{--bc:#ff6a3d;background:linear-gradient(135deg,#ffb13d,#ff6a3d 55%,#ff4fa3)}
.b-pk{--bc:#22c8f0;background:linear-gradient(135deg,#6fe7ff,#22c8f0 55%,#4a7dff)}
.b-hot svg{transform-origin:50% 85%}
@keyframes flick{0%,40%,100%{transform:none}10%{transform:scale(1.1,.92) rotate(-5deg)}20%{transform:scale(.94,1.08) rotate(4deg)}30%{transform:scale(1.04,.97)}}
.more{box-shadow:inset 0 0 0 1px var(--line)}

/* стикеры и паки */
.st{box-shadow:0 10px 18px -10px rgba(var(--rgb),var(--glow)),0 3px 8px var(--drop)}
.st .n{z-index:1;border:1.5px solid #fff;background:var(--g-loot);font-stretch:110%;box-shadow:0 3px 8px -2px rgba(0,0,0,.45)}
.st .n.hot{background:var(--g-hot);color:#fff;box-shadow:0 4px 10px -3px rgba(var(--pink-rgb),.85)}
.st .n.hot::before{content:"🔥";font-size:10px;margin-right:2px}
.pk .cv{background:radial-gradient(closest-side,rgba(var(--rgb),var(--halo)),rgba(var(--rgb),0)) no-repeat,var(--surface);box-shadow:inset 0 0 0 1px rgba(var(--rgb),var(--edge))}
.pk .cv::before{opacity:.35} .pk .cv.sk{box-shadow:none}
.pk .cv>img,.pk .cv>.ph-i{box-shadow:0 12px 22px -10px rgba(var(--rgb),var(--glow)),0 3px 8px var(--drop)}
.pk .cv>.ph-i{background:var(--gloss),var(--c)}

/* топ */
.seg button{transition:background .18s,color .18s}
.seg button.on{background:linear-gradient(135deg,#8a63ff,#6e45ff 55%,#9a3cf0);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 16px -6px rgba(var(--grape-rgb),.9)}
.chips button.on{background:var(--text);color:var(--bg);box-shadow:none}
.pod .base{position:relative;overflow:hidden;font-size:30px;font-stretch:125%;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -4px 0 rgba(0,0,0,.12)}
.pod.p1 .base{background:linear-gradient(180deg,#fff27a,#ffd60a 45%,#ffb300);box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -4px 0 rgba(0,0,0,.12),0 16px 30px -14px rgba(255,200,0,.85)}
.pod.p2 .av-i,.pod.p3 .av-i{box-shadow:0 0 0 3px var(--ring),0 0 18px -4px var(--ring)}
.pod.p1 .medal{animation:bob 1.6s ease-in-out infinite alternate}
.pod.me .nm{color:var(--grape-hi)}
.tr .rk,.tr .vl{font-stretch:120%}
.tr.me{background:linear-gradient(90deg,rgba(var(--grape-rgb),.34),rgba(var(--grape-rgb),.06));box-shadow:inset 3px 0 0 var(--grape-hi),inset 0 1px 0 var(--line)}
.mebar{background:linear-gradient(100deg,rgba(var(--grape-rgb),.40),rgba(var(--pink-rgb),.16)),var(--surface);box-shadow:inset 0 0 0 1px rgba(var(--grape-rgb),.5),0 14px 30px -12px rgba(var(--grape-rgb),.7)}
.mebar .av-i{box-shadow:0 0 0 2px #fff}

/* профиль из топа */
.pf-head{background:radial-gradient(closest-side,rgba(var(--pink-rgb),.30),rgba(var(--grape-rgb),.14) 60%,rgba(var(--grape-rgb),0)) 50% -20px/280px 190px no-repeat}
.pf-av{box-shadow:0 0 0 5px #fff,0 16px 30px -12px rgba(var(--pink-rgb),.8)!important;transform:rotate(-4deg);animation:stick .5s cubic-bezier(.2,1.3,.4,1) both}
.pf-head .sh-t,.sh-t{font-stretch:115%}
.pf-rank{background:var(--g-loot);box-shadow:var(--candy),0 8px 18px -8px rgba(255,196,0,var(--glow));transform:rotate(-2deg);font-stretch:112%}

/* шторки и покупка */
.sheet{box-shadow:0 -18px 40px -24px rgba(var(--grape-rgb),.8),inset 0 1px 0 rgba(255,255,255,.06)}
.grab-bar{background:var(--g-tt);opacity:.55}
.sh-art::before{content:"";position:absolute;inset:-22%;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(var(--pink-rgb),.42),rgba(var(--grape-rgb),.2) 55%,rgba(var(--grape-rgb),0))}
.sh-art>*{position:relative}
.sh-art .ldr{background-image:radial-gradient(rgba(255,255,255,.25) 1.3px,transparent 1.4px),linear-gradient(135deg,#8a63ff,#6e45ff 50%,#ff4fa3);background-size:12px 12px,auto}
.plan{box-shadow:inset 0 0 0 1px var(--line)}
.plan .i{background:var(--gloss),var(--c,var(--grape));box-shadow:0 6px 14px -5px var(--c,var(--grape));transform:rotate(-6deg)}
.plan .pr{background:var(--g-loot);box-shadow:var(--candy)}
.plan .tag{background:var(--g-hot);color:#fff;box-shadow:0 4px 10px -3px rgba(var(--pink-rgb),.8);animation:wiggle 3.6s ease-in-out .8s infinite}
.pick.on{box-shadow:inset 0 0 0 2px var(--grape-hi),0 8px 18px -10px rgba(var(--grape-rgb),.8)}

/* фишка 1: глитч-заголовок в цветах ТикТока */
.hero h1,.v-title{text-shadow:-1.5px -1px 0 rgba(var(--cyan-rgb),.85),1.5px 1px 0 rgba(var(--pink-rgb),.85)}
.hero h1 em{text-shadow:none} .v-title{font-size:28px;font-stretch:120%}
/* фишка 2: голографический VIP и блик */
.pill.vip,#promo-me{background:var(--g-holo)}
.pill.vip{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 6px 16px -6px rgba(var(--pink-rgb),var(--glow))}
#promo-me{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7),0 14px 30px -14px rgba(var(--pink-rgb),var(--glow))}
.plan.best{border:2px solid transparent;padding:12px;box-shadow:0 12px 26px -14px rgba(var(--pink-rgb),var(--glow));
 background:linear-gradient(rgba(var(--loot-rgb),.08),rgba(var(--loot-rgb),.08)) padding-box,linear-gradient(var(--bg),var(--bg)) padding-box,
 linear-gradient(120deg,#ffd60a,#ff4fa3 35%,#22c8f0 65%,#ffd60a) border-box}
/* фишка 3: блик-ламинат на стикерах */
.st:not(.ph):not(.sk)::after{content:"";position:absolute;inset:4px;border-radius:10px;pointer-events:none;
 background:linear-gradient(135deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,.10) 15%,rgba(255,255,255,0) 15.5%)}
.pack-grid .st::after{inset:3px;border-radius:8px}
/* фишка 4: неоновая лампа над активной вкладкой */
.tabs button.on{background:linear-gradient(180deg,rgba(var(--pink-rgb),.16),rgba(var(--grape-rgb),.14) 55%,rgba(var(--grape-rgb),.08))}
.tabs button.on::before{content:"";position:absolute;top:-6px;left:50%;width:26px;margin-left:-13px;height:3px;border-radius:0 0 4px 4px;
 background:var(--g-tt);box-shadow:0 2px 12px 1px rgba(var(--pink-rgb),.85);animation:lamp .3s cubic-bezier(.2,1.4,.4,1) both}
@keyframes lamp{from{transform:scaleX(0);opacity:0}}
.tabs button.on svg{stroke:var(--grape-hi);animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
:root:not([data-light]) .tabs button.on svg{filter:drop-shadow(0 0 6px rgba(165,139,255,.7))}
@keyframes pop{from{transform:scale(.7) translateY(3px)}}
/* фишка 5: радужное кольцо у №1 */
.pod.p1{--ring:var(--bg)} .pod.p1 .av{isolation:isolate} .pod.p1 .av-i{box-shadow:0 0 0 3px var(--bg)}
.pod.p1 .av::before{content:"";position:absolute;inset:-6px;z-index:-1;border-radius:50%;
 background:conic-gradient(#ffd60a,#ff4fa3,#22c8f0,#6e45ff,#ffd60a);box-shadow:0 0 24px -4px rgba(255,214,10,.75);animation:spin 6s linear infinite}
/* слабый телефон — без бесконечных анимаций */
.lite .hero-ava,.lite .hero-loot .lt,.lite .b-hot svg,.lite .tag2,.lite .plan .tag,.lite .invite .promo-i svg,.lite .promo::after,
.lite .pod.p1 .base::after,.lite .pod.p1 .av::before,.lite .pod.p1 .medal,.lite .pill.low::before{animation:none}
.medals.empty{text-align:left}
.medals.empty .mt{align-items:flex-start}
.medals.empty .mt b{color:var(--text);font-weight:900;font-stretch:112%}
.medals.empty .mi{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;font-size:28px;
 background:var(--gloss),var(--g-loot);box-shadow:var(--candy),0 8px 18px -8px rgba(255,196,0,var(--glow));transform:rotate(-6deg)}

/* ===================== вид №4: движение (агент, 12.10) ===================== */
:root { --out: cubic-bezier(.22,1,.36,1); --spring: cubic-bezier(.2,1.3,.4,1); --in: cubic-bezier(.55,0,1,.45); --io: cubic-bezier(.65,0,.35,1); }
@keyframes rise { from { opacity: 0; translate: 0 12px; } }
@keyframes stk-in { from { opacity: 0; translate: 0 16px; scale: .8; rotate: -8deg; } }
@keyframes tagpop { 0% { scale: 0; } 60% { scale: 1.2; } 100% { scale: 1; } }
@keyframes ping { from { scale: 1; opacity: .7; } to { scale: 2.6; opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
/* появление лесенкой: ждёт, пока контейнер на экране */
.rv { animation: rise .42s var(--out) calc(var(--d0, 0s) + var(--i, 0) * 45ms) backwards; animation-play-state: paused; }
.st.rv, .pk.rv { animation-name: stk-in; animation-timing-function: var(--spring); }
.rv .n, .rv .tag2 { animation: tagpop .4s var(--out) calc(var(--d0, 0s) + var(--i, 0) * 45ms + .25s) backwards; animation-play-state: paused; }
.seen > .rv, .seen > .rv .n, .seen > .rv .tag2 { animation-play-state: running; }
#feats { --d0: .28s; } .trows { --d0: .3s; }

/* нажатия: одна пружина на всё */
.st, .pk .cv, .feat, .promo, .invite, .cta, .btn2, .go, .go2, .more, .chip, .pick, .plan, .ghost, .dest, .seg button, .chips button, .medals.empty
  { transition: transform .3s var(--spring), scale .3s var(--spring), translate .3s var(--spring), box-shadow .15s; }
.feat:active, .promo:active, .invite:active, .cta:active, .btn2:active, .plan:active, .pick:active, .ghost:active, .dest:active, .medals.empty:active { scale: .97; transition-duration: .08s; }
.go:active, .go2:active, .more:active, .chip:active, .seg button:active, .chips button:active { scale: .92; transition-duration: .08s; }
.st:active { transform: none; scale: .92; transition-duration: .08s; box-shadow: 0 0 0 3px var(--loot), var(--shadow); }
.pk:active .cv { scale: .95; transition-duration: .08s; }
.feat:active { box-shadow: inset 0 0 0 2px var(--c), 0 0 22px -6px var(--c); }
@media (hover: hover) and (pointer: fine) { .st:hover { transform: none; translate: 0 -3px; } .feat:hover, .pk:hover .cv { translate: 0 -2px; } }
/* бегунок под вкладками (лампа над ним — из «ярче») */
.tabs-in { position: relative; }
.tabs-in::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 5); border-radius: 18px;
  background: linear-gradient(180deg, rgba(var(--pink-rgb), .16), rgba(var(--grape-rgb), .2) 55%, rgba(var(--grape-rgb), .12));
  transform: translateX(calc(var(--ti, 0) * 100%)); transition: transform .42s var(--spring); }
.tabs button.on { background: none; }
.tabs svg { transition: scale .3s var(--spring); }
.tabs button:active svg { scale: .82; transition-duration: .08s; }
.tabs button.on svg { animation: tabpop .45s var(--out); }
@keyframes tabpop { 50% { scale: 1.18; translate: 0 -2px; } }
.view { animation: view-in .26s var(--out) backwards; }
@keyframes view-in { from { opacity: 0; translate: var(--dx, 0px) 0; } }

/* «тащу стикер» и победа */
.sh-art.wk { isolation: isolate; }
.sh-art.wk::before { content: ""; position: absolute; inset: -20%; z-index: -1; border-radius: 50%; opacity: .6;
  background: conic-gradient(#6e45ff, #ff4fa3, #ffd60a, #22c8f0, #6e45ff);
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent); mask: radial-gradient(closest-side, #000 30%, transparent);
  animation: spin 2.8s linear infinite; }
:root[data-light] .sh-art.wk::before { opacity: .4; }
.sh-art.wk > img, .sh-art.wk > video, .sh-art.wk > .big { animation: stick .5s var(--spring) both, float 1.6s var(--io) .5s infinite; }
@keyframes float { 50% { translate: 0 -8px; rotate: 4deg; } }
.sh-art.win > img, .sh-art.win > video, .sh-art.win > .big { animation: slam .6s backwards; }
@keyframes slam { 0% { opacity: 0; scale: 1.8; rotate: -12deg; animation-timing-function: cubic-bezier(.5,0,.9,.45); }
  40% { opacity: 1; scale: .9; rotate: 0deg; animation-timing-function: cubic-bezier(.22,1,.36,1); } 70% { scale: 1.05; } }
.sh-art.win::after { content: ""; position: absolute; inset: 0; border-radius: 24px; border: 4px solid var(--loot); opacity: 0; pointer-events: none; animation: shock .5s var(--out) .24s; }
@keyframes shock { from { opacity: .9; scale: .9; } to { opacity: 0; scale: 1.5; } }
.sh-art.fail > .big { animation: shake .4s var(--io); }
@keyframes shake { 20%, 60% { translate: -7px 0; } 40%, 80% { translate: 7px 0; } }

/* открытие: плакат, енот, добыча, маркер */
.intro .hero { animation: hero-in .5s var(--out) backwards; }
@keyframes hero-in { from { opacity: 0; translate: 0 16px; scale: .97; } }
@keyframes ava-in { from { opacity: 0; scale: .3; rotate: -40deg; } }
.intro .hero-loot .lt { animation: loot-in .55s var(--spring) .3s backwards; }
.intro .hero-loot .lt:nth-of-type(3) { animation-delay: .4s; }
@keyframes loot-in { from { opacity: 0; translate: 26px -30px; rotate: 50deg; scale: .4; } }
.intro .hero h1 em { background-repeat: no-repeat; animation: mark .45s var(--out) .45s backwards; }
@keyframes mark { from { background-size: 0% 100%; color: #fff; } to { background-size: 100% 100%; } }
.intro .link { animation: rise .45s var(--out) .18s backwards; }
.intro .how li { animation: rise .35s var(--out) .4s backwards; }
.intro .how li:nth-child(2) { animation-delay: .46s; } .intro .how li:nth-child(3) { animation-delay: .52s; }

/* «Сейчас забирают»: LIVE, №1 покачивается, ценник вспыхивает при росте */
.live { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 7px; background: linear-gradient(90deg, #ff2d55, #ff4fa3);
  color: #fff; font-size: 10.5px; font-weight: 900; letter-spacing: .6px; line-height: 1.2; box-shadow: 0 4px 10px -4px rgba(255,45,85,.8); }
.live i { position: relative; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff; opacity: 0; }
.live.run i::after { animation: ping 1.6s var(--out) infinite; }
@media (max-width: 360px) { .live { font-size: 0; gap: 0; padding: 5px; } }
.run > .st:first-child:not(.rv) { animation: wig 4.5s var(--io) 1s infinite; }
@keyframes wig { 0%, 84%, 100% { rotate: 0deg; } 87% { rotate: -7deg; } 90% { rotate: 6deg; } 93% { rotate: -3deg; } 96% { rotate: 1deg; } }
.st .n.bump { animation: bump .6s var(--out); }
@keyframes bump { 35% { scale: 1.35; background: var(--pink); color: #fff; } }

/* жёлтые: блик раз в несколько секунд, стрелка «готово» при ссылке в поле */
.promo, .cta.shine { position: relative; overflow: hidden; }
.promo::after, .cta.shine::after, .pod.p1 .base::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.6) 50%, transparent 80%); transform: translateX(-120%); }
.promo.run::after { animation: sheen 7s var(--io) 1.5s infinite; }
.cta.shine::after { animation: sheen 5s var(--io) .7s infinite; }
.pod.p1 .base::after { animation: sheen 6s var(--io) 1.6s infinite; }
@keyframes sheen { 0% { transform: translateX(-120%); } 14%, 100% { transform: translateX(330%); } }
.go.ready:not(.busy)::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--loot); animation: ping 1.4s var(--out) infinite; }
.go.ready:not(.busy) svg { animation: nudge 1.4s var(--io) infinite; }
@keyframes nudge { 50% { translate: 3px 0; } }

/* топ: пьедестал вырастает, №1 последним; медаль качается; плашка «ты» выезжает; секунды перелистываются */
.pod.p3 { --d: 0s; } .pod.p2 { --d: .12s; } .pod.p1 { --d: .26s; }
.pod .base { transform-origin: 50% 100%; animation: grow .55s var(--spring) var(--d) backwards; }
@keyframes grow { from { scale: 1 0; } }
.pod .av { animation: land .5s var(--spring) calc(var(--d) + .22s) backwards; }
@keyframes land { from { opacity: 0; translate: 0 -30px; scale: .5; } }
.pod .nm, .pod .vl { animation: rise .35s var(--out) calc(var(--d) + .32s) backwards; }
.pod.p1 .medal { transform-origin: 50% 0; animation: swing 5s var(--io) 1.4s infinite; }
@keyframes swing { 0%, 82%, 100% { rotate: 0deg; } 86% { rotate: 18deg; } 90% { rotate: -12deg; } 94% { rotate: 6deg; } 97% { rotate: -2deg; } }
.mebar { animation: bar-up .5s var(--spring) .5s backwards; }
@keyframes bar-up { from { transform: translate(-50%, 170%); } }
.tmr i { display: inline-block; font-style: normal; }
.tmr.hurry { background: var(--pink); color: #fff; }

/* шторки: содержимое, закрытие, профиль, покупка */
#sheet-body > :not(.sh-art) { animation: rise .32s var(--out) backwards; }
#sheet-body > :nth-child(3) { animation-delay: .05s; } #sheet-body > :nth-child(4) { animation-delay: .1s; } #sheet-body > :nth-child(n+5) { animation-delay: .15s; }
#sheet-body > .win ~ * { animation-delay: .3s; }
.sheet.out { animation: sheet-out .2s var(--in) forwards; pointer-events: none; }
.sheet-bg.out { animation: fade-out .2s ease forwards; pointer-events: none; }
@keyframes sheet-out { to { translate: 0 100%; } }
.pf-av { animation: pop-in .5s var(--spring) backwards; }
@keyframes pop-in { from { opacity: 0; scale: .4; } }
.pf-rank { animation: tagpop .45s var(--out) .18s backwards; }
.pf-grid > div:not(.sk) { animation: rise .36s var(--out) backwards; }
.pf-grid > div:nth-child(2) { animation-delay: .05s; } .pf-grid > div:nth-child(3) { animation-delay: .1s; } .pf-grid > div:nth-child(4) { animation-delay: .15s; }
.pf-medals .mc:not(.zero) { animation: mpop .45s var(--out) calc(.35s + var(--i, 0) * 70ms) backwards; }
@keyframes mpop { 0% { scale: 0; rotate: -30deg; } 65% { scale: 1.2; rotate: 6deg; } }
.plans .plan { animation: rise .36s var(--out) backwards; }
.plans .plan:nth-child(2) { animation-delay: .06s; } .plans .plan:nth-child(3) { animation-delay: .12s; }
.plan .tag { animation: tagpop .45s var(--out) .35s backwards; }
.plan.best { position: relative; }
.plan.best::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; opacity: .25;
  box-shadow: 0 0 0 2px var(--loot), 0 0 18px 1px rgba(255,214,10,.55); animation: glow 1.8s var(--io) .6s infinite alternate; }
:root[data-light] .plan.best::before { box-shadow: 0 0 0 2px #ffc300, 0 0 16px 1px rgba(255,170,0,.5); }
@keyframes glow { to { opacity: 1; } }
/* фон замирает, пока открыта шторка */
.sh-on .run > .st:first-child, .sh-on .live i::after, .sh-on .promo::after, .sh-on .pod.p1 .medal, .sh-on .pod.p1 .av::before,
.sh-on .hero-ava, .sh-on .tag2, .sh-on .pod.p1 .base::after { animation-play-state: paused; }
/* слабый телефон — без бесконечных */
.lite .run > .st:first-child, .lite .live i::after, .lite .cta.shine::after, .lite .go.ready::after, .lite .go.ready svg,
.lite .plan.best::before, .lite .sh-art.wk::before, .lite .sh-art.wk > img, .lite .sh-art.wk > video, .lite .sh-art.wk > .big,
.lite .intro .hero-ava { animation: none; }
/* полоса прокрутки режет всё, что выше неё: ценник ×N над плиткой и подъём при наведении — даём место сверху (12.10) */
.row { padding-top: 20px; margin-top: -10px; }
@media (hover: hover) and (pointer: fine) { .row > .st:hover { translate: 0 -2px; } }

/* NEW — свежий стикер в ленте (впервые забрали за сутки): голубой → фиолетовый, чтобы не путать с 🔥 */
.st .n.new { background: linear-gradient(135deg, #22c8f0, #6e45ff); color: #fff; letter-spacing: .6px; font-size: 11.5px;
  box-shadow: 0 4px 10px -3px rgba(var(--cyan-rgb), .9); }
.st .n.new::before { content: "✦"; margin-right: 3px; font-size: 10px; }

/* Экран «Что даёт VIP» (12.10): голографическая карточка с короной, будущий номер, список выгод */
.vip-hero{position:relative;display:grid;justify-items:center;gap:10px;margin:6px 0 14px}
.vip-hero::before{content:"";position:absolute;top:-30px;width:240px;height:200px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,214,10,.38),rgba(var(--pink-rgb),.18) 55%,rgba(var(--pink-rgb),0))}
.vh-card{position:relative;display:grid;place-items:center;width:96px;height:96px;border-radius:28px;overflow:hidden;transform:rotate(-6deg);
  background:var(--gloss),var(--g-holo);background-size:auto,220% 100%;box-shadow:var(--candy),0 16px 34px -12px rgba(255,196,0,.75);
  animation:vh-holo 6s ease-in-out infinite alternate}
.vh-card svg{width:56px;height:56px;fill:none;stroke:#2a1600;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.vh-card::after{content:"";position:absolute;inset:-40% -60%;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.75) 50%,transparent 58%);
  transform:translateX(-60%);animation:vh-glare 3.2s ease-in-out 1s infinite}
.vh-no{position:relative;padding:5px 12px;border-radius:999px;background:rgba(255,214,10,.14);color:var(--loot);font-weight:850;font-size:13.5px;
  box-shadow:inset 0 0 0 1px rgba(255,214,10,.45)}
@keyframes vh-holo{to{background-position:0 0,100% 0}}
@keyframes vh-glare{0%,55%{transform:translateX(-60%)}85%,100%{transform:translateX(60%)}}
.perks{display:grid;gap:8px;margin:2px 0 16px}
.perk{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px var(--line)}
:root[data-light] .perk{background:rgba(0,0,0,.03)}
.perk .pk-i{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;font-size:20px;line-height:1;
  background:linear-gradient(135deg,rgba(255,214,10,.22),rgba(var(--pink-rgb),.18))}
.perk .pk-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.perk .pk-tx b{font-size:15.5px;font-weight:850}
.perk .pk-tx small{color:var(--hint);font-size:13px;line-height:1.35}
.cta.holo{background:var(--gloss),var(--g-holo);background-size:auto,200% 100%;animation:vh-holo 5s ease-in-out infinite alternate;color:#2a1600}
.vip-buy{position:sticky;z-index:2;bottom:calc(-18px - var(--safe-b));margin:0 -18px 6px;padding:10px 18px calc(12px + var(--safe-b));background:var(--surface);box-shadow:0 -1px 0 var(--line)}
.plan .tx small u.more{display:inline-block;margin-top:2px;color:var(--loot);font-weight:750;text-decoration:none}
.lite .vh-card,.lite .vh-card::after,.lite .cta.holo{animation:none}
@media (prefers-reduced-motion:reduce){.vh-card,.vh-card::after,.cta.holo{animation:none}}

/* «Поддержать команду» (12.10): тёплая карточка под «Позови друга» и окно с суммами */
.invite.tip{background:radial-gradient(150px 110px at 38px 50%,rgba(var(--orange-rgb),var(--wash)),rgba(var(--orange-rgb),0)),var(--surface);
  box-shadow:inset 0 0 0 1px rgba(var(--orange-rgb),var(--edge))}
.invite.tip .promo-i{background:var(--gloss),linear-gradient(135deg,#ff9a3d,#ff4fa3);box-shadow:0 6px 14px -5px rgba(var(--orange-rgb),.9);transform:rotate(6deg)}
.invite.tip .promo-i svg{fill:#fff;stroke:#fff;stroke-width:1.2}
.tip-st{font-size:20px;line-height:1;filter:drop-shadow(0 2px 6px rgba(255,196,0,.6))}
.tip-hero .vh-card{background:var(--gloss),linear-gradient(135deg,#ffb347,#ff6a88 55%,#ff4fa3);background-size:auto;
  box-shadow:var(--candy),0 16px 34px -12px rgba(var(--pink-rgb),.8);animation:none}
.tip-hero .vh-card svg{fill:#fff;stroke:#fff;stroke-width:1.2;animation:tipbeat 1.6s ease-in-out infinite}
@keyframes tipbeat{0%,40%,100%{transform:scale(1)}15%{transform:scale(1.12)}28%{transform:scale(1.04)}}
.tip-hero::before{background:radial-gradient(closest-side,rgba(var(--orange-rgb),.4),rgba(var(--pink-rgb),.18) 55%,rgba(var(--pink-rgb),0))}
.tips{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 14px}
.tipb{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 8px 12px;border-radius:18px;
  background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px var(--line);transition:scale .1s}
:root[data-light] .tipb{background:rgba(0,0,0,.03)}
.tipb:active{scale:.96}
.tipb .ti{font-size:28px;line-height:1.1}
.tipb b{font-size:19px;font-weight:900;font-stretch:110%}
.tipb small{color:var(--hint);font-size:12.5px}
.tipb.pop{background:linear-gradient(rgba(255,214,10,.12),rgba(255,214,10,.06));box-shadow:inset 0 0 0 2px rgba(255,214,10,.7)}
.lite .tip-hero .vh-card svg{animation:none}
@media (prefers-reduced-motion:reduce){.tip-hero .vh-card svg{animation:none}}

/* Огонёк (13.10): дни подряд со стикерами — в шапке, в «Мои», окно, вкладка в топе; таймер до бесплатных */
.top-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill.fire{gap:3px;padding-left:9px;padding-right:11px;font-variant-numeric:tabular-nums}
.pill.fire::before{display:none}
.pill.fire .fl{font-size:15px;line-height:1}
.pill.fire.on{background:linear-gradient(135deg,#ff9a3d,#ff4fa3);color:#fff;box-shadow:var(--candy),0 6px 16px -6px rgba(var(--orange-rgb),.9)}
.pill.fire.risk{background:rgba(var(--orange-rgb),.16);box-shadow:inset 0 0 0 1px rgba(var(--orange-rgb),.7)}
.pill.fire.risk .fl{animation:fire-flick 1.4s ease-in-out infinite}
.pill.fire.off{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--hint)}
.pill.fire.off .fl{filter:grayscale(1);opacity:.6}
.pill.wait{font-variant-numeric:tabular-nums}
@keyframes fire-flick{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.18) rotate(-6deg)}60%{transform:scale(.95) rotate(4deg)}}
.firecard{display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;padding:14px 16px;border-radius:22px;text-align:left;
  background:radial-gradient(150px 110px at 38px 50%,rgba(var(--orange-rgb),var(--wash)),rgba(var(--orange-rgb),0)),var(--surface);
  box-shadow:inset 0 0 0 1px rgba(var(--orange-rgb),var(--edge))}
.firecard .fi{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;font-size:24px;
  background:var(--gloss),linear-gradient(135deg,#ff9a3d,#ff4fa3);box-shadow:0 6px 14px -5px rgba(var(--orange-rgb),.9);transform:rotate(-6deg)}
.firecard.off .fi{background:var(--surface-2,rgba(255,255,255,.08));box-shadow:none;filter:grayscale(1)}
.firecard.risk .fi{animation:fire-flick 1.4s ease-in-out infinite}
.firecard .tx{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.firecard .tx b{font-weight:850;font-size:15.5px}
.firecard .tx small{color:var(--hint);font-size:13px}
.firecard .fb{flex:none;padding:5px 9px;border-radius:10px;background:rgba(var(--orange-rgb),.16);color:var(--orange,#ff8a3d);font-weight:800;font-size:12.5px}
.firecard:active{scale:.97;transition-duration:.08s}
.fire-hero{position:relative;display:grid;justify-items:center;margin:4px auto 8px;width:150px}
.fire-hero::before{content:"";position:absolute;top:-24px;width:220px;height:200px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--orange-rgb),.45),rgba(var(--pink-rgb),.18) 55%,rgba(var(--pink-rgb),0))}
.fire-hero .fl{position:relative;font-size:96px;line-height:1.05;animation:fire-flick 2.2s ease-in-out infinite}
.fire-hero.off .fl{filter:grayscale(1);opacity:.55;animation:none}
.fire-hero b{position:relative;margin-top:-10px;font-size:46px;font-weight:900;font-stretch:115%;font-variant-numeric:tabular-nums;
  text-shadow:0 4px 18px rgba(var(--orange-rgb),.7)}
.fdots{display:flex;justify-content:center;gap:10px;margin:6px 0 4px}
.fdots span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-weight:850;font-size:14px;color:var(--hint);
  background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line)}
.fdots span.on{background:linear-gradient(135deg,#ff9a3d,#ff4fa3);color:#fff;box-shadow:0 5px 12px -5px rgba(var(--orange-rgb),.9)}
.fire-how{margin:10px 0 16px;line-height:1.45}
.pf-fire{margin:0 auto 12px;width:max-content;max-width:100%;padding:7px 13px;border-radius:999px;font-weight:800;font-size:13.5px;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--hint)}
.pf-fire.on{background:rgba(var(--orange-rgb),.14);box-shadow:inset 0 0 0 1px rgba(var(--orange-rgb),.6);color:var(--text)}
.seg4{margin-top:4px}
.seg4 button{font-size:13.5px}
.lit{font-size:.9em}
.lite .pill.fire .fl,.lite .firecard .fi,.lite .fire-hero .fl{animation:none}
@media (prefers-reduced-motion:reduce){.pill.fire .fl,.firecard .fi,.fire-hero .fl{animation:none}}

/* Убрать стикеры из своего пака (13.10): красная кнопка, режим «нажми — уберу» с ✕ на каждом стикере */
.btn2.danger{color:#ff5a6e;box-shadow:inset 0 0 0 1.5px rgba(255,90,110,.5)}
.btn2.danger.on{background:rgba(255,61,90,.14);box-shadow:inset 0 0 0 1.5px rgba(255,90,110,.85)}
.del-hint{margin:2px 0 8px;color:#ff8a98}
.pack-grid.del .st{animation:jiggle .32s ease-in-out infinite alternate}
.pack-grid.del .st:nth-child(2n){animation-delay:-.16s}
.xdel{position:absolute;z-index:3;top:-7px;right:-7px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:#ff3d5a;color:#fff;font-weight:900;font-size:13px;line-height:1;box-shadow:0 3px 8px rgba(0,0,0,.45),0 0 0 2px var(--surface)}
.pack-grid .st.busy{opacity:.45}
.pack-grid .st.gone{scale:.2;opacity:0;transition:scale .25s ease-in,opacity .25s ease-in}
@keyframes jiggle{from{rotate:-1.6deg}to{rotate:1.6deg}}
.lite .pack-grid.del .st{animation:none}
@media (prefers-reduced-motion:reduce){.pack-grid.del .st{animation:none}}