/* =========================================================
8 МИЛЯ — GLOBAL CSS V12 / MOBILE LIQUID GLASS
TILDA → НАСТРОЙКИ САЙТА → ПОЛЬЗОВАТЕЛЬСКИЕ CSS-СТИЛИ

ВАЖНО:
- Вставлять как чистый CSS, без HTML-тегов.
- Этот файл подключается один раз ко всему сайту.
- Специфичный CSS Header / Footer / Bottom Nav остаётся в их T123.
- Никаких html/body padding-bottom.
========================================================= */

:root{
  --m8-black:#050607;
  --m8-dark:#070809;
  --m8-dark-2:#0b0d0f;
  --m8-dark-3:#121416;

  --m8-light:#ecece8;
  --m8-light-2:#f5f5f2;

  --m8-ink:#101214;
  --m8-white:#f7f7f3;
  --m8-accent:#c9ff52;

  --m8-muted-dark:rgba(255,255,255,.54);
  --m8-muted-light:rgba(16,18,20,.56);

  --m8-line-dark:rgba(255,255,255,.105);
  --m8-line-light:rgba(16,18,20,.12);

  --m8-font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  --m8-max:1440px;

  --m8-display:clamp(54px,6.2vw,96px);
  --m8-h2:clamp(42px,4.6vw,72px);
  --m8-h3:clamp(28px,2.7vw,44px);

  --m8-radius-sm:14px;
  --m8-radius-md:22px;
  --m8-radius-lg:31px;
  --m8-radius-xl:52px;

  --m8-ease-out:cubic-bezier(.23,1,.32,1);
  --m8-ease-in-out:cubic-bezier(.77,0,.175,1);
  --m8-ease-drawer:cubic-bezier(.32,.72,0,1);

  /* Performance Governor меняет эти переменные */
  --m8-quality:1;
  --m8-motion-scale:1;
  --m8-grain-target-fps:60;
  --m8-glass-blur-cap:28px;
}

/* =========================================================
SAFE BASELINE
========================================================= */

html{
  overflow-x:clip;
}

body{
  overflow-x:clip;
  margin-bottom:0!important;
  padding-bottom:0!important;
}

/* нижний холст Tilda никогда не должен становиться белым */
html,
body,
#allrecords,
.t-records,
#tildacоpy,
.t-tildalаbеl{
  background-color:var(--m8-black);
}

.m8x,
.m8x *,
.m8x *::before,
.m8x *::after{
  box-sizing:border-box;
}

.m8x{
  font-family:var(--m8-font)!important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
  font-feature-settings:"kern" 1,"liga" 1;
}

.m8x :where(h1,h2,h3,h4,p,a,button,span,b,strong,small,label,input,textarea){
  font-family:inherit!important;
}

.m8x :where(h1,h2,h3,h4){
  word-break:normal!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
  -webkit-hyphens:none!important;
}

.m8x :where(p){
  overflow-wrap:break-word;
}

.m8x a{
  color:inherit;
  text-decoration:none;
}

.m8x button,
.m8x input,
.m8x textarea{
  font:inherit;
}

.m8x img,
.m8x svg{
  max-width:100%;
}

.m8x small,
.m8x-micro,
.m8x-kicker,
.m8x-chip,
.m8x-label{
  font-size:12px!important;
}

/* =========================================================
LAYOUT
========================================================= */

.m8x-section{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-width:0;
  font-size:15px;
  line-height:1.4;
}

.m8x-section :where(div,article,aside,nav,section,header,footer){
  min-width:0;
}

.m8x-dark{
  color:var(--m8-white);
  background:var(--m8-dark);
}

.m8x-light{
  color:var(--m8-ink);
  background:var(--m8-light);
}

.m8x-shell{
  position:relative;
  z-index:8;
  width:min(calc(100% - 72px),var(--m8-max));
  margin-inline:auto;
  min-width:0;
}

.m8x-overlap-top{
  z-index:20;
  margin-top:-54px;
  border-radius:var(--m8-radius-xl) var(--m8-radius-xl) 0 0;
  box-shadow:0 -22px 60px rgba(0,0,0,.075);
}

.m8x-dark-bridge::before{
  content:"";
  position:absolute;
  z-index:1;
  left:10%;
  right:10%;
  top:-55px;
  height:115px;
  pointer-events:none;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,.055),
      rgba(255,255,255,.013) 44%,
      transparent 74%
    );
  filter:blur(30px);
  opacity:.68;
}

/* =========================================================
LIQUID GLASS
========================================================= */

