/* ==========================================================================
   v56 — фиолетовый и розовый под жидким стеклом, единый сайт.
   Грузится после v55.css; тот же приём специфичности :root:not(#v).

   • Не серый сайт: фиолетовый (#8b5cf6 / #a78bfa) и розовый (#f472b6)
     занимают ~20–30% внимания и разнесены по странице — бегущая строка,
     поле героя (гнётся сквозь стеклянные буквы), цветные точки фона под
     стеклом карточек, кайма стекла, кнопки покупки, полутоновые заголовки,
     графики, подвал. Ни одно место не собирает весь цвет.
   • Вторичные страницы — тот же язык, что главная: стеклянный заголовок,
     полутоновое слово, заголовки разделов Montserrat 800, те же графики.
   • Заголовки разделов — полутоновый текст (htext.js) вместо пыли.
   • Курсор-линза (lens.js) — только первый экран главной и меню.
   ========================================================================== */

/* 1. Цвет --------------------------------------------------------------- */
:root:not(#v){
  --violet:#8b5cf6;--violet-hi:#a78bfa;--violet-deep:#6d28d9;
  --pink:#f472b6;--pink-hi:#f9a8d4;--pink-deep:#db2777;
  --accent:#a78bfa;--accent-hard:#c4b5fd;
  --accent-fill:rgba(139,92,246,.18);--accent-fill-hover:rgba(139,92,246,.28);
  --accent-edge:rgba(167,139,250,.6);--accent-soft:rgba(139,92,246,.1);
  --lav:#8b5cf6;
  --lg-tint:#8b5cf6;
  --chart-a:#8b5cf6;--chart-b:#f472b6;--chart-c:#c4b5fd;
  --ht-tint:#a78bfa;--ht-tint2:#f472b6;
  --dot:200, 196, 220;--dot-accent:167, 139, 250;
  --grain:rgba(255,255,255,.05);--grain-v:rgba(167,139,250,.32);--grain-p:rgba(244,114,182,.28);
  --lq-iris:conic-gradient(from 200deg,
      rgba(139,92,246,0) 0deg,rgba(139,92,246,.7) 34deg,rgba(255,255,255,.5) 70deg,rgba(244,114,182,.3) 110deg,
      rgba(244,114,182,0) 160deg,rgba(244,114,182,.42) 215deg,rgba(255,255,255,.28) 250deg,rgba(167,139,250,.5) 300deg,rgba(139,92,246,0) 360deg);
}
:root[data-theme="light"]:not(#v){
  --violet:#7c3aed;--violet-hi:#6d28d9;--violet-deep:#5b21b6;
  --pink:#db2777;--pink-hi:#ec4899;--pink-deep:#be185d;
  --accent:#6d28d9;--accent-hard:#5b21b6;
  --accent-fill:rgba(124,58,237,.1);--accent-fill-hover:rgba(124,58,237,.16);
  --accent-edge:rgba(124,58,237,.45);--accent-soft:rgba(124,58,237,.06);
  --lav:#7c3aed;
  --lg-tint:#7c3aed;
  --chart-a:#7c3aed;--chart-b:#db2777;--chart-c:#a78bfa;
  --ht-tint:#7c3aed;--ht-tint2:#db2777;
  --dot:60, 50, 90;--dot-accent:124, 58, 237;
  --grain:rgba(0,0,0,.045);--grain-v:rgba(124,58,237,.3);--grain-p:rgba(219,39,119,.26);
  --lq-iris:conic-gradient(from 200deg,
      rgba(124,58,237,0) 0deg,rgba(124,58,237,.5) 34deg,rgba(0,0,0,.14) 70deg,rgba(219,39,119,.26) 110deg,
      rgba(219,39,119,0) 160deg,rgba(219,39,119,.32) 215deg,rgba(0,0,0,.1) 250deg,rgba(124,58,237,.38) 300deg,rgba(124,58,237,0) 360deg);
}
/* браузерные поверхности — тоже в палитре */
:root:not(#v){caret-color:var(--violet-hi);scrollbar-color:color-mix(in srgb,var(--violet) 55%,var(--bg)) var(--bg)}
:root:not(#v) ::selection{background:color-mix(in srgb,var(--violet) 42%,transparent);color:var(--text)}
:root:not(#v) :focus-visible{outline-color:var(--violet-hi)}

/* фон страницы: белая сетка + редкие фиолетовые и розовые точки — стекло
   карточек гнёт именно их, цвет искажается у кромки */
:root:not(#v) .sheet{background-image:
    radial-gradient(circle at 1px 1px,var(--grain) 1px,transparent 1.6px),
    radial-gradient(circle at 12px 12px,var(--grain-v) 1.3px,transparent 2px),
    radial-gradient(circle at 34px 78px,var(--grain-p) 1.3px,transparent 2px);
  background-size:22px 22px,110px 110px,154px 154px}

/* 2. Хром ---------------------------------------------------------------- */
:root:not(#v) .topline{background:var(--violet-deep);color:#fff}
:root:not(#v) .topline .marquee a,:root:not(#v) .topline .marquee span{color:#fff}
:root:not(#v) .logo__mark{display:grid;place-items:center;width:30px;height:30px}
:root:not(#v) .logo__svg{display:block;width:28px;height:28px}
:root:not(#v) .logo__word{font:800 19px/1 var(--f-display2);letter-spacing:-.035em}
:root:not(#v) .cart-btn__count{background:var(--pink);color:#fff;box-shadow:none}
:root[data-theme="light"]:not(#v) .cart-btn__count{background:var(--pink-deep)}

/* покупка — фиолетовое стекло; главная кнопка героя остаётся белой */
:root:not(#v) .btn--primary,:root:not(#v) .card__foot .btn,:root:not(#v) .pick-add,:root:not(#v) .custom-amount__foot .btn{
  color:#fff;background:color-mix(in srgb,var(--violet) 72%,transparent);
  box-shadow:var(--lq-drop),inset 0 0 0 1px rgba(255,255,255,.18),inset 1.5px 1.5px 1px -1px rgba(255,255,255,.7),inset 0 -12px 18px -14px rgba(40,10,90,.7)}
:root:not(#v) .btn--primary:hover,:root:not(#v) .card__foot .btn:hover,:root:not(#v) .pick-add:hover{background:color-mix(in srgb,var(--violet) 86%,transparent)}
:root[data-theme="light"]:not(#v) .btn--primary,:root[data-theme="light"]:not(#v) .card__foot .btn,:root[data-theme="light"]:not(#v) .pick-add{
  color:#fff;background:color-mix(in srgb,var(--violet) 88%,transparent)}
:root:not(#v) .btn--primary.btn--light{color:#050506;background:rgba(255,255,255,.9)}
:root[data-theme="light"]:not(#v) .btn--primary.btn--light{color:#fff;background:rgba(5,5,6,.88)}
:root:not(#v) .pseg__thumb{background:color-mix(in srgb,var(--pink) 24%,rgba(255,255,255,.06));box-shadow:var(--lq-rim)}
:root[data-theme="light"]:not(#v) .pseg__thumb{background:color-mix(in srgb,var(--pink) 12%,#fff)}
:root:not(#v) .plan--best .plan__card{
  box-shadow:var(--lq-drop),var(--lq-rim),inset 0 0 0 1.5px color-mix(in srgb,var(--violet-hi) 80%,transparent),
             inset 0 0 26px 0 color-mix(in srgb,var(--violet) 12%,transparent)}
:root:not(#v) .plan__badge .i{color:var(--pink)}
:root:not(#v) .plan--best .plan__per{color:var(--violet-hi)}
:root:not(#v) a:not(.btn):not(.menu__link):not(.menu__product):not(.logo):not(.sticker):not(.tile):not(.trust__item):hover{text-decoration-color:var(--pink)}
:root:not(#v) .quick__more,:root:not(#v) .trust__go{color:var(--violet-hi)}

/* 3. Добавление в корзину: тихо, на самой кнопке ------------------------- */
:root:not(#v) .btn.is-added{color:#fff;background:color-mix(in srgb,var(--pink) 78%,transparent);animation:v56-added .5s var(--spr-pop,cubic-bezier(.34,1.56,.64,1))}
:root[data-theme="light"]:not(#v) .btn.is-added{background:color-mix(in srgb,var(--pink-deep) 88%,transparent)}
:root:not(#v) .btn.is-added .i--check path{stroke-dasharray:24;stroke-dashoffset:24;animation:v56-check .42s .06s cubic-bezier(.22,1,.36,1) forwards}
:root:not(#v) .cart-btn.is-bumped{animation:v56-bump .6s var(--spr-pop,cubic-bezier(.34,1.56,.64,1))}
:root:not(#v) .cart-btn__count.is-tick{animation:v56-tick .5s cubic-bezier(.22,1,.36,1)}
@keyframes v56-added{0%{scale:.96}55%{scale:1.03}100%{scale:1}}
@keyframes v56-check{to{stroke-dashoffset:0}}
@keyframes v56-bump{0%{scale:1}35%{scale:1.1}100%{scale:1}}
@keyframes v56-tick{0%{translate:0 0}40%{translate:0 -3px}100%{translate:0 0}}
:root:not(#v) .fly-chip,:root:not(#v) .fly-spark,:root:not(#v) .btn-dotfill{display:none}

/* 4. Полутоновые заголовки (htext.js) ------------------------------------ */
:root:not(#v) .htext{position:relative}
:root:not(#v) .htext__txt{position:relative;z-index:1}
:root:not(#v) .htext__cv{position:absolute;z-index:0;display:block;pointer-events:none}
/* текст прозрачный только когда точки уже нарисованы */
:root:not(#v) .htext--on .htext__txt{-webkit-text-fill-color:transparent}
:root:not(#v) .head h2[data-htext],:root:not(#v) h2.htext:not(.display):not(.display-xl){
  font:800 clamp(40px,6.4vw,104px)/.9 var(--f-display2);letter-spacing:-.04em;max-width:16ch;text-wrap:balance}
:root:not(#v) .display-xl{--ht-amount:.46}
:root:not(#v) .band--quick .display{--ht-tint:var(--pink);--ht-tint2:var(--violet-hi)}

/* полутоновые слова: свой цвет у каждого */
:root:not(#v) .hwf__word{--ht-tint:var(--violet-hi);--ht-tint2:var(--pink);--ht-amount:.4}
:root:not(#v) .masthead--stars{--ht-tint:var(--c-stars);--ht-tint2:var(--violet-hi)}
:root:not(#v) .masthead--premium{--ht-tint:var(--c-premium);--ht-tint2:var(--pink)}
:root:not(#v) .masthead--ps{--ht-tint:var(--c-ps);--ht-tint2:var(--violet-hi)}
:root:not(#v) .masthead--psplus{--ht-tint:var(--c-dlx);--ht-tint2:var(--c-ext)}
:root:not(#v) .masthead--faq,:root:not(#v) .masthead--cart{--ht-tint:var(--violet-hi);--ht-tint2:var(--pink)}

/* 5. Верх страниц каталога — стеклянный заголовок, как на главной -------- */
:root:not(#v) .ghr--page{min-height:clamp(480px,74svh,800px);align-items:flex-start}
:root:not(#v) .ghr__content--page{padding-top:calc(var(--header-h) + clamp(56px,9vw,110px));padding-bottom:clamp(140px,17vw,250px);gap:18px}
:root:not(#v) .ghr__title--page{font-size:clamp(50px,9.6vw,164px);max-width:13ch}
:root:not(#v) .ghr__title [data-words]{display:inline}
:root:not(#v) .ghr__mast{position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:auto}
:root:not(#v) .ghr__mast .masthead{margin:0;height:clamp(96px,14vw,210px)}
:root:not(#v) .ghr--page + .catalog-hero{padding-top:clamp(40px,6vw,72px)}
:root:not(#v) .ghr .ghr__eyebrow{display:none}

/* 6. Курсор-линза (LiquidGlassCursor) ------------------------------------ */
:root:not(#v) .lgc{position:absolute;inset:0;z-index:30;pointer-events:none;overflow:hidden;border-radius:inherit}
:root:not(#v) .lgc__lens{position:absolute;left:0;top:0;display:block;border-radius:999px;overflow:hidden;transform:scale(0);
  will-change:transform,width,height;background:var(--bg)}
:root:not(#v) .lgc__filter{position:absolute;inset:0}
:root:not(#v) .lgc__copy{position:absolute;left:0;top:0;width:0;height:0}
:root:not(#v) .lgc-clone{pointer-events:none;user-select:none}
:root:not(#v) .lgc-clone .lgc-glyph{position:absolute}
:root:not(#v) .lgc__shine{position:absolute;inset:0;display:block;border-radius:inherit;
  background:radial-gradient(ellipse 45% 30% at 32% 24%,rgba(255,255,255,.35),transparent 70%)}
:root:not(#v) .lgc__rim{position:absolute;inset:0;display:block;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),inset 2px 4px 10px rgba(255,255,255,.18),inset -3px -5px 14px rgba(0,0,0,.35)}
:root:not(#v) .lgc__shadow{position:absolute;left:0;top:0;display:block;border-radius:999px;transform:scale(0);
  background:rgba(0,0,0,.45);filter:blur(22px)}
:root[data-theme="light"]:not(#v) .lgc__rim{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),inset 2px 4px 10px rgba(255,255,255,.7),inset -3px -5px 14px rgba(0,0,0,.18)}
:root[data-theme="light"]:not(#v) .lgc__shadow{background:rgba(0,0,0,.28)}
:root:not(#v) [data-lens].lgc-on,:root:not(#v) [data-lens].lgc-on *{cursor:none}

/* 7. Столбчатые графики ------------------------------------------------- */
:root:not(#v) .chart{position:relative}
:root:not(#v) .bars{display:block;width:100%;height:auto;margin-top:8px;overflow:visible}
:root:not(#v) .bars__grid{stroke:var(--line);stroke-width:1}
:root:not(#v) .bars__bar{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0)}
:root:not(#v) .chart.is-live .bars__bar{animation:v56-grow .48s ease-out var(--d,0ms) both}
:root:not(#v) .no-anim .chart .bars__bar,:root:not(#v) .charts.no-anim .bars__bar{animation:none;transform:none}
@keyframes v56-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
:root:not(#v) .bars__x{fill:var(--text-mute);font:500 13px var(--f-sans)}
:root:not(#v) .bars__val{fill:var(--text-dim);font:500 11px var(--f-data);opacity:0;transition:opacity .3s .45s}
:root:not(#v) .chart.is-live .bars__val{opacity:1}
:root:not(#v) .charts.no-values .bars__val{display:none}
:root:not(#v) .bars__hit{fill:transparent;cursor:default}
:root:not(#v) .bars__hit.is-on{fill:color-mix(in srgb,var(--tone,var(--text)) 4%,transparent)}
:root:not(#v) .chart-tip{position:absolute;left:0;top:0;z-index:6;display:grid;gap:6px;min-width:150px;padding:9px 11px;border-radius:12px;
  font:500 12px/1.2 var(--f-sans);color:var(--text);background:color-mix(in srgb,var(--bg-2) 86%,transparent);
  box-shadow:0 8px 24px -10px rgba(0,0,0,.6),inset 0 0 0 1px var(--line);opacity:0;pointer-events:none;transition:opacity .14s cubic-bezier(.22,1,.36,1);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
:root:not(#v) .chart-tip.is-on{opacity:1}
:root:not(#v) .chart-tip b{font-weight:600}
:root:not(#v) .chart-tip__row{display:flex;align-items:center;gap:8px;white-space:nowrap}
:root:not(#v) .chart-tip__row em{font-style:normal;color:var(--text-dim)}
:root:not(#v) .chart-tip__row strong{margin-left:auto;padding-left:10px;font:600 12px var(--f-data);font-variant-numeric:tabular-nums}
:root:not(#v) .chart-tip__dash{display:block;width:0;height:12px;border-left:1.5px dashed var(--c)}
:root:not(#v) .chart-tip__dot{display:block;width:6px;height:6px;border-radius:50%;background:var(--c)}
:root:not(#v) .chart-tip small{color:var(--text-mute);font:500 11px var(--f-data)}
:root:not(#v) .legend-sq{border-radius:2px}

/* 8. Линейные графики с вкладками метрик (line-charts-6) ----------------- */
:root:not(#v) .pulse__tabs{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));margin:14px 0 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
:root:not(#v) .pulse__tab{display:block;min-width:0;padding:16px;text-align:left;border:0;border-right:1px solid var(--line);
  background:transparent;color:var(--text);font:inherit;cursor:pointer;transition:background-color .2s}
:root:not(#v) .pulse__tab:last-child{border-right:0}
:root:not(#v) .pulse__tab:hover{background:color-mix(in srgb,var(--tone,var(--text)) 3%,transparent)}
:root:not(#v) .pulse__tab.is-on{background:color-mix(in srgb,var(--c) 9%,transparent);box-shadow:inset 0 -2px 0 var(--c)}
:root:not(#v) .pulse__top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
:root:not(#v) .pulse__label{overflow:hidden;font:500 13px/1.2 var(--f-sans);color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap}
:root:not(#v) .pulse__badge{display:inline-flex;flex:none;align-items:center;gap:3px;height:22px;padding:0 7px;border-radius:7px;
  font:600 11px/1 var(--f-data);border:1px solid currentColor}
:root:not(#v) .pulse__badge--good{color:#22c55e;background:rgba(34,197,94,.08)}
:root:not(#v) .pulse__badge--bad{color:#f43f5e;background:rgba(244,63,94,.08)}
:root:not(#v) .pulse__badge--flat{color:var(--text-mute);background:transparent}
:root:not(#v) .pulse__value{display:block;font:700 clamp(20px,2vw,26px)/1.1 var(--f-num);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
:root:not(#v) .pulse__from{display:block;margin-top:5px;font:500 12px var(--f-sans);color:var(--text-mute)}
:root:not(#v) .pulse__plot{position:relative;padding:18px 0 0}
:root:not(#v) .pulse__svg{display:block;width:100%;height:auto;overflow:visible}
:root:not(#v) .pulse__dotgrid{fill:color-mix(in srgb,var(--tone,var(--text)) 22%,transparent)}
:root:not(#v) .pulse__y,:root:not(#v) .pulse__x{fill:var(--text-mute);font:500 11px var(--f-sans)}
:root:not(#v) .pulse__line{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len,none);stroke-dashoffset:0}
:root:not(#v) .chart.is-live .pulse__line{animation:v56-draw .9s cubic-bezier(.22,1,.36,1)}
@keyframes v56-draw{from{stroke-dashoffset:var(--len,0)}to{stroke-dashoffset:0}}
:root:not(#v) .pulse__cursor{stroke:var(--text-mute);stroke-width:1;stroke-dasharray:3 3;opacity:0;transition:opacity .14s}
:root:not(#v) .pulse__active{stroke:#fff;stroke-width:2;opacity:0;transition:opacity .14s}
:root:not(#v) .pulse__svg.is-hover .pulse__cursor,:root:not(#v) .pulse__svg.is-hover .pulse__active{opacity:1}
:root:not(#v) .pulse__flat{stroke-width:2;stroke-dasharray:5 6;opacity:.65}
@media (max-width:760px){
  :root:not(#v) .pulse__tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  :root:not(#v) .pulse__tab:nth-child(2n){border-right:0}
  :root:not(#v) .pulse__tab:nth-child(-n+2){border-bottom:1px solid var(--line)}
  :root:not(#v) .pulse__tab{padding:12px}
}

/* 9. Колода графиков: один слайд, стрелки, точки ------------------------- */
:root:not(#v) .charts.deck{display:block;max-width:760px;margin-left:auto;margin-right:auto}
:root:not(#v) .deck > [data-chart][hidden]{display:none}
:root:not(#v) .deck > [data-chart].is-shown{animation:v56-fade .22s cubic-bezier(.22,1,.36,1)}
@keyframes v56-fade{from{opacity:0}to{opacity:1}}
:root:not(#v) .deck__nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
:root:not(#v) .deck__btn{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:12px;color:var(--text);
  background:var(--lq-fill);box-shadow:var(--lq-drop),var(--lq-rim);cursor:pointer}
:root:not(#v) .deck__btn:hover{background:var(--lq-fill-hover)}
:root:not(#v) .deck__dots{display:flex;align-items:center;gap:8px}
:root:not(#v) .deck__dot{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:color-mix(in srgb,var(--tone,var(--text)) 32%,transparent);transition:width .3s cubic-bezier(.22,1,.36,1),background-color .3s}
:root:not(#v) .deck__dot::after{content:"";position:absolute;inset:-18px -4px}
:root:not(#v) .deck__dot.is-on{width:24px;background:var(--pink)}
:root:not(#v) .deck__cap{margin:12px 0 0;text-align:center;font:500 12.5px var(--f-sans);color:var(--text-mute)}

/* 10. Без движения ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  :root:not(#v) .chart .bars__bar{animation:none;transform:none}
  :root:not(#v) .chart.is-live .pulse__line{animation:none}
  :root:not(#v) .btn.is-added,:root:not(#v) .cart-btn.is-bumped,:root:not(#v) .cart-btn__count.is-tick{animation:none}
  :root:not(#v) .btn.is-added .i--check path{animation:none;stroke-dashoffset:0}
}