/* =========================================================================
   v87.css — слой после v86.css (тот же приём :root:not(#v)).
   1) Стекло по параметрам GlassObject (glassmat.js): прозрачная плита, весь материал — в толстой кромке
      (отражение студии, лак, дисперсия), без матового размытия. Картинка кромки — --gm-img на ::before.
   2) Без серого: только чёрный, белый и фиолетовые оттенки. Нейтральные полупрозрачные оттенки текста
      заменены токеном --tone (фиолетовый), линии — фиолетовые, выбранные состояния — фиолетовая заливка.
   3) Туннель главной: без кругов и сетки точек.
   4) Чёрно-белые блоки в духе tubikstudio.com, стеклянный объект (glassobject.js), огонь (flame.js).
   ========================================================================= */

/* 1. Токены ---------------------------------------------------------------- */
:root:not(#v){
  --v:#8b5cf6;--v-hi:#a78bfa;--v-deep:#5b21b6;
  --tone:#a78bfa;
  --line:rgba(139,92,246,.28);--line-soft:rgba(139,92,246,.17);--line-strong:rgba(167,139,250,.6);
  --flat-line:rgba(139,92,246,.28);--flat-line-hi:rgba(167,139,250,.62);
  --ag-nav-line:rgba(139,92,246,.32);
  --gm-fill:rgba(255,255,255,.012);--gm-fill-hover:rgba(139,92,246,.07);
  --gm-filter:blur(1px) saturate(170%) brightness(1.06);
  --gm-drop:0 34px 70px -34px rgba(0,0,0,.85);
  --sel-fill:rgba(139,92,246,.24);--sel-edge:rgba(167,139,250,.7);
  /* атмосфера под стеклом — только фиолетовые оттенки */
  --ag-aura:radial-gradient(38% 52% at 16% 28%,rgba(124,77,255,.30),transparent 64%),
            radial-gradient(34% 48% at 84% 72%,rgba(91,33,182,.34),transparent 64%),
            radial-gradient(24% 34% at 56% 12%,rgba(167,139,250,.14),transparent 64%);
}
:root[data-theme="light"]:not(#v){
  --tone:#5b3fd1;
  --line:rgba(91,63,209,.22);--line-soft:rgba(91,63,209,.13);--line-strong:rgba(91,63,209,.55);
  --flat-line:rgba(91,63,209,.22);--flat-line-hi:rgba(91,63,209,.55);
  --ag-nav-line:rgba(91,63,209,.2);
  --gm-fill:rgba(255,255,255,.14);--gm-fill-hover:rgba(255,255,255,.3);
  --gm-filter:blur(1px) saturate(160%);
  --gm-drop:0 26px 54px -30px rgba(46,16,101,.32);
  --sel-fill:rgba(91,63,209,.12);--sel-edge:rgba(91,63,209,.55);
  --ag-aura:radial-gradient(38% 52% at 16% 28%,rgba(124,77,255,.20),transparent 64%),
            radial-gradient(34% 48% at 84% 72%,rgba(91,33,182,.14),transparent 64%),
            radial-gradient(24% 34% at 56% 12%,rgba(167,139,250,.16),transparent 64%);
}

/* 2. Стекло GlassObject ----------------------------------------------------- */
:root:not(#v) :is(.tile--cat,.card[class*="card--"],.quick,.plan__card,.tcard,.menu__product,.consent-bar,.toast,[data-gm]){
  background:var(--gm-fill);box-shadow:var(--gm-drop);
  -webkit-backdrop-filter:var(--gm-filter);backdrop-filter:var(--gm-filter)}
