/* ===== REAL preview V2 DOM neon bg: left/back ===== */
/* Фон как в preview: V собрана слоями, UI-кнопки/контуры/шрифт/иконки не трогаем. */

body {
  background: #02050a !important;
}

/* Убираем старый SVG-фон, который перебивал ощущение варианта 2 */
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 78% 18%, rgba(0,220,255,.08), transparent 22%),
    radial-gradient(circle at 18% 80%, rgba(190,70,255,.08), transparent 26%),
    #02050a !important;
  opacity: 1 !important;
  filter: none !important;
  animation: none !important;
  transform: none !important;
}

body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 78% 18%, rgba(0,220,255,.12), transparent 28%),
    linear-gradient(90deg, rgba(0,0,0,.20), transparent 35%, rgba(0,0,0,.28)) !important;
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}

/* Старый отдельный boot-glow отключаем, теперь мерцает сама V */
.cyber-boot-glow {
  display: none !important;
}

.pv-v-bg {
  --v-size: 720px;
  --v-left: -210px;
  --v-top: 180px;
  --v-right: auto;
  --v-bottom: auto;
  --v-rotate: 8deg;

  --tube-left: calc(-210px + 80px);
  --tube-top: calc(180px + 90px);

  --glow-x: 17%;
  --glow-y: 48%;
  --bloom-x: 18%;
  --bloom-y: 46%;
  --bloom2-x: 24%;
  --bloom2-y: 55%;

  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.pv-v-glow,
.pv-v-outline,
.pv-v-tube,
.pv-v-bloom,
.pv-v-noise {
  position: absolute;
  pointer-events: none;
}

.pv-v-outline {
  width: var(--v-size);
  height: var(--v-size);
  left: var(--v-left);
  right: var(--v-right);
  top: var(--v-top);
  bottom: var(--v-bottom);
  transform: rotate(var(--v-rotate));
  opacity: .36;
  filter:
    drop-shadow(0 0 18px rgba(17,122,255,.45))
    drop-shadow(0 0 48px rgba(0,146,255,.24));
  animation: pvVOutlineBoot 2200ms linear both;
}

.pv-v-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(14% 0, 41% 0, 50% 44%, 59% 0, 86% 0, 60% 100%, 40% 100%);
  background:
    linear-gradient(180deg, rgba(95,185,255,.84), rgba(7,54,127,.86)),
    linear-gradient(90deg, rgba(255,255,255,.18), transparent 26%, rgba(255,255,255,.06) 52%, transparent 80%);
  box-shadow:
    inset 0 0 0 2px rgba(180,228,255,.38),
    inset 0 0 24px rgba(0,130,255,.22);
}

.pv-v-outline::after {
  content: "";
  position: absolute;
  inset: 10%;
  clip-path: polygon(18% 0, 40% 0, 50% 48%, 60% 0, 82% 0, 59% 100%, 41% 100%);
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.35), transparent 8%),
    radial-gradient(circle at 80% 18%, rgba(255,255,255,.35), transparent 8%),
    linear-gradient(180deg, rgba(0,25,64,.42), rgba(0,12,28,.74));
  box-shadow:
    inset 0 0 0 1px rgba(134,214,255,.18),
    inset 0 0 28px rgba(24,95,255,.24);
  opacity: .95;
}

.pv-v-tube {
  width: calc(var(--v-size) * .72);
  height: calc(var(--v-size) * .72);
  left: var(--tube-left);
  top: var(--tube-top);
  transform: rotate(var(--v-rotate));
  opacity: .88;
  filter: drop-shadow(0 0 18px rgba(69,208,255,.65));
}

.pv-v-tube::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(24% 0, 37% 0, 50% 54%, 63% 0, 76% 0, 56% 100%, 44% 100%, 50% 70%);
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.55) 0%,
      rgba(255,255,255,.95) 18%,
      rgba(125,227,255,.98) 36%,
      rgba(255,255,255,.98) 54%,
      rgba(120,220,255,.85) 72%,
      rgba(30,150,255,.70) 100%);
  box-shadow:
    0 0 12px rgba(117,229,255,.92),
    0 0 28px rgba(49,190,255,.85),
    0 0 60px rgba(18,135,255,.55),
    0 0 110px rgba(18,135,255,.30);
  animation: pvVTubeFlicker 2200ms linear both;
}

.pv-v-glow {
  width: 78vw;
  height: 78vw;
  left: var(--glow-x);
  top: var(--glow-y);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(68,210,255,.34), rgba(19,112,255,.13) 34%, transparent 68%);
  filter: blur(18px);
  opacity: .78;
  mix-blend-mode: screen;
  animation: pvVGlowFlicker 2200ms linear both;
}

