:root{
  --bg: #0b1220;
  --bg2:#0a0f1b;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.14);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);
  --muted2: rgba(255,255,255,.5);

  --c1:#6EE7FF;
  --c2:#A78BFA;
  --c3:#34D399;
  --warn:#FBBF24;

  --radius: 18px;
  --shadow: 0 16px 50px rgba(0,0,0,.45);
  --shadow2: 0 12px 30px rgba(0,0,0,.35);

  --container: 1100px;
}

[data-theme="light"]{
  --bg: #f6f7fb;
  --bg2:#eef1f8;
  --card: rgba(0,0,0,.04);
  --card2: rgba(0,0,0,.06);
  --stroke: rgba(0,0,0,.12);
  --text: rgba(0,0,0,.88);
  --muted: rgba(0,0,0,.62);
  --muted2: rgba(0,0,0,.48);
  --shadow: 0 16px 50px rgba(20,30,60,.12);
  --shadow2: 0 12px 30px rgba(20,30,60,.10);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  /* более ровный фон без "пятен" */
  background: var(--bg);
  color: var(--text);
  overflow-x:hidden;
  position: relative;
  isolation: isolate;
}

a{ color: inherit; text-decoration:none; }
.container{
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto;
}

.bg-glow{ display:none !important; }
[data-theme="light"] .header{

  background: transparent;
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  gap: 18px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 230px;
}
.brand__logo{
  display:grid;
  place-items:center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
}
.brand__text{ display:flex; flex-direction:column; line-height:1.1; }
.brand__name{ font-weight: 800; letter-spacing: .2px; }
.brand__tag{ font-size: 12px; color: var(--muted); margin-top: 2px; }

.nav{
  display:flex;
  gap: 18px;
  align-items:center;
}
.nav__link{
  font-weight: 700;
  font-size: 14px;
  color: var(--muted);
  padding: 10px 10px;
  border-radius: 12px;
  transition: .2s ease;
}
.nav__link:hover{
  color: var(--text);
  background: var(--card);
  border: 1px solid transparent;
}

.header__actions{
  display:flex;
  gap: 10px;
  align-items:center;
}

.btn{
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 10px 14px;
  background: var(--card);
  color: var(--text);
  font-weight: 800;
  font-size: 14px;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  cursor:pointer;
  transition: .18s ease;
  user-select:none;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow2);
  background: var(--card2);
}
.btn:active{ transform: translateY(0); box-shadow: none; }
.btn__icon{ opacity: .9; }

.btn--primary{
  border-color: rgba(110,231,255,.40);
  background: linear-gradient(135deg, rgba(110,231,255,.22), rgba(167,139,250,.18), rgba(52,211,153,.18));
  position: relative;
}
.btn--primary::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  pointer-events:none;
}
.btn--ghost{
  background: transparent;
}
.btn--big{ padding: 12px 16px; border-radius: 16px; }
.btn--small{ padding: 9px 12px; border-radius: 13px; font-weight: 800; font-size: 13px; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

.burger{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: var(--card);
  cursor:pointer;
  padding: 10px;
}
.burger span{
  display:block;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  margin: 5px 0;
  opacity: .8;
}

.mobile{
  display:none;
  border-top: 1px solid var(--stroke);
  padding: 14px 0 18px;
  background: rgba(0,0,0,.12);
}
[data-theme="light"] .mobile{ background: rgba(255,255,255,.55); }
.mobile__inner{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.mobile__link{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: var(--card);
  font-weight: 800;
  color: var(--text);
}
.mobile__row{
  display:flex;
  gap: 10px;
}

/* HERO */
.hero{
  position: relative;
  z-index: 1;
  padding: 64px 0 36px;
}
.hero__inner{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items: start;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--card);
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}
.badge__dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c1), var(--c2), var(--c3));
  box-shadow: 0 0 0 4px rgba(110,231,255,.10);
}

