:root{
  --bg:#080a12;
  --bg2:#0d101a;
  --surface:#111522;
  --surface2:#151a29;
  --surface3:#1b2030;
  --text:#f6f8ff;
  --muted:#8d95a8;
  --muted2:#666f83;
  --line:rgba(255,255,255,.075);
  --purple:#a66cff;
  --purple2:#7048ff;
  --green:#baff4d;
  --green2:#5be28c;
  --cyan:#6de8ff;
  --danger:#ff6d87;
  --shadow:0 24px 70px rgba(0,0,0,.36);
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  width:100%;
  min-height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

body{
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

button,
input,
textarea,
select{
  font:inherit;
}

button{
  border:0;
  outline:0;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:2px solid rgba(166,108,255,.55);
  outline-offset:2px;
}


/* =========================================================
   GLOBAL BACKGROUND
========================================================= */

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.32;
  background:
    linear-gradient(
      rgba(255,255,255,.022) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.022) 1px,
      transparent 1px
    );
  background-size:26px 26px;
  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 88%
    );
}

body::after{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  background:
    radial-gradient(
      circle at 20% 12%,
      rgba(123,77,255,.14),
      transparent 24%
    ),
    radial-gradient(
      circle at 85% 16%,
      rgba(80,238,184,.10),
      transparent 22%
    ),
    radial-gradient(
      circle at 50% 85%,
      rgba(104,93,255,.08),
      transparent 28%
    );
  filter:blur(10px);
}


/* =========================================================
   APP SHELL
========================================================= */

.app-shell{
  position:relative;
  width:100%;
  height:100dvh;
  max-width:560px;
  margin:0 auto;
  overflow:hidden;

  background:
    radial-gradient(
      circle at 8% 16%,
      rgba(171,111,255,.08),
      transparent 24%
    ),
    radial-gradient(
      circle at 92% 30%,
      rgba(70,238,190,.05),
      transparent 20%
    ),
    linear-gradient(
      180deg,
      #0c0f18 0%,
      #090b12 100%
    );
}

.app-shell::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      120deg,
      transparent 0 35%,
      rgba(255,255,255,.015) 48%,
      transparent 61%
    );
  transform:translateX(-30%);
  animation:sheen 14s linear infinite;
}

.app-shell::after{
  content:"VISP • PRIVATE NETWORK • VISP • PRIVATE NETWORK";
  position:absolute;
  right:-140px;
  top:31%;
  transform:rotate(90deg);
  font-size:8px;
  letter-spacing:.32em;
  color:rgba(255,255,255,.025);
  pointer-events:none;
  white-space:nowrap;
}


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

.ambient{
  position:absolute;
  border-radius:999px;
  pointer-events:none;
  filter:blur(2px);
}

.ambient-a{
  width:180px;
  height:180px;
  left:-88px;
  top:92px;
  background:
    radial-gradient(
      circle,
      rgba(166,108,255,.14),
      transparent 68%
    );
  animation:floatA 9s ease-in-out infinite;
}

.ambient-b{
  width:150px;
  height:150px;
  right:-70px;
  top:230px;
  background:
    radial-gradient(
      circle,
      rgba(91,226,140,.10),
      transparent 68%
    );
  animation:floatB 11s ease-in-out infinite;
}

.ambient-c{
  width:210px;
  height:210px;
  right:-100px;
  bottom:-80px;
  background:
    radial-gradient(
      circle,
      rgba(103,232,255,.06),
      transparent 70%
    );
  animation:floatC 13s ease-in-out infinite;
}


/* =========================================================
   TOPBAR
========================================================= */

.topbar{
  position:relative;
  z-index:20;

  height:68px;

  padding:
    calc(10px + env(safe-area-inset-top))
    14px
    8px;

  display:grid;

  grid-template-columns:
    42px
    minmax(0,1fr)
    auto;

  align-items:center;
  gap:10px;

  background:
    linear-gradient(
      180deg,
      rgba(10,12,20,.92),
      rgba(10,12,20,.60)
    );

  border-bottom:
    1px solid rgba(255,255,255,.04);

  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

.topbar::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:0;
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(166,108,255,.35),
      rgba(186,255,77,.16),
      transparent
    );
}

.topbar-icon{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  border-radius:13px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.065),
      rgba(255,255,255,.02)
    );

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

  color:#b7bfd0;
  cursor:pointer;

  box-shadow:
    0 8px 24px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.045);

  transition:
    transform .15s ease,
    border-color .15s ease;
}

.topbar-icon:hover{
  border-color:rgba(166,108,255,.30);
}

.topbar-icon:active{
  transform:scale(.93);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.brand-mark{
  position:relative;

  width:36px;
  height:36px;

  border-radius:12px;

  display:grid;
  place-items:center;

  background:
    linear-gradient(
      145deg,
      #9d68ff,
      #5a4bff
    );

  box-shadow:
    0 0 28px rgba(139,91,255,.25),
    inset 0 1px 0 rgba(255,255,255,.28);

  overflow:hidden;
}

.brand-mark::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:11px;
  border:
    1px solid rgba(255,255,255,.13);
}

.brand-mark span{
  position:relative;
  z-index:1;

  font-size:17px;
  font-weight:950;
  letter-spacing:-.06em;

  color:#fff;
}

.brand-text strong,
.brand-text span{
  display:block;
}

.brand-text strong{
  font-size:14px;
  font-weight:950;
  letter-spacing:-.025em;
}

.brand-text span{
  margin-top:2px;
  font-size:7px;
  font-weight:800;
  letter-spacing:.18em;
  color:#737c91;
}

.topbar-status{
  display:inline-flex;
  align-items:center;
  gap:6px;

  min-height:30px;

  padding:0 9px;

  border-radius:10px;

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

  border:
    1px solid rgba(186,255,77,.10);

  color:#bff36f;

  font-size:7px;
  font-weight:900;
  letter-spacing:.12em;
}

.topbar-status-dot{
  width:6px;
  height:6px;
  border-radius:50%;

  background:var(--green);

  box-shadow:
    0 0 11px rgba(186,255,77,.65);

  animation:
    pulseGreen 2.2s ease-in-out infinite;
}


/* =========================================================
   SCREEN
========================================================= */

.screen-root{
  position:relative;
  z-index:5;

  height:calc(100dvh - 68px);

  overflow-y:auto;

  padding:
    18px
    14px
    118px;

  scrollbar-width:thin;
  scrollbar-color:
    rgba(255,255,255,.10)
    transparent;
}

.screen-root::-webkit-scrollbar{
  width:4px;
}

.screen-root::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.10);
  border-radius:99px;
}

section{
  position:relative;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:6px;

  margin-bottom:6px;

  color:#aa93db;

  font-size:7px;
  font-weight:900;
  letter-spacing:.18em;

  text-transform:uppercase;
}

.eyebrow::before{
  content:"";

  width:5px;
  height:5px;

  border-radius:2px;

  background:
    linear-gradient(
      135deg,
      var(--purple),
      var(--green)
    );

  box-shadow:
    0 0 10px rgba(166,108,255,.35);
}

.page-title,
.welcome h1{
  margin:0;

  color:var(--text);

  font-weight:950;
  letter-spacing:-.045em;
}

.page-title{
  font-size:26px;
}

.welcome{
  margin-bottom:14px;
}

.welcome h1{
  font-size:28px;
}

.page-subtitle{
  margin:6px 0 0;

  color:var(--muted);

  font-size:10px;
  line-height:1.45;

  max-width:390px;
}


/* =========================================================
   GENERIC CARDS
========================================================= */

.card,
.quick-card,
.plan,
.subscription-plan-card,
.device-card,
.platform-card,
.partner-banner,
.subscription-current-card,
.profile-stat-card,
.profile-details-card,
.code-box,
.info-box,
.withdrawal-row{
  position:relative;
  overflow:hidden;

  background:
    linear-gradient(
      145deg,
      rgba(20,24,37,.94),
      rgba(13,16,26,.96)
    );

  border:
    1px solid var(--line);

  box-shadow:
    0 12px 34px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.035);
}

.card::before,
.quick-card::before,
.plan::before,
.subscription-plan-card::before,
.device-card::before,
.platform-card::before,
.partner-banner::before,
.subscription-current-card::before,
.profile-stat-card::before,
.profile-details-card::before,
.code-box::before,
.info-box::before{
  content:"";

  position:absolute;
  left:0;
  right:0;
  top:0;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.12),
      transparent
    );

  opacity:.7;
}

.card{
  border-radius:22px;
  padding:16px;
}


/* =========================================================
   STATUS
========================================================= */

.status{
  display:flex;
  align-items:center;
  gap:8px;

  font-size:10px;
  font-weight:900;
}

.status-dot{
  width:8px;
  height:8px;

  border-radius:50%;

  background:#667084;

  box-shadow:
    0 0 0 4px rgba(102,112,132,.08);
}

.status-dot.active{
  background:var(--green);

  box-shadow:
    0 0 0 4px rgba(186,255,77,.08),
    0 0 16px rgba(186,255,77,.42);
}

.home-vpn-label{
  color:#788195;
  font-size:7px;
  font-weight:900;
  letter-spacing:.13em;
}


/* =========================================================
   VPN HERO
========================================================= */

.vpn-card{
  position:relative;
  overflow:hidden;

  min-height:236px;

  padding:17px;

  border-radius:27px;

  background:
    radial-gradient(
      circle at 94% 2%,
      rgba(166,108,255,.24),
      transparent 31%
    ),
    radial-gradient(
      circle at 3% 97%,
      rgba(91,226,140,.13),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #1a1d2d,
      #10131f 60%,
      #0d111a
    );

  border:
    1px solid rgba(166,108,255,.18);

  box-shadow:
    0 22px 60px rgba(0,0,0,.30),
    0 0 55px rgba(116,74,255,.07),
    inset 0 1px 0 rgba(255,255,255,.055);
}

.vpn-card::before{
  content:"";

  position:absolute;

  width:220px;
  height:220px;

  right:-82px;
  top:-82px;

  border-radius:50%;

  border:
    1px solid rgba(174,121,255,.11);

  box-shadow:
    0 0 0 20px rgba(174,121,255,.025),
    0 0 0 40px rgba(174,121,255,.018);
}

.vpn-card::after{
  content:"";

  position:absolute;

  left:18px;
  bottom:14px;

  width:82px;
  height:30px;

  background:
    radial-gradient(
      circle at 7px 7px,
      rgba(186,255,77,.95) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 27px 18px,
      rgba(166,108,255,.8) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 49px 8px,
      rgba(109,232,255,.7) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 72px 21px,
      rgba(255,255,255,.4) 0 1px,
      transparent 2px
    );

  opacity:.7;
}

.vpn-card-top{
  position:relative;
  z-index:2;

  display:flex;
  align-items:center;
  justify-content:space-between;
}

.vpn-stats{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:1fr 1fr;

  gap:9px;

  margin-top:48px;
}

.stat{
  min-height:61px;

  padding:11px 12px;

  border-radius:16px;

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

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

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03);
}

.stat span,
.stat strong{
  display:block;
}

.stat span{
  color:#7f8799;
  font-size:8px;
  font-weight:700;
}

.stat strong{
  margin-top:5px;

  color:#fff;

  font-size:18px;
  font-weight:950;
  letter-spacing:-.03em;
}


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

.primary-button,
.full-button{
  position:relative;

  width:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:8px;

  min-height:50px;

  margin-top:10px;

  border-radius:16px;

  cursor:pointer;

  font-size:11px;
  font-weight:950;

  transition:
    transform .15s ease,
    filter .15s ease,
    box-shadow .15s ease;
}

.primary-button{
  color:#081006;

  background:
    linear-gradient(
      135deg,
      #d2ff68 0%,
      #9df34e 44%,
      #5be28c 100%
    );

  border:
    1px solid rgba(223,255,190,.3);

  box-shadow:
    0 13px 28px rgba(82,224,110,.16),
    inset 0 1px 0 rgba(255,255,255,.48);
}

.primary-button::after{
  content:"";

  position:absolute;
  inset:1px;

  border-radius:15px;

  background:
    linear-gradient(
      110deg,
      transparent 20%,
      rgba(255,255,255,.22) 46%,
      transparent 70%
    );

  transform:translateX(-120%);

  transition:
    transform .5s ease;
}

.primary-button:hover::after{
  transform:translateX(120%);
}

.primary-button:active,
.full-button:active{
  transform:scale(.975);
}

.full-button{
  color:#e8ebf5;

  background:
    linear-gradient(
      145deg,
      #1b2130,
      #141925
    );

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

  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.035);
}


/* =========================================================
   FREE TRIAL
========================================================= */

.trial-banner{
  position:relative;

  display:grid;

  grid-template-columns:
    42px
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:10px;

  min-height:82px;

  margin-top:11px;

  padding:12px;

  border-radius:21px;

  overflow:hidden;

  cursor:pointer;

  background:
    radial-gradient(
      circle at 5% 90%,
      rgba(186,255,77,.10),
      transparent 26%
    ),
    radial-gradient(
      circle at 98% 0%,
      rgba(166,108,255,.23),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      #251e3e,
      #151826
    );

  border:
    1px solid rgba(166,108,255,.25);

  box-shadow:
    0 15px 40px rgba(0,0,0,.18),
    0 0 35px rgba(120,75,255,.07);

  transition:
    transform .15s ease,
    border-color .15s ease;
}

.trial-banner::before{
  content:"✦  •  ·  ✦  ·  •";

  position:absolute;
  right:12px;
  top:9px;

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

  font-size:11px;
  letter-spacing:7px;

  transform:rotate(-8deg);
}