.pv-v-bloom {
  inset: 0;
  background:
    radial-gradient(circle at var(--bloom-x) var(--bloom-y), rgba(55,205,255,.28), transparent 24%),
    radial-gradient(circle at var(--bloom2-x) var(--bloom2-y), rgba(128,66,255,.14), transparent 27%);
  opacity: .76;
  animation: pvVBloomBoot 2200ms linear both;
}

.pv-v-noise {
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.38)),
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.022) 0px,
      rgba(255,255,255,.022) 1px,
      transparent 1px,
      transparent 7px
    );
  opacity: .34;
}

/* Контент всегда поверх V */
.app,
.preview-content,
#cabinet,
.screen {
  position: relative;
  z-index: 1;
}

@keyframes pvVTubeFlicker {
  0%   { opacity: .05; filter: brightness(.20) drop-shadow(0 0 0 rgba(69,208,255,0)); }
  4%   { opacity: .95; filter: brightness(2.20) drop-shadow(0 0 32px rgba(69,208,255,.85)); }
  7%   { opacity: .12; filter: brightness(.32); }
  11%  { opacity: 1; filter: brightness(2.45) drop-shadow(0 0 44px rgba(69,208,255,1)); }
  15%  { opacity: .25; filter: brightness(.52); }
  22%  { opacity: .92; filter: brightness(1.65) drop-shadow(0 0 34px rgba(69,208,255,.82)); }
  29%  { opacity: .44; filter: brightness(.82); }
  38%  { opacity: 1; filter: brightness(1.45) drop-shadow(0 0 28px rgba(69,208,255,.72)); }
  54%  { opacity: .82; filter: brightness(1.05); }
  66%  { opacity: .96; filter: brightness(1.22); }
  100% { opacity: .88; filter: brightness(1.08) drop-shadow(0 0 18px rgba(69,208,255,.65)); }
}

@keyframes pvVOutlineBoot {
  0%   { opacity: .03; }
  4%   { opacity: .48; }
  7%   { opacity: .08; }
  11%  { opacity: .52; }
  15%  { opacity: .16; }
  28%  { opacity: .44; }
  100% { opacity: .36; }
}

@keyframes pvVGlowFlicker {
  0%   { opacity: .02; transform: translate(-50%, -50%) scale(.95); }
  4%   { opacity: .92; transform: translate(-50%, -50%) scale(1.05); }
  7%   { opacity: .08; }
  11%  { opacity: 1; transform: translate(-50%, -50%) scale(1.07); }
  15%  { opacity: .18; }
  28%  { opacity: .82; }
  100% { opacity: .78; transform: translate(-50%, -50%) scale(1); }
}

@keyframes pvVBloomBoot {
  0%   { opacity: .03; }
  4%   { opacity: .78; }
  7%   { opacity: .12; }
  11%  { opacity: .86; }
  15%  { opacity: .20; }
  28%  { opacity: .76; }
  100% { opacity: .76; }
}

@media (max-width: 430px) {
  .pv-v-bg {
    --v-size: 690px;
    --v-left: -230px;
    --v-top: 168px;
    --tube-left: calc(-230px + 78px);
    --tube-top: calc(168px + 88px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pv-v-outline,
  .pv-v-tube::before,
  .pv-v-glow,
  .pv-v-bloom {
    animation: none !important;
  }
}

/* ===== remove old cyber background layer completely ===== */
/* Старый фон больше не должен существовать отдельным слоем.
   Новый фон теперь только .pv-v-bg, UI остается поверх него. */

body {
  background:
    radial-gradient(circle at 78% 18%, rgba(0,220,255,.08), transparent 22%),
    radial-gradient(circle at 18% 80%, rgba(190,70,255,.08), transparent 26%),
    #02050a !important;
}

/* Полностью гасим старые псевдо-фоны */
body::before,
body::after,
.screen::before,
#cabinet::before,
#section::before,
#devices::before,
#apps::before,
#external::before,
#guide::before {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Полностью гасим старый boot-glow слой */
.cyber-boot-glow,
.cyber-boot-glow::before,
.cyber-boot-glow::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}

/* Новый фон должен быть единственным фоновым визуальным слоем */
.pv-v-bg {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 0 !important;
}

/* Всё содержимое строго поверх нового фона */
.app,
.screen,
.cyber-screen,
.cyber-shell,
#cabinet,
#section,
#devices,
#apps,
#external,
#guide {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
}