.m8x-glass{
  --gx:50%;
  --gy:36%;
  --m8-local-blur:min(19px,var(--m8-glass-blur-cap));

  position:relative;
  isolation:isolate;
  overflow:hidden;

  border:1px solid rgba(255,255,255,.20);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.105),
      rgba(255,255,255,.026) 42%,
      rgba(255,255,255,.07)
    );

  -webkit-backdrop-filter:
    blur(var(--m8-local-blur))
    saturate(165%)
    contrast(106%);

  backdrop-filter:
    blur(var(--m8-local-blur))
    saturate(165%)
    contrast(106%);

  box-shadow:
    inset 0 1.15px 0 rgba(255,255,255,.34),
    inset 1px 0 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(255,255,255,.055),
    0 18px 60px rgba(0,0,0,.16),
    0 0 34px rgba(255,255,255,.038);
}

.m8x-glass > *{
  position:relative;
  z-index:3;
}

.m8x-glass::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  padding:1px;
  pointer-events:none;
  border-radius:inherit;

  /*
  Safari / iOS fallback:
  отдельный rim-layer преломляет край стекла.
  Именно этот слой в старой версии давал ощущение "толщины линзы".
  */
  -webkit-backdrop-filter:
    blur(3px)
    brightness(1.16)
    saturate(1.20);

  backdrop-filter:
    blur(3px)
    brightness(1.16)
    saturate(1.20);

  background:
    linear-gradient(
      112deg,
      rgba(255,255,255,.24) 0%,
      rgba(255,255,255,.070) 11%,
      transparent 24% 69%,
      rgba(255,255,255,.085) 83%,
      rgba(255,255,255,.17) 100%
    );

  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);

  -webkit-mask-composite:xor;
  mask-composite:exclude;

  opacity:.96;
}

.m8x-glass::after{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  border-radius:inherit;

  background:
    radial-gradient(
      255px circle at var(--gx) var(--gy),
      rgba(255,255,255,.27),
      rgba(255,255,255,.078) 22%,
      transparent 63%
    ),
    linear-gradient(
      118deg,
      rgba(255,255,255,.095),
      transparent 28% 72%,
      rgba(255,255,255,.068)
    );

  mix-blend-mode:screen;

  opacity:.78;

  transition:
    opacity .25s ease,
    background-position .8s ease;
}

.m8x-glass--strong{
  --m8-local-blur:min(15px,var(--m8-glass-blur-cap));

  border-color:
    rgba(255,255,255,.285);

  /*
  Поверхность специально очень прозрачная.
  Непрозрачный dark fill убивает refraction.
  */
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.108),
      rgba(14,16,18,.055) 44%,
      rgba(255,255,255,.055)
    );

  box-shadow:
    inset 0 1.25px 0 rgba(255,255,255,.48),
    inset 1px 0 0 rgba(255,90,90,.055),
    inset -1px 0 0 rgba(95,155,255,.060),
    inset 0 -1px 0 rgba(255,255,255,.060),
    0 24px 74px rgba(0,0,0,.20),
    0 0 54px rgba(255,255,255,.060);
}

.m8x-light .m8x-glass{
  border-color:rgba(16,18,20,.11);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.49),
      rgba(255,255,255,.13) 48%,
      rgba(255,255,255,.30)
    );

  box-shadow:
    inset 0 1.2px 0 rgba(255,255,255,.98),
    inset 1px 0 0 rgba(255,255,255,.55),
    0 22px 65px rgba(16,18,20,.07),
    0 0 40px rgba(255,255,255,.42);
}

.m8x-light .m8x-glass::after{
  background:
    radial-gradient(
      260px circle at var(--gx) var(--gy),
      rgba(255,255,255,.80),
      rgba(255,255,255,.25) 24%,
      transparent 65%
    ),
    linear-gradient(
      118deg,
      rgba(255,255,255,.26),
      transparent 30% 70%,
      rgba(255,255,255,.18)
    );

  opacity:.62;
}

/*
Chromium/Yandex/Edge:
Runtime V11 включает SVG backdrop displacement и ставит этот атрибут.
*/
.m8x-glass--strong[data-m8-liquid-active="1"]{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.068),
      rgba(7,8,9,.008) 52%,
      rgba(255,255,255,.038)
    )!important;

  border-color:
    rgba(255,255,255,.31)!important;
}

.m8x-light .m8x-glass--strong[data-m8-liquid-active="1"]{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.29),
      rgba(255,255,255,.07) 52%,
      rgba(255,255,255,.17)
    )!important;
}