.trial-banner::after{
  content:"";

  position:absolute;

  width:120px;
  height:120px;

  right:-45px;
  bottom:-62px;

  border-radius:50%;

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

  box-shadow:
    0 0 0 16px rgba(255,255,255,.025),
    0 0 0 32px rgba(255,255,255,.016);
}

.trial-banner:active{
  transform:scale(.985);
}

.trial-banner-icon{
  position:relative;
  z-index:2;

  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  border-radius:14px;

  background:
    linear-gradient(
      145deg,
      rgba(173,122,255,.24),
      rgba(99,72,214,.12)
    );

  border:
    1px solid rgba(196,158,255,.23);

  color:#d5beff;

  box-shadow:
    0 0 22px rgba(160,97,255,.08);
}

.trial-banner-content{
  position:relative;
  z-index:2;

  min-width:0;
}

.trial-banner-content strong,
.trial-banner-content>span{
  display:block;
}

.trial-kicker{
  color:#bba3e7;

  font-size:7px;
  font-weight:900;

  letter-spacing:.10em;
}

.trial-banner-content strong{
  margin-top:4px;

  font-size:14px;
  font-weight:950;
  letter-spacing:-.02em;
}

.trial-banner-content>span:last-child{
  margin-top:4px;

  color:#969eb0;

  font-size:8px;
}

.trial-banner-cta{
  position:relative;
  z-index:2;

  display:flex;
  align-items:center;

  gap:4px;

  padding:0 9px;

  min-height:36px;

  border-radius:11px;

  color:#101407;

  background:
    linear-gradient(
      135deg,
      #d2ff68,
      #80ef72
    );

  font-size:8px;
  font-weight:950;

  box-shadow:
    0 9px 22px rgba(96,226,110,.14),
    inset 0 1px 0 rgba(255,255,255,.4);
}


/* =========================================================
   PARTNER BANNER
========================================================= */

.partner-banner{
  width:100%;
  min-height:74px;

  margin-top:11px;
  padding:12px;

  display:grid;

  grid-template-columns:
    43px
    minmax(0,1fr)
    18px;

  align-items:center;

  gap:10px;

  border-radius:20px;

  text-align:left;
  color:#fff;

  cursor:pointer;

  background:
    radial-gradient(
      circle at 0% 50%,
      rgba(166,108,255,.16),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #171b2a,
      #10131d
    );

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

  transition:
    transform .15s ease,
    border-color .15s ease;
}

.partner-banner:active{
  transform:scale(.987);
}

.partner-banner-icon{
  width:43px;
  height:43px;

  display:grid;
  place-items:center;

  border-radius:14px;

  background:
    rgba(166,108,255,.11);

  border:
    1px solid rgba(166,108,255,.18);

  color:#c9b2ff;

  box-shadow:
    0 0 20px rgba(166,108,255,.06);
}

.partner-banner-content{
  min-width:0;
}

.partner-banner-content strong,
.partner-banner-content span{
  display:block;
}

.partner-banner-content strong{
  font-size:11px;
  font-weight:900;
}

.partner-banner-content span{
  margin-top:4px;

  color:#858da0;

  font-size:8px;
  line-height:1.3;
}

.partner-banner-arrow{
  color:#697184;
}


/* =========================================================
   SECTIONS
========================================================= */

.section{
  margin-top:18px;
}

.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

  margin-bottom:9px;
}

.section-head h2{
  margin:0;

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

  letter-spacing:-.02em;
}

.link-button{
  background:transparent;

  color:#b397ff;

  font-size:8px;
  font-weight:900;

  cursor:pointer;
}


/* =========================================================
   PLANS
========================================================= */

.plans{
  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:9px;
}

.plan{
  min-height:117px;

  padding:
    18px
    11px
    12px;

  border-radius:19px;

  text-align:center;

  cursor:pointer;

  background:
    linear-gradient(
      145deg,
      #141925,
      #0f131d
    );

  transition:
    transform .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

.plan:hover{
  border-color:
    rgba(166,108,255,.26);

  box-shadow:
    0 14px 34px rgba(0,0,0,.24);
}

.plan:active{
  transform:scale(.98);
}

.plan::after{
  content:"";

  position:absolute;

  width:72px;
  height:72px;

  right:-28px;
  top:-28px;

  border-radius:50%;

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

.plan.featured{
  border-color:
    rgba(166,108,255,.32);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(166,108,255,.16),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      #1c1830,
      #121521
    );
}

.plan-badge{
  position:absolute;

  top:7px;
  left:50%;

  transform:translateX(-50%);

  padding:4px 7px;

  border-radius:7px;

  background:
    rgba(166,108,255,.16);

  color:#cfbaff;

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

  font-size:6px;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.plan-months{
  display:block;

  color:#8d95a7;

  font-size:8px;
  font-weight:800;
}

.plan-price{
  display:block;

  margin-top:8px;

  color:#fff;

  font-size:22px;
  font-weight:950;
  letter-spacing:-.04em;
}

.plan-caption{
  display:block;

  margin-top:6px;

  color:#91e899;

  font-size:7px;
  font-weight:900;
}


/* =========================================================
   VPN PAGE / PLATFORMS
========================================================= */

.platform-list{
  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:9px;
}

.platform-card{
  min-height:84px;

  padding:12px;

  display:grid;

  grid-template-columns:
    42px
    minmax(0,1fr)
    14px;

  align-items:center;

  gap:9px;

  border-radius:18px;

  text-align:left;

  color:#fff;

  cursor:pointer;

  transition:
    transform .15s ease,
    border-color .15s ease;
}

.platform-card:hover{
  border-color:
    rgba(109,232,255,.18);
}

.platform-card:active{
  transform:scale(.982);
}

.platform-icon{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  border-radius:13px;

  background:
    rgba(109,232,255,.08);

  border:
    1px solid rgba(109,232,255,.11);

  color:#7ee8ff;
}

.platform-content{
  min-width:0;
}

.platform-content strong,
.platform-content span{
  display:block;
}

.platform-content strong{
  font-size:10px;
  font-weight:900;
}

.platform-content span{
  margin-top:4px;

  color:#7f8799;

  font-size:7px;
}

.platform-arrow{
  color:#667084;
}


/* =========================================================
   DEVICES
========================================================= */

.device-list{
  display:flex;
  flex-direction:column;
  gap:9px;
}

.device-card{
  padding:13px;
  border-radius:19px;
}

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

.device-icon{
  width:43px;
  height:43px;

  display:grid;
  place-items:center;

  flex:0 0 43px;

  border-radius:13px;

  background:
    rgba(109,232,255,.08);

  border:
    1px solid rgba(109,232,255,.11);

  color:#7fe7ff;
}

.device-main-content{
  min-width:0;
}

.device-main-content strong,
.device-main-content span{
  display:block;
}

.device-main-content strong{
  font-size:11px;
  font-weight:900;
}

.device-main-content span{
  margin-top:4px;

  color:#7a8396;

  font-size:7px;
}

.device-actions{
  display:flex;

  gap:7px;

  margin-top:11px;

  padding-top:10px;

  border-top:
    1px solid rgba(255,255,255,.05);
}

.small-button{
  flex:1;

  min-height:35px;

  border-radius:10px;

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

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

  color:#adb5c5;

  font-size:8px;
  font-weight:850;

  cursor:pointer;
}

.small-button:hover{
  border-color:
    rgba(166,108,255,.22);
}

.small-button.danger{
  color:#ff8fa3;
}


/* =========================================================
   SUBSCRIPTION
========================================================= */

.subscription-current-card{
  margin-top:13px;

  padding:14px;

  display:flex;
  align-items:center;

  gap:10px;

  border-radius:19px;
}

.subscription-current-icon{
  width:45px;
  height:45px;

  display:grid;
  place-items:center;

  flex:0 0 45px;

  border-radius:14px;

  background:
    rgba(186,255,77,.07);

  border:
    1px solid rgba(186,255,77,.11);

  color:#c6ff73;
}

.subscription-current-info{
  min-width:0;
}

.subscription-current-info span,
.subscription-current-info strong{
  display:block;
}

.subscription-current-info span{
  color:#7d8597;
  font-size:8px;
}

.subscription-current-info strong{
  margin-top:4px;

  font-size:11px;
  font-weight:900;
}

.subscription-plans{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.subscription-plan-card{
  width:100%;

  min-height:72px;

  padding:
    12px
    11px
    12px
    13px;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    auto
    18px;

  align-items:center;

  gap:10px;

  border-radius:17px;

  text-align:left;

  color:#fff;

  cursor:pointer;

  transition:
    transform .15s ease,
    border-color .15s ease;
}

.subscription-plan-card:hover{
  border-color:
    rgba(166,108,255,.23);
}

.subscription-plan-card:active{
  transform:scale(.986);
}

.subscription-plan-left{
  min-width:0;
}

.subscription-plan-title{
  font-size:10px;
  font-weight:900;
}

.subscription-plan-caption{
  margin-top:5px;

  color:#7f8799;

  font-size:7px;
}

.subscription-plan-price{
  white-space:nowrap;
  text-align:right;
}

.subscription-plan-price strong{
  font-size:19px;
  font-weight:950;
}

.subscription-plan-price span{
  margin-left:2px;

  color:#7b8497;

  font-size:8px;
}

.subscription-plan-arrow{
  color:#667084;
}

.subscription-note{
  margin-top:10px;

  padding:12px;

  display:flex;

  gap:9px;

  border-radius:15px;

  background:
    rgba(186,255,77,.035);

  border:
    1px solid rgba(186,255,77,.07);

  color:#848d9f;

  font-size:8px;
  line-height:1.45;
}

.subscription-note svg{
  flex:0 0 auto;
  color:#baff4d;
}


/* =========================================================
   PROFILE
========================================================= */

.profile-identity{
  margin:
    17px
    0
    13px;

  display:flex;
  align-items:center;

  gap:11px;
}

.avatar{
  width:58px;
  height:58px;

  flex:0 0 58px;

  display:grid;
  place-items:center;

  border-radius:18px;

  background:
    linear-gradient(
      145deg,
      #a66cff,
      #5769ff
    );

  color:#fff;

  font-size:21px;
  font-weight:950;

  box-shadow:
    0 12px 30px rgba(105,79,255,.20),
    inset 0 1px 0 rgba(255,255,255,.28);
}

.profile-identity-text{
  min-width:0;
}

.profile-identity-text h2{
  margin:0;

  font-size:20px;
  font-weight:950;

  letter-spacing:-.04em;
}

.profile-identity-text span{
  display:block;

  margin-top:4px;

  color:#81899c;

  font-size:8px;
}

.profile-stat-grid{
  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:9px;

  margin-bottom:9px;
}

.profile-stat-card{
  padding:13px;
  border-radius:18px;
}

.profile-stat-card span,
.profile-stat-card small{
  display:block;
}

.profile-stat-card span{
  color:#7f8799;
  font-size:8px;
}

.profile-stat-card strong{
  display:block;

  margin-top:5px;

  font-size:14px;
  font-weight:950;
}

.profile-stat-card small{
  margin-top:3px;

  color:#626c7e;

  font-size:7px;
}

.profile-details-card{
  padding:
    4px
    13px;

  border-radius:19px;
}

.profile-detail-row{
  display:flex;
  align-items:center;

  gap:10px;

  padding:11px 0;

  border-bottom:
    1px solid rgba(255,255,255,.05);
}

.profile-detail-row:last-child{
  border-bottom:0;
}

.profile-detail-icon{
  width:34px;
  height:34px;

  flex:0 0 34px;

  display:grid;
  place-items:center;

  border-radius:11px;

  background:
    rgba(166,108,255,.08);

  border:
    1px solid rgba(166,108,255,.10);

  color:#b99cff;
}

.profile-detail-row span,
.profile-detail-row strong{
  display:block;
}

.profile-detail-row span{
  color:#7b8396;
  font-size:8px;
}

.profile-detail-row strong{
  margin-top:3px;

  font-size:10px;
  font-weight:850;
}

.profile-primary-action{
  background:
    linear-gradient(
      135deg,
      #a96dff,
      #6c58ff
    );

  color:#fff;

  border-color:
    rgba(212,189,255,.20);

  box-shadow:
    0 12px 30px rgba(108,78,255,.18),
    inset 0 1px 0 rgba(255,255,255,.20);
}

.profile-partner-action{
  margin-top:8px;

  color:#d7ccff;

  background:
    linear-gradient(
      145deg,
      rgba(166,108,255,.12),
      rgba(166,108,255,.05)
    );

  border-color:
    rgba(166,108,255,.16);
}


/* =========================================================
   PARTNERS
========================================================= */

.partner-hero{
  position:relative;

  overflow:hidden;

  margin-top:14px;

  padding:
    24px
    18px;

  text-align:center;

  border-radius:24px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(166,108,255,.24),
      transparent 48%
    ),
    radial-gradient(
      circle at 15% 85%,
      rgba(186,255,77,.08),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #1d1731,
      #11141f
    );

  border:
    1px solid rgba(166,108,255,.22);

  box-shadow:
    0 18px 48px rgba(0,0,0,.24);
}

.partner-hero::after{
  content:"";

  position:absolute;

  width:170px;
  height:170px;

  right:-70px;
  top:-84px;

  border-radius:50%;

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

  box-shadow:
    0 0 0 18px rgba(255,255,255,.018),
    0 0 0 36px rgba(255,255,255,.012);
}

.partner-icon{
  position:relative;
  z-index:2;

  width:55px;
  height:55px;

  margin:
    0
    auto
    12px;

  display:grid;
  place-items:center;

  border-radius:18px;

  background:
    rgba(166,108,255,.12);

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

  color:#cebaff;

  box-shadow:
    0 0 28px rgba(166,108,255,.08);
}

.partner-percent{
  position:relative;
  z-index:2;

  display:block;

  font-size:34px;
  font-weight:950;

  letter-spacing:-.05em;
}

.partner-caption{
  position:relative;
  z-index:2;

  display:block;

  margin-top:6px;

  color:#8a829c;

  font-size:8px;
}

.partner-stats{
  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:8px;

  margin-top:9px;
}

.partner-stat{
  padding:13px;

  border-radius:17px;

  background:
    linear-gradient(
      145deg,
      #161a28,
      #11141e
    );

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

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03);
}

.partner-stat span,
.partner-stat strong{
  display:block;
}

.partner-stat span{
  color:#7f8799;
  font-size:7px;
}

.partner-stat strong{
  margin-top:5px;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

  font-size:12px;
  font-weight:950;
}

.code-box{
  margin-top:9px;

  padding:12px;

  border-radius:17px;
}

.code-box>span{
  display:block;

  margin-bottom:8px;

  color:#7d8597;

  font-size:8px;
}

.referral-url-row{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    44px;

  gap:7px;
}

.referral-url-row input,
.withdraw-input,
input,
textarea,
select{
  width:100%;

  background:#0d111a;

  color:#eef2f8;

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

  border-radius:12px;

  outline:0;
}

.referral-url-row input{
  height:42px;

  padding:0 11px;

  font-size:8px;
}

.referral-url-row button{
  height:42px;

  display:grid;
  place-items:center;

  border-radius:12px;

  background:
    rgba(166,108,255,.10);

  border:
    1px solid rgba(166,108,255,.15);

  color:#c9b5ff;

  cursor:pointer;
}

.withdraw-hint{
  margin-top:8px;

  text-align:center;

  color:#687184;

  font-size:8px;
}

.withdraw-hint strong{
  color:#b5a0eb;
}

.withdrawal-list{
  display:flex;
  flex-direction:column;

  gap:7px;
}

.withdrawal-row{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

  padding:11px;

  border-radius:15px;
}

.withdrawal-row strong,
.withdrawal-row span{
  display:block;
}

.withdrawal-row strong{
  font-size:10px;
}

.withdrawal-row span{
  margin-top:3px;

  color:#747d90;

  font-size:7px;

  text-transform:uppercase;
}

.withdrawal-status{
  padding:
    5px
    7px;

  border-radius:8px;

  font-size:7px;
  font-weight:900;

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

  color:#9ba4b5;
}

.withdrawal-paid{
  color:#77eea0;
  background:rgba(91,226,140,.09);
}

.withdrawal-rejected{
  color:#ff8ea2;
  background:rgba(255,109,135,.09);
}

.withdrawal-cancelled{
  color:#8992a4;
}

.info-box{
  display:flex;

  gap:9px;

  margin-top:10px;

  padding:12px;

  border-radius:15px;

  color:#7f8799;

  font-size:8px;
  line-height:1.45;
}

.info-box svg{
  flex:0 0 auto;
  color:#72e6ff;
}

.withdraw-form{
  display:flex;
  flex-direction:column;

  gap:6px;
}

.withdraw-label{
  margin-top:3px;

  color:#7e8799;

  font-size:8px;
}

.withdraw-input{
  min-height:42px;

  padding:10px;

  font-size:10px;
}

.withdraw-modal-note{
  margin:
    10px
    0;

  padding:11px;

  border-radius:13px;

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

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

  color:#7b8496;

  font-size:8px;
  line-height:1.4;
}

.withdraw-modal-note strong{
  color:#cfc6ea;
}


/* =========================================================
   MODAL
========================================================= */

.modal{
  position:fixed;
  inset:0;

  z-index:5000;

  display:flex;

  align-items:flex-end;
  justify-content:center;

  background:
    rgba(3,4,9,.72);

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.modal-sheet{
  position:relative;

  width:min(100%,560px);

  max-height:90dvh;

  overflow-y:auto;

  padding:
    18px
    14px
    28px;

  border-radius:
    27px
    27px
    0
    0;

  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(166,108,255,.16),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #171b29,
      #0c0f17
    );

  border:
    1px solid rgba(166,108,255,.15);

  border-bottom:0;

  box-shadow:
    0 -22px 70px rgba(0,0,0,.44);

  animation:
    modalIn .2s ease-out both;
}

.modal-sheet::before{
  content:"";

  position:absolute;

  left:50%;
  top:8px;

  transform:translateX(-50%);

  width:42px;
  height:4px;

  border-radius:99px;

  background:
    rgba(255,255,255,.12);
}

.modal-head{
  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:12px;

  margin-bottom:14px;
}

.modal-head h2{
  margin:0;

  font-size:21px;
  font-weight:950;

  letter-spacing:-.04em;
}

.modal-head span{
  display:block;

  margin-top:4px;

  color:#7c8597;

  font-size:8px;
}

.modal-close{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  border-radius:12px;

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

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

  color:#b6becd;

  cursor:pointer;
}

.guide-step{
  display:grid;

  grid-template-columns:
    31px
    1fr;

  gap:10px;

  align-items:center;

  padding:10px;

  margin-bottom:7px;

  border-radius:14px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.02)
    );

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

  color:#c7cfdb;

  font-size:10px;
  line-height:1.4;
}

