/* =========================================================
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 GLASS V13 — STABLE IOS MATERIAL

Одинаковый материал для Header / mobile menu / Bottom Nav.

Исправления:
- без CSS mask-composite;
- без backdrop-filter на псевдоэлементах;
- без отрицательных inset;
- без квадратных compositor-углов;
- без Annexx GIF-текстуры на мобильном;
- без scale/translate раскрытого меню.
========================================================= */

@media(max-width:920px){

.m8x-mobile-glass-stable{
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;

    clip-path:inset(0 round 24px)!important;
    -webkit-clip-path:inset(0 round 24px)!important;

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

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.105) 0%,
        rgba(23,25,28,.205) 36%,
        rgba(8,10,12,.235) 68%,
        rgba(255,255,255,.045) 100%
      )!important;

    -webkit-backdrop-filter:
      blur(22px)
      saturate(172%)
      brightness(1.075)
      contrast(1.025)!important;

    backdrop-filter:
      blur(22px)
      saturate(172%)
      brightness(1.075)
      contrast(1.025)!important;

    box-shadow:
      inset 0 1.2px 0 rgba(255,255,255,.50),
      inset 0 -1px 0 rgba(255,255,255,.060),
      inset 11px 0 18px -18px rgba(255,112,92,.30),
      inset -11px 0 18px -18px rgba(91,145,255,.32),
      0 14px 38px rgba(0,0,0,.32),
      0 0 24px rgba(255,255,255,.045)!important;

    transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }

  /* Внутренняя стеклянная кромка — без масок и без blur-слоя. */
  .m8x-mobile-glass-stable::before{
    content:""!important;
    position:absolute!important;
    z-index:1!important;
    inset:1px!important;
    pointer-events:none!important;
    border-radius:23px!important;

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

    background:
      linear-gradient(
        112deg,
        rgba(255,255,255,.18) 0%,
        rgba(255,255,255,.055) 16%,
        transparent 31% 70%,
        rgba(255,255,255,.05) 86%,
        rgba(255,255,255,.13) 100%
      )!important;

    opacity:.88!important;
  }

  /* Одна мягкая движущаяся caustic-линия. Это не текстура. */
  .m8x-mobile-glass-stable::after{
    content:""!important;
    position:absolute!important;
    z-index:2!important;

    top:-38%!important;
    left:-22%!important;
    width:48%!important;
    height:176%!important;

    pointer-events:none!important;
    border-radius:50%!important;

    background:
      radial-gradient(
        ellipse at center,
        rgba(255,255,255,.18) 0%,
        rgba(255,255,255,.07) 28%,
        rgba(255,255,255,.018) 50%,
        transparent 72%
      )!important;

    filter:blur(13px)!important;
    -webkit-filter:blur(13px)!important;

    opacity:.54!important;
    transform:translate3d(0,0,0)!important;

    animation:
      m8MobileGlassCaustic
      8.5s
      cubic-bezier(.42,0,.58,1)
      infinite
      alternate!important;
  }

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

  @keyframes m8MobileGlassCaustic{
    from{left:-22%;opacity:.44}
    to{left:74%;opacity:.60}
  }

  /* После scroll Header сохраняет тот же материал. */
  #m8h10.is-scrolled .m8x-mobile-glass-stable{
    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.105) 0%,
        rgba(23,25,28,.205) 36%,
        rgba(8,10,12,.235) 68%,
        rgba(255,255,255,.045) 100%
      )!important;

    -webkit-backdrop-filter:
      blur(22px)
      saturate(172%)
      brightness(1.075)
      contrast(1.025)!important;

    backdrop-filter:
      blur(22px)
      saturate(172%)
      brightness(1.075)
      contrast(1.025)!important;
  }

  /* Большая карточка раскрытого меню — тот же материал, чуть темнее. */
  .m8x-mobile-glass-panel{
    clip-path:inset(0 round 28px)!important;
    -webkit-clip-path:inset(0 round 28px)!important;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.095),
        rgba(18,20,23,.31) 44%,
        rgba(7,9,11,.36)
      )!important;

    -webkit-backdrop-filter:
      blur(26px)
      saturate(168%)
      brightness(1.055)!important;

    backdrop-filter:
      blur(26px)
      saturate(168%)
      brightness(1.055)!important;
  }

  .m8x-mobile-glass-panel::before{
    border-radius:27px!important;
  }

  /* На mobile не даём SVG desktop-filter перебить стабильный iOS material. */
  .m8x-mobile-glass-stable[data-m8-liquid-active="1"]{
    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.105) 0%,
        rgba(23,25,28,.205) 36%,
        rgba(8,10,12,.235) 68%,
        rgba(255,255,255,.045) 100%
      )!important;

    -webkit-backdrop-filter:
      blur(22px)
      saturate(172%)
      brightness(1.075)
      contrast(1.025)!important;

    backdrop-filter:
      blur(22px)
      saturate(172%)
      brightness(1.075)
      contrast(1.025)!important;
  }
}