:root:not(#v) .tabbar{background:color-mix(in srgb,var(--bg) 62%,transparent);box-shadow:var(--gm-drop)}
@media (hover:hover) and (pointer:fine){
  :root:not(#v) :is(.tile--cat,.card[class*="card--"],.plan__card,.tcard,.menu__product):hover{background:var(--gm-fill-hover)}
}
/* кромка: картинка шейдера вместо канта-кольца v86 */
:root:not(#v) .gm.gm.gm::before{content:"";display:block;position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;padding:0;
  background:var(--gm-img) 0 0/100% 100% no-repeat;opacity:1;animation:none;-webkit-mask:none;mask:none;transition:opacity .2s ease}
:root:not(#v).lq-glare .gm.gm.gm::before{background:var(--gm-img) 0 0/100% 100% no-repeat;opacity:1}
:root:not(#v) .gm.gm.gm.gm-is-live::before{opacity:0}
:root:not(#v) .gm-live{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;border-radius:inherit}
:root:not(#v) #site-header{-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  background:rgba(0,0,0,.52);box-shadow:inset 0 -1px 0 var(--ag-nav-line)}
:root[data-theme="light"]:not(#v) #site-header{background:rgba(255,255,255,.66)}
/* полосы фона — тот же чёрный/белый, что страница (был графит #0a0a0c) */
:root:not(#v){--band:var(--bg)}
@media (hover:none){
  :root:not(#v) :is(.tile--cat,.card[class*="card--"],.quick,.plan__card,.tcard,.menu__product,.consent-bar,.toast,[data-gm]){
    -webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-reduced-transparency:reduce){
  :root:not(#v) :is(.tile--cat,.card[class*="card--"],.quick,.plan__card,.tcard,.menu__product,.consent-bar,.toast,[data-gm]){background:var(--bg)}
}

/* 3. Без серого -------------------------------------------------------------- */
/* выбранное — фиолетовая заливка и кант; невыбранное — прозрачное */
:root:not(#v) :is(.chip,.xmini__field,.wl-chip,.sc__chip){background:transparent}
:root:not(#v) :is(.chip.is-on,.chip[aria-pressed="true"],.pseg__thumb,.seg-thumb,.charts-tools button.is-active,.charts-tools__toggle.is-active,
  .wl-chip.is-on,.sc__chip.is-on){background:var(--sel-fill);box-shadow:inset 0 0 0 1px var(--sel-edge);color:var(--text)}
:root:not(#v) .deck__dot{background:var(--line-strong)}
:root:not(#v) .deck__dot.is-on{background:var(--v)}
:root:not(#v) .rv-line i{background:var(--line)}
:root:not(#v) .cs__card{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line),var(--gm-drop)}
:root:not(#v) .cs__body{background:transparent}
:root:not(#v) .cs__bar i{background:var(--line-strong)}
:root:not(#v) :is(.topline,.section--why,.footer,.hwf,.hwf__rule,.pulse__tabs,.footer__bottom){border-color:var(--line)}
:root:not(#v) :is(.footer a,.footer li a,.footer__mail,.footer__tg){opacity:1}
:root:not(#v) :is(.chart-tip,.chart-tip--dot){background:rgba(0,0,0,.92);box-shadow:inset 0 0 0 1px var(--line)}
:root[data-theme="light"]:not(#v) :is(.chart-tip,.chart-tip--dot){background:rgba(255,255,255,.96)}
/* второстепенные кнопки: наведение — фиолетовый оттенок вместо серого */
@media (hover:hover) and (pointer:fine){
  :root:not(#v) .btn:not(.btn--primary,.btn--solid,.btn--grad,.plan__buy,.pick-add,.consent-bar__yes,.is-added):not(:disabled):hover,
  :root:not(#v) .lq-btn:not(.btn--primary,.btn--solid,.plan__buy):not(:disabled):hover,
  :root:not(#v) :is(.hdr-btn,.account-btn,.cart-btn,.menu-btn,.theme-toggle,.hdr-nav__link):hover{background:var(--sel-fill)}
}
:root:not(#v) .hdr-nav__link.is-active{background:var(--sel-fill)}

/* 4. Туннель главной: без кругов и сетки, подсказка — сплошной текст -------- */
:root:not(#v) :is(.tunnel__ring,.tunnel__grid){display:none}
:root:not(#v) .tunnel__eyebrow,:root:not(#v) .tunnel__hint{color:var(--text)}
:root:not(#v) .tunnel__hint i{background:linear-gradient(var(--v),transparent)}

/* 5. Блок «Магазин внутри Telegram» со стеклянным знаком (tubikstudio: крупный текст слева, сцена справа) */
:root:not(#v) .gobj-band{padding:clamp(80px,10vw,160px) 0}
:root:not(#v) .gobj{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center}
:root:not(#v) .gobj__eyebrow{margin:0 0 20px;font:600 13px/1 var(--f-sans);letter-spacing:.02em;color:var(--text)}
:root:not(#v) .gobj__eyebrow::before{content:"";display:inline-block;width:8px;height:8px;margin-right:10px;border-radius:2px;background:var(--v);vertical-align:1px}
:root:not(#v) .gobj__title{margin:0;font:300 clamp(44px,6.2vw,104px)/.94 var(--f-sans);letter-spacing:-.05em;color:var(--text);text-wrap:balance}
:root:not(#v) .gobj__sub{margin:clamp(20px,2.4vw,32px) 0 0;max-width:38ch;font:500 clamp(16px,1.35vw,19px)/1.5 var(--f-sans);color:var(--text)}
:root:not(#v) .gobj__facts{display:grid;margin:clamp(32px,4vw,56px) 0 0;padding:0}
:root:not(#v) .gobj__facts > div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
:root:not(#v) .gobj__facts > div:last-child{border-bottom:1px solid var(--line)}
:root:not(#v) .gobj__facts dt{font:700 14px/1.45 var(--f-sans);color:var(--text)}
:root:not(#v) .gobj__facts dd{margin:0;font:500 14px/1.45 var(--f-sans);color:var(--text)}
:root:not(#v) .gobj__stage{position:relative;margin:0;aspect-ratio:7/5;border-radius:var(--r-l);overflow:hidden;background:#000;
  box-shadow:inset 0 0 0 1px var(--line);touch-action:pan-y;cursor:grab}
:root[data-theme="light"]:not(#v) .gobj__stage{background:#fff}
:root:not(#v) .gobj__stage.is-drag{cursor:grabbing}
:root:not(#v) .gobj__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s ease}
:root:not(#v) .gobj--ready .gobj__canvas{opacity:1}
:root:not(#v) .gobj__fallback{position:absolute;left:50%;top:50%;width:46%;height:auto;transform:translate(-50%,-50%);opacity:0;transition:opacity .4s ease}
:root:not(#v) .gobj--fallback .gobj__fallback{opacity:1}
:root:not(#v) .gobj--fallback .gobj__canvas,:root:not(#v) .gobj--fallback .gobj__hint{display:none}
:root:not(#v) .gobj__hint{position:absolute;left:16px;bottom:14px;margin:0;padding:6px 10px;border-radius:var(--r-s);
  font:600 12px/1 var(--f-sans);color:#fff;background:rgba(0,0,0,.6);box-shadow:inset 0 0 0 1px rgba(139,92,246,.4);pointer-events:none}
:root[data-theme="light"]:not(#v) .gobj__hint{color:#000;background:rgba(255,255,255,.8)}
@media (max-width:900px){
  :root:not(#v) .gobj{grid-template-columns:1fr}
  :root:not(#v) .gobj__stage{aspect-ratio:1/1;max-height:72vh}
  :root:not(#v) .gobj__facts > div{grid-template-columns:96px 1fr}
}

/* 6. Инверсия: «Почему eroot» — белая полоса на тёмном сайте (чёрная — на светлом), как светлые секции tubik */
:root:not(#v) .section--why{--bg:#fff;--text:#000;--text-dim:#000;--text-mute:#000;--tone:#5b3fd1;
  --line:rgba(91,63,209,.22);--line-soft:rgba(91,63,209,.13);--line-strong:rgba(91,63,209,.55);
  --flat:#fff;--flat-line:rgba(91,63,209,.2);--flat-line-hi:rgba(91,63,209,.6);--sel-fill:rgba(91,63,209,.12);
  background:#fff;color:#000;border-top:0}
:root[data-theme="light"]:not(#v) .section--why{--bg:#000;--text:#fff;--text-dim:#fff;--text-mute:#fff;--tone:#a78bfa;
  --line:rgba(139,92,246,.3);--line-soft:rgba(139,92,246,.18);--line-strong:rgba(167,139,250,.6);
  --flat:#000;--flat-line:rgba(139,92,246,.3);--flat-line-hi:rgba(167,139,250,.65);--sel-fill:rgba(139,92,246,.24);
  background:#000;color:#fff}
:root:not(#v) .section--why :is(h2,h3,p,b,span,i,a){color:var(--text)}
:root:not(#v) .section--why .card__icon{color:var(--text);background:transparent;box-shadow:inset 0 0 0 1px var(--line)}

/* 7. Подвал открывается из-под страницы (tubik): страница уезжает вверх, подвал стоит на месте */
@media (min-width:900px) and (hover:hover) and (pointer:fine){
  :root:not(#v) main{position:relative;z-index:2;background:var(--bg)}
  :root:not(#v) #site-footer{position:sticky;bottom:0;z-index:0}
}

/* 8. Огонь FlameWrap */
:root:not(#v) .has-flame{overflow:visible!important}
:root:not(#v) .flame-cv{z-index:4;display:block}
/* туннель: сцена с overflow:hidden плоская (preserve-3d не сортирует по глубине) — заголовок явно поверх карточек */
:root:not(#v) .tunnel--live .tunnel__space{z-index:1}
:root:not(#v) .tunnel--live .tunnel__head{z-index:2}
:root:not(#v) .why-grid .card:nth-child(n) .card__icon,:root[data-theme="light"]:not(#v) .why-grid .card:nth-child(n) .card__icon{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
/* стеклянный знак: сцена всегда чёрная — контрастная медиапанель и на белой странице */
:root[data-theme="light"]:not(#v) .gobj__stage{background:#000}
:root[data-theme="light"]:not(#v) .gobj__hint{color:#fff;background:rgba(0,0,0,.6)}
/* главная кнопка — чистый белый (тёмная тема) / чёрный (светлая), без «почти белого» #f4f4f6 */
:root:not(#v){--cta-bg:#fff;--cta-fg:#000}
:root[data-theme="light"]:not(#v){--cta-bg:#000;--cta-fg:#fff}
/* нижняя панель вкладок: чёрное стекло с фиолетовой линией, без кромки шейдера (на телефоне читалась серой) */
:root:not(#v) .tabbar{background:rgba(0,0,0,.72);box-shadow:inset 0 0 0 1px var(--line),0 18px 40px -18px rgba(0,0,0,.8)}
:root[data-theme="light"]:not(#v) .tabbar{background:rgba(255,255,255,.82);box-shadow:inset 0 0 0 1px var(--line),0 18px 40px -22px rgba(46,16,101,.3)}
/* бейдж на кромке выделенного тарифа — поверх огня */
:root:not(#v) .plan--best .plan__badge{z-index:6}
:root:not(#v) .crypto-pick.is-active{background:var(--sel-fill);box-shadow:inset 0 0 0 1px var(--sel-edge)}
:root:not(#v) :is(.sc time,.sup-chat time,.chat time,time){opacity:1}
/* старые токены стекла v86 (серый блик сверху и графитовая заливка) — больше не используются */
:root:not(#v),:root[data-theme="light"]:not(#v){--ag-sheen:linear-gradient(transparent,transparent);--ag-fill:var(--gm-fill)}

/* 9. Правки по аудиту (v87.1) ----------------------------------------------- */
/* (2) атмосфера под стеклом — одно приглушённое пятно вместо трёх «облаков»; (3) тень стекла короче */
:root:not(#v){
  --ag-aura:radial-gradient(46% 60% at 20% 30%,rgba(124,77,255,.16),transparent 66%);
  --gm-drop:0 20px 40px -24px rgba(0,0,0,.8)}
:root[data-theme="light"]:not(#v){
  --ag-aura:radial-gradient(46% 60% at 20% 30%,rgba(124,77,255,.10),transparent 66%);
  --gm-drop:0 20px 40px -26px rgba(46,16,101,.28)}
/* (4) отступы кратны 8 */
:root:not(#v) .gobj__eyebrow{margin-bottom:24px}
:root:not(#v) .gobj__hint{left:16px;bottom:16px;padding:8px 12px}
/* (1) факты на телефоне — не меньше 15 px */
@media (max-width:760px){
  :root:not(#v) .gobj__facts dt,:root:not(#v) .gobj__facts dd{font-size:15px}
}
/* (5) подпись цены в карточке туннеля — 14 px */
:root:not(#v) .tcard__p{font-size:14px}