:root{
  --k-bg:#050814;
  --k-ink:#eaf2ff;
  --k-muted:rgba(234,242,255,.72);

  --k-cyan:#00bcd4;
  --k-blue:#3b82f6;
  --k-violet:#8b5cf6;

  --k-line:rgba(120,180,255,.20);
  --k-line2:rgba(0,188,212,.16);

  --tg-bg:rgba(8,10,18,.58);
  --tg-bg-scrolled:rgba(8,10,18,.72);
  --tg-text:rgba(234,242,255,.88);
  --tg-border:rgba(120,180,255,.14);
  --tg-border-scrolled:rgba(120,180,255,.20);
  --tg-pill-bg:rgba(255,255,255,.05);
  --tg-pill-border:rgba(120,180,255,.12);
  --tg-shadow:0 18px 60px rgba(0,0,0,.45);
  --tg-r:18px;
}

body{
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(0,188,212,.18), transparent 55%),
    radial-gradient(1000px 700px at 85% 15%, rgba(139,92,246,.16), transparent 55%),
    radial-gradient(900px 700px at 60% 90%, rgba(59,130,246,.12), transparent 55%),
    linear-gradient(180deg, #050814, #070a14 55%, #050814);
  color: var(--k-ink);
}

body:before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .22;
  mix-blend-mode: overlay;
}

body > *{ position: relative; z-index: 1; }

h1,h2,h3,h4,h5,h6{ color: rgba(234,242,255,.92); }

a{ color: rgba(125,211,252,.95); }

a:hover{ color: #ffffff; }

.btn{ border-radius: 14px; }

.btn-primary{
  background: linear-gradient(90deg, rgba(0,188,212,.95), rgba(79,70,229,.95));
  box-shadow: 0 12px 30px rgba(0,188,212,.22);
  border: 0;
}

.btn-primary:hover{ filter: brightness(1.04); }

#search,
#cart{ display:none !important; }

nav#top{
  position: sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
  background: var(--tg-bg) !important;
  border-bottom: 1px solid var(--tg-border) !important;
  box-shadow: 0 12px 45px rgba(0,0,0,.35) !important;
  transition: transform .24s ease, opacity .24s ease, background .24s ease, box-shadow .24s ease, border-color .24s ease;
  will-change: transform, opacity;
  overflow: visible !important;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  nav#top{
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
  }
}

nav#top.is-scrolled{
  background: var(--tg-bg-scrolled) !important;
  border-bottom-color: var(--tg-border-scrolled) !important;
  box-shadow: var(--tg-shadow) !important;
}

nav#top.is-hidden{ transform: translateY(-110%); opacity: 0; }

nav#top.is-visible{ transform: translateY(0); opacity: 1; }

nav#top > .container{
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px;
  padding: 8px 12px !important;
  border-radius: var(--tg-r);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(120,180,255,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  position: relative;
  overflow: visible !important;
}

nav#top > .container:before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background: linear-gradient(135deg, rgba(0,188,212,.42), rgba(59,130,246,.26), rgba(139,92,246,.16));
  opacity:.55;
  padding: 1px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

nav#top .btn-link,
nav#top a{
  color: var(--tg-text) !important;
  text-decoration: none !important;
}

nav#top a:hover{ color: rgba(255,255,255,.98) !important; }

nav#top .nav,
nav#top .list-inline{
  display: flex !important;
  align-items: center !important;
  gap: 18px;
  margin: 0 !important;
  padding: 0 !important;
}

nav#top .list-inline > li{ margin: 0 !important; }

nav#top .dropdown,
nav#top #top-links,
nav#top #top-links .dropdown{
  position: relative !important;
  z-index: 20010 !important;
}

nav#top .dropdown-toggle,
nav#top .btn-link,
nav#top #top-links a,
nav#top .list-inline > li > a,
nav#top .list-inline > li > div{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  padding: 8px 14px !important;
  border-radius: 14px;
  background: var(--tg-pill-bg);
  border: 1px solid var(--tg-pill-border);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  line-height: 1 !important;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

nav#top .dropdown-toggle:hover,
nav#top .btn-link:hover,
nav#top #top-links a:hover,
nav#top .list-inline > li > a:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(0,188,212,.18);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  transform: translateY(-1px);
}

nav#top img{
  height: 14px;
  width: 14px;
  object-fit: cover;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}

nav#top i,
nav#top .fa,
nav#top .fas,
nav#top .far,
nav#top .fal,
nav#top .fab{
  font-size: 14px;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