/*
Touch/Safari/iPhone:
живёт мягкий specular, но сама геометрия блока не двигается.
*/
@media(pointer:coarse){
  .m8x-glass::after{
    background-size:150% 150%;
    animation:m8x-glass-touch 6s ease-in-out infinite alternate;
  }

  @keyframes m8x-glass-touch{
    from{
      background-position:20% 15%;
    }

    to{
      background-position:82% 72%;
    }
  }
}

/*
Low-performance:
не убиваем glass полностью, только снижаем дорогие детали.
*/
html.m8-perf-low .m8x-glass::after{
  opacity:.42;
  animation:none!important;
}

html.m8-perf-low .m8x-glass{
  -webkit-backdrop-filter:
    blur(min(13px,var(--m8-glass-blur-cap)))
    saturate(140%)
    brightness(1.04);

  backdrop-filter:
    blur(min(13px,var(--m8-glass-blur-cap)))
    saturate(140%)
    brightness(1.04);
}

/* =========================================================
TYPE
========================================================= */

.m8x-kicker{
  display:flex;
  align-items:center;
  gap:11px;

  margin-bottom:32px;

  color:rgba(255,255,255,.43);

  font-size:12px!important;
  font-weight:650;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.m8x-kicker::before{
  content:"";

  width:7px;
  height:7px;

  border-radius:50%;

  background:currentColor;

  opacity:.55;
}

.m8x-light .m8x-kicker{
  color:rgba(16,18,20,.42);
}

.m8x-title{
  margin:0;

  font-size:var(--m8-h2);
  line-height:.96;
  font-weight:500;
  letter-spacing:-.038em;
}

.m8x-title > span{
  display:block;
  color:rgba(255,255,255,.29);
}

.m8x-light .m8x-title > span{
  color:rgba(16,18,20,.27);
}

.m8x-copy{
  margin:0;

  color:var(--m8-muted-dark);

  font-size:15px;
  line-height:1.62;
}

.m8x-light .m8x-copy{
  color:var(--m8-muted-light);
}

/* =========================================================
BUTTONS
========================================================= */

.m8x-btn{
  --gx:50%;
  --gy:50%;

  position:relative;
  isolation:isolate;

  min-height:56px;

  padding:
    0 9px
    0 20px;

  display:inline-flex;

  align-items:center;
  justify-content:space-between;

  gap:24px;

  overflow:hidden;

  border:
    1px solid
    transparent;

  border-radius:999px;

  font-size:13px;
  font-weight:650;

  cursor:pointer;

  -webkit-tap-highlight-color:transparent;

  transition:
    border-color calc(180ms * var(--m8-motion-scale)) var(--m8-ease-out),
    box-shadow calc(220ms * var(--m8-motion-scale)) var(--m8-ease-out),
    background-color calc(180ms * var(--m8-motion-scale)) var(--m8-ease-out),
    transform calc(130ms * var(--m8-motion-scale)) var(--m8-ease-out);
}

.m8x-btn::after{
  content:"";

  position:absolute;
  z-index:0;

  inset:-1px;

  pointer-events:none;

  background:
    radial-gradient(
      150px circle at var(--gx) var(--gy),
      rgba(255,255,255,.48),
      transparent 68%
    );

  opacity:.44;
}

.m8x-btn > *{
  position:relative;
  z-index:2;
}

.m8x-btn:active{
  transform:scale(.975);
}

.m8x-btn--white{
  color:#08090a!important;
  background:#f3f3ef;

  box-shadow:
    0 0 25px rgba(255,255,255,.24),
    0 0 72px rgba(255,255,255,.13),
    0 16px 48px rgba(0,0,0,.08),
    inset 0 1px rgba(255,255,255,1);
}

.m8x-btn--dark{
  color:#f6f6f2!important;

  background:#111315;

  border-color:
    rgba(255,255,255,.08);
}

.m8x-btn--glass{
  color:rgba(255,255,255,.92)!important;

  border-color:
    rgba(255,255,255,.18);

  background:
    rgba(255,255,255,.055);

  -webkit-backdrop-filter:
    blur(min(16px,var(--m8-glass-blur-cap)))
    saturate(150%);

  backdrop-filter:
    blur(min(16px,var(--m8-glass-blur-cap)))
    saturate(150%);
}

.m8x-btn__icon{
  width:38px;
  height:38px;

  flex:
    0 0 auto;

  display:grid;

  place-items:center;

  border-radius:50%;

  background:
    rgba(0,0,0,.06);
}

.m8x-btn--glass .m8x-btn__icon,
.m8x-btn--dark .m8x-btn__icon{
  background:
    rgba(255,255,255,.07);
}

.m8x-btn svg{
  width:18px;
  height:18px;

  fill:none;
  stroke:currentColor;
  stroke-width:1.55;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* =========================================================
GLOW
========================================================= */

.m8x-glow{
  box-shadow:
    0 0 22px rgba(255,255,255,.18),
    0 0 66px rgba(255,255,255,.12),
    0 18px 48px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.32)!important;
}

/* =========================================================
ACCESSIBILITY
========================================================= */

.m8x a:focus-visible,
.m8x button:focus-visible{
  outline:
    2px solid
    var(--m8-accent);

  outline-offset:4px;
}

/* =========================================================
PERFORMANCE TIERS
========================================================= */

html.m8-perf-high{
  --m8-quality:1;
  --m8-motion-scale:1;
  --m8-grain-target-fps:60;
  --m8-glass-blur-cap:28px;
}

html.m8-perf-mid{
  --m8-quality:.78;
  --m8-motion-scale:.84;
  --m8-grain-target-fps:45;
  --m8-glass-blur-cap:22px;
}

html.m8-perf-low{
  --m8-quality:.55;
  --m8-motion-scale:.66;
  --m8-grain-target-fps:30;
  --m8-glass-blur-cap:16px;
}

html.m8-perf-low .m8x-glass::after{
  opacity:.32;
}

html.m8-perf-low .m8x-glass{
  -webkit-backdrop-filter:
    blur(min(14px,var(--m8-glass-blur-cap)))
    saturate(135%);

  backdrop-filter:
    blur(min(14px,var(--m8-glass-blur-cap)))
    saturate(135%);
}

html.m8-reduced-motion{
  --m8-motion-scale:0;
}

html.m8-reduced-motion *,
html.m8-reduced-motion *::before,
html.m8-reduced-motion *::after{
  scroll-behavior:auto!important;
}

html.m8-perf-low [data-m8-heavy="decorative"]{
  animation-duration:18s!important;
}

html.m8-reduced-motion [data-m8-heavy="decorative"]{
  animation:none!important;
}

/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:900px){

  .m8x-shell{
    width:
      min(
        calc(100% - 40px),
        var(--m8-max)
      );
  }

}