.guide-number{
  width:31px;
  height:31px;

  display:grid;
  place-items:center;

  border-radius:10px;

  background:
    rgba(166,108,255,.11);

  border:
    1px solid rgba(166,108,255,.16);

  color:#c9afff;

  font-size:10px;
  font-weight:950;
}

.modal-actions{
  margin-top:12px;

  display:flex;
  flex-direction:column;

  gap:7px;
}


/* =========================================================
   TOAST
========================================================= */

.toast{
  position:fixed;

  left:50%;
  bottom:100px;

  z-index:7000;

  max-width:calc(100% - 28px);

  padding:
    11px
    14px;

  border-radius:14px;

  background:
    rgba(16,19,29,.94);

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

  color:#f1f4fb;

  font-size:9px;
  font-weight:800;

  box-shadow:
    0 18px 42px rgba(0,0,0,.34),
    0 0 22px rgba(166,108,255,.05);

  transform:
    translate(-50%,12px);

  opacity:0;

  pointer-events:none;

  transition:
    opacity .18s ease,
    transform .18s ease;

  backdrop-filter:blur(14px);
}

.toast.show{
  opacity:1;

  transform:
    translate(-50%,0);
}


/* =========================================================
   LOADING
========================================================= */

.loading-box,
.empty-box{
  padding:30px 12px;

  text-align:center;

  color:#7f8799;

  font-size:9px;
}

.spinner{
  width:25px;
  height:25px;

  margin:
    0
    auto
    10px;

  border-radius:50%;

  border:
    2px solid rgba(255,255,255,.09);

  border-top-color:var(--purple);
  border-right-color:var(--green);

  animation:
    spin .75s linear infinite;
}


/* =========================================================
   BOTTOM NAV
========================================================= */

.bottom-nav{
  position:absolute;

  left:10px;
  right:10px;

  bottom:
    calc(
      10px +
      env(safe-area-inset-bottom)
    );

  z-index:40;

  display:grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0,1fr)
    );

  gap:4px;

  padding:6px;

  border-radius:22px;

  background:
    rgba(13,16,24,.82);

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

  box-shadow:
    0 20px 55px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.035);

  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}

.bottom-nav::before{
  content:"";

  position:absolute;

  left:10%;
  right:10%;
  top:0;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(166,108,255,.35),
      rgba(186,255,77,.18),
      transparent
    );
}

.nav-item{
  position:relative;

  width:100%;
  min-width:0;

  min-height:53px;

  display:flex;
  flex-direction:column;

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

  gap:3px;

  padding:
    4px
    2px;

  border-radius:16px;

  background:transparent;

  color:#687186;

  cursor:pointer;

  transition:
    transform .14s ease,
    background .14s ease,
    color .14s ease;
}

.nav-item .nav-icon{
  position:relative;

  width:29px;
  height:28px;

  display:grid;
  place-items:center;

  border-radius:10px;
}

.nav-item .nav-icon::after{
  content:"";

  position:absolute;
  inset:0;

  border-radius:10px;

  border:
    1px solid transparent;
}

.nav-item svg{
  width:17px;
  height:17px;
}

.nav-item span:last-child{
  font-size:6.8px;
  font-weight:850;

  white-space:nowrap;
}

.nav-item.active{
  color:#caff6c;

  background:
    linear-gradient(
      180deg,
      rgba(186,255,77,.10),
      rgba(186,255,77,.035)
    );
}

.nav-item.active .nav-icon{
  background:
    rgba(186,255,77,.08);
}

.nav-item.active .nav-icon::after{
  border-color:
    rgba(186,255,77,.10);

  box-shadow:
    0 0 18px rgba(186,255,77,.06);
}

.nav-item.active svg{
  filter:
    drop-shadow(
      0 0 7px
      rgba(186,255,77,.26)
    );
}

.nav-item:active{
  transform:scale(.94);
}


/* =========================================================
   FOOTER
========================================================= */

.app-footer{
  position:absolute;

  left:0;
  right:0;
  bottom:0;

  z-index:45;

  height:8px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:7px;

  color:#3f4655;

  font-size:6px;

  pointer-events:none;
}

.footer-line{
  width:24px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #3c4350
    );
}


/* =========================================================
   PAYMENT
========================================================= */

[data-action="pay-provider"]{
  min-height:52px;
  margin-top:8px;
  border-radius:15px;
  font-weight:950;
}

[data-action="pay-provider"][data-provider="stars"]{
  background:
    linear-gradient(
      135deg,
      #7b5aff,
      #b05cff
    ) !important;

  color:#fff !important;

  box-shadow:
    0 12px 28px rgba(125,83,255,.18);
}

[data-action="pay-provider"][data-provider="sbp"]{
  background:
    linear-gradient(
      135deg,
      #d2ff68,
      #5be28c
    ) !important;

  color:#071006 !important;
}

[data-action="pay-provider"][data-provider="crypto"]{
  background:
    linear-gradient(
      135deg,
      #33415b,
      #1b2539
    ) !important;

  color:#e8eeff !important;

  border-color:
    rgba(109,140,255,.18) !important;
}


/* =========================================================
   INPUTS
========================================================= */

input:focus,
textarea:focus,
select:focus{
  border-color:
    rgba(166,108,255,.32);

  box-shadow:
    0 0 0 3px
    rgba(166,108,255,.06);
}

