/* Astrea premium skin v1  overlay poverh index-CpxdgOnf.css, ничего в JS не меняем */

/* ---- 1. Токены: люминесцентный азур на глубоком обсидиане ---- */
:root{
  --color-brand:#4d8dff;
  --color-page:#060a13;
  --color-ink:#eef3ff;
  --color-sub:#a0b3da;
  --color-faint:#6f83af;
  --color-ghost:#495a80;
  --color-onbrand:#f2f7ff;
  --color-card:#0e1626;
  --color-line-soft:#1c2942;
  --color-line:#2a3c60;
  /* вспомогательные для градиентов скина */
  --brand-hi:#8bbcff;
  --brand-mid:#4d8dff;
  --brand-lo:#2f6fe6;
  --brand-deep:#2559d4;
}

/* ---- 2. Атмосфера: многослойная аврора + точечная сетка ---- */
body::before{
  background-image:
    radial-gradient(135% 66% at 50% -16%, rgba(77,141,255,.42), transparent 58%),
    radial-gradient(85% 48% at 88% -6%, rgba(120,185,255,.20), transparent 55%),
    radial-gradient(95% 55% at 6% 106%, rgba(47,102,214,.17), transparent 60%),
    radial-gradient(60% 42% at 50% 122%, rgba(130,180,255,.11), transparent 60%),
    radial-gradient(1px at 12px 12px, rgba(150,185,255,.13) 1px, transparent 1.6px);
  background-size:100% 100%,100% 100%,100% 100%,100% 100%,28px 28px;
}
/* вижнетка для глубины по краям */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(125% 95% at 50% 38%, transparent 52%, rgba(2,5,12,.55) 100%);
}

/* ---- 3. Стекло: реальная глубина, брендовый кант, верхний блик ---- */
.glass-card{
  background:
    linear-gradient(180deg, rgba(140,180,255,.10), rgba(140,180,255,0) 40%),
    linear-gradient(180deg, rgba(77,141,255,.06), rgba(77,141,255,0) 72%),
    rgba(14,22,40,.72);
  border:1px solid rgba(120,160,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 16px 36px -20px rgba(0,4,12,.92),
    0 5px 14px -10px rgba(0,4,12,.85);
}
.glass-chip{
  background:
    linear-gradient(180deg, rgba(150,185,255,.13), rgba(150,185,255,0) 55%),
    rgba(22,32,52,.74);
  border:1px solid rgba(130,165,255,.17);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    0 8px 18px -14px rgba(0,4,12,.9);
}

/* ---- 4. Брендовый градиент (CTA, акцент-бары) glossy, но текст читаем ---- */
.gradient-nbb{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 34%),
    linear-gradient(140deg, #6aa6ff 0%, #4d8dff 44%, #2a5fd6 100%);
}
.glow-brand{
  box-shadow:
    0 12px 30px -10px rgba(77,141,255,.62),
    0 4px 12px -5px rgba(77,141,255,.45),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -7px 16px -9px rgba(10,20,50,.55);
}

/* ---- 5. Медленный блеск по главной кнопке ---- */
button.gradient-nbb{position:relative;overflow:hidden;text-shadow:0 1px 2px rgba(6,16,44,.45)}
button.gradient-nbb::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg, transparent 34%, rgba(255,255,255,.30) 50%, transparent 66%);
  transform:translateX(-130%);
  animation:astrea-sheen 5s ease-in-out infinite;
}
/* корректный disabled-вид: гасим градиент, свечение и блеск */
button.gradient-nbb:disabled{background-image:none;box-shadow:none;text-shadow:none}
button.gradient-nbb:disabled::after{display:none}
@keyframes astrea-sheen{
  0%,16%{transform:translateX(-130%)}
  40%,100%{transform:translateX(130%)}
}

/* ---- 6. Полировка: фокус, выделение, скроллбар ---- */
:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px;border-radius:8px}
::selection{background:rgba(77,141,255,.34);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(120,160,255,.20);border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(120,160,255,.30);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ---- 7. Уважать reduced-motion ---- */
@media (prefers-reduced-motion:reduce){
  button.gradient-nbb::after{animation:none;opacity:0}
}