@media(max-width:640px){
  /* Header и Bottom Nav — идентичный material. */
  #m8h10 .m8h10__bar.m8x-mobile-glass-stable,
  #m8bn6 .m8bn6__glass.m8x-mobile-glass-stable{
    border-color:rgba(255,255,255,.29)!important;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.105) 0%,
        rgba(23,25,28,.205) 36%,
        rgba(8,10,12,.235) 68%,
        rgba(255,255,255,.045) 100%
      )!important;

    -webkit-backdrop-filter:
      blur(22px)
      saturate(172%)
      brightness(1.075)
      contrast(1.025)!important;

    backdrop-filter:
      blur(22px)
      saturate(172%)
      brightness(1.075)
      contrast(1.025)!important;

    box-shadow:
      inset 0 1.2px 0 rgba(255,255,255,.50),
      inset 0 -1px 0 rgba(255,255,255,.060),
      inset 11px 0 18px -18px rgba(255,112,92,.30),
      inset -11px 0 18px -18px rgba(91,145,255,.32),
      0 14px 38px rgba(0,0,0,.32),
      0 0 24px rgba(255,255,255,.045)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .m8x-mobile-glass-stable::after{
    animation:none!important;
    left:24%!important;
    opacity:.46!important;
  }
}

html.m8-perf-low .m8x-mobile-glass-stable::after,
html.m8-save-data .m8x-mobile-glass-stable::after{
  animation-duration:14s!important;
  opacity:.40!important;
}


/* =========================================================
V14 — ADAPTIVE GLASS THEME
Header и Bottom Nav автоматически меняют контраст
на светлых секциях главной.

Темный фон:
- белые пункты;
- темное стекло.

Светлый фон:
- темные пункты;
- светлое прозрачное стекло.

Liquid/backdrop blur и обводка сохраняются в обоих режимах.
========================================================= */

#m8h10,
#m8bn6{
  --m8-ui-fg:#f7f7f3;
  --m8-ui-muted:rgba(255,255,255,.56);
  --m8-ui-border:rgba(255,255,255,.31);
  --m8-ui-surface-a:rgba(255,255,255,.105);
  --m8-ui-surface-b:rgba(23,25,28,.205);
  --m8-ui-surface-c:rgba(8,10,12,.235);
  --m8-ui-surface-d:rgba(255,255,255,.045);
}

#m8h10.m8-on-light,
#m8bn6.m8-on-light{
  --m8-ui-fg:#111315;
  --m8-ui-muted:rgba(16,18,20,.56);
  --m8-ui-border:rgba(16,18,20,.18);
  --m8-ui-surface-a:rgba(255,255,255,.66);
  --m8-ui-surface-b:rgba(255,255,255,.38);
  --m8-ui-surface-c:rgba(241,241,237,.46);
  --m8-ui-surface-d:rgba(255,255,255,.52);
}

/* Единая поверхность Header / Bottom Nav */
#m8h10.m8-on-light .m8h10__bar,
#m8bn6.m8-on-light .m8bn6__glass{
  color:var(--m8-ui-fg)!important;

  border-color:var(--m8-ui-border)!important;

  background:
    linear-gradient(
      145deg,
      var(--m8-ui-surface-a) 0%,
      var(--m8-ui-surface-b) 35%,
      var(--m8-ui-surface-c) 70%,
      var(--m8-ui-surface-d) 100%
    )!important;

  -webkit-backdrop-filter:
    blur(22px)
    saturate(168%)
    brightness(1.04)
    contrast(1.02)!important;

  backdrop-filter:
    blur(22px)
    saturate(168%)
    brightness(1.04)
    contrast(1.02)!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    inset 0 -1px 0 rgba(16,18,20,.055),
    0 15px 38px rgba(16,18,20,.14),
    0 0 24px rgba(255,255,255,.24)!important;
}

/* Desktop Header — контраст на светлых секциях */
#m8h10.m8-on-light .m8h10__nav a{
  color:rgba(16,18,20,.56)!important;
}

#m8h10.m8-on-light .m8h10__nav a:hover,
#m8h10.m8-on-light .m8h10__nav a.is-active{
  color:#101214!important;
  background:rgba(16,18,20,.065)!important;
}

