/* VPNYES Connect — dark neon theme matching yespro.online homepage.
   Loaded last so it wins over premium.css / device-compact.css / the
   inline <style> block in html_page() without touching their layout rules. */

:root{
  --bg:#020500;
  --panel:rgba(9,22,14,.72);
  --panel2:rgba(6,14,10,.86);
  --line:rgba(126,255,31,.22);
  --green:#73ff18;
  --green2:#ccff44;
  --text:#f5fff0;
  --muted:#b9c8b4;
  --shadow:0 0 35px rgba(115,255,24,.32);
}

html,body{
  background:
    radial-gradient(circle at 70% 5%,rgba(115,255,24,.16),transparent 34%),
    radial-gradient(circle at 20% 55%,rgba(0,255,120,.12),transparent 36%),
    var(--bg) !important;
  color:var(--text) !important;
  font-family:'Manrope',Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif !important;
}

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

#moneyField{position:fixed;inset:0;width:100%;height:100%;z-index:-4;background:#020500}
.noise{
  position:fixed;inset:0;z-index:-2;opacity:.08;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 88%,transparent);
}
.aurora{position:fixed;z-index:-3;filter:blur(45px);opacity:.4;border-radius:999px;pointer-events:none}
.aurora-a{width:520px;height:520px;background:#1cff00;right:-180px;top:80px;animation:vy-float 12s ease-in-out infinite}
.aurora-b{width:460px;height:460px;background:#00ff88;left:-160px;bottom:10%;animation:vy-float 15s ease-in-out infinite reverse}
@keyframes vy-float{50%{transform:translate3d(30px,-35px,0) scale(1.08)}}

h1,.pay-title,.subinfo-title{
  font-family:'Unbounded','Manrope',sans-serif !important;
  color:var(--text) !important;
  letter-spacing:-.02em;
}

p,.pay-desc{color:var(--muted) !important}

.card{
  background:linear-gradient(180deg,rgba(18,42,22,.82),rgba(4,12,8,.86)) !important;
  border:1px solid var(--line) !important;
  box-shadow:0 0 55px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter:blur(10px);
  position:relative;
  z-index:1;
}

.brand{color:var(--green) !important}
.logo{
  background:radial-gradient(circle,#95ff21,rgba(36,255,0,.18)) !important;
  color:#051000 !important;
  box-shadow:var(--shadow);
}
.help{
  background:rgba(19,54,13,.48) !important;
  border:1px solid var(--line) !important;
  color:var(--text) !important;
}

.device{
  background:linear-gradient(180deg,rgba(18,42,22,.7),rgba(4,12,8,.6)) !important;
  border:1px solid var(--line) !important;
  color:var(--text) !important;
  transition:.25s transform,.25s box-shadow;
}
.device:hover{
  border-color:var(--green) !important;
  background:linear-gradient(180deg,rgba(18,42,22,.9),rgba(4,12,8,.75)) !important;
  box-shadow:0 0 30px rgba(115,255,24,.22);
}

.tabs{background:rgba(2,8,4,.5) !important;border:1px solid var(--line) !important}
.tab{color:var(--muted) !important}
.tab.active{
  background:linear-gradient(135deg,#c8ff45,#23ff00) !important;
  color:#051000 !important;
}

.info{
  background:rgba(2,8,4,.5) !important;
  border:1px solid var(--line) !important;
  color:var(--muted) !important;
}
.diff{
  background:rgba(7,16,11,.72) !important;
  border:1px solid var(--line) !important;
  color:var(--muted) !important;
}

.step{
  background:rgba(7,16,11,.72) !important;
  border:1px solid var(--line) !important;
  color:var(--muted) !important;
}
.note{color:var(--muted) !important}

.copybox{
  background:rgba(2,8,4,.5) !important;
  border:1px solid var(--line) !important;
  color:var(--text) !important;
}

.bottom{border-top:1px solid var(--line) !important;background:transparent !important}
.btn{
  background:rgba(8,15,12,.72) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:var(--text) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  transition:.2s transform,.2s box-shadow;
}
.btn:hover{transform:translateY(-1px)}

/* Primary CTAs: "Оплатить", "Активировать VPN", download card, "Поддержка" —
   bright lime gradient like the homepage's main button, dark text for contrast. */
.green,
.activate,
.download{
  background:linear-gradient(135deg,#dfff4e,#48ff0c 60%,#18d900) !important;
  border:none !important;
  color:#051000 !important;
  box-shadow:0 0 32px rgba(115,255,24,.4) !important;
  text-shadow:none !important;
}
.green *,
.activate *,
.download *{
  color:#051000 !important;
  fill:#051000 !important;
  text-shadow:none !important;
}
.green:hover,.activate:hover,.download:hover{filter:brightness(1.05)}

.download .ico{background:rgba(5,16,0,.18) !important}

/* Secondary CTA: "Продлить VPN", "Подключить доп. устройство" — glass outline
   in the same green family, visually distinct from the solid primary CTA. */
.blue{
  background:rgba(8,15,12,.72) !important;
  border:1px solid var(--line) !important;
  color:var(--green2) !important;
  box-shadow:0 0 20px rgba(115,255,24,.12) !important;
  text-shadow:none !important;
}
.blue *{color:var(--green2) !important;text-shadow:none !important}
.blue:hover{border-color:var(--green) !important}

.problem{
  background:rgba(239,68,68,.12) !important;
  border:1px solid rgba(239,68,68,.32) !important;
  color:#ffb4a0 !important;
}
.smalllink{color:var(--muted) !important}
.smalllink:hover{color:var(--green) !important}
.small{color:var(--muted) !important}

input[type="text"],input:not([type]),form input{
  background:rgba(2,8,4,.6) !important;
  border:1px solid var(--line) !important;
  color:var(--text) !important;
}
input::placeholder{color:var(--muted) !important}
input:focus{outline:none;border-color:var(--green) !important;box-shadow:0 0 0 3px rgba(115,255,24,.18)}

/* ===== Subscription info card ===== */
.subinfo-premium{
  background:linear-gradient(180deg,rgba(18,42,22,.78),rgba(4,12,8,.82)) !important;
  border:1px solid var(--line) !important;
  box-shadow:0 18px 45px rgba(0,0,0,.4) !important;
}
.subinfo-kicker{color:var(--green) !important}
.subinfo-title{color:var(--text) !important}
.subinfo-status{border:1px solid var(--line)}
.subinfo-status.ok{background:rgba(115,255,24,.14) !important;color:var(--green2) !important;border-color:rgba(115,255,24,.35) !important}
.subinfo-status.bad{background:rgba(239,68,68,.14) !important;color:#ff9c8a !important;border-color:rgba(239,68,68,.35) !important}
.subinfo-status.warn{background:rgba(245,158,11,.14) !important;color:#ffd08a !important;border-color:rgba(245,158,11,.35) !important}
.subinfo-status.danger{background:rgba(249,115,22,.15) !important;color:#ffb27a !important;border-color:rgba(249,115,22,.35) !important}

.subinfo-cell{background:rgba(2,8,4,.5) !important;border:1px solid var(--line) !important}
.subinfo-cell span{color:var(--muted) !important}
.subinfo-cell b{color:var(--text) !important}
.subinfo-cell em{color:var(--green2) !important}
.sub-meter{background:rgba(255,255,255,.08) !important}
.sub-meter i{background:linear-gradient(90deg,var(--green),var(--green2)) !important}
.subinfo-footer{color:var(--green) !important}

.subinfo-alert{box-shadow:none !important}
.subinfo-alert span{color:var(--muted) !important}
.subinfo-alert.ok{background:rgba(115,255,24,.1) !important;border:1px solid rgba(115,255,24,.28) !important}
.subinfo-alert.warn{background:rgba(245,158,11,.12) !important;border:1px solid rgba(245,158,11,.3) !important}
.subinfo-alert.danger{background:rgba(249,115,22,.13) !important;border:1px solid rgba(249,115,22,.32) !important}
.subinfo-alert.bad{background:rgba(239,68,68,.12) !important;border:1px solid rgba(239,68,68,.32) !important}

/* ===== Payment pages ===== */
.pay-status{background:rgba(2,8,4,.5) !important;border:1px solid var(--line) !important;color:var(--text) !important}
.pay-help{background:rgba(7,16,11,.65) !important;border:1px solid var(--line) !important;color:var(--muted) !important}

/* QR code needs a white patch to stay scannable — themed frame only */
.qr-frame{
  border:1px solid var(--line) !important;
  background:#fff !important;
  box-shadow:0 0 24px rgba(115,255,24,.18);
}

/* device-compact.css shrinks body padding to 6px/0 and the card to
   calc(100% - 12px) on phones — that leaves almost no visible viewport
   for the money-rain canvas to show through. Give the theme its own
   breathing room so the animated background is actually visible. */
@media(max-width:520px){
  body{padding:16px 12px !important}
  .card{width:calc(100% - 24px) !important;border-radius:22px !important}
  .aurora{opacity:.35}
}