.hero__title{
  margin: 18px 0 12px;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.05;
  letter-spacing: -.6px;
}
.hero__subtitle{
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  max-width: 56ch;
}
.accent{
  background: linear-gradient(135deg, var(--c1), var(--c2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.accent2{
  background: linear-gradient(135deg, var(--c2), var(--c3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.accent3{
  background: linear-gradient(135deg, var(--c3), var(--c1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__cta{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0 18px;
}
.hero__chips{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}

/* Preview Card */
.preview{
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: var(--shadow);
  overflow:hidden;
  position: sticky;
  top: 88px;
}
.preview__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px;
  border-bottom: 1px solid var(--stroke);
  background: rgba(0,0,0,.10);
}
[data-theme="light"] .preview__top{ background: rgba(255,255,255,.5); }
.dots{ display:flex; gap: 8px; }
.dots span{
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.18);
}
[data-theme="light"] .dots span{ background: rgba(0,0,0,.10); border-color: rgba(0,0,0,.08); }

.preview__title{ font-weight: 900; font-size: 14px; color: var(--text); opacity: .9; }
.preview__pill{
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(110,231,255,.35);
  background: rgba(110,231,255,.10);
  color: var(--text);
}

.preview__body{
  padding: 16px;
  display:grid;
  gap: 14px;
}
.lamp{
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  padding: 14px;
}
.lamp__hint{
  font-weight: 900;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 10px;
}
.lamp__circle{
  width: 100%;
  height: 94px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(140px 90px at 30% 35%, rgba(110,231,255,.14), transparent 60%),
    radial-gradient(180px 120px at 70% 60%, rgba(52,211,153,.10), transparent 60%),
    linear-gradient(180deg, rgba(20,30,55,.7), rgba(20,30,55,.35));
  position: relative;
  overflow:hidden;
}
.lamp__circle::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle, rgba(52,211,153,.35), transparent 55%);
  transform: translateX(-40%) translateY(-10%);
  animation: glowMove 6s ease-in-out infinite;
  opacity:.7;
}
@keyframes glowMove{
  0%{ transform: translateX(-45%) translateY(-10%); }
  50%{ transform: translateX(10%) translateY(10%); }
  100%{ transform: translateX(-45%) translateY(-10%); }
}

.lamp__meta{
  display:flex;
  justify-content:space-between;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}
.lamp__meta b{ color: var(--text); }

.mini{ display:grid; gap: 12px; }
.mini__row{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.statCard{
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  padding: 12px 12px;
}
.statCard__label{ color: var(--muted); font-weight: 900; font-size: 12px; }
.statCard__value{ font-weight: 1000; font-size: 22px; margin-top: 6px; }

.bar{
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  padding: 12px 12px;
}
.bar__label{ color: var(--muted); font-weight: 900; font-size: 12px; margin-bottom: 8px; }
.bar__track{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.bar__fill{
  height: 100%;
  width: 72%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(110,231,255,.75), rgba(167,139,250,.65), rgba(52,211,153,.65));
  animation: fillPulse 2.6s ease-in-out infinite;
}
@keyframes fillPulse{
  0%,100%{ filter: brightness(1); transform: scaleX(1); }
  50%{ filter: brightness(1.15); transform: scaleX(1.02); }
}

.kbd{
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  padding: 12px 12px 14px;
}
.kbd__label{
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
  margin-bottom: 10px;
}
.kbd__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.kbd__grid span{
  display:grid;
  place-items:center;
  height: 36px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  font-weight: 1000;
  color: var(--text);
  position:relative;
  overflow:hidden;
}
.kbd__grid span::after{
  content:"";
  position:absolute;
  inset:-60%;
  background: radial-gradient(circle, rgba(167,139,250,.22), transparent 55%);
  opacity:.0;
  transition: .2s ease;
}
.kbd__grid span:nth-child(2)::after,
.kbd__grid span:nth-child(6)::after,
.kbd__grid span:nth-child(9)::after{
  opacity:.6;
}
.kbd__grid .zero{
  grid-column: 2;
}

.preview__bottom{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  padding: 14px 14px 16px;
  border-top: 1px solid var(--stroke);
  background: rgba(0,0,0,.06);
}
[data-theme="light"] .preview__bottom{ background: rgba(255,255,255,.4); }

/* Sections */
.section{
  padding: 54px 0;
  position: relative;
  z-index:1;

  background: transparent;
}
.section--soft{
border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: transparent;
}
[data-theme="light"] .section--soft{
border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: transparent;
}
.section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 18px;
  margin-bottom: 18px;
  flex-wrap:wrap;
}
.section__title{
  margin:0;
  font-size: 28px;
  letter-spacing: -.3px;
}
.section__subtitle{
  margin:0;
  color: var(--muted);
  max-width: 66ch;
  line-height: 1.6;
}

.grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.card{
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  padding: 14px;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: .18s ease;
  min-height: 240px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow2);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
}
.card__icon{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.04);
  font-size: 18px;
}
.card__title{
  margin: 2px 0 0;
  font-size: 16px;
  letter-spacing: -.1px;
}
.card__text{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.card__meta{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}
.pill{
  font-size: 12px;
  font-weight: 900;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--muted);
}
.pill--shine{
  border-color: rgba(110,231,255,.35);
  background: rgba(110,231,255,.10);
  color: var(--text);
}

.card__btn{
  margin-top: 10px;
  width: 100%;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-weight: 1000;
  cursor:not-allowed;
}

/* Stats */
.stats{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
}
.bigStat{
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: linear-gradient(135deg, rgba(110,231,255,.12), rgba(167,139,250,.10), rgba(52,211,153,.10));
  box-shadow: var(--shadow2);
  padding: 18px;
}
.bigStat__label{ color: var(--muted); font-weight: 1000; font-size: 13px; }
.bigStat__value{
  font-size: 46px;
  font-weight: 1000;
  letter-spacing: -1px;
  margin-top: 6px;
}
.bigStat__value span{ font-size: 18px; color: var(--muted); margin-left: 6px; }
.bigStat__hint{ color: var(--muted); margin-top: 6px; }

.row{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.miniStat{
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  padding: 14px;
}
.miniStat__label{ color: var(--muted); font-weight: 900; font-size: 12px; }
.miniStat__value{ font-weight: 1000; font-size: 24px; margin-top: 6px; }

.chartMock{
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  padding: 16px;
  height: 100%;
}
.chartMock__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.chartMock__title{ font-weight: 1000; }
.chartMock__sub{ color: var(--muted); font-size: 13px; margin-top: 2px; }
.bars{
  height: 180px;
  display:flex;
  align-items:flex-end;
  gap: 10px;
  padding: 14px 6px 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.bars span{
  flex:1;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(110,231,255,.30), rgba(167,139,250,.22), rgba(52,211,153,.20));
  animation: barWiggle 3.6s ease-in-out infinite;
}
.bars span:nth-child(2){ animation-delay: .1s; }
.bars span:nth-child(3){ animation-delay: .2s; }
.bars span:nth-child(4){ animation-delay: .3s; }
.bars span:nth-child(5){ animation-delay: .4s; }
.bars span:nth-child(6){ animation-delay: .5s; }
.bars span:nth-child(7){ animation-delay: .6s; }

@keyframes barWiggle{
  0%,100%{ filter: brightness(1); transform: translateY(0); }
  50%{ filter: brightness(1.15); transform: translateY(-2px); }
}

.chartMock__foot{
  display:flex;
  justify-content:space-between;
  margin-top: 10px;
  color: var(--muted2);
  font-size: 12px;
  font-weight: 900;
}

.about{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.about__card{
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  padding: 16px;
}
.about__card h3{
  margin: 0 0 8px;
  letter-spacing: -.2px;
}
.about__card p{
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

/* Footer */
.footer{
  border-top: 1px solid var(--stroke);
  padding: 22px 0;
  position: relative;
  z-index:1;

  background: transparent;
}
[data-theme="light"] .footer{

  background: transparent;
}
[data-theme="light"] .footer{ background: rgba(255,255,255,.55); }
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  flex-wrap:wrap;
}
.footer__brand{ font-weight: 1000; }
.footer__copy{ color: var(--muted); font-size: 13px; margin-top: 4px; }
.footer__right{ display:flex; align-items:center; gap: 10px; color: var(--muted); font-weight: 900; }
.footer__link{ color: var(--muted); }
.footer__link:hover{ color: var(--text); }
.footer__sep{ opacity:.5; }

/* Responsive */
@media (max-width: 980px){
  .hero__inner{ grid-template-columns: 1fr; }
  .preview{ position: relative; top: 0; }
  .grid{ grid-template-columns: repeat(2, 1fr); }
  .stats{ grid-template-columns: 1fr; }
  .about{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .nav{ display:none; }
  .header__actions{ display:none; }
  .burger{ display:block; }
  .mobile.show{ display:block; }
  .grid{ grid-template-columns: 1fr; }
  .row{ grid-template-columns: 1fr; }
}
/* Лёгкая анимация логотипа-поезда */
.brand__logo .logoTrain .train{
  transform-box: fill-box;
  transform-origin: center;
  animation: trainMove 1.1s ease-in-out infinite;
}

.brand__logo .logoTrain .wheel{
  transform-box: fill-box;
  transform-origin: center;
  animation: wheelSpin .9s linear infinite;
}

.brand__logo .logoTrain .smoke{
  transform-box: fill-box;
  transform-origin: center;
  animation: smokePuff 1.4s ease-in-out infinite;
}

/* Микро-движение поезда (как будто едет) */
@keyframes trainMove{
  0%   { transform: translateX(-0.6px) translateY(0.2px); }
  50%  { transform: translateX(0.8px)  translateY(-0.2px); }
  100% { transform: translateX(-0.6px) translateY(0.2px); }
}

/* Крутятся колёса */
@keyframes wheelSpin{
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Дымок “дышит” */
@keyframes smokePuff{
  0%   { transform: translateY(0px); opacity: .55; }
  50%  { transform: translateY(-1.2px); opacity: .85; }
  100% { transform: translateY(0px); opacity: .55; }
}

/* Уважение настройки "уменьшить анимации" */
@media (prefers-reduced-motion: reduce){
  .brand__logo .logoTrain .train,
  .brand__logo .logoTrain .wheel,
  .brand__logo .logoTrain .smoke{
    animation: none !important;
  }
}


/* чуть более ровный ритм отступов */
.hero{ padding: 64px 0 44px; }
.section{ padding: 64px 0; }
.section__head{ margin-bottom: 22px; }


/* ====== TRAINING SCREEN (правый "монитор") ====== */
.modeSwitch{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.modeBtn{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-weight: 900;
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: .18s ease;
}
.modeBtn:hover{
  color: var(--text);
  background: var(--card);
  transform: translateY(-1px);
}
.modeBtn.is-active{
  color: var(--text);
  border-color: rgba(110,231,255,.45);
  background: linear-gradient(135deg, rgba(110,231,255,.16), rgba(167,139,250,.12), rgba(52,211,153,.12));
}

.screen{
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: var(--shadow);
  overflow: hidden;
  position: sticky;
  top: 88px;
}
.screen__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px;
  border-bottom: 1px solid var(--stroke);
  background: rgba(0,0,0,.10);
}
[data-theme="light"] .screen__top{ background: rgba(255,255,255,.5); }

.screen__title{ font-weight: 900; font-size: 14px; color: var(--text); opacity: .9; }
.screen__pill{
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(110,231,255,.35);
  background: rgba(110,231,255,.10);
  color: var(--text);
}

.screen__body{ padding: 16px; }

/* Панели: показываем только активную */
.screenPanel{ display:none; }
.screenPanel.is-active{ display:block; }

.panelHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.panelKicker{
  font-weight: 1000;
  color: var(--muted);
  font-size: 12px;
}
.panelTitle{
  font-weight: 1000;
  font-size: 16px;
  margin-top: 2px;
}
.panelMeta{ display:flex; gap: 8px; flex-wrap: wrap; }

.panelActions{
  display:flex;
  gap: 10px;
  margin-top: 12px;
}

.screen__bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  padding: 14px 14px 16px;
  border-top: 1px solid var(--stroke);
  background: rgba(0,0,0,.06);
}
[data-theme="light"] .screen__bottom{ background: rgba(255,255,255,.4); }
.screenHint{
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}

/* Арена для шариков (демо) */
.arena{
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  padding: 14px;
  position: relative;
  overflow: hidden;
  min-height: 140px;
}
.arena__hint{
  font-weight: 900;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 10px;
}
.arena__meta{
  display:flex;
  justify-content:space-between;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}
.arena__meta b{ color: var(--text); }
.arena__bubbles .bubble{
  position:absolute;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.20), rgba(110,231,255,.14), rgba(167,139,250,.10));
  filter: blur(.1px);
  opacity:.9;
  animation: bubbleFloat 4.2s ease-in-out infinite;
}
.arena__bubbles .b1{ left: 14%; top: 40%; animation-delay: .0s; }
.arena__bubbles .b2{ left: 60%; top: 30%; animation-delay: .3s; }
.arena__bubbles .b3{ left: 78%; top: 62%; animation-delay: .6s; }
.arena__bubbles .b4{ left: 35%; top: 70%; animation-delay: .9s; }
@keyframes bubbleFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* Память: блоки рядом */
.memoryGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.symbols{
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  padding: 12px;
}
.symbols__label{
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
  margin-bottom: 10px;
}
.symbols__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.symbols__grid span{
  display:grid;
  place-items:center;
  height: 36px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  font-weight: 1000;
  color: var(--text);
}

@media (max-width: 980px){
  .screen{ position: relative; top: 0; }
}
/* Uniform vignette (same everywhere, no section banding) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(110,231,255,.06), transparent 60%),
    radial-gradient(1100px 650px at 85% 0%, rgba(167,139,250,.06), transparent 62%),
    radial-gradient(1200px 750px at 80% 95%, rgba(52,211,153,.05), transparent 62%),
    radial-gradient(900px 600px at 50% 50%, rgba(0,0,0,.20), transparent 70%);
  opacity: .9;
  z-index: 0;
}
main, header, footer{
  position: relative;
  z-index: 1;
}


/* ===== Реакция: рабочий режим ===== */
.rxPad{ cursor: pointer; display:block; }
.rxPad.rx-red{
  background: radial-gradient(220px 140px at 50% 50%, rgba(239,68,68,.28), rgba(239,68,68,.12), rgba(20,30,55,.45));
  border-color: rgba(239,68,68,.38);
}
.rxPad.rx-green{
  background: radial-gradient(220px 140px at 50% 50%, rgba(34,197,94,.32), rgba(34,197,94,.12), rgba(20,30,55,.45));
  border-color: rgba(34,197,94,.38);
}
.rxResult{
  margin-top: 10px;
  color: var(--muted);
  font-weight: 900;
  font-size: 13px;
}

/* ===== Мышь: разделяем декоративные и игровые шарики ===== */
#msBubbles{ position: relative; height: 100%; }
.demoBubbles{ position: absolute; inset: 0; pointer-events: none; }
.liveBubbles{ position: absolute; inset: 0; pointer-events: none; }
.arena__bubbles .bubble.live{ pointer-events: auto; cursor: pointer; animation: none; }

/* Скрываем декор во время игры */
#msArena.is-running .demoBubbles{ display:none; }

/* HUD-кнопки внутри арены (видны в fullscreen) */
.fsHud{
  display:none;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 10px;
  position: relative;
  z-index: 6;
}
#msArena:fullscreen .fsHud{ display:flex; }
.fsBtn{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  color: var(--text);
  font-weight: 900;
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 14px;
  cursor: pointer;
  transition: .18s ease;
}
.fsBtn:hover{ transform: translateY(-1px); background: var(--card); }
.fsBtn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.fsHint{
  width: 100%;
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
  margin-top: 4px;
}

/* В fullscreen даём место HUD, чтобы шарики не перекрывали кнопки */
#msArena:fullscreen .demoBubbles,
#msArena:fullscreen .liveBubbles{ top: 86px; }
#msArena:fullscreen .arena__meta{ position: relative; z-index: 6; }

/* Более яркие игровые шарики (тёмная/светлая темы) */
.arena__bubbles .bubble.live{
  border: 1px solid rgba(255,255,255,.26);
  background:
    radial-gradient(circle at 28% 28%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.18) 22%, transparent 45%),
    radial-gradient(circle at 35% 35%, rgba(110,231,255,.42), rgba(167,139,250,.30), rgba(52,211,153,.26));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 10px 22px rgba(0,0,0,.22),
    0 0 26px rgba(110,231,255,.22),
    0 0 22px rgba(167,139,250,.18);
  opacity: .98;
}
[data-theme="light"] .arena__bubbles .bubble.live{
  border-color: rgba(0,0,0,.12);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.08),
    0 10px 22px rgba(20,30,60,.16),
    0 0 22px rgba(110,231,255,.22),
    0 0 18px rgba(167,139,250,.18);
}
.bubble.demo{ opacity: .40; }

/* ===== Память: переключатель под-режима ===== */
.subSwitch{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 2px 0 12px;
}
.subBtn{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-weight: 900;
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: .18s ease;
}
.subBtn:hover{ color: var(--text); background: var(--card); transform: translateY(-1px); }
.subBtn.is-active{
  color: var(--text);
  border-color: rgba(167,139,250,.45);
  background: linear-gradient(135deg, rgba(167,139,250,.16), rgba(110,231,255,.10));
}

.memoryWrap{ display:block; }
.memoryPanel{ display:none; }
.memoryPanel.is-active{ display:block; }

.memInfo{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}
.memInfo b{ color: var(--text); }
.memStatus{
  margin-top: 10px;
  color: var(--muted);
  font-weight: 900;
  font-size: 13px;
}

/* Домофон: кнопки */
#memPad .key{
  all: unset;
  display:grid;
  place-items:center;
  height: 36px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  font-weight: 1000;
  color: var(--text);
  position:relative;
  overflow:hidden;
  cursor: pointer;
}
#memPad .key:active{ transform: scale(.99); }
#memPad .key.is-flash{
  border-color: rgba(110,231,255,.55);
  background: linear-gradient(135deg, rgba(110,231,255,.22), rgba(167,139,250,.18), rgba(52,211,153,.18));
}
#memPad .key.is-wrong{
  border-color: rgba(239,68,68,.55);
  background: rgba(239,68,68,.14);
}