input::placeholder,
textarea::placeholder{
  color:#596174;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}

@keyframes modalIn{
  from{
    opacity:0;
    transform:translateY(18px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes pulseGreen{
  0%,
  100%{
    opacity:1;

    box-shadow:
      0 0 11px
      rgba(186,255,77,.65);
  }

  50%{
    opacity:.7;

    box-shadow:
      0 0 18px
      rgba(186,255,77,.9);
  }
}

@keyframes floatA{
  0%,
  100%{
    transform:translate3d(0,0,0);
  }

  50%{
    transform:translate3d(18px,-12px,0);
  }
}

@keyframes floatB{
  0%,
  100%{
    transform:translate3d(0,0,0);
  }

  50%{
    transform:translate3d(-14px,18px,0);
  }
}

@keyframes floatC{
  0%,
  100%{
    transform:translate3d(0,0,0);
  }

  50%{
    transform:translate3d(-18px,-14px,0);
  }
}

@keyframes sheen{
  0%{
    transform:translateX(-55%);
  }

  100%{
    transform:translateX(55%);
  }
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width:600px){

  .app-shell{
    max-width:720px;
  }

  .screen-root{
    padding-left:30px;
    padding-right:30px;
  }

  .plans{
    grid-template-columns:
      repeat(
        4,
        minmax(0,1fr)
      );
  }

  .platform-list{
    grid-template-columns:
      repeat(
        4,
        minmax(0,1fr)
      );
  }

  .vpn-card{
    min-height:255px;
  }

  .bottom-nav{
    left:50%;
    right:auto;

    width:
      min(
        680px,
        calc(100% - 60px)
      );

    transform:
      translateX(-50%);
  }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width:390px){

  .screen-root{
    padding-left:10px;
    padding-right:10px;
  }

  .topbar{
    padding-left:10px;
    padding-right:10px;
  }

  .brand-text span{
    display:none;
  }

  .topbar-status{
    padding:0 7px;
    font-size:6px;
  }

  .welcome h1{
    font-size:25px;
  }

  .vpn-card{
    min-height:224px;
    padding:14px;
    border-radius:24px;
  }

  .vpn-stats{
    margin-top:38px;
    gap:7px;
  }

  .stat{
    min-height:56px;
    padding:9px;
  }

  .stat strong{
    font-size:16px;
  }

  .plans{
    gap:8px;
  }

  .plan{
    min-height:108px;
  }

  .trial-banner{
    grid-template-columns:
      38px
      minmax(0,1fr)
      auto;

    gap:8px;

    padding:10px;

    min-height:75px;
  }

  .trial-banner-icon{
    width:38px;
    height:38px;
  }

  .trial-banner-content strong{
    font-size:13px;
  }

  .trial-banner-content>span:last-child{
    font-size:7px;
  }

  .trial-banner-cta{
    min-height:33px;
    padding:0 8px;
    font-size:7px;
  }

  .bottom-nav{
    left:7px;
    right:7px;
  }

  .nav-item{
    min-height:51px;
  }

  .nav-item span:last-child{
    font-size:6.2px;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ==========================================
   VISP — БОЛЬШАЯ КНОПКА 3 ДНЯ БЕСПЛАТНО
   ========================================== */

.screen-root .trial-banner {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    row-gap: 12px !important;
}

.screen-root .trial-banner .trial-banner-cta {
    grid-column: 1 / -1 !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 16px !important;

    background: #ffffff !important;
    color: #111318 !important;

    border: 1px solid rgba(255,255,255,.95) !important;
    border-radius: 12px !important;

    font-size: 10px !important;
    font-weight: 900 !important;

    box-shadow:
        0 8px 24px rgba(0,0,0,.22),
        0 0 18px rgba(255,255,255,.08) !important;
}

.screen-root .trial-banner .trial-banner-cta svg {
    width: 15px !important;
    height: 15px !important;
    color: #111318 !important;
    stroke: #111318 !important;
}

.screen-root .trial-banner .trial-banner-cta:hover {
    background: #f2f2f2 !important;
    color: #111318 !important;
}

@media (max-width: 390px) {
    .screen-root .trial-banner {
        grid-template-columns: 40px minmax(0, 1fr) !important;
    }

    .screen-root .trial-banner .trial-banner-cta {
        min-height: 40px !important;
        font-size: 9px !important;
    }
}


/* VISP TRIAL CTA — FINAL */
.screen-root .trial-banner {
    grid-template-columns: 44px minmax(0, 1fr) !important;
}

.screen-root .trial-banner .trial-banner-cta {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    margin: 0 !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;

    background: #ffffff !important;
    color: #111318 !important;
    border: 1px solid #ffffff !important;
    border-radius: 12px !important;

    font-weight: 900 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.22) !important;
}

.screen-root .trial-banner .trial-banner-cta,
.screen-root .trial-banner .trial-banner-cta * {
    color: #111318 !important;
}

.screen-root .trial-banner .trial-banner-cta svg {
    width: 15px !important;
    height: 15px !important;
}


/* VISP TRIAL — вернуть блоку полную ширину */
.screen-root .trial-banner {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    justify-self: stretch !important;
    align-self: stretch !important;
}

/* Кнопка на всю ширину блока */
.screen-root .trial-banner .trial-banner-cta {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}


/* ==========================================================
   VISP — TRIAL BANNER CLEAN
   Как партнёрский блок, но немного заметнее.
   ========================================================== */

/* Весь блок — единая кликабельная карточка */
.screen-root .trial-banner {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 72px !important;

    margin-top: 12px !important;
    padding: 13px !important;

    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;

    box-sizing: border-box !important;

    border-radius: 18px !important;

    /* Чуть ярче партнёрского блока */
    background:
        radial-gradient(
            180px 100px at 100% 0%,
            rgba(145, 92, 255, .18),
            transparent 72%
        ),
        linear-gradient(
            135deg,
            #26203f 0%,
            #171629 55%,
            #10131e 100%
        ) !important;

    border: 1px solid rgba(155, 106, 255, .34) !important;

    color: #ffffff !important;
    text-align: left !important;

    cursor: pointer !important;

    box-shadow:
        0 12px 30px rgba(0,0,0,.20),
        0 0 24px rgba(126, 78, 255, .09),
        inset 0 1px 0 rgba(255,255,255,.055) !important;

    transition:
        transform .14s ease,
        border-color .14s ease,
        box-shadow .14s ease !important;
}

/* Иконка */
.screen-root .trial-banner-icon {
    width: 44px !important;
    height: 44px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 14px !important;

    background: rgba(143, 92, 255, .14) !important;

    border: 1px solid rgba(157, 108, 255, .22) !important;

    color: #c2a1ff !important;
}

.screen-root .trial-banner-icon svg {
    width: 21px !important;
    height: 21px !important;
}

/* Контент */
.screen-root .trial-banner-content {
    min-width: 0 !important;
}

.screen-root .trial-banner-content strong,
.screen-root .trial-banner-content span {
    display: block !important;
}

/* Маленькая подпись */
.screen-root .trial-banner .trial-kicker {
    color: #b69bdf !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .03em !important;
}

/* ГЛАВНОЕ — 3 ДНЯ БЕСПЛАТНО БЕЛЫМ */
.screen-root .trial-banner .trial-banner-content strong {
    margin-top: 4px !important;

    color: #ffffff !important;

    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
}

/* Описание */
.screen-root .trial-banner .trial-banner-content > span:last-child {
    margin-top: 4px !important;

    color: #85879b !important;

    font-size: 8px !important;
    line-height: 1.3 !important;
}

/* УБИРАЕМ КНОПКУ «ПОЛУЧИТЬ» ПОЛНОСТЬЮ */
.screen-root .trial-banner .trial-banner-cta {
    display: none !important;
}

/* Нажатие всей карточки */
.screen-root .trial-banner:active {
    transform: scale(.987) !important;
    border-color: rgba(174, 130, 255, .48) !important;

    box-shadow:
        0 8px 24px rgba(0,0,0,.24),
        0 0 28px rgba(135, 82, 255, .16) !important;
}

/* Телефоны */
@media (max-width: 390px) {
    .screen-root .trial-banner {
        grid-template-columns: 40px minmax(0, 1fr) !important;
        min-height: 68px !important;
        padding: 11px !important;
        gap: 9px !important;
    }

    .screen-root .trial-banner-icon {
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px !important;
    }
}


/* VISP_AUTOPAY_SCROLL_FIX_V2 */

html,
body {
    max-width: 100%;
    overflow-x: hidden !important;
}

.modal {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

.modal-sheet {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

.autopay-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}


/* =========================================================
   VISP PARTNER PROGRAM — PRO UI
========================================================= */

.partner-pro-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 24px;
}

.partner-pro-hero {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border-radius: 24px;
    border: 1px solid rgba(166, 255, 0, .20);
    background:
        radial-gradient(circle at 85% 15%, rgba(168, 85, 247, .22), transparent 34%),
        radial-gradient(circle at 10% 90%, rgba(166, 255, 0, .12), transparent 38%),
        linear-gradient(145deg, #111111 0%, #090909 60%, #120b18 100%);
    box-shadow:
        0 18px 50px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .05);
}

.partner-pro-kicker {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 15px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
    color: rgba(255, 255, 255, .60);
    text-transform: uppercase;
}

.partner-pro-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #A6FF00;
    box-shadow: 0 0 12px rgba(166, 255, 0, .75);
}

.partner-pro-hero-main {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.partner-pro-hero h1 {
    margin: 0;
    max-width: 240px;
    font-size: 29px;
    line-height: 1.02;
    letter-spacing: -.04em;
    color: #FFFFFF;
}

.partner-pro-hero p {
    margin: 11px 0 0;
    max-width: 270px;
    font-size: 11px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .60);
}

.partner-pro-rate {
    flex: 0 0 auto;
    width: 92px;
    height: 92px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 1px solid rgba(166, 255, 0, .40);
    background:
        radial-gradient(circle, rgba(166,255,0,.19), rgba(166,255,0,.035) 65%, transparent 66%);
    box-shadow:
        0 0 30px rgba(166, 255, 0, .10),
        inset 0 0 20px rgba(166, 255, 0, .05);
}

.partner-pro-rate strong {
    font-size: 27px;
    line-height: 1;
    color: #A6FF00;
    letter-spacing: -.04em;
}

.partner-pro-rate span {
    margin-top: 5px;
    text-align: center;
    font-size: 7px;
    line-height: 1.15;
    font-weight: 800;
    color: rgba(255, 255, 255, .58);
    text-transform: uppercase;
}

.partner-pro-sbp {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    padding: 12px 13px;
    border-radius: 15px;
    background: rgba(166, 255, 0, .065);
    border: 1px solid rgba(166, 255, 0, .14);
}

.partner-pro-sbp > svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    margin-top: 1px;
    color: #A6FF00;
}

.partner-pro-sbp strong {
    display: block;
    font-size: 10px;
    line-height: 1.25;
    color: #FFFFFF;
}

.partner-pro-sbp span {
    display: block;
    margin-top: 3px;
    font-size: 8px;
    line-height: 1.35;
    color: rgba(255, 255, 255, .48);
}

.partner-pro-orbit {
    position: absolute;
    pointer-events: none;
    border: 1px solid rgba(168, 85, 247, .10);
    border-radius: 50%;
    opacity: .9;
    transform: rotate(-12deg);
}

.partner-pro-orbit.orbit-one {
    width: 185px;
    height: 70px;
    right: -65px;
    top: 2px;
}

.partner-pro-orbit.orbit-two {
    width: 220px;
    height: 92px;
    right: -78px;
    top: 17px;
    transform: rotate(18deg);
}

.partner-pro-balance {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border-radius: 20px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow:
        0 12px 35px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.035);
}

.partner-pro-balance-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 14px;
    background: rgba(166,255,0,.09);
    border: 1px solid rgba(166,255,0,.16);
}

.partner-pro-balance-icon svg {
    width: 20px;
    height: 20px;
    color: #A6FF00;
}

.partner-pro-balance-copy {
    min-width: 0;
    flex: 1;
}

.partner-pro-balance-copy span,
.partner-pro-level span,
.partner-pro-level small {
    display: block;
}

.partner-pro-balance-copy span {
    font-size: 8px;
    color: rgba(255,255,255,.46);
}

.partner-pro-balance-copy strong {
    display: block;
    margin-top: 2px;
    font-size: 24px;
    color: #FFFFFF;
    letter-spacing: -.04em;
}

.partner-pro-level {
    min-width: 76px;
    text-align: right;
}

.partner-pro-level strong {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #A6FF00;
    letter-spacing: .06em;
}

.partner-pro-level span {
    font-size: 7px;
    color: rgba(255,255,255,.42);
    text-transform: uppercase;
}

.partner-pro-level small {
    margin-top: 3px;
    font-size: 7px;
    color: rgba(255,255,255,.48);
}

.partner-pro-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.partner-pro-stat {
    min-width: 0;
    padding: 13px;
    border-radius: 17px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.026);
}

.partner-pro-stat span,
.partner-pro-stat small {
    display: block;
}

.partner-pro-stat span {
    font-size: 8px;
    color: rgba(255,255,255,.46);
}

.partner-pro-stat strong {
    display: block;
    margin-top: 4px;
    font-size: 17px;
    line-height: 1.05;
    color: #FFFFFF;
    letter-spacing: -.03em;
}

.partner-pro-stat small {
    margin-top: 5px;
    font-size: 7px;
    line-height: 1.2;
    color: rgba(255,255,255,.32);
}

.partner-pro-link-card {
    padding: 14px;
    border-radius: 20px;
    border: 1px solid rgba(168,85,247,.14);
    background:
        radial-gradient(circle at 90% 0%, rgba(168,85,247,.10), transparent 35%),
        rgba(255,255,255,.025);
}

.partner-pro-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 11px;
}

.partner-pro-card-icon {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    background: rgba(168,85,247,.10);
    border: 1px solid rgba(168,85,247,.17);
}

.partner-pro-card-icon svg {
    width: 18px;
    height: 18px;
    color: #A855F7;
}

.partner-pro-card-head strong,
.partner-pro-card-head span {
    display: block;
}

.partner-pro-card-head strong {
    font-size: 10px;
    color: #FFFFFF;
}

.partner-pro-card-head span {
    margin-top: 2px;
    font-size: 7px;
    color: rgba(255,255,255,.36);
}

.partner-pro-link-row {
    display: flex;
    gap: 7px;
}

.partner-pro-link-row input {
    min-width: 0;
    flex: 1;
    height: 43px;
    padding: 0 11px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(0,0,0,.26);
    color: rgba(255,255,255,.70);
    font-size: 9px;
    outline: none;
}

.partner-pro-link-row button {
    width: 43px;
    height: 43px;
    min-width: 43px;
    border: 1px solid rgba(166,255,0,.20);
    border-radius: 12px;
    background: rgba(166,255,0,.10);
    color: #A6FF00;
    display: grid;
    place-items: center;
}

.partner-pro-link-row button svg {
    width: 17px;
    height: 17px;
}

.partner-pro-actions {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 8px;
}

.partner-pro-primary,
.partner-pro-secondary {
    min-height: 47px;
    border-radius: 14px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .01em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.partner-pro-primary {
    border: 1px solid rgba(166,255,0,.35);
    background: #A6FF00;
    color: #101010;
    box-shadow: 0 10px 25px rgba(166,255,0,.10);
}

.partner-pro-secondary {
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
    color: #FFFFFF;
}

.partner-pro-primary svg,
.partner-pro-secondary svg {
    width: 16px;
    height: 16px;
}

.partner-pro-section {
    padding: 15px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.024);
}

.partner-pro-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.partner-pro-section-kicker {
    display: block;
    font-size: 7px;
    line-height: 1;
    letter-spacing: .16em;
    font-weight: 800;
    color: rgba(255,255,255,.34);
}

.partner-pro-section-head h2 {
    margin: 5px 0 0;
    font-size: 18px;
    line-height: 1.05;
    color: #FFFFFF;
    letter-spacing: -.03em;
}

.partner-pro-rules {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.partner-pro-rule {
    display: flex;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.partner-pro-rule:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.partner-pro-rule:first-child {
    padding-top: 0;
}

.partner-pro-rule-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(166,255,0,.07);
    border: 1px solid rgba(166,255,0,.12);
}

.partner-pro-rule-icon svg {
    width: 16px;
    height: 16px;
    color: #A6FF00;
}

.partner-pro-rule strong,
.partner-pro-rule span {
    display: block;
}

.partner-pro-rule strong {
    font-size: 10px;
    color: #FFFFFF;
    line-height: 1.3;
}

.partner-pro-rule span {
    margin-top: 3px;
    font-size: 8px;
    line-height: 1.45;
    color: rgba(255,255,255,.42);
}

.partner-pro-level-pill {
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(166,255,0,.08);
    border: 1px solid rgba(166,255,0,.14);
    color: #A6FF00;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .08em;
}

.partner-pro-levels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.partner-pro-level-row {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 8px;
    row-gap: 4px;
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.16);
}