@media(max-width:620px){

  :root{
    --m8-radius-xl:32px;
  }

  .m8x-shell{
    width:
      calc(100% - 28px);
  }

  .m8x-overlap-top{
    margin-top:-30px;
  }

  .m8x-title{
    font-size:
      clamp(
        36px,
        10vw,
        52px
      );

    line-height:.98;
    letter-spacing:-.03em;
  }

  .m8x-copy{
    font-size:14px;
  }

  .m8x-btn{
    width:100%;
  }

}

@media(prefers-reduced-motion:reduce){

  .m8x-btn{
    transition:none!important;
  }

  .m8x-btn:active{
    transform:none;
  }

}


/* =========================================================
MOBILE LIQUID GLASS V12
Один и тот же материал для Header и Bottom Nav.

Почему отдельно:
на iPhone/Safari SVG backdrop displacement не работает так же,
как Chromium desktop. Поэтому на touch/mobile создаём "линзу"
слоями:
1) сильный backdrop blur;
2) прозрачное стекло;
3) светлая преломляющая кромка;
4) лёгкая RGB-дисперсия;
5) медленно движущийся specular.

DOM и геометрия элементов не двигаются.
========================================================= */

@media(max-width:920px){

  .m8x-mobile-liquid{
    --m8-local-blur:
      min(
        24px,
        var(--m8-glass-blur-cap)
      )!important;

    position:relative!important;

    isolation:isolate!important;

    overflow:hidden!important;

    border:
      1px solid
      rgba(255,255,255,.31)!important;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.145) 0%,
        rgba(26,28,31,.30) 34%,
        rgba(10,11,13,.34) 68%,
        rgba(255,255,255,.075) 100%
      )!important;

    -webkit-backdrop-filter:
      blur(24px)
      saturate(185%)
      brightness(1.08)
      contrast(1.04)!important;

    backdrop-filter:
      blur(24px)
      saturate(185%)
      brightness(1.08)
      contrast(1.04)!important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.52),
      inset 1px 0 0 rgba(255,120,105,.075),
      inset -1px 0 0 rgba(105,160,255,.090),
      inset 0 -1px 0 rgba(255,255,255,.075),
      0 15px 42px rgba(0,0,0,.34),
      0 0 28px rgba(255,255,255,.055)!important;
  }


  /*
  Кромка линзы.
  backdrop-filter здесь работает только на тонкой маске по краю,
  поэтому изображение под стеклом визуально "ломается" именно у рамки.
  */
  .m8x-mobile-liquid::before{
    content:""!important;

    position:absolute!important;

    z-index:1!important;

    inset:0!important;

    padding:1.35px!important;

    pointer-events:none!important;

    border-radius:inherit!important;

    -webkit-backdrop-filter:
      blur(5px)
      saturate(210%)
      brightness(1.27)
      contrast(1.05)!important;

    backdrop-filter:
      blur(5px)
      saturate(210%)
      brightness(1.27)
      contrast(1.05)!important;

    background:
      linear-gradient(
        112deg,
        rgba(255,255,255,.58) 0%,
        rgba(255,255,255,.20) 9%,
        rgba(255,255,255,.055) 19%,
        transparent 31% 66%,
        rgba(110,158,255,.13) 78%,
        rgba(255,142,116,.13) 88%,
        rgba(255,255,255,.42) 100%
      )!important;

    -webkit-mask:
      linear-gradient(#000 0 0) padding-box,
      linear-gradient(#000 0 0)!important;

    -webkit-mask-composite:
      xor!important;

    mask-composite:
      exclude!important;

    opacity:.95!important;
  }


  /*
  Живой свет внутри стекла.
  Это не перемещает сам Header / Bottom Nav.
  */
  .m8x-mobile-liquid::after{
    content:""!important;

    position:absolute!important;

    z-index:2!important;

    inset:-35%!important;

    pointer-events:none!important;

    border-radius:inherit!important;

    background:
      radial-gradient(
        185px 120px at 22% 22%,
        rgba(255,255,255,.30),
        rgba(255,255,255,.095) 28%,
        transparent 68%
      ),
      radial-gradient(
        200px 130px at 82% 76%,
        rgba(105,155,255,.065),
        transparent 69%
      ),
      linear-gradient(
        116deg,
        transparent 14%,
        rgba(255,255,255,.075) 38%,
        transparent 56%,
        rgba(255,255,255,.045) 76%,
        transparent 90%
      )!important;

    mix-blend-mode:
      screen!important;

    opacity:.82!important;

    transform:
      translate3d(
        -4%,
        -2%,
        0
      )!important;

    animation:
      m8MobileLiquidSpecular
      7.8s
      cubic-bezier(.45,0,.55,1)
      infinite
      alternate!important;
  }


  .m8x-mobile-liquid > *{
    position:relative;
    z-index:4;
  }


  @keyframes m8MobileLiquidSpecular{

    0%{
      transform:
        translate3d(
          -5%,
          -3%,
          0
        )
        scale(1);
    }

    52%{
      transform:
        translate3d(
          2%,
          1%,
          0
        )
        scale(1.015);
    }

    100%{
      transform:
        translate3d(
          6%,
          3%,
          0
        )
        scale(1.025);
    }

  }


  /*
  После скролла Header НЕ превращается обратно в тёмную плашку.
  Материал остаётся тем же, что у Bottom Nav.
  */
  #m8h10.is-scrolled .m8x-mobile-liquid{
    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.145) 0%,
        rgba(26,28,31,.30) 34%,
        rgba(10,11,13,.34) 68%,
        rgba(255,255,255,.075) 100%
      )!important;

    -webkit-backdrop-filter:
      blur(24px)
      saturate(185%)
      brightness(1.08)
      contrast(1.04)!important;

    backdrop-filter:
      blur(24px)
      saturate(185%)
      brightness(1.08)
      contrast(1.04)!important;
  }

}