/* Кубики */
.cubesTop{ display:grid; gap: 8px; margin-bottom: 10px; }
.cubesHint{ color: var(--muted); font-weight: 900; font-size: 13px; }
.cubesMeta{
  display:flex; flex-wrap:wrap; gap: 10px;
  color: var(--muted); font-weight: 900; font-size: 13px;
}
.cubesMeta b{ color: var(--text); }
.cubesGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.cube{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  height: 42px;
  display:grid;
  place-items:center;
  font-weight: 1000;
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
  transition: .15s ease;
}
.cube:hover{ transform: translateY(-1px); background: rgba(255,255,255,.07); }
.cube:active{ transform: translateY(0); }
.cube.is-hidden{ color: transparent; }
.cube.is-matched{
  border-color: rgba(52,211,153,.45);
  background: rgba(52,211,153,.12);
}
.cube.is-open{
  border-color: rgba(110,231,255,.45);
  background: rgba(110,231,255,.10);
}
[data-theme="light"] .cube{
  border-color: rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
}
[data-theme="light"] .cube.is-matched{ background: rgba(52,211,153,.12); }


/* Домофон: 0 по центру (под 8) */
#memPad .key.zero{ grid-column: 2; }


/* Кубики: делаем символы крупнее и контрастнее */
.cube{
  font-size: 20px;
  line-height: 1;
  color: var(--text);
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}
[data-theme="light"] .cube{
  color: #0b1020;
  text-shadow: none;
}
.cube.is-hidden{
  color: transparent;
  text-shadow: none;
}