.partner-pro-level-row span {
    font-size: 8px;
    font-weight: 900;
    color: rgba(255,255,255,.70);
}

.partner-pro-level-row strong {
    font-size: 12px;
    color: rgba(255,255,255,.42);
}

.partner-pro-level-row small {
    grid-column: 1 / -1;
    font-size: 7px;
    color: rgba(255,255,255,.28);
}

.partner-pro-level-row.is-current {
    border-color: rgba(166,255,0,.22);
    background:
        linear-gradient(
            145deg,
            rgba(166,255,0,.08),
            rgba(166,255,0,.025)
        );
}

.partner-pro-level-row.is-current span,
.partner-pro-level-row.is-current strong {
    color: #A6FF00;
}

.partner-pro-milestones {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.partner-pro-milestone {
    padding: 12px;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.14);
}

.partner-pro-milestone.is-achieved {
    border-color: rgba(166,255,0,.16);
    background: rgba(166,255,0,.045);
}

.partner-pro-milestone-top,
.partner-pro-milestone-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.partner-pro-milestone-top span {
    font-size: 8px;
    color: rgba(255,255,255,.40);
}

.partner-pro-milestone-top strong {
    font-size: 11px;
    color: #A6FF00;
}

.partner-pro-progress {
    height: 5px;
    margin: 9px 0 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
}

.partner-pro-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            #A6FF00,
            #A855F7
        );
}

.partner-pro-milestone-bottom span,
.partner-pro-milestone-bottom small {
    font-size: 7px;
    color: rgba(255,255,255,.32);
}

.partner-pro-milestone-bottom small {
    color: rgba(255,255,255,.50);
}

.partner-pro-next,
.partner-pro-maxed {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px;
    border-radius: 17px;
    border: 1px solid rgba(168,85,247,.14);
    background:
        linear-gradient(
            145deg,
            rgba(168,85,247,.08),
            rgba(166,255,0,.035)
        );
}

.partner-pro-next-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(168,85,247,.10);
    border: 1px solid rgba(168,85,247,.14);
}

.partner-pro-next-icon svg,
.partner-pro-maxed > svg {
    width: 18px;
    height: 18px;
    color: #A855F7;
}

.partner-pro-next > div:nth-child(2) {
    min-width: 0;
    flex: 1;
}

.partner-pro-next span,
.partner-pro-next strong,
.partner-pro-next small,
.partner-pro-maxed strong,
.partner-pro-maxed span {
    display: block;
}

.partner-pro-next span,
.partner-pro-maxed span {
    font-size: 7px;
    color: rgba(255,255,255,.36);
}

.partner-pro-next strong {
    margin-top: 2px;
    font-size: 13px;
    color: #FFFFFF;
}

.partner-pro-next small {
    margin-top: 2px;
    font-size: 7px;
    color: rgba(255,255,255,.32);
}

.partner-pro-next-progress {
    width: 44px;
    height: 44px;
    min-width: 44px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    background:
        radial-gradient(circle, #111111 53%, transparent 55%),
        conic-gradient(
            #A6FF00 var(--partner-progress, 0%),
            rgba(255,255,255,.06) 0
        );
}

.partner-pro-maxed {
    gap: 11px;
    border-color: rgba(166,255,0,.15);
    background: rgba(166,255,0,.045);
}

.partner-pro-maxed > svg {
    color: #A6FF00;
}

.partner-pro-maxed strong {
    font-size: 10px;
    color: #FFFFFF;
}

.partner-pro-maxed span {
    margin-top: 3px;
    line-height: 1.35;
}

.partner-pro-withdrawals {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.partner-pro-withdrawal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.partner-pro-withdrawal:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.partner-pro-withdrawal:first-child {
    padding-top: 0;
}

.partner-pro-withdrawal-main {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.partner-pro-withdrawal-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.06);
}

.partner-pro-withdrawal-icon svg {
    width: 15px;
    height: 15px;
    color: rgba(255,255,255,.52);
}

.partner-pro-withdrawal-main strong,
.partner-pro-withdrawal-main span {
    display: block;
}

.partner-pro-withdrawal-main strong {
    font-size: 10px;
    color: #FFFFFF;
}

.partner-pro-withdrawal-main span {
    margin-top: 2px;
    font-size: 7px;
    color: rgba(255,255,255,.34);
}

.partner-pro-withdrawal-status {
    font-size: 7px;
    white-space: nowrap;
}

.partner-pro-note {
    display: flex;
    gap: 10px;
    padding: 13px;
    border-radius: 17px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.022);
}

.partner-pro-note-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(166,255,0,.06);
    border: 1px solid rgba(166,255,0,.10);
}

.partner-pro-note-icon svg {
    width: 16px;
    height: 16px;
    color: #A6FF00;
}

.partner-pro-note strong,
.partner-pro-note span {
    display: block;
}

.partner-pro-note strong {
    font-size: 9px;
    color: #FFFFFF;
}

.partner-pro-note span {
    margin-top: 3px;
    font-size: 7px;
    line-height: 1.45;
    color: rgba(255,255,255,.35);
}

@media (max-width: 390px) {
    .partner-pro-hero {
        padding: 16px;
    }

    .partner-pro-hero h1 {
        font-size: 25px;
    }

    .partner-pro-rate {
        width: 78px;
        height: 78px;
    }

    .partner-pro-rate strong {
        font-size: 23px;
    }

    .partner-pro-balance-copy strong {
        font-size: 21px;
    }
}

/* ============================================================
   VISP CLEAN MOTION 2
   ONE SYSTEM
   PC + iPhone + Android + Telegram WebView
   ============================================================ */

:root {
    --visp-motion-time: 180ms;
    --visp-motion-ease:
        cubic-bezier(.22, .75, .25, 1);
}

/* =========================================================
   VISP FINAL MOTION — CLEAN
   ========================================================= */


/* ---------------------------------------------------------
   BASE INTERACTION
   --------------------------------------------------------- */

button,
a,
[role="button"] {

    -webkit-tap-highlight-color:
        transparent !important;

    -webkit-touch-callout:
        none !important;

    -webkit-user-select:
        none !important;

    user-select:
        none !important;

    -webkit-appearance:
        none !important;

    appearance:
        none !important;

    outline:
        none !important;

    touch-action:
        manipulation;
}


button:focus,
button:focus-visible,
a:focus,
a:focus-visible,
[role="button"]:focus,
[role="button"]:focus-visible {

    outline:
        none !important;

    outline-offset:
        0 !important;
}


/* ---------------------------------------------------------
   PERFORMANCE
   Не анимируем filter/background/shadow.
   --------------------------------------------------------- */

button,
a,
.plan,
.quick-card,
.platform-card,
.device-card,
.autopay-card,
.subscription-plan-card,
.partner-banner,
.primary-button,
.secondary-button,
.ghost-button {

    transition:
        transform 180ms
        cubic-bezier(.22,1,.36,1) !important;
}


/* ---------------------------------------------------------
   DESKTOP
   --------------------------------------------------------- */

@media (hover:hover) and (pointer:fine) {

    button:hover,
    .primary-button:hover,
    .secondary-button:hover,
    .ghost-button:hover {

        transform:
            translate3d(0,-2px,0) !important;
    }

    .plan:hover,
    .quick-card:hover,
    .platform-card:hover,
    .device-card:hover,
    .autopay-card:hover,
    .partner-banner:hover {

        transform:
            translate3d(0,-3px,0) !important;
    }
}


/* ---------------------------------------------------------
   MOBILE
   Только transform.
   Никаких filter/brightness.
   --------------------------------------------------------- */

@media (hover:none) and (pointer:coarse) {

    button:not(:disabled):active,
    .primary-button:active,
    .secondary-button:active,
    .ghost-button:active {

        transform:
            scale(.985) !important;
    }

    .plan:active,
    .quick-card:active,
    .platform-card:active,
    .device-card:active,
    .autopay-card:active {

        transform:
            scale(.992) !important;
    }
}


/* ---------------------------------------------------------
   PAGE ENTER
   Саму анимацию запускает JS.
   --------------------------------------------------------- */

#screenRoot > .screen {

    animation:
        none !important;

    filter:
        none !important;

    opacity:
        1 !important;

    backface-visibility:
        hidden !important;

    -webkit-backface-visibility:
        hidden !important;

    will-change:
        transform !important;
}


/* Старые animation-классы полностью выключаем */

#screenRoot > .screen.visp-soft-enter,
#screenRoot > .screen.visp-page-enter,
#screenRoot > .screen.visp-page-forward,
#screenRoot > .screen.visp-page-back,
#screenRoot > .screen.visp-screen-enter,
.visp-motion-item,
.visp-item-enter {

    animation:
        none !important;

    filter:
        none !important;
}


/* ---------------------------------------------------------
   WHITE EDGE / SHINE FIX
   --------------------------------------------------------- */

.primary-button,
.full-button,
.subscription-plan-card,
.plan {

    overflow:
        hidden !important;
}

.primary-button::before,
.primary-button::after,
.full-button::before,
.full-button::after {

    display:
        none !important;

    pointer-events:
        none !important;
}


/* ---------------------------------------------------------
   MODAL
   --------------------------------------------------------- */

#vispModal {

    position:
        fixed !important;

    inset:
        0 !important;

    width:
        100dvw !important;

    max-width:
        100dvw !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        flex !important;

    align-items:
        flex-end !important;

    justify-content:
        center !important;

    box-sizing:
        border-box !important;

    overflow:
        hidden !important;

    /*
     * Не чёрный и без blur.
     */
    background:
        rgba(3,4,9,.46) !important;

    backdrop-filter:
        none !important;

    -webkit-backdrop-filter:
        none !important;

    transform:
        none !important;
}


/*
 * Финальный размер существует
 * ещё до начала анимации.
 */

#vispModal .modal-sheet {

    flex:
        0 0 auto !important;

    width:
        min(560px, 100dvw) !important;

    max-width:
        min(560px, 100dvw) !important;

    min-width:
        0 !important;

    margin:
        0 auto !important;

    box-sizing:
        border-box !important;

    overflow-x:
        hidden !important;

    animation:
        none !important;

    transition:
        none !important;

    backface-visibility:
        hidden !important;

    -webkit-backface-visibility:
        hidden !important;

    transform-origin:
        center bottom !important;
}


@media (max-width:699px) {

    #vispModal {

        width:
            100dvw !important;

        max-width:
            100dvw !important;

        justify-content:
            center !important;
    }

    #vispModal .modal-sheet {

        flex:
            0 0 100dvw !important;

        width:
            100dvw !important;

        max-width:
            100dvw !important;

        min-width:
            100dvw !important;

        margin:
            0 !important;

        border-radius:
            27px 27px 0 0 !important;
    }
}


/* ---------------------------------------------------------
   AUTOPAY NOTE
   Стабильная высота = sheet не прыгает.
   --------------------------------------------------------- */

.subscription-note {

    min-height:
        52px !important;

    box-sizing:
        border-box !important;
}


/* ---------------------------------------------------------
   NO HORIZONTAL OVERFLOW
   --------------------------------------------------------- */

html,
body,
#screenRoot,
#vispModal {

    max-width:
        100% !important;

    overflow-x:
        hidden !important;
}

/* =========================================================
   VISP AUTOPAY MOBILE FINAL
   ========================================================= */

.autopay-card {
    quotes: none !important;
}

.autopay-card::before,
.autopay-card::after {
    content: none !important;
}

.autopay-card q::before,
.autopay-card q::after {
    content: none !important;
}

.autopay-card .autopay-copy {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
}

.autopay-card .autopay-description {
    min-width: 0 !important;
    width: 100% !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.autopay-card .autopay-badge {
    flex: 0 0 54px !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

@media (max-width: 699px) {
    .autopay-card {
        gap: 14px !important;
    }

    .autopay-card .autopay-description {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }
}

/* ============================================================
   VISP GLASS MOTION 1
   Плавнее на мобильных + glass UI
   ============================================================ */


/* ------------------------------------------------------------
   MOBILE PAGE TRANSITIONS
   ------------------------------------------------------------ */

@media (max-width: 699px) {

    #screenRoot > .screen {
        will-change: transform, opacity !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }

    .subscription-plan-card,
    .plan,
    .quick-card,
    .platform-card,
    .device-card,
    .autopay-card,
    .partner-banner {

        transition:
            transform 240ms
            cubic-bezier(.22,.85,.25,1) !important;
    }

    .subscription-plan-card:active,
    .plan:active,
    .quick-card:active,
    .platform-card:active,
    .device-card:active {

        transform:
            scale(.978) !important;
    }

    .autopay-card:active {

        transform:
            scale(.982) !important;
    }
}


/* ------------------------------------------------------------
   GLASS — как у партнёрки
   Никакого тяжёлого blur.
   ------------------------------------------------------------ */

.subscription-plan-card,
.plan,
.quick-card,
.platform-card,
.device-card,
.partner-banner {

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.026)
        ) !important;

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

    box-shadow:
        0 14px 36px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.045) !important;
}


/* ------------------------------------------------------------
   AUTOPAY — glass + зелёно-фиолетовый оттенок
   ------------------------------------------------------------ */

.autopay-card {

    background:
        linear-gradient(
            135deg,
            rgba(166,255,0,.075),
            rgba(168,85,247,.075)
        ) !important;

    border:
        1px solid rgba(166,255,0,.18) !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025),
        0 12px 34px rgba(0,0,0,.18) !important;
}