#m8h10.m8-on-light .m8h10__social,
#m8h10.m8-on-light .m8h10__phone,
#m8h10.m8-on-light .m8h10__mobile-actions > a,
#m8h10.m8-on-light .m8h10__burger{
  color:#151719!important;
  border-color:rgba(16,18,20,.10)!important;
  background:rgba(255,255,255,.20)!important;
}

#m8h10.m8-on-light .m8h10__cta{
  color:#fff!important;
  background:#111315!important;
  box-shadow:
    0 13px 35px rgba(16,18,20,.16),
    inset 0 1px 0 rgba(255,255,255,.12)!important;
}

#m8h10.m8-on-light .m8h10__cta .m8x-btn__icon{
  background:rgba(255,255,255,.08)!important;
}

/* Bottom Nav — темные иконки и подписи на светлой секции */
#m8bn6.m8-on-light .m8bn6__item{
  color:rgba(16,18,20,.47)!important;
}

#m8bn6.m8-on-light .m8bn6__item.is-active{
  color:#101214!important;
  background:
    linear-gradient(
      145deg,
      rgba(16,18,20,.095),
      rgba(16,18,20,.025)
    )!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58)!important;
}

#m8bn6.m8-on-light .m8bn6__item.is-active::before{
  background:#101214!important;
  box-shadow:
    0 0 9px rgba(16,18,20,.28)!important;
}

/* Обводка как в удачном варианте */
@media(max-width:920px){
  #m8h10 .m8h10__bar.m8x-mobile-glass-stable,
  #m8bn6 .m8bn6__glass.m8x-mobile-glass-stable{
    border-width:1px!important;
    border-style:solid!important;
  }
}

/*
При раскрытом burger меню намеренно возвращаем темный материал,
чтобы большая панель и верхняя панель читались как один объект.
*/
#m8h10.menu-open{
  --m8-ui-fg:#f7f7f3;
}

#m8h10.menu-open .m8h10__bar{
  color:#f7f7f3!important;
  border-color:rgba(255,255,255,.31)!important;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.105),
      rgba(23,25,28,.205) 36%,
      rgba(8,10,12,.235) 68%,
      rgba(255,255,255,.045)
    )!important;
}

#m8h10.menu-open .m8h10__mobile-actions > a,
#m8h10.menu-open .m8h10__burger{
  color:rgba(255,255,255,.78)!important;
  border-color:rgba(255,255,255,.10)!important;
  background:rgba(255,255,255,.025)!important;
}


/* =========================================================
8 МИЛЯ — MOBILE GLASS BORDER FIX V16
Только мобильная визуальная правка.

Цель:
- вернуть тонкую обводку как в ранних версиях;
- убрать ощущение двойной/толстой рамки;
- сохранить blur / liquid material / adaptive contrast;
- одинаково для Header, раскрытого меню и Bottom Nav.
========================================================= */

@media(max-width:920px){

  /*
  Основная внешняя рамка.
  Раньше визуально становилась толстой из-за наложения:
  outer border + ::before inner border + inset highlights.
  */
  .m8x-mobile-glass-stable{
    border-width:1px!important;
    border-style:solid!important;
    border-color:rgba(255,255,255,.18)!important;

    box-shadow:
      inset 0 .6px 0 rgba(255,255,255,.28),
      inset 0 -.6px 0 rgba(255,255,255,.035),
      inset 8px 0 15px -18px rgba(255,112,92,.20),
      inset -8px 0 15px -18px rgba(91,145,255,.22),
      0 13px 34px rgba(0,0,0,.29),
      0 0 18px rgba(255,255,255,.025)!important;
  }

  /*
  Внутренняя кромка оставлена для glass-depth,
  но практически невидимая — больше нет двойной линии.
  */
  .m8x-mobile-glass-stable::before{
    inset:1px!important;
    border-width:1px!important;
    border-color:rgba(255,255,255,.035)!important;
    opacity:.56!important;
  }

  /*
  Большая панель раскрытого меню тоже получает тонкий край.
  */
  .m8x-mobile-glass-panel{
    border-color:rgba(255,255,255,.16)!important;
  }

  .m8x-mobile-glass-panel::before{
    border-color:rgba(255,255,255,.030)!important;
  }

  /*
  Header в открытом burger-состоянии раньше снова получал .31.
  Принудительно оставляем тонкий край.
  */
  #m8h10.menu-open .m8h10__bar{
    border-color:rgba(255,255,255,.18)!important;
  }
}