/* Верхняя плашка "монитора": минимализм (без троеточия) */
.screen__dots,
.preview__dots,
.dots{
  display:none !important;
}
.screen__top{
  gap: 10px;
  padding: 12px 14px;
}
.screen__title{
  font-size: 13px;
  font-weight: 900;
  opacity: .92;
}
.screen__pill{
  font-size: 11px;
  padding: 5px 9px;
}


.screen__top{ justify-content:center; }
#screenTitle{ width:100%; text-align:center; }


.bars,.chartMock__foot{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;align-items:end;}
.chartMock__foot{margin-top:10px;align-items:start;text-align:center;}
.chartMock__foot span{display:block;font-weight:900;font-size:12px;color:var(--muted);}
.bars span{width:100%;}



.audioCtl{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
}
.vol{
  width: 120px;
  accent-color: currentColor;
}
.iconBtn{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--text);
  border-radius: 14px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 1000;
}
.iconBtn:hover{ background: rgba(255,255,255,.06); transform: translateY(-1px); }
.iconBtn:active{ transform: translateY(0); }

/* ===== Game row (слайдер) ===== */
.gameRow{
  margin-top: 10px;
  display:flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.gameRow__label{
  color: var(--muted);
  font-weight: 900;
  font-size: 13px;
}
.gameRow__ctrl{
  display:flex;
  align-items:center;
  gap: 10px;
}
.gameRow__ctrl input[type="range"]{ width: 160px; }
.gameRow__value{ color: var(--text); font-weight: 1000; font-size: 13px; }

/* ===== Modal ===== */
.modal{ position: fixed; inset: 0; display:none; z-index: 50; }
.modal.is-open{ display:block; }
.modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.62); }
.modal__card{
  position: relative;
  max-width: 520px;
  margin: 7vh auto;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  padding: 14px;
}
.modal__head{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 10px;
}
.modal__kicker{ color: var(--muted); font-weight: 1000; font-size: 12px; }
.modal__title{ color: var(--text); font-weight: 1000; font-size: 18px; }
.modal__body{ padding: 6px; }
.modal__foot{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  padding: 10px 6px 4px;
}
.setGroup{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 12px;
}
.setGroup__title{ font-weight: 1000; margin-bottom: 10px; }
.setLine{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 8px 0;
  color: var(--text);
  font-weight: 800;
}
.setLine input{ width: 16px; height: 16px; }
.setHint{ margin-top: 10px; color: var(--muted); font-weight: 900; font-size: 12px; }