/* ------------------------------------------------------------
   MODAL — мягкое стекло
   ------------------------------------------------------------ */

#vispModal {

    background:
        rgba(3,4,9,.30) !important;

    backdrop-filter:
        none !important;

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


#vispModal .modal-sheet {

    background:
        linear-gradient(
            145deg,
            rgba(22,22,24,.94),
            rgba(11,11,14,.90),
            rgba(22,13,29,.92)
        ) !important;

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

    box-shadow:
        0 -12px 50px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.05) !important;

    will-change:
        transform, opacity !important;

    backface-visibility:
        hidden !important;

    -webkit-backface-visibility:
        hidden !important;
}


/* ------------------------------------------------------------
   AUTOPAY TEXT
   Всегда одинаковый перенос на телефоне
   ------------------------------------------------------------ */

.autopay-mobile-break {
    display: none;
}

@media (max-width: 699px) {

    .autopay-mobile-break {
        display: block;
    }

    .autopay-card .autopay-description {
        line-height: 1.4 !important;
        min-height: 34px !important;
    }
}


/* ------------------------------------------------------------
   PARTNER-STYLE GLASS FOR SMALL BLOCKS
   ------------------------------------------------------------ */

.partner-pro-balance,
.partner-pro-link-card,
.partner-pro-section,
.partner-pro-note {

    box-shadow:
        0 12px 35px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.035) !important;
}


/* ------------------------------------------------------------
   NO ACCIDENTAL LIGHT EDGE ON TOUCH
   ------------------------------------------------------------ */

button,
a,
[role="button"] {

    -webkit-tap-highlight-color:
        transparent !important;
}


/* =========================================================
   VISP TARIFF / MODAL FIX
   ========================================================= */

/* =========================================================
   1. КАРТОЧКИ ТАРИФОВ НА ГЛАВНОМ ЭКРАНЕ
   Прозрачные — фон главной должен быть виден сквозь них.
   ========================================================= */

.plans .plan,
#plans .plan,
.plan {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
}

/* Не делаем featured-тариф обратно синим */
.plans .plan.featured,
#plans .plan.featured,
.plan.featured {
    background: transparent !important;
    background-color: transparent !important;
}

/* Нажатие тоже остаётся прозрачным */
.plans .plan:hover,
.plans .plan:active,
#plans .plan:hover,
#plans .plan:active,
.plan:hover,
.plan:active {
    background: transparent !important;
    background-color: transparent !important;
}

/* Сохраняем рамку и читаемость */
.plans .plan,
#plans .plan,
.plan {
    border: 1px solid rgba(77, 188, 238, .22) !important;
}

/* =========================================================
   2. ОКНО ПОСЛЕ НАЖАТИЯ НА ТАРИФ
   Полностью непрозрачное.
   Цвет = фон главной VISP.
   ========================================================= */

.modal-sheet,
.modal-content,
.modal-card,
.payment-card,
.payment-modal {
    opacity: 1 !important;

    background: #061521 !important;
    background-color: #061521 !important;

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

    background-image: none !important;
}

/* Контейнер самого окна тоже не просвечивает */
.modal {
    opacity: 1 !important;
}

/* Затемнение вокруг окна остаётся */
.modal {
    background-color: rgba(2, 9, 15, .72) !important;
}

/* Но само содержимое окна полностью плотное */
.modal .modal-sheet,
.modal .modal-content,
.modal .modal-card,
.modal .payment-card,
.modal .payment-modal {
    background: #061521 !important;
    background-color: #061521 !important;
    opacity: 1 !important;
}

/* Внутренние карточки оплаты могут иметь свой отдельный фон,
   но не должны становиться прозрачными из-за модалки */
.modal .payment-method,
.modal .subscription-plan-card {
    opacity: 1 !important;
}

/* Чтобы стекло/blur старых правил не пробивало окно */
.modal-sheet::before,
.modal-sheet::after,
.modal-card::before,
.modal-card::after,
.payment-card::before,
.payment-card::after {
    opacity: 1;
}

/* =========================================================
   3. Модалка поверх всего
   ========================================================= */

.modal,
.modal-overlay,
.payment-modal,
.guide-modal {
    z-index: 9999 !important;
}

.modal-sheet,
.modal-content,
.modal-card,
.payment-card {
    position: relative;
    z-index: 10000 !important;
}


/* =========================================================
   VISP VISUAL FINAL FIX 2026-09-25
   ========================================================= */

/* =========================================================
   ТАРИФЫ НА ГЛАВНОМ ЭКРАНЕ
   Не прозрачные.
   Такой же лёгкий dark-glass, как остальные карточки.
   ========================================================= */

.plans .plan,
#plans .plan,
.plan {
    opacity: 1 !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.018)
        ) !important;

    background-color:
        rgba(9, 25, 38, .82) !important;

    background-image:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.018)
        ) !important;

    border:
        1px solid rgba(77,188,238,.24) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 8px 25px rgba(0,0,0,.12) !important;

    backdrop-filter:
        blur(10px) !important;

    -webkit-backdrop-filter:
        blur(10px) !important;
}

/* Featured тариф тоже такой же */
.plans .plan.featured,
#plans .plan.featured,
.plan.featured {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(168,85,247,.025)
        ) !important;

    background-color:
        rgba(9,25,38,.84) !important;
}

/* При нажатии карточка НЕ становится прозрачной */
.plans .plan:hover,
.plans .plan:active,
#plans .plan:hover,
#plans .plan:active,
.plan:hover,
.plan:active {
    opacity: 1 !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.052),
            rgba(255,255,255,.022)
        ) !important;

    background-color:
        rgba(9,25,38,.84) !important;
}

/* =========================================================
   МОДАЛКА ТАРИФА / ОПЛАТЫ
   Полностью непрозрачная.
   Цвет самого фона VISP.
   ========================================================= */

/* Затемнение вокруг модалки */
#vispModal,
#vispModal.modal,
#vispModal.visp-modal-visible {
    opacity: 1 !important;

    background:
        rgba(2,9,15,.76) !important;
}

/* Само окно */
#vispModal .modal-sheet,
#vispModal .modal-sheet[data-modal-sheet],
#vispModal .modal-content,
#vispModal .modal-card,
#vispModal .payment-card {
    opacity: 1 !important;

    background:
        #061521 !important;

    background-color:
        #061521 !important;

    background-image:
        none !important;

    backdrop-filter:
        none !important;

    -webkit-backdrop-filter:
        none !important;

    filter:
        none !important;

    mix-blend-mode:
        normal !important;

    isolation:
        isolate !important;

    box-shadow:
        0 -10px 35px rgba(0,0,0,.28),
        0 10px 45px rgba(0,0,0,.35) !important;
}

/* Старые псевдоэлементы не должны делать окно прозрачным */
#vispModal .modal-sheet::before,
#vispModal .modal-sheet::after,
#vispModal .modal-content::before,
#vispModal .modal-content::after {
    opacity: 1 !important;
}

/* Внутри модалки */
#vispModal .autopay-card,
#vispModal .subscription-note {
    opacity: 1 !important;
}

/* =========================================================
   Z-INDEX
   ========================================================= */

#vispModal {
    z-index: 99999 !important;
}

#vispModal .modal-sheet {
    z-index: 100000 !important;
}


/* =========================================================
   VISP AUTOPAY DISABLE UI
   ========================================================= */

.visp-autopay-disable-button {
    width: 100%;
    min-height: 48px;

    margin-top: 10px;
    padding: 12px 16px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    border-radius: 14px;

    border: 1px solid rgba(166, 255, 0, .24);

    background:
        linear-gradient(
            135deg,
            rgba(166,255,0,.065),
            rgba(168,85,247,.045)
        );

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

    font:
        inherit;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        opacity .18s ease;
}

.visp-autopay-disable-button:hover {
    border-color:
        rgba(166, 255, 0, .42);

    background:
        linear-gradient(
            135deg,
            rgba(166,255,0,.10),
            rgba(168,85,247,.075)
        );
}

.visp-autopay-disable-button:active {
    transform: scale(.985);
}

.visp-autopay-disable-button:disabled {
    opacity: .55;
    cursor: default;
}

.visp-autopay-disable-icon {
    width: 24px;
    height: 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #A6FF00;

    background:
        rgba(166,255,0,.09);
}

.visp-autopay-disabled-message {
    width: 100%;

    margin-top: 10px;
    padding: 12px 14px;

    display: flex;
    align-items: center;
    gap: 10px;

    border-radius: 14px;

    border:
        1px solid rgba(166,255,0,.16);

    background:
        rgba(166,255,0,.045);

    color:
        rgba(255,255,255,.86);
}

.visp-autopay-disabled-message strong {
    display: block;

    font-size: 13px;
    line-height: 1.2;
}

.visp-autopay-disabled-message small {
    display: block;

    margin-top: 3px;

    font-size: 11px;
    line-height: 1.35;

    color:
        rgba(255,255,255,.52);
}

.visp-autopay-status-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        #A6FF00;

    box-shadow:
        0 0 12px rgba(166,255,0,.42);
}


/* =========================================================
   VISP SINGLE AUTOPAY TOGGLE 2026
   ========================================================= */

/* Старый нижний блок больше не показываем */
.visp-autopay-disabled-message,
.visp-autopay-disable-button {
    display: none !important;
}

/* Один переключатель справа */
.visp-autopay-toggle {
    min-width: 54px;
    height: 32px;

    padding: 0 12px;

    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    border: 1px solid
        rgba(166,255,0,.28);

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

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

    font:
        inherit;

    font-size: 12px;
    font-weight: 800;

    line-height: 1;

    cursor: pointer;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.045);

    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .15s ease,
        box-shadow .18s ease;
}

.visp-autopay-toggle:active {
    transform: scale(.96);
}

.visp-autopay-toggle.is-enabled {
    color: #A6FF00;

    background:
        rgba(166,255,0,.10);

    border-color:
        rgba(166,255,0,.42);

    box-shadow:
        0 0 14px
        rgba(166,255,0,.08),
        inset 0 1px 0
        rgba(255,255,255,.05);
}

.visp-autopay-toggle.is-disabled {
    color:
        rgba(255,255,255,.72);

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

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

.visp-autopay-toggle:disabled {
    opacity: .55;
    cursor: default;
}

/* Если старый контейнер был flex —
   оставляем место справа */
.autopay-card {
    align-items: center;
}

.autopay-card
.visp-autopay-toggle {
    margin-left: auto;
}

/* Не даём старому нашему блоку занимать место */
.autopay-card
+ .visp-autopay-disabled-message,
.autopay-card
+ .visp-autopay-disable-button {
    display: none !important;
}




/* ==========================================================
   PROFILE — GLASS CARDS
   ========================================================== */

/* Основные карточки профиля */
.profile-card,
.profile-row,
.profile-stat,
.profile-item,
.profile-details,
.profile-summary,
.profile-info-card,
.profile-stats-card,
.profile-menu-card,
.profile-box {
    background:
        linear-gradient(
            145deg,
            rgba(20, 34, 51, .48),
            rgba(10, 18, 31, .38)
        ) !important;

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

    box-shadow:
        0 12px 32px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.025) !important;

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* Внутренние строки профиля */
.profile-row,
.profile-item {
    background:
        rgba(10, 18, 31, .30) !important;
}

/* Убираем старые плотные фоны */
.profile-card::before,
.profile-card::after,
.profile-row::before,
.profile-row::after {
    opacity: .35;
}

/* Мягкое разделение строк */
.profile-card > .profile-row + .profile-row,
.profile-card > .profile-item + .profile-item {
    border-top-color: rgba(255,255,255,.055) !important;
}



/* ============================================================
   VISP PROFILE GLASS — REAL DOM V4
   ============================================================ */

.visp-profile-glass-real {
    background: rgba(8, 15, 28, .16) !important;
    background-color: rgba(8, 15, 28, .16) !important;

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

    box-shadow:
        0 10px 28px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.025) !important;

    backdrop-filter: blur(22px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(125%) !important;
}

.visp-profile-glass-real.visp-profile-glass-big {
    background: rgba(8, 15, 28, .13) !important;
    background-color: rgba(8, 15, 28, .13) !important;
}

.visp-profile-glass-real.visp-profile-glass-small {
    background: rgba(8, 15, 28, .16) !important;
    background-color: rgba(8, 15, 28, .16) !important;
}


/* ==========================================================
   PROFILE — SAME STYLE AS ALL OTHER CARDS
   ========================================================== */

.profile-stat-card,
.profile-details-card {
    background:
        linear-gradient(
            145deg,
            rgba(22,27,39,.92),
            rgba(10,13,20,.94)
        ) !important;

    border:
        1px solid var(--visp-border) !important;

    box-shadow:
        0 14px 42px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.025) !important;

    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}


/* PROFILE FINAL — SAME CARD STYLE */
.profile-stat-card,
.profile-details-card {
    background:
        linear-gradient(
            145deg,
            rgba(22,27,39,.92),
            rgba(10,13,20,.94)
        ) !important;

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

    box-shadow:
        0 14px 42px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.025) !important;

    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}

/* ==========================================================
   PROFILE — EXACT SAME GLASS AS OTHER TABS
   ========================================================== */

.profile-stat-card,
.profile-details-card {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.026)
        ) !important;

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

    box-shadow:
        0 14px 36px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.045) !important;

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

/* =========================================================
   GUIDE TOAST FIX
   Toast must always be above the guide modal.
========================================================= */

.guide-modal {
    z-index: 10000 !important;
}

.toast {
    position: fixed !important;
    z-index: 100000 !important;
    pointer-events: none !important;
}


/* =========================================================
   VISP MODAL CLOSE ANIMATIONS
   Tariffs / subscription modal
   Guide modal
   ========================================================= */

