/* nAstA — подложки v1.1. Текст на тёмных подложках — #EEF1F5 (17:1), на лаймовой — #0C0E11. Пути относительно папки css/.
   GFX-REFRESH v1 (2026-11-09): классы nw-bg2- и nw-pattern2- — 12 SVG из
   client/kit/backgrounds/svg/ (graphics refresh v1, правила пакета — backgrounds/usage.json):
   fallback-цвет объявлен до картинки; декор с opacity<1 — слоем ::before
   (position:absolute; z-index:-1 при isolation:isolate — декор над фоном и под
   контентом автоматически; не вешайте отрицательный z-index на детей), выразительные
   паттерны — только в пустых/брендных зонах, не за формами/таблицами/картой;
   mobile-SVG подключается и отдельным классом, и media-правилом ниже 768px
   (отдельная композиция, не центральный кроп десктопа).
   Состав v1.1: nw-bg2-hero-light/-dark (+*-mobile), nw-bg2-section-light/-dark,
   nw-bg2-cta-lime (+*-mobile), nw-bg2-app-shell-light/-dark,
   nw-pattern2-brand-light/-dark. Старые классы nw-bg- и nw-pattern- не тронуты —
   потребители мигрируют волной визуальной интеграции. */
.nw-bg-hero-dark{background:#0C0E11 url(../backgrounds/webp/hero-dark-1920x1080.webp) center/cover no-repeat;color:#EEF1F5}
@media (max-width:700px){.nw-bg-hero-dark{background-image:url(../backgrounds/webp/hero-dark-mobile-780x1200.webp);background-position:center bottom}}
.nw-bg-hero-light{background:#EEF1F4 url(../backgrounds/webp/hero-light-1920x1080.webp) center/cover no-repeat;color:#0C0E11}
.nw-bg-section-dark{background:#14171C url(../backgrounds/webp/section-dark-glow-1920x720.webp) center/cover no-repeat;color:#EEF1F5}
.nw-bg-section-light{background:#EEF1F4 url(../backgrounds/webp/section-light-soft-1920x720.webp) center/cover no-repeat;color:#0C0E11}
.nw-bg-cta-lime{background:#A8D930 url(../backgrounds/webp/cta-lime-1920x480.webp) center/cover no-repeat;color:#0C0E11}
/* без картинок: чистый CSS (быстрый fallback и мелкие блоки) */
.nw-bg-glow-dark{background:radial-gradient(75% 90% at 50% 115%,rgba(200,245,66,.16),transparent 70%),#14171C;color:#EEF1F5}
.nw-bg-glow-light{background:radial-gradient(50% 60% at 88% 0%,rgba(132,204,22,.16),transparent 70%),linear-gradient(#fff,#EEF1F4);color:#0C0E11}
.nw-bg-brand-gradient{background:var(--nasta-gradient-darkuse);color:#0C0E11}
/* бесшовные паттерны: накладывайте на фон темы */
.nw-pattern-dots-light{background-image:url(../backgrounds/patterns/dots-light.svg)}.nw-pattern-dots-dark{background-image:url(../backgrounds/patterns/dots-dark.svg)}
.nw-pattern-grid-light{background-image:url(../backgrounds/patterns/grid-light.svg)}.nw-pattern-grid-dark{background-image:url(../backgrounds/patterns/grid-dark.svg)}
.nw-pattern-diagonal-light{background-image:url(../backgrounds/patterns/diagonal-light.svg)}.nw-pattern-diagonal-dark{background-image:url(../backgrounds/patterns/diagonal-dark.svg)}
.nw-pattern-lambda-light{background-image:url(../backgrounds/patterns/lambda-light.svg)}.nw-pattern-lambda-dark{background-image:url(../backgrounds/patterns/lambda-dark.svg)}
/* ---- GFX-REFRESH v1: классы nw-bg2- и nw-pattern2- — SVG-подложки graphics refresh v1 (правила: backgrounds/usage.json пакета) ---- */
/* hero, opacity 1, safe area 8% 48% 10% 6% (desktop) / 7% 8% 48% 7% (mobile). Ниже 768px — отдельный mobile-SVG, не кроп десктопа. */
.nw-bg2-hero-light{background:#F3F3EF url(../backgrounds/svg/hero-light-1920x1080.svg) center/cover no-repeat;color:#0C0E11}
.nw-bg2-hero-dark{background:#0C0E11 url(../backgrounds/svg/hero-dark-1920x1080.svg) center/cover no-repeat;color:#EEF1F5}
@media (max-width:767px){
  .nw-bg2-hero-light{background-image:url(../backgrounds/svg/hero-light-mobile-780x1200.svg)}
  .nw-bg2-hero-dark{background-image:url(../backgrounds/svg/hero-dark-mobile-780x1200.svg)}
}
.nw-bg2-hero-light-mobile{background:#F3F3EF url(../backgrounds/svg/hero-light-mobile-780x1200.svg) center/cover no-repeat;color:#0C0E11}
.nw-bg2-hero-dark-mobile{background:#0C0E11 url(../backgrounds/svg/hero-dark-mobile-780x1200.svg) center/cover no-repeat;color:#EEF1F5}
/* section, opacity 1: спокойная брендная подложка секции. Mobile-SVG в пакете v1 нет — узкие экраны получают cover-масштаб десктопной композиции (обсудить в волне интеграции). */
.nw-bg2-section-light{background:#F7F7F3 url(../backgrounds/svg/section-light-1920x720.svg) center/cover no-repeat;color:#0C0E11}
.nw-bg2-section-dark{background:#14171C url(../backgrounds/svg/section-dark-1920x720.svg) center/cover no-repeat;color:#EEF1F5}
/* app shell, декоративный слой opacity .35 (density very-low), позиция right top. Контент поверх слоя автоматически (::before z-index:-1). Mobile-SVG в пакете v1 нет — см. примечание выше. */
.nw-bg2-app-shell-light{position:relative;isolation:isolate;background-color:#F3F3EF;color:#0C0E11}
.nw-bg2-app-shell-light::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(../backgrounds/svg/app-shell-light.svg) right top/cover no-repeat;opacity:.35}
.nw-bg2-app-shell-dark{position:relative;isolation:isolate;background-color:#0C0E11;color:#EEF1F5}
.nw-bg2-app-shell-dark::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(../backgrounds/svg/app-shell-dark.svg) right top/cover no-repeat;opacity:.35}
/* CTA-лайм: сплошной fallback #C8F542 + декоративный слой SVG opacity .8 (density accent); текст на лайме — #0C0E11. Ниже 768px слой переключается на mobile-SVG. */
.nw-bg2-cta-lime{position:relative;isolation:isolate;background-color:#C8F542;color:#0C0E11}
.nw-bg2-cta-lime::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(../backgrounds/svg/cta-lime-1920x480.svg) center/cover no-repeat;opacity:.8}
@media (max-width:767px){.nw-bg2-cta-lime::before{background-image:url(../backgrounds/svg/cta-lime-mobile-780x480.svg)}}
.nw-bg2-cta-lime-mobile{position:relative;isolation:isolate;background-color:#C8F542;color:#0C0E11}
.nw-bg2-cta-lime-mobile::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(../backgrounds/svg/cta-lime-mobile-780x480.svg) center/cover no-repeat;opacity:.8}
/* брендные паттерны (бесшовный repeat 160px): только пустые/брендные зоны, не за формами/таблицами/расписанием/картой; opacity держать постоянной. */
.nw-pattern2-brand-light{position:relative;isolation:isolate;background-color:#F7F7F3;color:#0C0E11}
.nw-pattern2-brand-light::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(../backgrounds/svg/pattern-light.svg) 0 0/160px 160px repeat;opacity:.45}
.nw-pattern2-brand-dark{position:relative;isolation:isolate;background-color:#14171C;color:#EEF1F5}
.nw-pattern2-brand-dark::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(../backgrounds/svg/pattern-dark.svg) 0 0/160px 160px repeat;opacity:.35}

/* Theme-aware roles shared by SPA and SSR. Explicit app theme wins over OS. */
:root {
  --nw-hero-image:url(../backgrounds/svg/hero-light-1920x1080.svg);
  --nw-hero-mobile-image:url(../backgrounds/svg/hero-light-mobile-780x1200.svg);
  --nw-section-image:url(../backgrounds/svg/section-light-1920x720.svg);
  --nw-shell-image:url(/app/kit/backgrounds/svg/app-shell-light.svg);
  --nw-pattern-image:url(../backgrounds/svg/pattern-light.svg);
  --nw-pattern-opacity:.45;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --nw-hero-image:url(../backgrounds/svg/hero-dark-1920x1080.svg);
    --nw-hero-mobile-image:url(../backgrounds/svg/hero-dark-mobile-780x1200.svg);
    --nw-section-image:url(../backgrounds/svg/section-dark-1920x720.svg);
    --nw-shell-image:url(/app/kit/backgrounds/svg/app-shell-dark.svg);
    --nw-pattern-image:url(../backgrounds/svg/pattern-dark.svg);
    --nw-pattern-opacity:.35;
  }
}
:root[data-theme="dark"] {
  --nw-hero-image:url(../backgrounds/svg/hero-dark-1920x1080.svg);
  --nw-hero-mobile-image:url(../backgrounds/svg/hero-dark-mobile-780x1200.svg);
  --nw-section-image:url(../backgrounds/svg/section-dark-1920x720.svg);
  --nw-shell-image:url(/app/kit/backgrounds/svg/app-shell-dark.svg);
  --nw-pattern-image:url(../backgrounds/svg/pattern-dark.svg);
  --nw-pattern-opacity:.35;
}
.nw-bg2-hero{background:var(--nw-bg) var(--nw-hero-image) center/cover no-repeat;color:var(--nw-text)}
.nw-bg2-section{background:var(--nw-surface-2) var(--nw-section-image) center/cover no-repeat;color:var(--nw-text)}
@media(max-width:767px){
  .nw-bg2-hero{background-image:var(--nw-hero-mobile-image)}
  /* The package has no narrow section/shell artwork. Keep these quiet. */
  .nw-bg2-section{background-image:none}
}
.nw-pattern2-brand{position:relative;isolation:isolate;background-color:var(--nw-surface-2)}
.nw-pattern2-brand::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--nw-pattern-image) 0 0/160px 160px repeat;opacity:var(--nw-pattern-opacity)}
.nw-bg2-cta-lime::before,.nw-bg2-cta-lime-mobile::before,.nw-pattern2-brand::before{border-radius:inherit}