nav#top .caret{
  margin-left: 6px;
  position: relative;
  top: 0;
}

nav#top .dropdown-menu{
  z-index: 999999 !important;
  background: rgba(8,10,18,.86) !important;
  border: 1px solid rgba(120,180,255,.18) !important;
  border-radius: 18px !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.55) !important;
  overflow: hidden !important;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  nav#top .dropdown-menu{
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
  }
}

nav#top .dropdown-menu a,
nav#top .dropdown-menu button{
  color: rgba(234,242,255,.88) !important;
  border-radius: 14px !important;
}

nav#top .dropdown-menu a:hover,
nav#top .dropdown-menu button:hover{
  background: rgba(0,188,212,.12) !important;
  color: rgba(255,255,255,.98) !important;
}

nav#top #top-links a#wishlist-total,
nav#top #top-links a[href*="wishlist"]{ display: none !important; }

@supports selector(li:has(a)){
  nav#top #top-links .list-inline > li:has(a#wishlist-total),
  nav#top #top-links .list-inline > li:has(a[href*="wishlist"]){ display: none !important; }
}

footer{
  background: rgba(8,10,18,.92);
  border-top: 1px solid rgba(120,180,255,.10);
}

footer a{ color: rgba(234,242,255,.72); }

footer a:hover{ color: rgba(0,188,212,.95); }

@media (max-width: 767px){
  nav#top > .container{
    flex-wrap: nowrap !important;
    gap: 10px !important;
    padding: 6px 10px !important;
    min-height: 44px !important;
  }

  nav#top > .container > div:first-child,
  nav#top #top-links{
    display:flex !important;
    align-items:center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  nav#top #top-links .list-inline{
    display:flex !important;
    align-items:center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  nav#top #top-links .list-inline > li{
    display:flex !important;
    align-items:center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  nav#top .dropdown-toggle,
  nav#top .btn-link,
  nav#top #top-links a{
    height: 34px !important;
    padding: 0 10px !important;
    gap: 8px !important;
  }
}


/* =========================================================
   KARNG VPN · SHOWCASE — “РУЧЕЙ” ОБНОВЛЕНИЙ (без скачков)
   ========================================================= */
#kvpn-showcase .kvpnS3-soft{
  position: relative;
  display:inline-block;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  transition: opacity .20s linear, filter .20s linear;
  will-change: opacity;
}

#kvpn-showcase .kvpnS3-soft.is-out{
  opacity: .35;
  filter: blur(.6px);
}
#kvpn-showcase .kvpnS3-soft.is-in{
  opacity: 1;
  filter: blur(0);
}

/* подсветка без изменения размеров */
#kvpn-showcase .kvpnS3-soft::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: 10px;
  pointer-events:none;
  opacity: 0;
  background: radial-gradient(220px 80px at 50% 50%, rgba(0,213,255,.14), transparent 65%);
  transition: opacity .26s ease;
}
#kvpn-showcase .kvpnS3-soft.is-flash::after{ opacity: 1; }

/* фиксируем ширину важных значений */
#kvpn-showcase #kvpnS3-kpiServers{ min-width: 3ch; text-align:right; }
#kvpn-showcase #kvpnS3-kpiPing{    min-width: 3ch; text-align:right; }
#kvpn-showcase #kvpnS3-kpiSpeed{   min-width: 3ch; text-align:right; }
#kvpn-showcase #kvpnS3-upd{        min-width: 8ch; }

/* кросс-фейд слоёв: таблица и список стран */
#kvpn-showcase .kvpnS3-tbodyLayer,
#kvpn-showcase .kvpnS3-cloudLayer{
  transition: opacity .20s linear, filter .20s linear;
  will-change: opacity;
}
#kvpn-showcase .kvpnS3-tbodyLayer.is-fadeOut,
#kvpn-showcase .kvpnS3-cloudLayer.is-fadeOut{
  opacity: 0;
  filter: blur(.8px);
}

/* размер SVG-флагов (Twemoji) */
#kvpn-showcase .kvpnS3-chipFlag img,
#kvpn-showcase .kvpnS3-flag img{
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: -3px;
  border-radius: 4px;
}

/* на очень маленьких экранах — меньше и плотнее */
@media (max-width: 480px){
  #kvpn-showcase .kvpnS3-chipFlag img,
  #kvpn-showcase .kvpnS3-flag img{
    width: 16px;
    height: 16px;
    vertical-align: -2px;
  }
}