/* ---------- STANDARD MODAL ---------- */

#vispModal.visp-closing {
    pointer-events: none !important;
    animation: vispModalCloseBackdrop 220ms ease both !important;
}

#vispModal.visp-closing .modal-sheet {
    animation:
        vispModalCloseSheet 240ms cubic-bezier(.22,1,.36,1) both !important;
}

@keyframes vispModalCloseBackdrop {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes vispModalCloseSheet {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        opacity: 0;
        transform: translate3d(0, 22px, 0) scale(.97);
    }
}


/* ---------- OLD GUIDE MODAL ---------- */

#guideModal.visp-closing {
    display: flex !important;
    pointer-events: none !important;
    animation: vispGuideCloseBackdrop 220ms ease both !important;
}

#guideModal.visp-closing .guide-sheet {
    animation:
        vispGuideCloseSheet 250ms cubic-bezier(.22,1,.36,1) both !important;
}

@keyframes vispGuideCloseBackdrop {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes vispGuideCloseSheet {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        opacity: 0;
        transform: translate3d(0, 28px, 0) scale(.975);
    }
}


/* ---------- FINAL DEVICE GUIDE ---------- */

#vispFinalGuide.visp-closing {
    pointer-events: none !important;
    animation:
        vispFinalGuideCloseBackdrop 220ms ease both !important;
}

#vispFinalGuide.visp-closing .visp-final-guide-card {
    animation:
        vispFinalGuideCloseCard 250ms cubic-bezier(.22,1,.36,1) both !important;
}

@keyframes vispFinalGuideCloseBackdrop {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes vispFinalGuideCloseCard {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        opacity: 0;
        transform: translate3d(0, 26px, 0) scale(.975);
    }
}



/* ==========================================================
   AUTOPAY FINAL LAYOUT FIX 2026
   ========================================================== */

.autopay-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.autopay-card > span:first-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.autopay-card > .autopay-badge {
    display: inline-flex !important;
    flex: 0 0 54px !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    margin-left: auto !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
}

.autopay-card .autopay-copy {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}


/* VISP_4_NAV_FIX_20261007 */

#bottomNav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
}

#bottomNav .nav-item {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
}

#bottomNav .nav-item span {
    white-space: nowrap;
}



/* VISP DEVICE RENAME */

.device-actions {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}

.device-rename-form {
    margin-top: 15px;
}

.device-rename-label {
    display: block;
    margin-bottom: 7px;

    color: #777f93;

    font-size: 9px;
    font-weight: 750;
}

.device-rename-input {
    width: 100%;
    min-height: 48px;

    padding: 0 13px;

    outline: none;

    border-radius: 14px;

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

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

    color: #f7f8ff;

    font-size: 12px;
    font-weight: 700;

    transition:
        border-color .18s ease,
        background .18s ease;
}

.device-rename-input::placeholder {
    color: #5f6679;
}

.device-rename-input:focus {
    border-color:
        rgba(124,92,255,.45);

    background:
        rgba(124,92,255,.06);
}

.device-rename-save {
    margin-top: 11px;
}

@media (max-width: 380px) {

    .device-actions {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .device-actions .small-button {
        min-height: 35px;
    }
}

/* =========================================================
   VISP DEVICES — FINAL BUTTON LAYOUT
   1 row: Копировать / Гайд
   2 row: Изменить / Удалить
   ========================================================= */

.device-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 12px !important;
}

.device-actions .small-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 0 10px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 12px !important;

    font-size: 9px !important;
    font-weight: 800 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Гарантированно не прячем кнопки на телефонах */
@media (max-width: 600px) {
    .device-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .device-actions .small-button {
        min-height: 42px !important;
        font-size: 9px !important;
    }
}


/* VISP DEVICES FINAL 2X2 BUTTONS */

.device-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 12px !important;
}

.device-actions .small-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 10px !important;

    border-radius: 12px !important;

    font-size: 9px !important;
    font-weight: 800 !important;

    white-space: nowrap !important;
}

.device-rename-label {
    display: block;
    margin: 0 0 7px;
    color: #777e91;
    font-size: 9px;
    font-weight: 700;
}

.device-rename-input {
    width: 100%;
    min-height: 46px;
    padding: 0 13px;

    border-radius: 13px;
    border: 1px solid rgba(255,255,255,.08);

    outline: none;

    background: rgba(255,255,255,.045);
    color: #f3f5fa;

    font-size: 11px;
    font-weight: 700;
}

.device-rename-input::placeholder {
    color: #5f6678;
}

.device-rename-input:focus {
    border-color: rgba(124,92,255,.42);
    box-shadow: 0 0 0 3px rgba(124,92,255,.08);
}

@media (max-width: 600px) {
    .device-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .device-actions .small-button {
        min-height: 42px !important;
        font-size: 9px !important;
    }
}

/* VISP — prominent device context in connection guide */
.guide-device-context {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;

    width: fit-content !important;
    max-width: 100% !important;
    box-sizing: border-box !important;

    margin: 12px 0 10px !important;
    padding: 12px 14px !important;

    border: 1px solid rgba(166, 255, 54, .42) !important;
    border-radius: 15px !important;

    background: linear-gradient(
        135deg,
        rgba(145, 255, 35, .15),
        rgba(117, 88, 255, .13)
    ) !important;

    color: #f8fff0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    white-space: normal !important;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, .20),
        inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

.guide-device-context-kicker {
    display: block !important;
    color: #b7f568 !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
}

.guide-device-context strong {
    display: block !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
}

.guide-device-context-platform {
    display: inline-flex !important;
    align-items: center !important;

    margin-top: 1px !important;
    padding: 5px 9px !important;

    border: 1px solid rgba(181, 151, 255, .28) !important;
    border-radius: 9px !important;
    background: rgba(130, 98, 255, .17) !important;

    color: #e1d7ff !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1.35 !important;
}

@media (max-width: 420px) {
    .guide-device-context {
        gap: 7px !important;
        margin-top: 13px !important;
        padding: 13px 14px !important;
    }

    .guide-device-context-kicker {
        font-size: 9px !important;
    }

    .guide-device-context strong {
        font-size: 16px !important;
    }

    .guide-device-context-platform {
        font-size: 13px !important;
    }
}

/* VISP — full-width device type in connection guide */
.guide-device-context {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 12px 0 14px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.guide-device-context-platform {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;

    width: 100% !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 14px 16px !important;

    border: 1px solid rgba(166, 255, 54, .48) !important;
    border-radius: 15px !important;

    background: linear-gradient(
        110deg,
        rgba(145, 255, 35, .18),
        rgba(117, 88, 255, .19)
    ) !important;

    color: #d7ff9c !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1.4 !important;
    letter-spacing: .02em !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
}

@media (max-width: 420px) {
    .guide-device-context-platform {
        min-height: 56px !important;
        font-size: 16px !important;
    }
}

/* VISP GUIDE: full-width compact device platform */
.guide-device-context {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 3px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    align-self: stretch !important;
}

/* Compact header when it contains the device platform */
.modal-head:has(.guide-device-context) {
    margin-bottom: 4px !important;
    padding-bottom: 0 !important;
}

.guide-device-context-platform {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 8px 12px !important;

    border: 1px solid rgba(166, 255, 54, .42) !important;
    border-radius: 12px !important;

    background: linear-gradient(
        110deg,
        rgba(145, 255, 35, .15),
        rgba(117, 88, 255, .16)
    ) !important;

    color: #d7ff9c !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
}

@media (max-width: 600px) {
    /*
      The label is inside the title area, which can be narrower
      than the app-switcher. Use the available mobile viewport
      width so the label spans the same visual area.
    */
    .guide-device-context {
        width: calc(100vw - 40px) !important;
        max-width: calc(100vw - 40px) !important;
        margin: 3px 0 0 !important;
    }

    .modal-head:has(.guide-device-context) {
        margin-bottom: 3px !important;
    }

    .guide-device-context-platform {
        min-height: 40px !important;
        padding: 7px 12px !important;
        font-size: 14px !important;
    }
}

/* FIX: keep guide close button visible with full-width device label */
.modal-head:has(.guide-device-context) {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 48px !important;
    overflow: visible !important;
}

.modal-head:has(.guide-device-context) > button,
.modal-head:has(.guide-device-context) .modal-close,
.modal-head:has(.guide-device-context) [aria-label="Закрыть"] {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 20 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

.modal-head:has(.guide-device-context) > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.modal-head:has(.guide-device-context) .guide-device-context {
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 0 !important;
    box-sizing: border-box !important;
}

.modal-head:has(.guide-device-context) .guide-device-context-platform {
    width: 100% !important;
    min-height: 38px !important;
    box-sizing: border-box !important;
}

@media (max-width: 600px) {
    .modal-head:has(.guide-device-context) {
        padding-right: 0 !important;
    }

    .modal-head:has(.guide-device-context) > button,
    .modal-head:has(.guide-device-context) .modal-close,
    .modal-head:has(.guide-device-context) [aria-label="Закрыть"] {
        top: -2px !important;
        right: 0 !important;
    }
}

/* FIX: keep guide close button visible with full-width device label */
.modal-head:has(.guide-device-context) {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 48px !important;
    overflow: visible !important;
}

.modal-head:has(.guide-device-context) > button,
.modal-head:has(.guide-device-context) .modal-close,
.modal-head:has(.guide-device-context) [aria-label="Закрыть"] {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 20 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

.modal-head:has(.guide-device-context) > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.modal-head:has(.guide-device-context) .guide-device-context {
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 0 !important;
    box-sizing: border-box !important;
}

.modal-head:has(.guide-device-context) .guide-device-context-platform {
    width: 100% !important;
    min-height: 38px !important;
    box-sizing: border-box !important;
}

@media (max-width: 600px) {
    .modal-head:has(.guide-device-context) {
        padding-right: 0 !important;
    }

    .modal-head:has(.guide-device-context) > button,
    .modal-head:has(.guide-device-context) .modal-close,
    .modal-head:has(.guide-device-context) [aria-label="Закрыть"] {
        top: -2px !important;
        right: 0 !important;
    }
}


/* VISP GUIDE PLATFORM COLORS: HAPP / INCY */

/* HAPP — green accent */
.guide-device-context-platform[data-client="happ"] {
    border-color: rgba(166, 255, 54, .52) !important;
    background: linear-gradient(
        110deg,
        rgba(145, 255, 35, .19),
        rgba(70, 125, 25, .20)
    ) !important;
    color: #d7ff9c !important;
    box-shadow: inset 0 0 0 1px rgba(166, 255, 54, .035) !important;
}

/* INCY — violet / blue accent */
.guide-device-context-platform[data-client="incy"] {
    border-color: rgba(139, 119, 255, .68) !important;
    background: linear-gradient(
        110deg,
        rgba(113, 79, 255, .27),
        rgba(55, 145, 255, .22)
    ) !important;
    color: #e0d7ff !important;
    box-shadow:
        inset 0 0 0 1px rgba(139, 119, 255, .06),
        0 4px 16px rgba(91, 75, 220, .10) !important;
}


/* VISP_DISCOUNT_CARD_V2 */
.discount-use-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    margin: 14px 0 16px;
    padding: 13px 14px;
    border: 1px solid rgba(166, 255, 0, .17);
    border-radius: 18px;
    background: linear-gradient(
        135deg,
        rgba(166, 255, 0, .055),
        rgba(255, 255, 255, .025)
    );
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.discount-use-card.is-selected {
    border-color: rgba(166, 255, 0, .58);
    background: linear-gradient(
        135deg,
        rgba(166, 255, 0, .10),
        rgba(168, 85, 247, .055)
    );
}

.discount-use-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 13px;
    background: rgba(166, 255, 0, .10);
    color: #A6FF00;
}

.discount-use-icon svg {
    width: 20px;
    height: 20px;
}

.discount-use-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.discount-use-copy strong {
    color: #f7f9fc;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.2;
}

.discount-use-copy > span {
    color: #929dad;
    font-size: 12px;
    line-height: 1.3;
}

.discount-use-switch {
    position: relative;
    display: block;
    width: 42px;
    height: 24px;
    flex: 0 0 42px;
    margin-left: auto;
}

.discount-use-switch input[type="checkbox"] {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 42px;
    height: 24px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.discount-use-track {
    display: block;
    box-sizing: border-box;
    width: 42px;
    height: 24px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    background: #303846;
    transition: background .18s ease, border-color .18s ease;
}

.discount-use-knob {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #a7b0bd;
    transition: transform .18s ease, background .18s ease;
}

.discount-use-card.is-selected .discount-use-track {
    border-color: rgba(166, 255, 0, .65);
    background: #A6FF00;
}

.discount-use-card.is-selected .discount-use-knob {
    transform: translateX(18px);
    background: #07110a;
}

.discount-use-switch input:focus-visible + .discount-use-track {
    outline: 2px solid #A6FF00;
    outline-offset: 3px;
}

.discount-use-preview {
    display: flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    margin: -7px 0 16px 52px;
    padding: 8px 11px;
    border: 1px solid rgba(166, 255, 0, .17);
    border-radius: 10px;
    background: rgba(166, 255, 0, .065);
    color: #bcff4c;
    font-size: 12px;
    font-weight: 750;
}

.discount-use-preview[hidden] {
    display: none !important;
}


/* VISP_PENDING_DISCOUNT_V2 */
.discount-use-card {
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    box-sizing:border-box;
    margin:14px 0 16px;
    padding:13px 14px;
    border:1px solid rgba(166,255,0,.17);
    border-radius:18px;
    background:linear-gradient(135deg,rgba(166,255,0,.055),rgba(255,255,255,.025));
    cursor:pointer;
    transition:border-color .18s ease,background .18s ease;
}
.discount-use-card.is-selected {
    border-color:rgba(166,255,0,.58);
    background:linear-gradient(135deg,rgba(166,255,0,.10),rgba(168,85,247,.055));
}
.discount-use-icon {
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    flex:0 0 40px;
    border-radius:13px;
    background:rgba(166,255,0,.10);
    color:#A6FF00;
}
.discount-use-icon svg { width:20px; height:20px; }
.discount-use-copy {
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
    gap:4px;
    min-width:0;
}
.discount-use-copy strong {
    color:#f7f9fc;
    font-size:14px;
    font-weight:750;
    line-height:1.2;
}
.discount-use-copy > span {
    color:#929dad;
    font-size:12px;
    line-height:1.3;
}
.discount-use-switch {
    position:relative;
    display:block;
    width:42px;
    height:24px;
    flex:0 0 42px;
    margin-left:auto;
}
.discount-use-switch input {
    position:absolute;
    inset:0;
    z-index:2;
    width:42px;
    height:24px;
    margin:0;
    opacity:0;
    cursor:pointer;
}
.discount-use-track {
    display:block;
    box-sizing:border-box;
    width:42px;
    height:24px;
    padding:3px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;
    background:#303846;
    transition:background .18s ease,border-color .18s ease;
}
.discount-use-knob {
    display:block;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#a7b0bd;
    transition:transform .18s ease,background .18s ease;
}
.discount-use-card.is-selected .discount-use-track {
    border-color:rgba(166,255,0,.65);
    background:#A6FF00;
}
.discount-use-card.is-selected .discount-use-knob {
    transform:translateX(18px);
    background:#07110a;
}
.discount-use-preview {
    display:flex;
    width:fit-content;
    max-width:100%;
    box-sizing:border-box;
    margin:-7px 0 16px 52px;
    padding:8px 11px;
    border:1px solid rgba(166,255,0,.17);
    border-radius:10px;
    background:rgba(166,255,0,.065);
    color:#bcff4c;
    font-size:12px;
    font-weight:750;
}
.discount-use-preview[hidden] { display:none !important; }
.discount-pending-card { cursor:default; }
.discount-cancel-button {
    flex:0 0 auto;
    border:1px solid rgba(166,255,0,.24);
    border-radius:11px;
    padding:9px 11px;
    background:rgba(166,255,0,.07);
    color:#c1ff65;
    font-size:12px;
    font-weight:750;
    cursor:pointer;
}


/* VISP_DISCOUNT_CHECK_LOADING */
.discount-check-wait {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-height:175px;
    padding:20px 18px 26px;
    text-align:center;
}
.discount-check-spinner {
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    border-radius:16px;
    background:rgba(166,255,0,.10);
    color:#A6FF00;
}
.discount-check-spinner svg {
    width:25px;
    height:25px;
    animation:visp-discount-spin .85s linear infinite;
}
.discount-check-wait strong {
    color:#f5f7fb;
    font-size:15px;
}
.discount-check-wait > span:last-child {
    color:#929dad;
    font-size:12px;
    line-height:1.5;
}
@keyframes visp-discount-spin {
    to { transform:rotate(360deg); }
}


/* VISP_DISCOUNT_LAYOUT_FULL_WIDTH */
.discount-use-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px;
    box-sizing: border-box;
    margin: -7px 0 16px !important;
    padding: 11px 14px;
    border: 1px solid rgba(166,255,0,.22);
    border-radius: 12px;
    background: linear-gradient(
        100deg,
        rgba(166,255,0,.10),
        rgba(102,255,154,.07)
    );
    color: #bcff4c;
    font-size: 13px;
    font-weight: 750;
    text-align: center;
    line-height: 1.4;
}

.discount-use-preview[hidden] {
    display: none !important;
}


/* VISP PAYMENT SUCCESS REFRESH V1 */
#vispModal .modal-sheet:has(.payment-success) {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(151,255,105,.10), transparent 53%),
        linear-gradient(155deg, #0d1c28 0%, #07131e 58%, #08151d 100%) !important;
    border: 1px solid rgba(177,255,151,.16) !important;
    box-shadow:
        0 24px 80px rgba(0,0,0,.42),
        0 0 50px rgba(111,255,123,.07) !important;
    overflow: hidden;
}

#vispModal .payment-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 0 2px;
    color: #f4f8fb;
    text-align: center;
}

#vispModal .payment-success-mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    margin: 2px auto 12px;
    border-radius: 28px;
    background:
        radial-gradient(circle, rgba(185,255,116,.15), rgba(185,255,116,0) 72%);
}

#vispModal .payment-success-mark::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(177,255,132,.20);
    border-radius: 26px;
    transform: rotate(8deg);
    animation: vispPaymentSuccessRing .65s ease both;
}