@media(max-width:640px){

  #m8h10 .m8h10__bar.m8x-mobile-glass-stable,
  #m8bn6 .m8bn6__glass.m8x-mobile-glass-stable{
    border-color:rgba(255,255,255,.18)!important;
  }

  /*
  Светлый фон: та же физическая толщина,
  только темнее цвет линии для читаемости.
  */
  #m8h10.m8-on-light .m8h10__bar,
  #m8bn6.m8-on-light .m8bn6__glass{
    border-color:rgba(16,18,20,.095)!important;

    box-shadow:
      inset 0 .6px 0 rgba(255,255,255,.70),
      inset 0 -.6px 0 rgba(16,18,20,.025),
      0 12px 30px rgba(16,18,20,.105),
      0 0 16px rgba(255,255,255,.15)!important;
  }

  #m8h10.m8-on-light .m8x-mobile-glass-stable::before,
  #m8bn6.m8-on-light .m8x-mobile-glass-stable::before{
    border-color:rgba(16,18,20,.025)!important;
    opacity:.45!important;
  }
}


/* =========================================================
8 МИЛЯ — V17 / TRUE SINGLE HAIRLINE MOBILE BORDER

Причина прошлой "толстой" рамки:
.m8x-glass::before из базового Liquid Glass продолжал иметь
mask/rim-layer поверх внешнего border.

V17:
- одна внешняя hairline 0.65px;
- внутренний rim-border полностью отключён;
- mask-composite отключён;
- никакой второй линии;
- liquid/highlight сохраняется отдельным мягким background,
  но уже БЕЗ собственной обводки.
========================================================= */

@media(max-width:920px){

  /* TOP HEADER + OPEN MENU + BOTTOM NAV */
  #m8h10 .m8h10__bar.m8x-mobile-glass-stable,
  #m8h10 .m8h10__menu-card.m8x-mobile-glass-stable,
  #m8bn6 .m8bn6__glass.m8x-mobile-glass-stable{
    border:
      .65px solid
      rgba(255,255,255,.165)!important;

    box-shadow:
      inset 0 .45px 0 rgba(255,255,255,.22),
      inset 0 -.45px 0 rgba(255,255,255,.025),
      0 12px 31px rgba(0,0,0,.28),
      0 0 17px rgba(255,255,255,.022)!important;
  }

  /*
  ГЛАВНЫЙ FIX:
  полностью убираем внутреннюю маску/rim.
  Именно она визуально дублировала внешний край.
  */
  #m8h10 .m8h10__bar.m8x-mobile-glass-stable::before,
  #m8h10 .m8h10__menu-card.m8x-mobile-glass-stable::before,
  #m8bn6 .m8bn6__glass.m8x-mobile-glass-stable::before{
    inset:0!important;
    padding:0!important;

    border:0!important;
    outline:0!important;

    -webkit-mask:none!important;
    mask:none!important;

    -webkit-mask-composite:initial!important;
    mask-composite:initial!important;

    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;

    background:
      linear-gradient(
        112deg,
        rgba(255,255,255,.070),
        transparent 24% 76%,
        rgba(255,255,255,.035)
      )!important;

    opacity:.38!important;
  }

  /* никаких дополнительных outline у конкретных состояний */
  #m8h10.menu-open .m8h10__bar,
  #m8h10.menu-open .m8h10__menu-card{
    border-width:.65px!important;
    border-color:rgba(255,255,255,.165)!important;
    outline:0!important;
  }
}

@media(max-width:640px){

  #m8h10 .m8h10__bar.m8x-mobile-glass-stable,
  #m8bn6 .m8bn6__glass.m8x-mobile-glass-stable{
    border-width:.65px!important;
  }

  /* На светлом фоне — всё равно одна единственная линия. */
  #m8h10.m8-on-light .m8h10__bar.m8x-mobile-glass-stable,
  #m8bn6.m8-on-light .m8bn6__glass.m8x-mobile-glass-stable{
    border:
      .65px solid
      rgba(16,18,20,.085)!important;

    box-shadow:
      inset 0 .45px 0 rgba(255,255,255,.54),
      0 11px 28px rgba(16,18,20,.095),
      0 0 14px rgba(255,255,255,.12)!important;
  }

  #m8h10.m8-on-light .m8h10__bar.m8x-mobile-glass-stable::before,
  #m8bn6.m8-on-light .m8bn6__glass.m8x-mobile-glass-stable::before{
    border:0!important;
    background:
      linear-gradient(
        112deg,
        rgba(255,255,255,.20),
        transparent 27% 76%,
        rgba(16,18,20,.016)
      )!important;
    opacity:.35!important;
  }
}