/* Purple Mini App — нова модель. Вигляд 1:1 із макетом Purple App.dc.html.
   Світла тема. Фіолет #7C3AED. Unbounded(дисплей)+Manrope(текст). coin.png + 3D-бокси. */

:root{
  --tg-safe-top:env(safe-area-inset-top,0px);
  --tg-safe-bottom:env(safe-area-inset-bottom,0px);
  --f:'Manrope',system-ui,-apple-system,sans-serif;
  --f-d:'Unbounded','Manrope',system-ui,sans-serif;
  --f-rounded:-apple-system,BlinkMacSystemFont,'SF Pro Rounded','Manrope',system-ui,sans-serif;
  /* Єдина палітра PREMIUM — глибокий «слива-нуар» + тепле золото. Лочимо тут, вживаємо всюди. */
  --pm-d1:#241B33; --pm-d2:#14101E; --pm-d3:#0B0811;
  --pm-g1:#F7DDA0; --pm-g2:#D6A24D; --pm-gtext:#3A2A0E;
  --pm-edge:rgba(214,178,108,.34); --pm-glow:rgba(232,196,124,.30);
  --pm-grad:linear-gradient(150deg,#241B33 0%,#14101E 58%,#0B0811 100%);
  --pm-gold:linear-gradient(145deg,#F7DDA0,#D6A24D);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* overscroll-behavior:none — «докрут» до краю НЕ передається назовні. Інакше Telegram ловить
   його як свайп і тягне ВСЮ нативну шторку міні-аппи вслід за скролом юзера (фікс 2026-07-10). */
html,body{margin:0;padding:0;-webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior:none}
body{background:#F4F1FB;font-family:var(--f);color:#15131A;-webkit-font-smoothing:antialiased;overflow:hidden}
[hidden]{display:none!important}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
img{display:block}
::-webkit-scrollbar{width:0;height:0}
/* contain — скрол зупиняється на своєму контейнері й не «пробиває» у body (див. коментар вище). */
.scroll{scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-y:contain}

/* boot splash */
#boot{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#F4F1FB;z-index:9999}
.boot-mark{font-family:var(--f-d);font-weight:800;font-size:30px;letter-spacing:-.02em;
  background:linear-gradient(120deg,#7C3AED,#A855F7);-webkit-background-clip:text;background-clip:text;color:transparent}
.boot-spin{width:28px;height:28px;border-radius:50%;border:3px solid rgba(124,58,237,.2);border-top-color:#7C3AED;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* app shell — внутрішній екран на весь viewport */
#app{position:fixed;inset:0;max-width:480px;margin:0 auto;display:flex;flex-direction:column;background:#F4F1FB;overflow:hidden}

/* анімації (точно з макета) */
@keyframes obFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
/* Sweep-блиск (світловий промінь) — для кнопки «Дізнатись про Premium» */
@keyframes pmGlint{0%,72%{transform:translateX(-160%) rotate(22deg)}100%{transform:translateX(220%) rotate(22deg)}}
/* Шимер на слові «Premium»: золота основа + рухомий блик, що ВІДЛИВАЄ фіолетом і білим (не чисто білий) */
@keyframes pmWordShine{0%{background-position:135% 0}55%,100%{background-position:-35% 0}}
.pm-word{background:linear-gradient(100deg,#F7DDA0 0%,#E9C57E 34%,#C9B6F5 46%,#ffffff 52%,#C9B6F5 58%,#E9C57E 70%,#F7DDA0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:230% 100%;animation:pmWordShine 3.6s ease-in-out infinite}
/* Слово «дейтинг» на онбордингу: БІЛЕ, але зрідка пробігає пурпурний блик (не постійно фіолетове) */
@keyframes pmFlashP{0%,66%{background-position:130% 0}100%{background-position:-30% 0}}
.pm-word-p{background:linear-gradient(110deg,#fff 0%,#fff 42%,#C4B5FD 47%,#8B5CF6 50%,#C4B5FD 53%,#fff 58%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:280% 100%;animation:pmFlashP 5.5s ease-in-out infinite}
.pm-gem-shine{position:relative;overflow:hidden}
/* М'який рідкий світлий блик на золотих Premium-кнопках: біле (не пурпурне), розмите (не чітка лінія), зрідка */
@keyframes pmGlintSoft{0%,80%{transform:translateX(-190%) rotate(22deg)}100%{transform:translateX(250%) rotate(22deg)}}
.pm-gem-shine::after{content:"";position:absolute;top:-30%;left:0;width:55%;height:160%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);filter:blur(4px);transform:translateX(-190%) rotate(22deg);animation:pmGlintSoft 7s ease-in-out infinite;pointer-events:none;z-index:2}
/* Легкий блиск краю рядка-переходу «Стати Premium» у Налаштуваннях */
.pm-row-shine::after{content:"";position:absolute;top:-30%;left:0;width:34%;height:160%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);transform:translateX(-180%) rotate(22deg);animation:pmGlint 5s ease-in-out infinite;pointer-events:none;z-index:1}
@keyframes obPop{0%{opacity:0;transform:scale(.5)}60%{transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
/* Онбординг — приємна поява контенту (стаггер) + тонкий ken-burns на фото-хіро */
@keyframes obContentIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes obKen{from{transform:scale(1)}to{transform:scale(1.06)}}
@keyframes pbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* Гейдж підключення на 3/3 (клас .cg-ready): приємне мерехтіння — мʼяке пульсуюче фіолетове сяйво + повільний блик по картці */
@keyframes cgGlow{0%,100%{box-shadow:0 10px 26px -16px rgba(124,58,237,.30)}50%{box-shadow:0 16px 40px -12px rgba(124,58,237,.60)}}
@keyframes cgSweep{0%{transform:translateX(-175%)}60%,100%{transform:translateX(285%)}}
.cg-ready{position:relative;overflow:hidden;animation:cgGlow 2.6s ease-in-out infinite}
.cg-ready::after{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;background:linear-gradient(100deg,transparent,rgba(124,58,237,.13),transparent);animation:cgSweep 2.8s ease-in-out infinite;pointer-events:none}
@media (prefers-reduced-motion:reduce){.cg-ready{animation:none}.cg-ready::after{display:none}}
/* ── КАНОН: пурпурне відблискування .prpl-glint ─────────────────────────────────
   ЄДИНИЙ фірмовий блик Purple (Premium + акценти). Мʼякий діагональний світловий змах:
   пурпур→білий→пурпур поверх елемента. Батько має overflow клас додає сам. Приклад: <div class="card prpl-glint">. */
@keyframes prplGlint{0%{transform:translateX(-165%) rotate(18deg)}55%,100%{transform:translateX(255%) rotate(18deg)}}
.prpl-glint{position:relative;overflow:hidden}
/* Делікатний sheen (не різкий білий блиск): вузька смуга, низька непрозорість, довша пауза між проходами. */
.prpl-glint::after{content:"";position:absolute;top:-40%;bottom:-40%;left:0;width:30%;background:linear-gradient(100deg,transparent,rgba(168,85,247,.07) 46%,rgba(255,255,255,.12) 50%,rgba(168,85,247,.07) 54%,transparent);transform:translateX(-165%) rotate(18deg);animation:prplGlint 6s ease-in-out infinite;pointer-events:none;z-index:2}
/* Шкала підключення — рухомий блик УЗДОВЖ дуги (сама шкала «відблискує», канон-палітра). */
@keyframes cgGlint{0%{stroke-dashoffset:6}70%,100%{stroke-dashoffset:-96}}
.cg-glint{animation:cgGlint 2.9s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.prpl-glint::after{display:none}.cg-glint{animation:none;opacity:0}}
/* Відкриття боксу v2: ескалація трусу (раз, синхронно з хаптик-тіками) → дрібний шивер, доки чекаємо сервер */
@keyframes pbShake2{0%{transform:rotate(0) scale(1)}7%{transform:rotate(-1.4deg)}14%{transform:rotate(1.4deg) scale(1.005)}22%{transform:rotate(-2.4deg) scale(1.01)}30%{transform:rotate(2.4deg) scale(1.015)}38%{transform:rotate(-3.6deg) translateY(-1px) scale(1.02)}46%{transform:rotate(3.6deg) scale(1.028)}54%{transform:rotate(-5deg) translateY(-2px) scale(1.035)}62%{transform:rotate(5deg) scale(1.042)}70%{transform:rotate(-6.6deg) translateY(-3px) scale(1.05)}78%{transform:rotate(6.6deg) scale(1.058)}86%{transform:rotate(-8.2deg) translateY(-4px) scale(1.066)}94%{transform:rotate(8.2deg) translateY(-2px) scale(1.074)}100%{transform:rotate(0) scale(1.08)}}
@keyframes pbShiver{0%,100%{transform:rotate(-1.8deg) scale(1.07)}50%{transform:rotate(1.8deg) scale(1.09)}}
@keyframes pbGlowPulse{0%{opacity:.1;transform:translate(-50%,-50%) scale(.55)}25%{opacity:.5;transform:translate(-50%,-50%) scale(.9)}40%{opacity:.35;transform:translate(-50%,-50%) scale(.82)}62%{opacity:.75;transform:translate(-50%,-50%) scale(1.06)}78%{opacity:.55;transform:translate(-50%,-50%) scale(.96)}100%{opacity:1;transform:translate(-50%,-50%) scale(1.32)}}
@keyframes pbSpark{0%{opacity:0;transform:translateY(8px) scale(.4)}25%{opacity:.9}100%{opacity:0;transform:translateY(-48px) scale(1)}}
/* Клімакс: спалах маскує підміну DOM, ударні кільця + розліт частинок від скрині */
@keyframes pbFlash{0%{opacity:.95}100%{opacity:0}}
@keyframes pbRing{0%{opacity:.75;transform:translate(-50%,-50%) scale(.25)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.3)}}
@keyframes pbBurst{0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}70%{opacity:1}100%{opacity:0;transform:translate(var(--bx),var(--by)) rotate(var(--br)) scale(.35)}}
/* Приз: скриня-поп із squash&stretch, повільні промені за нею, поп суми з overshoot, іскри-діаманти */
@keyframes pbPopIn{0%{opacity:0;transform:scale(.55) rotate(-5deg)}45%{opacity:1;transform:scale(1.13) rotate(2deg)}70%{transform:scale(.96) rotate(-1deg)}100%{transform:scale(1) rotate(0)}}
@keyframes pbRays{0%{transform:translate(-50%,-50%) rotate(0)}100%{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes pbAmtIn{0%{opacity:0;transform:scale(.55)}55%{opacity:1;transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes pbTwinkle{0%,100%{opacity:0;transform:scale(.35) rotate(0)}50%{opacity:.95;transform:scale(1) rotate(18deg)}}
.pb-twinkle{position:absolute;background:currentColor;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
/* Стек кадрів боксу: усі 9 кадрів у DOM, видно лише .on — перемикання через opacity (нуль re-decode → нуль миготіння). */
.bx-stack{position:relative;display:inline-block}
.bx-stack .bxf{position:absolute;inset:0;width:100%;height:100%;opacity:0;will-change:opacity;pointer-events:none}
.bx-stack .bxf.on{opacity:1}
/* нативний успіх — рух, не колір: галочка «малюється» + м'який pulse кнопки */
@keyframes ckDraw{to{stroke-dashoffset:0}}
.ck-draw path{stroke-dasharray:34;stroke-dashoffset:34;animation:ckDraw .42s .08s cubic-bezier(.65,0,.35,1) forwards}
@keyframes claimPulse{0%{transform:scale(1)}30%{transform:scale(.96)}55%{transform:scale(1.04)}100%{transform:scale(1)}}
.is-claim{animation:claimPulse .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes copiedPop{0%{opacity:0;transform:translateY(4px) scale(.96)}100%{opacity:1;transform:translateY(0) scale(1)}}
.copied-swap{display:inline-flex;align-items:center;gap:7px;animation:copiedPop .26s ease forwards}
@keyframes pbConfetti{0%{opacity:0;transform:translateY(-20px) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translateY(560px) rotate(var(--r))}}
@keyframes sheetUp{0%{transform:translateY(100%)}100%{transform:translateY(0)}}
@keyframes wSpin{to{transform:rotate(360deg)}}
@keyframes scrimIn{0%{opacity:0}100%{opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes screenIn{from{opacity:0}to{opacity:1}}
@keyframes slideInR{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes slideInL{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.scr{animation:screenIn .22s ease}
/* перехід «на сторінку» — заїзд справа, як нативна навігація */
@keyframes pageIn{from{opacity:.4;transform:translateX(34px)}to{opacity:1;transform:none}}
.page{animation:pageIn .28s cubic-bezier(.2,.8,.3,1)}

/* slide track (onboarding) */
.ob-track{display:flex;width:400%;height:100%;transition:transform .45s cubic-bezier(.4,0,.2,1)}

/* toast */
#toast{position:fixed;left:50%;bottom:calc(80px + var(--tg-safe-bottom));transform:translateX(-50%) translateY(20px);
  background:#15131A;color:#fff;padding:12px 18px;border-radius:13px;font-size:13.5px;font-weight:600;z-index:3000;opacity:0;pointer-events:none;transition:.25s;max-width:88%}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* generic primary button used across screens */
.pbtn{width:100%;border:0;height:52px;border-radius:26px;font-family:var(--f);font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;transition:transform .1s}
.pbtn:active{transform:scale(.98)}
/* Прес-стан для карток/рядків (нативний відгук на дотик, не «пласко»). */
.boxcard,.feat-card,.hist-row,.ref-row,.faq-q,[data-act]{transition:transform .09s ease}
.boxcard:active,.feat-card:active,.hist-row:active,.ref-row:active,.faq-q:active,[data-act]:active{transform:scale(.985)}
.pbtn-purple{background:linear-gradient(140deg,#8B5CF6,#9D78F0);color:#fff;box-shadow:0 8px 18px -12px rgba(124,58,237,.4)}
.pbtn-gold{background:var(--pm-gold);color:var(--pm-gtext);box-shadow:0 14px 28px -10px rgba(196,150,70,.6),inset 0 1px 0 rgba(255,255,255,.45)}
.pbtn-white{background:#fff;color:#15131A;box-shadow:0 10px 24px -14px rgba(40,20,80,.5)}
.pbtn-dark{background:#1d1d1f;color:#fff;box-shadow:0 14px 28px -12px rgba(0,0,0,.4)}
.pbtn-dim{background:#EDE9F7;color:rgba(60,60,67,.5);cursor:default;box-shadow:none}
.pbtn-ghost{background:#fff;color:#15131A;border:0.5px solid rgba(60,60,67,.18);box-shadow:0 8px 18px -14px rgba(40,20,80,.3)}
.pbtn-tg{background:#229ED9;color:#fff;box-shadow:0 10px 22px -12px rgba(34,158,217,.55)}
.pbtn:disabled{opacity:.42;cursor:default}
.pbtn.glint{position:relative;overflow:hidden}
.pbtn.glint::after{content:'';position:absolute;top:-30%;left:0;width:45%;height:160%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(-160%) rotate(22deg);animation:pmGlint 3.8s ease-in-out infinite;pointer-events:none;z-index:2}

/* ════════════════════════════════════════════════════════════════════════
   ДИЗАЙН-СИСТЕМА (класи замість інлайн-стилів).
   Значення зведені 1:1 із попередньою версткою — вигляд незмінний.
   Розміри/відступи тюняться тут, в одному місці.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#F4F1FB; --surface:#fff; --sheet:#FBFAFE;
  --p:#7C3AED; --p2:#A855F7; --p-d:#6D28D9;
  --ink:#15131A; --line:rgba(60,60,67,.1);
  --t2:rgba(60,60,67,.6); --t3:rgba(60,60,67,.62); --t4:rgba(60,60,67,.55);
  --green:#16A34A; --green2:#22C55E;
  --sh-card:0 14px 30px -24px rgba(40,20,80,.3);
  --r-card:20px;
}

/* ── спільний хром під-екранів ── */
.sb{flex:none;height:calc(8px + var(--tg-safe-top))}                 /* статус-бар спейсер */
.topbar{flex:none;height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 18px}
.backbtn{display:inline-flex;align-items:center;gap:4px;font-size:16px;font-weight:600;color:#7C3AED;cursor:pointer}
.ttl{font-family:var(--f-d);font-weight:700;font-size:16px}

/* Подарунок біля балансу (реферали): періодичний легкий «підстриб» — привертає увагу, спонукає перейти.
   Підстриб відбувається лише наприкінці 7-секундного циклу (≈раз на 7с), решту часу спокій. */
@keyframes giftNudge{0%,66%,100%{transform:translateY(0) rotate(0)}72%{transform:translateY(-5px) rotate(-9deg)}78%{transform:translateY(0) rotate(7deg)}84%{transform:translateY(-3px) rotate(-5deg)}90%{transform:translateY(0) rotate(3deg)}95%{transform:translateY(0) rotate(0)}}
#nav-gift{animation:giftNudge 7s ease-in-out infinite;transform-origin:50% 50%;will-change:transform}
@media (prefers-reduced-motion:reduce){#nav-gift{animation:none}}

/* ── картка-поверхня ── */
.card{background:var(--surface);border:0.5px solid var(--line);box-shadow:var(--sh-card);border-radius:var(--r-card)}

/* ── Home: інфо-картки (welcome / кешбек) — значення 1:1 із попередньою версткою ── */
.home-card{background:var(--surface);border:0.5px solid var(--line);border-radius:20px;box-shadow:0 14px 30px -22px rgba(40,20,80,.35);margin-bottom:22px;padding:15px}
.hc-row{display:flex;align-items:center;gap:12px}
.hc-ico{flex:none;display:inline-flex;width:44px;height:44px;border-radius:13px;background:rgba(124,58,237,.1);align-items:center;justify-content:center}
.hc-ttl{font-family:var(--f-d);font-weight:700;font-size:15px;color:var(--ink);line-height:1.1}
.hc-sub{font-size:12px;font-weight:600;color:rgba(60,60,67,.55);margin-top:3px;line-height:1.35}
/* велком-блок — легкий фіолетовий фон, біла кнопка, фіолетовий текст */
.welcome-card{background:var(--surface);border:0.5px solid var(--line);border-radius:20px;margin-bottom:22px;padding:15px}
.welcome-ttl{font-family:var(--f-d);font-weight:700;font-size:15px;color:var(--ink);line-height:1.1}
.welcome-sub{font-size:12px;font-weight:600;color:rgba(60,60,67,.55);margin-top:6px;line-height:1.4}

/* ── Home: гарячий бокс (featured) — значення 1:1 ── */
.feat-card{position:relative;overflow:hidden;cursor:pointer;background:var(--surface);border:0.5px solid var(--line);border-radius:22px;box-shadow:var(--sh-card);margin-bottom:22px}
.feat-in{position:relative;display:flex;align-items:stretch}
.feat-txt{flex:1;padding:16px 0 16px 16px}
.feat-tag{display:inline-flex;align-items:center;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--p-d);background:rgba(124,58,237,.12);padding:4px 9px;border-radius:999px;margin-bottom:11px}
.feat-h{font-family:var(--f-d);font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--ink);line-height:1.1;margin-bottom:5px}
.feat-desc{font-size:12.5px;font-weight:600;color:rgba(60,60,67,.55);line-height:1.4;margin-bottom:16px}
.feat-buy{display:inline-flex;align-self:flex-start;align-items:center;gap:7px;height:44px;padding:0 20px;border-radius:22px;background:rgba(60,60,67,.06);color:var(--ink);font-family:var(--f);font-weight:800;font-size:14px;white-space:nowrap}
.feat-img{flex:none;width:132px;align-self:stretch;display:flex;align-items:center;justify-content:center}

/* ── Home: сітка боксів — значення 1:1 ── */
.box-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:24px}
.boxcard{position:relative;overflow:hidden;cursor:pointer;background:var(--surface);border:0.5px solid rgba(60,60,67,.10);border-radius:20px;box-shadow:0 14px 30px -22px rgba(40,20,80,.4)}
.bc-img{position:relative;height:92px;display:flex;align-items:center;justify-content:center}
.bc-body{padding:11px 11px 13px;text-align:center}
.bc-short{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.bc-name{font-family:var(--f-d);font-weight:800;font-size:11.5px;line-height:1.15;letter-spacing:-.01em;color:var(--ink);margin:4px 0 10px;min-height:2.4em;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 2px}
.bc-cta{display:block;padding:9px;border-radius:999px;background:rgba(60,60,67,.06);color:var(--ink);font-family:var(--f);font-weight:800;font-size:12.5px}
.bc-cta.off{background:#F0EDF7;color:rgba(60,60,67,.55)}
.bc-price{display:flex;align-items:center;justify-content:center;gap:5px}

/* ── Home: завдання (рядки) — значення 1:1 ── */
.tk-row{display:flex;align-items:center;gap:13px;padding:14px 0}
.task-row{cursor:pointer}
.tk-check{flex:none;display:inline-flex;width:24px;height:24px;border-radius:50%;background:#2E9E66;align-items:center;justify-content:center}
.tk-ttl{display:block;font-size:14px;font-weight:700;line-height:1.25}

/* ── Home: щоденна нагорода (basic) — значення 1:1 ── */
.daily-hd{margin-bottom:13px}
.daily-ttl{font-family:var(--f-d);font-weight:700;font-size:15px;color:var(--ink);line-height:1.1}
.daily-dots{display:flex;gap:5px;margin-bottom:14px}
.daily-done{display:flex;align-items:center;justify-content:center;gap:7px;height:46px;border-radius:14px;background:rgba(124,58,237,.08);color:var(--p-d);font-weight:800;font-size:14px}

/* ── Лист боксу (box detail sheet) — значення 1:1 ── */
.bs-imgwrap{position:relative;width:178px;height:178px;margin:6px auto 4px;border-radius:34px;overflow:hidden}
.bs-info{text-align:center;margin-top:14px}
.bs-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:rgba(60,60,67,.06);padding:4px 11px;border-radius:999px}
.bs-h{margin:11px 0 7px;font-family:var(--f-d);font-weight:800;font-size:24px;letter-spacing:-.025em}
.bs-desc{margin:0 auto;max-width:280px;font-size:14px;font-weight:600;color:rgba(60,60,67,.62);line-height:1.5}
.bs-left{text-align:center;font-size:12.5px;font-weight:600;color:rgba(60,60,67,.5);margin:22px 0 6px}

/* ── Settings — значення 1:1 ── */
.set-sec{background:var(--surface);border:0.5px solid var(--line);border-radius:22px;box-shadow:0 14px 30px -26px rgba(40,20,80,.3);padding:2px 18px;margin-bottom:18px}
.set-prof{display:flex;align-items:center;gap:14px;background:var(--surface);border-radius:24px;padding:16px 17px;margin-bottom:18px}
.set-logout{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px;background:var(--surface);border:0.5px solid var(--line);border-radius:20px;cursor:pointer;margin-bottom:20px}

/* ── History (рядки) — значення 1:1; контейнер = .card ── */
.hist-list{padding:4px 14px}
.hist-row{display:flex;align-items:center;gap:12px;padding:12px 0}
.hist-ico{flex:none;display:inline-flex;width:46px;height:46px;border-radius:13px;align-items:center;justify-content:center}
.hist-ttl{display:block;font-weight:700;font-size:14.5px}
.hist-sub{display:block;font-size:12px;font-weight:600;color:rgba(60,60,67,.5);margin-top:1px}
.hist-amt{font-family:var(--f-d);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}

/* ── FAQ-акордеон — значення 1:1 (display:none лишається інлайн для логіки toggle) ── */
.faq-card{background:var(--surface);border:0.5px solid rgba(60,60,67,.10);border-radius:22px;box-shadow:0 14px 30px -26px rgba(40,20,80,.3);padding:2px 17px}
.faq-q{display:flex;align-items:center;gap:10px;padding:15px 0;cursor:pointer}
.faq-qt{flex:1;font-size:14px;font-weight:700;color:var(--ink);line-height:1.35}
.faq-chev{flex:none;display:inline-flex;transition:transform .25s}
.faq-a{padding:0 0 15px;font-size:13px;font-weight:500;color:rgba(60,60,67,.7);line-height:1.55}

/* ── Реферали: список (рядки) — значення 1:1; контейнер = .card ── */
.ref-row{display:flex;align-items:center;gap:12px;padding:13px 0}
.ref-av{flex:none;display:inline-flex;width:40px;height:40px;border-radius:50%;align-items:center;justify-content:center;font-family:var(--f-d);font-weight:800;font-size:15px;color:#fff}
.ref-nm{display:block;font-weight:700;font-size:14px;color:var(--ink)}
.ref-st{display:block;font-size:11.5px;font-weight:600;margin-top:1px}
.ref-acc{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-d);font-weight:800;font-size:14px}

/* ── нижній лист (bottom-sheet) ── */
.grab{width:38px;height:4px;border-radius:999px;background:rgba(60,60,67,.18);margin:0 auto 16px}
.grab.lg{margin-bottom:18px}
.scrim{position:absolute;inset:0;background:rgba(22,10,46,.5);backdrop-filter:blur(2px);z-index:70;animation:scrimIn .25s ease forwards}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:80;background:var(--sheet);border-radius:30px 30px 0 0;box-shadow:0 -20px 50px -20px rgba(20,8,40,.4);display:flex;flex-direction:column;padding:10px 20px calc(8px + var(--tg-safe-bottom));animation:sheetUp .4s cubic-bezier(.2,.8,.3,1) forwards}
.xbtn{position:absolute;top:14px;right:16px;z-index:5;width:32px;height:32px;border-radius:50%;background:rgba(60,60,67,.08);display:flex;align-items:center;justify-content:center;cursor:pointer}

/* ── сегмент-перемикач (вкладки) ── */
.seg{display:inline-flex;gap:3px;background:#ECE7F6;border-radius:11px;padding:3px}
.seg-i{display:inline-flex;align-items:center;justify-content:center;border-radius:9px;padding:5px 13px;font-family:var(--f);font-weight:700;font-size:11.5px;color:rgba(60,60,67,.55);cursor:pointer}
.seg-i.on{background:#fff;color:#6D28D9;font-weight:800;box-shadow:0 3px 8px -4px rgba(40,20,80,.35);cursor:default}

/* ════════ HOME ════════ */
.home{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--bg)}
.home-sticky{position:sticky;top:0;z-index:1}
.home-body{position:relative;z-index:2;background:var(--bg);border-radius:24px 24px 0 0;margin-top:-24px;padding:14px 16px calc(44px + var(--tg-safe-bottom));min-height:78vh;box-shadow:0 -16px 32px -14px rgba(40,20,80,.35)}

/* hero / гаманець */
.hero{position:relative;background:linear-gradient(180deg,#8B43F2 0%,#7C3AED 46%,#6D28D9 100%);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:calc(28px + var(--tg-safe-top)) 0 38px}
.hero-shine{position:absolute;inset:0;pointer-events:none;background:radial-gradient(220px 150px at 86% 8%, rgba(255,255,255,.18), transparent 70%)}
.hero-top{position:relative;width:100%;display:flex;align-items:center;justify-content:center;padding:0 14px 26px;box-sizing:border-box}
.hero-label{font-size:14px;font-weight:600;color:rgba(255,255,255,.78);letter-spacing:.01em}
.hero-balrow{position:relative;display:flex;align-items:center;justify-content:center;gap:11px;margin:16px 0 6px}
.hero-num{font-family:var(--f-d);font-weight:800;font-size:54px;letter-spacing:-.03em;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
/* Центральний баланс «дихає»: два обличчя (коіни / долари до виводу).
   ДУЖЕ ПОВІЛЬНА, МʼЯКА зміна БЕЗ накладання цифр: вихідне обличчя спершу згасає (.85s),
   і ЛИШЕ ПОТІМ вхідне зʼявляється (delay .85s) → «1 240» і «53.50 $» ніколи не перекриваються. */
.hero-face{display:flex;align-items:center;justify-content:center;gap:11px}
.hero-face-coins{transition:opacity .85s ease .85s}   /* коіни ВХОДЯТЬ із затримкою */
.hero-face-usd{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);gap:10px;opacity:0;pointer-events:none;transition:opacity .85s ease}   /* долари ВИХОДЯТЬ одразу */
.hero-balrow.show-usd .hero-face-coins{opacity:0;transition:opacity .85s ease}          /* коіни ВИХОДЯТЬ одразу */
.hero-balrow.show-usd .hero-face-usd{opacity:1;transition:opacity .85s ease .85s}       /* долари ВХОДЯТЬ із затримкою */
/* Число — СПРАВЖНІЙ центр (під написом «Гаманець»); знак «$» = трейлінг-акцент через ::after,
   абсолютний → НЕ зсуває число. Стиль «$» — точно як у пілюлі виводу (Manrope 600, .85). */
.hero-num-usd{font-size:54px;white-space:nowrap;position:relative}
.hero-num-usd::after{content:'$';position:absolute;left:100%;margin-left:9px;top:50%;transform:translateY(-50%);font-family:var(--f);font-weight:600;font-size:46px;line-height:1;color:rgba(255,255,255,.85)}
@media(prefers-reduced-motion:reduce){.hero-face{transition-duration:.2s!important;transition-delay:0s!important}}
/* Монетка балансу легко пульсує + підсвічується (привертає увагу, «живий» баланс). */
.hero-coin{display:inline-flex;border-radius:50%;animation:heroCoinPulse 2.4s ease-in-out infinite;will-change:transform}
.hero-coin.gold{animation-name:heroCoinPulseGold}
@keyframes heroCoinPulse{0%,100%{transform:scale(1);box-shadow:0 0 16px 3px rgba(255,255,255,.32)}50%{transform:scale(1.07);box-shadow:0 0 24px 5px rgba(255,255,255,.58)}}
@keyframes heroCoinPulseGold{0%,100%{transform:scale(1);box-shadow:0 0 16px 3px rgba(247,221,160,.32)}50%{transform:scale(1.07);box-shadow:0 0 24px 5px rgba(247,221,160,.62)}}
@media(prefers-reduced-motion:reduce){.hero-coin{animation:none;box-shadow:0 0 16px 3px rgba(255,255,255,.32)}}
.hero-coin.calm{animation:none;box-shadow:0 0 18px 3px rgba(255,255,255,.42)}
.hero-coin.gold.calm{box-shadow:0 0 16px 2px rgba(247,221,160,.45)}
/* Число «пульсує», поки набігає лічильник нарахування (коіни/долари). */
.counting{display:inline-block;animation:countPulse .55s ease-in-out infinite;will-change:transform}
@keyframes countPulse{0%,100%{transform:scale(1)}45%{transform:scale(1.05)}}
@media(prefers-reduced-motion:reduce){.counting{animation:none}}
.hero-how{cursor:pointer;margin-top:18px}
/* Premium-поліровка гаманця: зберігаємо фіолетову айдентику, додаємо золоті акценти,
   щоб золота монета й золоті цифри лягали природно (легка поліровка, без редизайну). */
.hero.prem{background:linear-gradient(180deg,#6A34DA 0%,#5A23C4 48%,#4A179E 100%)}
.hero.prem::after{content:"";position:absolute;top:0;left:0;right:0;height:1.5px;background:linear-gradient(90deg,transparent,rgba(247,221,160,.75),transparent);pointer-events:none}
.hero.prem .hero-shine{background:radial-gradient(240px 160px at 86% 6%, rgba(247,221,160,.28), transparent 70%)}
.hero.prem .hero-label{color:rgba(247,221,160,.92)}
.hero-num.prem{color:#F7DDA0;text-shadow:0 1px 1px rgba(0,0,0,.18)}
/* сегмент на фіолетовому hero */
.seg-h{display:inline-flex;gap:3px;background:rgba(255,255,255,.16);border-radius:11px;padding:3px}
.seg-h .seg-i{color:rgba(255,255,255,.85)}
.seg-h .seg-i.on{background:#fff;color:#6D28D9;box-shadow:0 3px 8px -4px rgba(40,8,80,.35)}

/* секційний заголовок Home */
.sec-h{display:flex;align-items:baseline;justify-content:space-between}
.h2d{margin:0;font-family:var(--f-d);font-weight:700;letter-spacing:-.02em}

/* ════════ ВИВІД — повноекранний стиль Telegram Wallet (гігантська сума по центру) ════════ */
.wd2-page{position:absolute;inset:0;z-index:70;background:var(--bg);display:flex;flex-direction:column;animation:fade .2s ease}
.wd2-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px;gap:14px}
.wd2-row{display:flex;align-items:baseline;justify-content:center;gap:10px;max-width:100%}
.wd2-num{font-family:var(--f-rounded);font-weight:700;font-size:64px;letter-spacing:-.03em;color:#000;line-height:1;border:0;background:none;outline:none;padding:0;text-align:right;font-variant-numeric:tabular-nums;caret-color:#7C3AED;transition:color .15s}
.wd2-num::placeholder{color:rgba(60,60,67,.25)}
.wd2-num.err{color:#E5484D;caret-color:#E5484D}
.wd2-unit{font-family:var(--f-rounded);font-weight:700;font-size:36px;color:rgba(60,60,67,.38);letter-spacing:-.02em;flex:none}
.wd2-hint{font-size:14px;font-weight:600;color:var(--t3);text-align:center;min-height:18px}
.wd2-hint.err{color:#E5484D}
.wd2-foot{flex:none;padding:14px 16px calc(14px + var(--tg-safe-bottom))}
.wd2-bal{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:14px;font-size:13.5px;font-weight:600;color:var(--t2);transition:color .15s}
.wd2-bal.err{color:#E5484D}
.wd2-sizer{position:absolute;left:-9999px;top:0;visibility:hidden;white-space:pre;font-family:var(--f-rounded);font-weight:700;font-size:64px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
@keyframes wd2-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.wd2-shake{animation:wd2-shake .33s ease}

/* ═══ DOC (Як це працює — документаційний вигляд) ═══ */
.doc{position:absolute;inset:0;z-index:85;background:var(--surface);display:flex;flex-direction:column}
.doc-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 20px calc(40px + var(--tg-safe-bottom))}
.doc-eyebrow{font-family:var(--f);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);margin:2px 0 6px}
.doc-title{font-family:var(--f-d);font-weight:800;font-size:23px;letter-spacing:-.03em;color:var(--ink);margin:0 0 8px;line-height:1.12}
.doc-lead{font-family:var(--f);font-size:14px;font-weight:500;color:var(--t2);line-height:1.6;margin:0 0 18px}
.doc-toc{border:0.5px solid var(--line);border-radius:12px;overflow:hidden;margin:0 0 8px}
.doc-toc-h{font-family:var(--f);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);padding:12px 14px 8px}
.doc-toc-item{display:flex;align-items:center;gap:10px;padding:11px 14px;font-family:var(--f);font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;border-top:0.5px solid var(--line)}
.doc-toc-item:active{background:var(--bg)}
.doc-toc-n{flex:none;font-variant-numeric:tabular-nums;font-weight:700;font-size:13px;color:var(--t3);width:16px}
.doc-sec{padding:22px 0 4px;border-top:0.5px solid var(--line)}
.doc-sec:first-of-type{border-top:none}
.doc-h2{display:flex;gap:9px;align-items:baseline;font-family:var(--f-d);font-weight:800;font-size:16px;letter-spacing:-.02em;color:var(--ink);margin:0 0 10px;line-height:1.2}
.doc-h2-n{flex:none;font-variant-numeric:tabular-nums;color:var(--t4);font-size:15px}
.doc-p{font-family:var(--f);font-size:14px;font-weight:500;color:var(--t2);line-height:1.64;margin:0 0 11px}
.doc-p b{color:var(--ink);font-weight:700}
.doc-foot{margin:20px 0 0;padding-top:16px;border-top:0.5px solid var(--line);font-family:var(--f);font-size:11.5px;font-weight:500;color:var(--t3);line-height:1.55}

/* ═══ INVITE (referral, у стилі TG Wallet) ═══ */
.iv-page{position:absolute;inset:0;z-index:85;background:var(--bg);display:flex;flex-direction:column}
.iv-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.iv-hero{position:relative;overflow:hidden;background:linear-gradient(165deg,#7C3AED 0%,#9333EA 55%,#6D28D9 100%);padding:calc(14px + var(--tg-safe-top)) 22px 28px;text-align:center}
.iv-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(180px 130px at 84% 4%,rgba(255,255,255,.22),transparent 70%);pointer-events:none}
.iv-hero-top{position:relative;z-index:1;display:flex;align-items:center;height:44px}
.iv-hero-back{display:inline-flex;align-items:center;gap:4px;color:#fff;font-weight:700;font-size:16px;cursor:pointer}
.iv-hero-img{position:relative;z-index:1;width:104px;height:104px;margin:6px auto 14px;filter:drop-shadow(0 14px 24px rgba(40,8,70,.5))}
.iv-hero-h{position:relative;z-index:1;font-family:var(--f-d);font-weight:800;font-size:24px;letter-spacing:-.02em;color:#fff;line-height:1.14;margin:0 0 10px}
.iv-hero-sub{position:relative;z-index:1;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.82);line-height:1.5;margin:0 auto 20px;max-width:300px}
.iv-cta{position:relative;z-index:1;display:flex;gap:10px}
.iv-cta .pbtn{flex:1}
.iv-copy-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:52px;align-self:stretch;border:0;border-radius:26px;background:rgba(255,255,255,.18);cursor:pointer}
.iv-copy-btn:active{background:rgba(255,255,255,.28)}
.iv-hero-art{position:relative;z-index:1;display:block;width:54%;max-width:200px;height:auto;margin:0 auto 6px;filter:drop-shadow(0 18px 24px rgba(20,6,40,.45))}
/* Ледь помітні зірочки/блискітки на фоні героя (декор) */
.iv-hero-stars{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.iv-hero-stars svg{position:absolute;color:#fff}
.iv-bar{display:flex;align-items:center;justify-content:center;gap:5px;padding:15px;background:var(--surface);border-bottom:0.5px solid var(--line);color:#6D28D9;font-family:var(--f);font-weight:700;font-size:14px;cursor:pointer}
.iv-body{padding:24px 18px calc(40px + var(--tg-safe-bottom))}
.iv-sec-h{font-family:var(--f-d);font-weight:800;font-size:17px;letter-spacing:-.02em;color:var(--ink);margin:0 0 16px}
.iv-steps-card{background:var(--surface);border-radius:20px;border:0.5px solid var(--line);box-shadow:0 14px 30px -24px rgba(40,20,80,.3);padding:18px 16px}
.iv-step{display:flex;gap:14px;min-height:76px}
.iv-step:last-child{min-height:0}
.iv-rail{display:flex;flex-direction:column;align-items:center;flex:none}
.iv-step-n{width:30px;height:30px;border-radius:50%;background:rgba(60,60,67,.08);color:rgba(60,60,67,.5);font-family:var(--f-d);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.iv-line{width:2px;flex:1;min-height:14px;background:var(--line);margin:5px 0}
.iv-step-body{flex:1;min-width:0;padding-bottom:20px}
.iv-step:last-child .iv-step-body{padding-bottom:0}
.iv-step-t{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:3px}
.iv-step-d{font-size:13px;font-weight:500;color:var(--t2);line-height:1.5}
.iv-step-rwline{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.iv-step-rw{color:#6D28D9;font-weight:800}
.iv-foot{margin-top:22px;text-align:center;font-size:12px;font-weight:600;color:var(--t3);cursor:pointer}
@keyframes barFlow{0%{background-position:0 0}100%{background-position:220% 0}}
@keyframes barSheen{0%{transform:translateX(330%)}55%,100%{transform:translateX(-130%)}}
.feat-bar{position:relative;height:8px;border-radius:99px;background:rgba(124,58,237,.13);overflow:hidden}
.feat-bar-fill{position:relative;height:100%;border-radius:99px;overflow:hidden;background:linear-gradient(90deg,#7C3AED,#B07BF8,#7C3AED,#9D5CF6);background-size:220% 100%;animation:barFlow 2.6s linear infinite}
.feat-bar-fill::after{content:'';position:absolute;top:0;left:0;height:100%;width:45%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(-130%);animation:barSheen 3.4s ease-in-out infinite}

.pbtn-glow-white{background:linear-gradient(180deg,#ffffff,#eef0f9);color:#6D28D9;box-shadow:0 12px 26px -14px rgba(40,20,80,.5);position:relative;overflow:hidden}
.pbtn-glow-white::after{content:'';position:absolute;top:-30%;left:0;width:45%;height:160%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);transform:translateX(-170%) rotate(22deg);animation:pmGlint 3.8s ease-in-out infinite;pointer-events:none;z-index:2}


/* CooMeet-лінк іконка в шапці балансу (жінки) — чергує $/⚡ */
.nav-cm{position:absolute;left:14px;top:-2px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.nav-cm .cm-ico{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;line-height:0;transition:color .35s}
.nav-cm .cm-dollar{animation:cmDoll 3.6s ease-in-out infinite}
.nav-cm .cm-bolt{animation:cmBolt 3.6s ease-in-out infinite}
@keyframes cmDoll{0%,40%{opacity:1}50%,90%{opacity:0}100%{opacity:1}}
@keyframes cmBolt{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}
.nav-cm.on .cm-dollar{animation:none;opacity:0}
.nav-cm.on .cm-bolt{animation:cmStrike 5s ease-in-out infinite;opacity:1;filter:drop-shadow(0 0 4px rgba(255,255,255,.95))}
.nav-cm.on{animation:cmHalo 5s ease-in-out infinite}
@keyframes cmStrike{0%,5%{transform:translateY(0) scale(1)}13%{transform:translateY(7px) scale(.9)}18%{transform:translateY(6px) scale(.92)}27%{transform:translateY(0) scale(1)}100%{transform:translateY(0) scale(1)}}
@keyframes cmHalo{0%,8%{box-shadow:0 0 0 0 rgba(255,214,10,0)}15%{box-shadow:0 0 16px 5px rgba(255,214,10,1),0 0 0 3px rgba(255,214,10,.75)}30%{box-shadow:0 0 0 0 rgba(255,214,10,0)}100%{box-shadow:0 0 0 0 rgba(255,214,10,0)}}
.nav-cm.linked{background:rgba(255,255,255,.95)}
.nav-cm.linked .cm-ico{color:#7C3AED}
.nav-cm .cm-lock{opacity:0}
.nav-cm.linked .cm-dollar{animation:none;opacity:0}
.nav-cm.linked .cm-lock{animation:cmLockSwap 5s ease-in-out infinite;opacity:1}
.nav-cm.linked .cm-bolt{animation:cmBoltSpin 5s ease-in-out infinite;opacity:0}
@keyframes cmLockSwap{0%,70%{opacity:1}79%,90%{opacity:0}100%{opacity:1}}
@keyframes cmBoltSpin{0%,70%{opacity:0;transform:rotate(-310deg) scale(.5)}79%,90%{opacity:1;transform:rotate(0deg) scale(1)}100%{opacity:0;transform:rotate(310deg) scale(.5)}}
.nav-cm .cm-lockopen{opacity:0}
.nav-cm.alreadyreg{background:rgba(255,255,255,.95);animation:cmHaloRed 4.2s ease-in-out infinite}
.nav-cm.alreadyreg .cm-ico{color:#E23B3B}
.nav-cm.alreadyreg .cm-dollar{animation:none;opacity:0}
.nav-cm.alreadyreg .cm-lockopen{animation:cmLockSwap 5s ease-in-out infinite;opacity:1}
.nav-cm.alreadyreg .cm-bolt{animation:cmBoltSpin 5s ease-in-out infinite;opacity:0}
@keyframes cmHaloRed{0%,8%{box-shadow:0 0 0 0 rgba(226,59,59,0)}16%{box-shadow:0 0 14px 4px rgba(226,59,59,.85),0 0 0 3px rgba(226,59,59,.5)}32%,100%{box-shadow:0 0 0 0 rgba(226,59,59,0)}}
@keyframes cmHaloSoft{0%,100%{box-shadow:0 0 0 0 rgba(226,59,59,0)}50%{box-shadow:0 0 16px 2px rgba(226,59,59,.26)}}
.cm-already-halo{animation:cmHaloSoft 3.8s ease-in-out infinite}
.cm-grip{width:38px;height:4px;border-radius:2px;background:rgba(60,60,67,.16);margin:2px auto 10px}
.cm-spin{width:54px;height:54px;border-radius:50%;border:5px solid rgba(124,58,237,.16);border-top-color:#7C3AED;animation:spin .9s linear infinite}


/* Бонус-бокси: легке підстрибування при появі (привертання уваги) */
@keyframes boxBounce{0%{transform:translateY(0)}28%{transform:translateY(-9px)}52%{transform:translateY(0)}70%{transform:translateY(-3px)}100%{transform:translateY(0)}}
.boxcard.bouncein{animation:boxBounce .72s cubic-bezier(.3,.7,.4,1)}


/* Електричне кільце навколо іконки CooMeet (після повернення з платформи — «тисни мене») */
.nav-cm.ring .cm-dollar{animation:none;opacity:0}
.nav-cm.ring .cm-bolt{opacity:1;filter:drop-shadow(0 0 3px rgba(255,255,255,.9));animation:cmTapPulse 1.3s ease-in-out infinite}
@keyframes cmTapPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}}
.nav-cm.ring::before{content:'';position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,rgba(255,214,10,.95) 50deg,#fff 82deg,rgba(255,214,10,.95) 114deg,transparent 168deg,transparent 360deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));animation:cmRingSpin 1.1s linear infinite;filter:drop-shadow(0 0 5px rgba(255,214,10,.8));pointer-events:none}
@keyframes cmRingSpin{to{transform:rotate(360deg)}}


/* Бейдж множника кешбеку ×2 на балансі */
.x2-badge{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;margin-left:-3px;margin-top:2px;width:29px;height:29px;border-radius:9px;background:linear-gradient(140deg,#F96A6A,#DE1F35);color:#fff;font-family:var(--f-d);font-weight:800;font-size:13.5px;line-height:1;letter-spacing:-.02em;box-shadow:0 7px 18px -5px rgba(222,31,53,.6),inset 0 1px 0 rgba(255,255,255,.28);animation:x2pulse 1.7s ease-in-out infinite}
@keyframes x2pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
/* Жіночий графік кешбеку — тонкий разовий «ріст» стовпчиків при монтуванні (без циклів, без миготіння). */
@keyframes cbGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.cb-chart .cb-bar{transform-origin:bottom;animation:cbGrow .5s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i) * 26ms)}
@media (prefers-reduced-motion:reduce){.cb-chart .cb-bar{animation:none}}

/* ═══════════ PREMIUM «СЛИВА-НУАР» (2026-07-03, вибір власника з 3 концептів) ═══════════
   Уся апка для Premium-юзерів: оксамитова слива + золото ДОЗОВАНО (цифри/бейджі/лінії, без заливок).
   Вмикається класом body.pm-noir (applyPremiumTheme). Шари: 1) перевизначені токени → все класове;
   2) атрибут-селектори → inline-стилі (апка без білда, кольори зашиті в style=""); 3) SVG-атрибути. */
body.pm-noir{
  --bg:#14101E; --sheet:#1A1424; --ink:#F2EEF7;
  --surface:linear-gradient(168deg,rgba(44,33,62,.72) 0%,rgba(24,17,35,.9) 55%,rgba(16,11,24,.95) 100%);
  --line:rgba(214,178,108,.26);
  --t2:rgba(242,238,247,.62); --t3:rgba(242,238,247,.56); --t4:rgba(242,238,247,.5);
  --sh-card:inset 0 1px 0 rgba(247,221,160,.06),0 12px 32px rgba(0,0,0,.38);
  background:#0B0811;
}
body.pm-noir #app{background:linear-gradient(180deg,#241B33 0%,#14101E 46%,#0B0811 100%)}
body.pm-noir #boot{background:#14101E}
body.pm-noir .hero{background:linear-gradient(180deg,#2C2140 0%,#241B33 58%,#1A1428 100%)}
body.pm-noir .hero-shine{background:radial-gradient(220px 150px at 86% 8%,rgba(232,196,124,.13),transparent 70%)}
body.pm-noir .home{background:#0B0811}
body.pm-noir .home-body{background:linear-gradient(180deg,#1B1528 0%,#14101E 34%,#0B0811 100%);box-shadow:0 -16px 32px -14px rgba(0,0,0,.55)}
body.pm-noir .home-card{box-shadow:0 14px 30px -22px rgba(0,0,0,.5)}
body.pm-noir .seg{background:rgba(255,255,255,.06)}
body.pm-noir .seg-i{color:rgba(242,238,247,.5)}
body.pm-noir .seg-i.on{background:rgba(139,77,246,.32);color:#EFE7FD;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
body.pm-noir .feat-card,body.pm-noir .welcome-card,body.pm-noir .set-sec,body.pm-noir .set-logout{background:var(--surface);border-color:var(--line)}
body.pm-noir .boxcard{border-color:rgba(214,178,108,.2)}
body.pm-noir .bc-cta{background:rgba(247,221,160,.1);box-shadow:inset 0 0 0 1px rgba(214,178,108,.3)}
body.pm-noir .bc-cta.off{background:rgba(255,255,255,.05);color:rgba(242,238,247,.4);box-shadow:none}
/* Налаштування у нуарі: плитки іконок, роздільники рядків, страховка фону сторінок */
body.pm-noir [style*="background:#F4F1FB"]{background:var(--bg)!important}
body.pm-noir [style*="background:#EEF0F3"]{background:rgba(255,255,255,.08)!important}
body.pm-noir [style*="background:#FDECEC"]{background:rgba(220,82,71,.16)!important}
body.pm-noir [style*="border-bottom:0.5px solid rgba(60,60,67"]{border-bottom-color:rgba(242,238,247,.09)!important}
body.pm-noir [stroke="#5B6472"]{stroke:rgba(242,238,247,.75)}
/* Історія у нуарі: контейнер табів + порожній стан; активний таб = фіолетовий чіп (як seg-i.on) */
body.pm-noir [style*="background:#ECE7F6"]{background:rgba(255,255,255,.07)!important}
body.pm-noir button[style*="background:#fff"][style*="color:#6D28D9"]{background:rgba(139,77,246,.32)!important;color:#EFE7FD!important;box-shadow:none!important}
/* Історія: картки лишаються ТЕМНИМИ у нуарі (власник 2026-07-03: revert світлого блоку) —
   тексти світлі через генеральні флипи inline-кольорів нижче. */
body.pm-noir .sheet{box-shadow:0 -20px 50px -14px rgba(0,0,0,.7)}
/* ── шар 2: inline-стилі (порядок ВАЖЛИВИЙ — ink після muted, щоб перемагав на подвійних збігах) ── */
body.pm-noir [style*="color:rgba(60,60,67"]{color:var(--t2)!important}
body.pm-noir [style*="color:#15131A"]{color:var(--ink)!important}
body.pm-noir [style*="color:#6D28D9"],body.pm-noir [style*="color:#7C3AED"],body.pm-noir [style*="color:var(--p-d)"],body.pm-noir [style*="color:#B7791F"]{color:#E9CC90!important}
body.pm-noir [style*="background:#fff"]{background:rgba(255,255,255,.07)!important}
body.pm-noir [style*="background:#F1ECFB"],body.pm-noir [style*="background:rgba(124,58,237,.1)"],body.pm-noir [style*="background:rgba(124,58,237,.09)"]{background:rgba(214,178,108,.13)!important}
body.pm-noir [style*="background:rgba(247,221,160,.12)"],body.pm-noir [style*="background:rgba(247,221,160,.18)"]{background:rgba(247,221,160,.07)!important}
body.pm-noir [style*="border:1px solid rgba(60,60,67"],body.pm-noir [style*="border:0.5px solid rgba(60,60,67"]{border-color:rgba(214,178,108,.22)!important}
/* жіночий тижневий графік: фіолетові стовпчики → золоті, сірі минулого тижня → світло-приглушені */
body.pm-noir [style*="#A855F7,#6D28D9"]{background:linear-gradient(180deg,#F7DDA0,#D6A24D)!important}
body.pm-noir [style*="rgba(168,85,247,.5)"]{background:linear-gradient(180deg,rgba(247,221,160,.5),rgba(214,162,77,.85))!important}
body.pm-noir [style*="background:rgba(60,60,67,.13)"]{background:rgba(242,238,247,.16)!important}
/* ── шар 3: SVG-атрибути (іконки/гейджі; CSS-властивість перекриває presentation-атрибут без !important) ── */
body.pm-noir [stroke="#7C3AED"],body.pm-noir [stroke="#6D28D9"]{stroke:#E9CC90}
body.pm-noir [stroke="#15131A"]{stroke:#F2EEF7}
body.pm-noir [stroke^="rgba(60,60,67"]{stroke:rgba(242,238,247,.45)}
body.pm-noir [stroke^="rgba(60,60,67,.1"]{stroke:rgba(242,238,247,.16)}
body.pm-noir [fill="#7C3AED"]{fill:#E9CC90}
/* ── шар 4: класи з хардкод-кольорами (успадкування body + типові muted-класи) ── */
body.pm-noir{color:var(--ink)}
body.pm-noir .hc-sub,body.pm-noir .welcome-sub,body.pm-noir .feat-desc,body.pm-noir .bs-desc,body.pm-noir .bs-left,body.pm-noir .hist-sub,body.pm-noir .faq-a{color:var(--t3)}
body.pm-noir .iv-step-n{background:rgba(242,238,247,.1);color:var(--t3)}
body.pm-noir .wd2-unit{color:rgba(242,238,247,.35)}
body.pm-noir .wd2-num::placeholder{color:rgba(242,238,247,.22)}
/* білі кнопки лишаємо білими СВІДОМО — але їх ТЕКСТ і шеврон мусять лишатись темними
   (інакше на premium-темі напис зникає — кейс кнопки «Почати» на екрані запрошень) */
body.pm-noir .pbtn-white{color:#15131A}
body.pm-noir .pbtn-white svg[stroke="#15131A"]{stroke:#15131A!important}
/* реф-сторінки у premium: цифри-нагороди (100 / +5%) — білі, а не фіолетові */
body.pm-noir .iv-step-rw{color:#fff!important}

/* Пульс «звірка йде» у прогрес-блоці підключення (крок 3) */
@keyframes cpPulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}