/* Bottom Nav существует только до 640px, но материал тот же. */
@media(max-width:640px){

  #m8bn6 .m8x-mobile-liquid{
    -webkit-backdrop-filter:
      blur(24px)
      saturate(185%)
      brightness(1.08)
      contrast(1.04)!important;

    backdrop-filter:
      blur(24px)
      saturate(185%)
      brightness(1.08)
      contrast(1.04)!important;
  }

}


/* Reduced motion: линза и blur остаются, двигающийся свет выключается. */
@media(prefers-reduced-motion:reduce){

  .m8x-mobile-liquid::after{
    animation:none!important;

    transform:none!important;
  }

}


/*
На low-tier сохраняем визуальную идентичность:
не выключаем blur, уменьшаем только moving highlight.
*/
html.m8-perf-low .m8x-mobile-liquid,
html.m8-save-data .m8x-mobile-liquid{
  -webkit-backdrop-filter:
    blur(20px)
    saturate(165%)
    brightness(1.06)!important;

  backdrop-filter:
    blur(20px)
    saturate(165%)
    brightness(1.06)!important;
}

html.m8-perf-low .m8x-mobile-liquid::after,
html.m8-save-data .m8x-mobile-liquid::after{
  opacity:.54!important;

  animation-duration:12s!important;
}