#vispModal .payment-success-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 22px;
    color: #09170e;
    background: linear-gradient(140deg, #d9ff79 0%, #8df16d 52%, #59e58b 100%);
    box-shadow:
        0 9px 28px rgba(100,255,119,.17),
        inset 0 1px 0 rgba(255,255,255,.55);
    animation: vispPaymentSuccessPop .42s cubic-bezier(.2,.8,.2,1) both;
}

#vispModal .payment-success-icon svg {
    width: 29px;
    height: 29px;
    stroke-width: 2.8;
}

#vispModal .payment-success-brand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #d6e4ec;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.1px;
    text-transform: uppercase;
}

#vispModal .payment-success-brand-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #aaff79;
    box-shadow: 0 0 12px rgba(170,255,121,.55);
}

#vispModal .payment-success-brand small {
    width: 100%;
    color: #79909e;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
}

#vispModal .payment-success h2 {
    margin: 14px 0 0;
    color: #f6f9fb;
    font-size: clamp(26px, 7vw, 32px);
    font-weight: 850;
    line-height: 1.12;
    letter-spacing: -.8px;
}

#vispModal .payment-success-copy {
    margin: 10px 0 21px;
    max-width: 290px;
    color: #91a5b2;
    font-size: 13px;
    line-height: 1.7;
}

#vispModal .payment-success-status {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 20px;
    padding: 14px 13px;
    border: 1px solid rgba(163,255,130,.13);
    border-radius: 18px;
    background:
        linear-gradient(115deg, rgba(158,255,116,.075), rgba(255,255,255,.025));
    text-align: left;
}

#vispModal .payment-success-shield {
    display: grid;
    flex: 0 0 40px;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(164,255,125,.15);
    border-radius: 13px;
    color: #b8ff8c;
    background: rgba(159,255,113,.07);
}

#vispModal .payment-success-shield svg {
    width: 21px;
    height: 21px;
}

#vispModal .payment-success-status-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#vispModal .payment-success-status-copy strong {
    color: #eaf4ed;
    font-size: 13px;
    font-weight: 750;
}

#vispModal .payment-success-status-copy span {
    color: #8299a5;
    font-size: 11px;
    line-height: 1.4;
}

#vispModal .payment-success-status-ok {
    display: grid;
    flex: 0 0 24px;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #b9ff84;
    background: rgba(163,255,115,.11);
}

#vispModal .payment-success-status-ok svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.8;
}

#vispModal .payment-success .payment-success-cta {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    margin: 0;
    padding: 14px 18px;
    border: 1px solid rgba(220,255,198,.55) !important;
    border-radius: 16px;
    color: #08150c !important;
    background: linear-gradient(105deg, #d8ff76 0%, #98f06d 48%, #55e58c 100%) !important;
    box-shadow:
        0 8px 26px rgba(97,255,128,.13),
        inset 0 1px 0 rgba(255,255,255,.6) !important;
    font-size: 14px;
    font-weight: 850;
    letter-spacing: .1px;
    transition: transform .16s ease, filter .16s ease;
}

#vispModal .payment-success .payment-success-cta:active {
    transform: scale(.985);
    filter: brightness(.97);
}

#vispModal .payment-success .payment-success-cta svg {
    width: 17px;
    height: 17px;
    stroke-width: 2.5;
}

#vispModal .payment-success-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 15px;
    color: #617987;
    font-size: 10px;
    letter-spacing: .15px;
}

#vispModal .payment-success-caption svg {
    width: 12px;
    height: 12px;
    color: #85d98c;
}

@keyframes vispPaymentSuccessPop {
    from { opacity: 0; transform: scale(.78) translateY(4px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes vispPaymentSuccessRing {
    from { opacity: 0; transform: rotate(-9deg) scale(.86); }
    to { opacity: 1; transform: rotate(8deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    #vispModal .payment-success-icon,
    #vispModal .payment-success-mark::before {
        animation: none !important;
    }
}


/* VISP_COMPACT_PAYMENT_NOTES_V1 */
#vispModal .subscription-note {
    min-height: 0 !important;
    height: auto !important;
    padding: 7px 10px !important;
    gap: 7px !important;
    line-height: 1.3 !important;
    align-items: center !important;
}

#vispModal .subscription-note svg {
    width: 16px !important;
    height: 16px !important;
}


/* VISP_WITHDRAW_INPUTS_POLISH_V1 */

/* Поле суммы: убираем браузерные стрелки */
#vispModal input#withdrawAmount[type="number"] {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
    padding-right: 14px !important;
}

#vispModal input#withdrawAmount[type="number"]::-webkit-inner-spin-button,
#vispModal input#withdrawAmount[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Выбор способа выплаты */
#vispModal select#withdrawMethod {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 42px 0 14px !important;
    color: #f0eff8 !important;
    background-color: #0c111c !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b8a1ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 13px center !important;
    background-size: 16px 16px !important;
    border: 1px solid rgba(167, 139, 250, .24) !important;
    border-radius: 13px !important;
    cursor: pointer !important;
    transition: border-color .18s ease, box-shadow .18s ease !important;
}

#vispModal select#withdrawMethod:focus {
    border-color: rgba(167, 139, 250, .8) !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .13) !important;
    outline: none !important;
}

#vispModal select#withdrawMethod option {
    color: #f0eff8;
    background-color: #0c111c;
}

#vispModal select#withdrawMethod option:checked {
    color: #e3d7ff;
    background-color: #302548;
}


/* VISP_WITHDRAW_CUSTOM_SELECTOR_STYLES_V1 */
#vispModal .withdraw-method-picker {
    position: relative;
    z-index: 20;
    width: 100%;
    min-width: 0;
}

#vispModal .withdraw-method-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#vispModal .withdraw-method-trigger {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 7px 13px !important;
    border: 1px solid rgba(168, 139, 250, .3) !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #121522, #0b111c) !important;
    color: #f1eff9 !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    text-align: left !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: border-color .18s ease, background .18s ease,
                box-shadow .18s ease !important;
}

#vispModal .withdraw-method-trigger:hover,
#vispModal .withdraw-method-picker.is-open .withdraw-method-trigger {
    border-color: rgba(168, 139, 250, .78) !important;
    background: linear-gradient(135deg, #171628, #0c1220) !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .08) !important;
}

#vispModal .withdraw-method-current-icon,
#vispModal .withdraw-method-option-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    box-sizing: border-box;
    color: #c4b5fd;
    background: rgba(139, 92, 246, .12);
    border: 1px solid rgba(167, 139, 250, .16);
    font-weight: 700;
}

#vispModal .withdraw-method-current-icon {
    width: 27px;
    height: 27px;
    border-radius: 9px;
    font-size: 14px;
}

#vispModal .withdraw-method-current-label {
    flex: 1 1 auto;
    min-width: 0;
}

#vispModal .withdraw-method-caret {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin: -4px 2px 0 0;
    border-right: 1.7px solid #bba5ff;
    border-bottom: 1.7px solid #bba5ff;
    transform: rotate(45deg);
    transition: transform .18s ease, margin .18s ease;
}

#vispModal .withdraw-method-picker.is-open .withdraw-method-caret {
    margin-top: 4px;
    transform: rotate(225deg);
}

#vispModal .withdraw-method-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 100010;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 210px;
    padding: 5px;
    overflow-y: auto;
    border: 1px solid rgba(167, 139, 250, .34);
    border-radius: 13px;
    background: #0b111d;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .42);
}

#vispModal .withdraw-method-menu[hidden] {
    display: none !important;
}

#vispModal .withdraw-method-option {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 39px !important;
    box-sizing: border-box !important;
    padding: 6px 9px !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #b8c0d1 !important;
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-align: left !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: background .15s ease, border-color .15s ease,
                color .15s ease !important;
}

#vispModal .withdraw-method-option-icon {
    width: 27px;
    height: 27px;
    border-radius: 8px;
    font-size: 13px;
}

#vispModal .withdraw-method-option-label {
    flex: 1 1 auto;
    min-width: 0;
}

#vispModal .withdraw-method-option-check {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: #d9caff;
    background: rgba(139, 92, 246, .2);
    opacity: 0;
    transition: opacity .15s ease;
}

#vispModal .withdraw-method-option.is-selected {
    border-color: rgba(167, 139, 250, .25) !important;
    background: linear-gradient(
        90deg, rgba(139, 92, 246, .19),
        rgba(139, 92, 246, .07)
    ) !important;
    color: #e8ddff !important;
}

#vispModal .withdraw-method-option.is-selected
.withdraw-method-option-check {
    opacity: 1;
}

#vispModal .withdraw-method-option:hover,
#vispModal .withdraw-method-option:focus-visible {
    border-color: rgba(167, 139, 250, .42) !important;
    background: rgba(139, 92, 246, .13) !important;
    color: #fff !important;
    outline: none !important;
}

#vispModal .withdraw-method-option.is-selected:hover {
    background: rgba(139, 92, 246, .24) !important;
}