/* ===== Настройки: слайдер частоты шариков ===== */
.setDivider{
  height: 1px;
  background: var(--stroke);
  opacity: .9;
  margin: 10px 0;
}
.setRow{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content: space-between;
}
.setRow__label{
  color: var(--muted);
  font-weight: 900;
  font-size: 13px;
  min-width: 140px;
}
.setRow__ctrl{
  display:flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.setRow__meta{
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
}

/* ===== Громкость: делаем ползунок читаемым в тёмной/светлой теме ===== */
.audioCtl{
  background: var(--card);
}
.vol{
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid var(--stroke);
  outline: none;
}
[data-theme="light"] .vol{
  background: rgba(0,0,0,.08);
}
.vol::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--card);
  box-shadow: 0 6px 14px rgba(0,0,0,.22);
  cursor: pointer;
}
.vol::-moz-range-thumb{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--card);
  box-shadow: 0 6px 14px rgba(0,0,0,.22);
  cursor: pointer;
}
.vol::-moz-range-track{
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid var(--stroke);
}
[data-theme="light"] .vol::-moz-range-track{
  background: rgba(0,0,0,.08);
}


/* ===== Громкость: повышаем контраст ползунка ===== */
.vol{
  background: rgba(255,255,255,.22);
}
[data-theme="light"] .vol{
  background: rgba(0,0,0,.16);
}
.vol::-webkit-slider-thumb{
  background: rgba(255,255,255,.92);
}
[data-theme="light"] .vol::-webkit-slider-thumb{
  background: rgba(15,20,35,.88);
}
.vol::-moz-range-thumb{
  background: rgba(255,255,255,.92);
}
[data-theme="light"] .vol::-moz-range-thumb{
  background: rgba(15,20,35,.88);
}
.vol::-moz-range-track{
  background: rgba(255,255,255,.22);
}
[data-theme="light"] .vol::-moz-range-track{
  background: rgba(0,0,0,.16);
}

/* ===== Header: громкость ===== */
.audioCtl{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:16px;border:1px solid var(--stroke);background:var(--card);}
.iconBtn{border:1px solid var(--stroke);background:rgba(255,255,255,.04);color:var(--text);border-radius:14px;padding:8px 10px;cursor:pointer;font-weight:1000;}
.iconBtn:hover{background:rgba(255,255,255,.06);transform:translateY(-1px);}
.iconBtn:active{transform:translateY(0);}
.vol{-webkit-appearance:none;appearance:none;width:120px;height:6px;border-radius:999px;background:rgba(255,255,255,.22);border:1px solid var(--stroke);outline:none;}
[data-theme="light"] .vol{background:rgba(0,0,0,.16);}
.vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.92);box-shadow:0 6px 14px rgba(0,0,0,.22);cursor:pointer;}
[data-theme="light"] .vol::-webkit-slider-thumb{background:rgba(15,20,35,.88);}
.vol::-moz-range-thumb{width:16px;height:16px;border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.92);box-shadow:0 6px 14px rgba(0,0,0,.22);cursor:pointer;}
[data-theme="light"] .vol::-moz-range-thumb{background:rgba(15,20,35,.88);}
.vol::-moz-range-track{height:6px;border-radius:999px;background:rgba(255,255,255,.22);border:1px solid var(--stroke);}
[data-theme="light"] .vol::-moz-range-track{background:rgba(0,0,0,.16);}

/* ===== Modal ===== */
.modal{position:fixed;inset:0;display:none;z-index:50;}
.modal.is-open{display:block;}
.modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.62);}
.modal__card{position:relative;max-width:520px;margin:7vh auto;background:var(--card);border:1px solid var(--stroke);border-radius:22px;box-shadow:0 18px 60px rgba(0,0,0,.35);padding:14px;}
.modal__head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 6px 10px;}
.modal__kicker{color:var(--muted);font-weight:1000;font-size:12px;}
.modal__title{color:var(--text);font-weight:1000;font-size:18px;}
.modal__body{padding:6px;}
.modal__foot{display:flex;justify-content:flex-end;gap:10px;padding:10px 6px 4px;}
.setGroup{border:1px solid var(--stroke);background:rgba(255,255,255,.03);border-radius:18px;padding:12px;}
.setGroup__title{font-weight:1000;margin-bottom:10px;}
.setLine{display:flex;gap:10px;align-items:center;padding:8px 0;color:var(--text);font-weight:800;}
.setLine input{width:16px;height:16px;}
.setHint{margin-top:10px;color:var(--muted);font-weight:900;font-size:12px;}
.setDivider{height:1px;background:var(--stroke);opacity:.9;margin:10px 0;}
.setRow{display:flex;gap:12px;align-items:center;justify-content:space-between;}
.setRow__label{color:var(--muted);font-weight:900;font-size:13px;min-width:140px;}
.setRow__ctrl{display:flex;flex-direction:column;gap:6px;flex:1;}
.setRow__meta{color:var(--muted);font-weight:900;font-size:12px;}


/* ===== Модалка: блюр фона ===== */
.modal__backdrop{
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}