/* Скин кабинета в стиле вебаппа Neirosetia: шрифты, токены, liquid glass. Цвета собираемого CSS перекрашивает
   src/lib/theme.mjs; здесь только то, что перекраской не выразить. Файл копируется в сборку как есть. */
@font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/theme/fonts/inter-cyrillic-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/theme/fonts/inter-cyrillic-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/theme/fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/theme/fonts/inter-latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* Акцентное слово заголовка главной — Playfair (Google Fonts, OFL), узкая (wdth 87.5) и средняя оптика: как засечки на образце владельца 12.11 */
@font-face { font-family: 'Playfair'; font-style: normal; font-display: swap; font-weight: 300 900; font-stretch: 87.5% 112.5%; src: url(/theme/fonts/playfair-cyrillic-wdth-wght-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Playfair'; font-style: normal; font-display: swap; font-weight: 300 900; font-stretch: 87.5% 112.5%; src: url(/theme/fonts/playfair-latin-wdth-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --ns-bg: #010101; --ns-surface: #282727; --ns-surface-2: #3a3a3a; --ns-sheet: #212020; --ns-input: #1c1c1c;
  --ns-line: #454545; --ns-text: #fff; --ns-text-1: #ffffffb3; --ns-text-2: #ffffff66; --ns-muted: #6d6d71;
  --ns-primary: #1689ff; --ns-accent: #49df64; --ns-danger: #df494d; --ns-gold: #f1aa05; --ns-purple: #af51de;
  --ns-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --glass-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    inset 1.8px 3px 0 -2px rgba(255, 255, 255, 0.27),
    inset -2px -2px 0 -2px rgba(255, 255, 255, 0.24),
    inset -3px -8px 1px -6px rgba(255, 255, 255, 0.18),
    inset -0.3px -1px 4px 0 rgba(0, 0, 0, 0.24),
    inset -1.5px 2.5px 0 -2px rgba(0, 0, 0, 0.4),
    inset 0 3px 4px -2px rgba(0, 0, 0, 0.4),
    inset 2px -6.5px 1px -4px rgba(0, 0, 0, 0.2),
    0 1px 5px 0 rgba(0, 0, 0, 0.2),
    0 6px 16px 0 rgba(0, 0, 0, 0.16);
  --lens-shadow:
    inset 0 0 0 1px #ffffff08, inset 2px 1px 0 -1px #ffffff45, inset -1.5px -1px 0 -1px #ffffff3d,
    inset -2px -6px 1px -5px #ffffff2e, inset -1px 2px 3px -1px #0006, inset 0 -4px 1px -2px #0003, 0 3px 6px #00000029;
  --glass-rim:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03), inset 1.8px 3px 0 -2px rgba(255, 255, 255, 0.27),
    inset -2px -2px 0 -2px rgba(255, 255, 255, 0.24), inset -1.5px 2.5px 0 -2px rgba(0, 0, 0, 0.4);
  --font-sans: "Inter Variable", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  color-scheme: dark;
}
html, body { background: var(--ns-bg) !important; color: var(--ns-text); }
body { font-family: var(--font-sans) !important; letter-spacing: -0.2px; -webkit-font-smoothing: antialiased; }
::selection { background: #1689ff66; }
* { scrollbar-color: #3a3a3a transparent; }

/* ---------- canvas: webapp black + soft ambient light so the glass has something to refract ---------- */
:root { --c-bg: #010101 !important; --c-surface: #1a1a1a !important; --c-surface-50: #232323 !important; }
body::before {
  content: ''; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 32% at 18% 12%, rgba(22, 137, 255, 0.16), transparent 70%),
    radial-gradient(34% 30% at 86% 18%, rgba(175, 81, 222, 0.14), transparent 70%),
    radial-gradient(30% 26% at 60% 92%, rgba(73, 223, 100, 0.06), transparent 70%);
  filter: blur(40px);
}
.bg-slate-100 { background-color: var(--ns-bg) !important; }
body > .app, .app { background-color: transparent !important; }
/* app shell is transparent so the ambient light shows through; overlays keep an opaque fill */
div[class~="h-dvh"][class~="bg-slate-100"] { background-color: transparent !important; }
/* mobile drawers (SPA + CMS): dense dark glass, not see-through */
header nav[class~="absolute"][class~="bg-slate-100"], .cms-mobile-header-drawer {
  background-color: rgba(18, 18, 18, 0.94) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06), 0 0 40px rgba(0, 0, 0, 0.6) !important;
}
html { background: var(--ns-bg) !important; }

/* ---------- liquid glass: pills, chips, header controls ---------- */
:is(button, a)[class~="rounded-full"]:is([class~="border"], [class~="bg-white"]):not([class~="border-transparent"]):not([class~="absolute"]),
:is(button, a)[class~="rounded-lg"][class~="border"],
:is(button, a)[class~="rounded-xl"][class~="border"],
header :is(button, a)[class~="border"]:not([class~="border-transparent"]),
.pill, .chip, .btn-secondary, .btn--secondary {
  background-color: rgba(0, 0, 0, 0.12) !important;
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  border-color: transparent !important;
  box-shadow: var(--glass-shadow) !important;
  border-radius: 999px;
}

/* primary actions: webapp blue with glass rim */
:is(button, a)[class*="bg-blue-6"], :is(button, a)[class*="bg-[#155DFC]"], :is(button, a)[class*="bg-[#155dfc]"],
:is(button, a)[class*="from-blue"], .btn-primary, .btn--primary {
  background: var(--ns-primary) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: var(--glass-shadow) !important;
}

/* ---------- glass cards / sections ---------- */
[class~="rounded-3xl"][class*="shadow-"]:has(textarea),
[class~="rounded-2xl"]:is([class~="bg-white"], [class~="border"]):not(button):not(a):not(img):not([class~="absolute"]):not([class~="border-transparent"]):not(:has(> video, > img)),
[class~="rounded-3xl"]:is([class~="bg-white"], [class~="border"]):not(button):not(a):not(img):not([class~="absolute"]):not([class~="border-transparent"]):not(:has(> video, > img)),
[class*="rounded-[20px]"]:is([class~="bg-white"], [class~="border"]),
[class*="rounded-[24px]"]:is([class~="bg-white"], [class~="border"]) {
  background-color: rgba(40, 39, 39, 0.52) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-color: transparent !important;
  box-shadow: var(--glass-shadow) !important;
}
/* chat composer: thicker glass */
[class~="rounded-3xl"][class*="shadow-"]:has(textarea), .cms-prompt-input {
  background-color: rgba(33, 32, 32, 0.62) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  box-shadow: var(--glass-shadow) !important;
  border: 0 !important;
}
textarea, input { background-color: transparent; }

/* ---------- sheets, dialogs, menus, popovers ---------- */
/* [data-own-skin] — свои окна кабинета (шторка WebSheet, пейвол) со своим фоном, рамкой и скруглением: не перекрашивать */
.responsive-overlay__content, [role="dialog"]:not(:has(.responsive-overlay__content)):not(.responsive-overlay__content *):not([data-own-skin]), [role="menu"], [role="listbox"], [data-radix-popper-content-wrapper] > *,
[data-vaul-drawer] {
  background-color: rgba(26, 26, 26, 0.93) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border-color: transparent !important;
  box-shadow: var(--glass-shadow), 0 24px 64px rgba(0, 0, 0, 0.5) !important;
  color: #fff;
}
.responsive-overlay__overlay, [data-vaul-overlay] { background: rgba(0, 0, 0, 0.55) !important; }

/* ---------- segmented controls & tabs: lens on the active item ---------- */
[role="tablist"] {
  background-color: rgba(0, 0, 0, 0.25) !important;
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.14) !important;
  border-color: transparent !important;
}
[role="tab"] { border-radius: 999px; }
[role="tab"]:is([aria-selected="true"], [data-state="active"]) {
  background-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: var(--lens-shadow) !important;
  color: #fff !important;
}

/* sidebar: active row as a lens */
aside :is(a, button)[class~="bg-white"], aside :is(a, button)[aria-current="page"], .sidebar .nav-item.active, .sidebar .nav-item--active, .sidebar .nav-item[aria-current] {
  background-color: rgba(255, 255, 255, 0.10) !important;
  box-shadow: var(--lens-shadow) !important;
  border-radius: 999px !important;
}

/* brand logos on light backgrounds -> light on dark */
img[src*="/logos/brands/"] { filter: brightness(0) invert(1); opacity: 0.6; }

/* switches / toggles in webapp style; [data-own-skin] — свои переключатели (Toggle вебаппа в src/wa: role="switch" у всей
   строки с подписью, дорожка внутри) — не красить */
button[role="switch"]:not([data-own-skin])[data-state="checked"], button[role="switch"]:not([data-own-skin])[aria-checked="true"] { background-color: var(--ns-primary) !important; }
button[role="switch"]:not([data-own-skin]) { background-color: var(--ns-surface-2); }

/* scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

.responsive-overlay__content, [role="dialog"]:not([data-own-skin]) { border-radius: 28px; }
@media (max-width: 1023px) { .responsive-overlay__content { border-radius: 28px 28px 0 0; } }
main.main, .main { background-color: transparent !important; }
.cms-prompt-dock, .cms-prompt-dock__inner, .cms-prompt-input__text-row { background: transparent !important; box-shadow: none !important; }

/* mobile tab bar -> floating glass pill like the webapp tabbar (pk-tabbar) */
.mobile-tab-bar-slot { padding: 6px 12px calc(var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)) + 8px); }
.mobile-tab-bar-slot > div { overflow: visible !important; }
.mobile-tab-bar-slot nav { background: transparent !important; padding-bottom: 0 !important; }
.mobile-tab-bar-slot nav > div {
  height: 62px; padding: 4px !important; gap: 2px; border-radius: 999px;
  background-color: rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%);
  box-shadow: var(--glass-shadow);
}
.mobile-tab-bar-slot nav > div > :is(a, button) {
  height: 100%; justify-content: center; gap: 3px; min-width: 0; border-radius: 999px !important;
  color: #fff; opacity: 0.45; transition: opacity .16s, background-color .2s;
}
.mobile-tab-bar-slot nav > div > :is(a, button) > span:last-child {
  color: inherit !important; font-size: 10px; line-height: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px;
}
.mobile-tab-bar-slot nav > div > :is(a, button) > span:first-child { width: 22px; height: 22px; }
.mobile-tab-bar-slot nav > div > :is(a, button) svg { width: 22px; height: 22px; }
.mobile-tab-bar-slot nav > div > :is(a.active, a[aria-current="page"]) {
  opacity: 1; color: var(--ns-primary); background-color: #0000004d; box-shadow: var(--lens-shadow);
}
/* «Создать»: blue glass button inside the pill instead of a bump sticking out of the bar */
.mobile-tab-bar-slot nav > div > button { opacity: 1; }
.mobile-tab-bar-slot nav > div > button > span:first-child { width: auto; height: auto; align-items: center; }
.mobile-tab-bar-slot nav > div > button > span:first-child > span {
  padding: 0; width: 46px; height: 46px; align-items: center; justify-content: center;
  background: var(--ns-primary) !important; box-shadow: var(--glass-shadow);
}
.mobile-tab-bar-slot nav > div > button > span:first-child > span svg { width: 22px; height: 22px; }
.mobile-tab-bar-slot nav > div > button > span:last-child { display: none; }

/* floating round controls of the mobile header */
span[class~="absolute"][class~="inset-0"][class~="rounded-full"][class*="backdrop-blur"] {
  background-color: rgba(0, 0, 0, 0.12) !important; border-color: transparent !important; box-shadow: var(--glass-shadow) !important;
}

/* CMS pages: same floating glass tab bar */
:root { --cms-mobile-tabbar-height: 78px; }
nav.mobile-bottom-menu {
  left: 12px !important; right: 12px !important; bottom: calc(var(--cms-mobile-safe-area-bottom, 0px) + 8px) !important;
  height: 62px !important; padding: 4px !important; gap: 2px; border-radius: 999px;
  background-color: rgba(0, 0, 0, 0.12) !important;
  -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%);
  box-shadow: var(--glass-shadow) !important;
}
nav.mobile-bottom-menu::before { display: none !important; }
nav.mobile-bottom-menu .mobile-bottom-item { height: 100% !important; gap: 3px !important; border-radius: 999px; color: #fff; opacity: 0.45; }
nav.mobile-bottom-menu .mobile-bottom-item__label { font-size: 10px; line-height: 12px; font-weight: 500; color: inherit !important; }
nav.mobile-bottom-menu .mobile-bottom-item.is-active { opacity: 1; color: var(--ns-primary) !important; background-color: #0000004d; box-shadow: var(--lens-shadow); }
nav.mobile-bottom-menu .mobile-bottom-item--create { opacity: 1; }
nav.mobile-bottom-menu .mobile-bottom-item--create .mobile-bottom-item__label { display: none; }
nav.mobile-bottom-menu .mobile-bottom-item__icon--create { width: auto; height: auto; flex: none; align-items: center; }
nav.mobile-bottom-menu .mobile-bottom-item__create-circle { width: 46px; height: 46px; flex: none; padding: 12px; background: var(--ns-primary) !important; box-shadow: var(--glass-shadow); }

/* phones in landscape: compact bars (the original flat bar is ~45px) */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --cms-mobile-tabbar-height: 56px; }
  .mobile-tab-bar-slot { padding: 4px 12px calc(var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)) + 4px); }
  .mobile-tab-bar-slot nav > div, nav.mobile-bottom-menu { height: 46px !important; }
  nav.mobile-bottom-menu { bottom: calc(var(--cms-mobile-safe-area-bottom, 0px) + 4px) !important; }
  .mobile-tab-bar-slot nav > div > :is(a, button), nav.mobile-bottom-menu .mobile-bottom-item { flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 6px !important; }
  .mobile-tab-bar-slot nav > div > :is(a, button) > span:first-child, .mobile-tab-bar-slot nav > div > :is(a, button) svg { width: 18px; height: 18px; }
  .mobile-tab-bar-slot nav > div > :is(a, button) > span:last-child, nav.mobile-bottom-menu .mobile-bottom-item__label { width: auto !important; font-size: 11px; align-self: center !important; flex: none; }
  .mobile-tab-bar-slot nav > div > button > span:first-child > span, nav.mobile-bottom-menu .mobile-bottom-item__create-circle { width: 36px; height: 36px; padding: 8px; }
  .mobile-tab-bar-slot nav > div > button > span:first-child > span svg { width: 18px; height: 18px; }
}

/* light decorative backgrounds (raster) -> dark versions with the same hues */
img.creators-catalog-page__background, img[src*="hero-bg"], img[src*="-bg-"][class*="background"] {
  filter: invert(1) hue-rotate(180deg) brightness(0.9) saturate(1.3);
}

/* tablets: the floating tab bar keeps the webapp width instead of stretching edge to edge */
.mobile-tab-bar-slot nav > div, nav.mobile-bottom-menu { max-width: 520px; margin-left: auto !important; margin-right: auto !important; }

/* dialogs: sticky footers/headers blend into the sheet; close icons readable */
:is(.responsive-overlay__content, [role="dialog"]) [class~="sticky"]:is([class~="bg-white"], [class*="bg-[#"]) { background-color: transparent !important; }
:is(.responsive-overlay__content, [role="dialog"]:not([data-own-skin])) button:is([aria-label*="акрыть"], [aria-label*="lose"]) { color: rgba(255, 255, 255, 0.7) !important; }

/* окно входа выше экрана телефона, повёрнутого горизонтально, и не прокручивалось (sm:overflow-visible) */
@media (min-width: 640px) and (max-height: 760px) {
  [role="dialog"][class*="sm:overflow-visible"] {
    top: 0 !important; --tw-translate-y: 0 !important; height: 100dvh !important; max-height: 100dvh !important;
    overflow-y: auto !important; padding: 12px 0 !important; background: transparent !important; box-shadow: none !important;
  }
}
/* OTP / text inputs inside dialogs: visible cells on the dark sheet */
:is(.responsive-overlay__content, [role="dialog"]) input:not([type="checkbox"]):not([type="radio"]) {
  border-color: rgba(255, 255, 255, 0.14) !important;
}
/* OTP cells are divs under a transparent input */
:is(.responsive-overlay__content, [role="dialog"]) [data-input-otp-container] > div > div, :is(.responsive-overlay__content, [role="dialog"]) [data-slot="input-otp-slot"] { border-color: rgba(255, 255, 255, 0.18) !important; }

/* Форма студии в оформлении вебаппа (src/app/StudioForm.tsx, src/app/studio-form.css). Токены здесь, а не в
   собираемом CSS: skin.css копируется без перекраски src/lib/theme.mjs, а studio-form.css её проходит —
   поэтому там только var(--nsf-*), без цветов. Значения — frontend/src/styles/app.css вебаппа. */
/* кнопка аккаунта внизу боковой панели (src/app/side-account.css) */
.nsa { --nsa-text: #ffffff; --nsa-muted: #ffffff8c; --nsa-hover: #ffffff12; --nsa-chip: #ffffff14; --nsa-line: #ffffff14; --nsa-danger: #ff6b6e;
  --nsa-avatar: linear-gradient(135deg, #5b8cff, #a45bff); --nsa-menu: #1f1f1f; --nsa-menu-shadow: 0 18px 40px #000000a0;
  --nsa-dot: #ff3b30; --nsa-bg: #121212; }
/* заглушка генерации (src/app/gen-loader.css) */
.nsg {
  --nsg-bg: #0b0b12; --nsg-text: #ffffff; --nsg-chip: #00000066; --nsg-track: #ffffff1f; --nsg-core-bg: #0000004d;
  --nsg-c1: radial-gradient(circle, #1689ffd9 0%, #1689ff00 66%); --nsg-c2: radial-gradient(circle, #8b5cf6d9 0%, #8b5cf600 66%);
  --nsg-c3: radial-gradient(circle, #ff3d9ad1 0%, #ff3d9a00 66%); --nsg-c4: radial-gradient(circle, #22d3eebf 0%, #22d3ee00 66%);
  --nsg-sweep: linear-gradient(105deg, #ffffff00 40%, #ffffff24 50%, #ffffff00 60%);
  --nsg-ring: conic-gradient(from 0deg, #1689ff00 0deg, #1689ff 120deg, #8b5cf6 220deg, #ff3d9a 300deg, #ff3d9a00 360deg);
  --nsg-bar: linear-gradient(90deg, #1689ff, #8b5cf6, #ff3d9a); --nsg-bar-glow: 0 0 14px #8b5cf6b3; --nsg-shine: linear-gradient(90deg, #ffffff00, #ffffff80, #ffffff00);
  --nsg-spark: #ffffff; --nsg-spark-glow: 0 0 8px #ffffffcc, 0 0 16px #8b5cf6aa;
  --nsg-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
/* «Ноды» — холст цепочек (src/app/nodes.css) */
.nsx {
  --nsx-bg: #0c0c0c; --nsx-grid: radial-gradient(#ffffff1c 1px, #ffffff00 1.3px); --nsx-text: #ffffff; --nsx-muted: #ffffff8c; --nsx-faint: #ffffff4d;
  --nsx-card: #1b1b1b; --nsx-chip: #ffffff12; --nsx-line: #ffffff14; --nsx-input: #0000004d; --nsx-primary: var(--ns-primary); --nsx-ok: #8ff0a4;
  --nsx-edge: #6db8ff; --nsx-edge-wait: #ffffff4d; --nsx-port-idle: #3a3a3a; --nsx-port-shadow: 0 6px 18px #1689ff66;
  --nsx-node-shadow: 0 14px 30px #00000066; --nsx-menu: #202020; --nsx-menu-shadow: 0 18px 40px #000000a0;
  --nsx-photo: #ffd16b; --nsx-video: #80cfff; --nsx-up: #8ff0a4; --nsx-var: #c9a6ff;
  --nsx-scrim: #00000099; --nsx-danger: #e5484d; --nsx-focus: #1689ff55;
}
/* диалог студии в формате GPT (src/app/dialog.css); поле ввода стоит вне ленты — токены и на его месте */
.nsd, .nsd-dock, .nsd-dock-m {
  --nsd-text: #ffffff; --nsd-muted: #ffffff8c; --nsd-faint: #ffffff59; --nsd-card: #1b1b1b; --nsd-card-hover: #262626; --nsd-chip: #ffffff12;
  --nsd-me: #262626; --nsd-line: #ffffff14; --nsd-input: #0000004d; --nsd-seg-on: #ffffff24; --nsd-none: #00000000; --nsd-primary: var(--ns-primary); --nsd-link: #6db8ff;
  --nsd-composer: #1b1b1bf2; --nsd-composer-shadow: 0 12px 30px #00000080; --nsd-dock-fade: linear-gradient(to bottom, #0a0a0a00, #0a0a0a 30%);
  --nsd-photo: #ffd16b; --nsd-video: #80cfff; --nsd-up: #8ff0a4; --nsd-var: #c9a6ff; --nsd-feed: #ff9eb1;
}
/* поддержка (src/app/support.css); .nss-tok — части вне ленты: кнопка «Генерация» в поле ввода и плашка над ним */
.nss, .nss-tok {
  --nss-text: #ffffff; --nss-muted: #ffffff8c; --nss-faint: #ffffff59; --nss-card: #1b1b1b; --nss-card-hover: #262626; --nss-chip: #ffffff12;
  --nss-me: #262626; --nss-pick: #1689ff2e; --nss-line: #ffffff14; --nss-line-strong: #ffffff33; --nss-none: #00000000; --nss-bg: #0a0a0a;
  --nss-primary: var(--ns-primary); --nss-link: #6db8ff; --nss-accent: #6db8ff; --nss-online: #34d399; --nss-ok: #8ff0a4; --nss-wait: #ffd16b;
  --nss-reward: #ffd16b; --nss-reward-bg: #ffd16b1f; --nss-pop: #1b1b1bf2; --nss-pop-shadow: 0 12px 30px #00000080;
}
/* язычок формы студии (src/app/form-fold.css) — как .side-tab у voicy-web */
.nsk, .nsk-side {
  --nsk-surface: #1b1b1b; --nsk-line: #ffffff1f; --nsk-text: #ffffff; --nsk-muted: #ffffff8c; --nsk-accent: #6db8ff;
  --nsk-hover-bg: #1689ff1f; --nsk-hover-line: #1689ff73; --nsk-shadow: 0 6px 20px #00000066; --nsk-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
/* окно пресета (src/app/preset-page.css) */
.nsr {
  --nsr-text: #ffffff; --nsr-muted: #ffffff8c; --nsr-faint: #ffffff4d; --nsr-line: #ffffff26; --nsr-card: #161616; --nsr-chip: #ffffff12; --nsr-chip-hover: #ffffff1f;
  --nsr-primary: var(--ns-primary); --nsr-primary-text: #6db8ff; --nsr-primary-soft: #1689ff26; --nsr-on-primary: #ffffff; --nsr-danger: #ff6b6e;
  --nsr-drop-bg: #ffffff05; --nsr-drop-line: #ffffff14; --nsr-drop-dash: #6db8ff59; --nsr-accent-line: linear-gradient(90deg, #6db8ff, #c9a6ff);
  --nsr-go: linear-gradient(135deg, #36a3ff, #1677ff 55%, #7a5af8); --nsr-go-shadow: 0 12px 32px #1689ff40; --nsr-go-pill: #ffffff26;
  --nsr-scrim: #000000a6; --nsr-stage-shadow: inset 0 0 0 1px #ffffff12; --nsr-card-fade: linear-gradient(to top, #000000cc, #00000000);
  --nsr-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
/* презентации (src/app/slides.css); слайды светлые, как настоящие. .nsz-slide-box — слайд вне раздела (история,
   «Что нового»): токены нужны и ему */
.nsz, .nsz-slide-box {
  --nsz-text: #ffffff; --nsz-muted: #ffffff8c; --nsz-faint: #ffffff4d; --nsz-line: #ffffff17; --nsz-card: #141414; --nsz-card-hover: #1d1d1d;
  --nsz-input: #ffffff08; --nsz-chip: #ffffff14; --nsz-chip-hover: #ffffff24; --nsz-seg-on: #ffffff24; --nsz-ring: inset 0 0 0 1px #ffffff12;
  --nsz-primary: var(--ns-primary); --nsz-primary-text: #6db8ff; --nsz-primary-soft: #1689ff1f; --nsz-danger: #ff6b6e; --nsz-ok: #8ff0a4; --nsz-ok-soft: #8ff0a41f;
  --nsz-accent: linear-gradient(120deg, #35aff1 0%, #1689ff 60%, #3a3a3a 140%); --nsz-on-accent: #ffffff; --nsz-accent-shadow: 0 12px 32px #1689ff40;
  --nsz-go: linear-gradient(120deg, #35aff1 0%, #1689ff 70%); --nsz-go-pill: #ffffff26; --nsz-scrim: #000000a6;
  --nsz-slide-bg: #f7f8fb; --nsz-slide-text: #141821; --nsz-slide-line: #d9dee8; --nsz-slide-accent: #1689ff; --nsz-slide-shadow: 0 6px 18px #00000059;
  --nsz-slide-title: linear-gradient(130deg, #1f6fff 0%, #35aff1 55%, #7a5af8 120%);
  --nsz-viewer-bg: #000000e6; --nsz-viewer-shadow: 0 30px 80px #000000b3;
}
/* «Что нового» (src/app/whats-new.css) — как окно новинки у ChatGPT */
.nsn {
  --nsn-scrim: #000000b3; --nsn-card: #212121; --nsn-text: #ffffff; --nsn-muted: #ffffffb3; --nsn-shadow: 0 30px 80px #00000099, inset 0 0 0 1px #ffffff12;
  --nsn-media: radial-gradient(120% 120% at 20% 0%, #35aff1 0%, #1689ff 45%, #2a1f5c 100%); --nsn-close: #00000059; --nsn-close-hover: #00000080;
  --nsn-cta: #ffffff; --nsn-cta-text: #0d0d0d; --nsn-cta-ring: 0 0 0 2px #5b4cff; --nsn-focus: 0 0 0 5px #5b4cff59; --nsn-slide-shadow: 0 14px 34px #00000073;
}
/* экраны вебаппа на телефоне (src/wa, src/wa/README.md): палитра frontend/src/styles/app.css вебаппа. Цвета Tailwind
   wa-* (src/app/app.css) ссылаются сюда — мимо сборочной перекраски */
:root {
  --wa-bg: #010101; --wa-surface: #282727; --wa-surface-2: #3a3a3a; --wa-sheet: #212020; --wa-input: #1c1c1c; --wa-line: #454545;
  --wa-text: #ffffff; --wa-text-1: #ffffffb3; --wa-text-2: #ffffff66; --wa-text-3: #ffffff3d; --wa-muted: #6d6d71;
  --wa-primary: #1689ff; --wa-accent: #49df64; --wa-danger: #df494d; --wa-gold: #f1aa05; --wa-purple: #af51de;
  --wa-cyan: #5ac8fa; --wa-azure: #35aff1; --wa-orange: #f18305; --wa-snow: #ffffff; --wa-ink: #000000;
  --wa-glass-card: rgba(40, 39, 39, 0.52); --wa-control-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.14);
  --wa-coin: radial-gradient(circle at 35% 30%, #ffe08a, #f1aa05 55%, #c27400); --wa-coin-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2), inset 0 1.5px 0 rgba(255, 255, 255, 0.5);
  --wa-ease-expo: cubic-bezier(0.16, 1, 0.3, 1); --wa-dot: #ff3b30;
  --wa-pf-glow: radial-gradient(circle, rgba(22, 137, 255, 0.3), rgba(22, 137, 255, 0.12) 40%, transparent 68%);
  --wa-pf-avatar: linear-gradient(140deg, #5ac8fa, #1689ff 55%, #0b64d8);
  --wa-pf-posts: linear-gradient(115deg, #1689ff, #6a5cff 60%, #af51de);
  --wa-pf-shine: radial-gradient(circle, rgba(255, 255, 255, 0.35), transparent 68%);
  --wa-pf-lens: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02) 65%);
  --wa-feed-scrim: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 22%), linear-gradient(0deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0) 52%);
  --wa-feed-top: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent); --wa-av-ring: rgba(255, 255, 255, 0.85);
  --wa-av-0: linear-gradient(135deg, #1689ff, #6a5cff); --wa-av-1: linear-gradient(135deg, #af51de, #e0457b); --wa-av-2: linear-gradient(135deg, #f1aa05, #f18305);
  --wa-av-3: linear-gradient(135deg, #16b36b, #49df64); --wa-av-4: linear-gradient(135deg, #35aff1, #1689ff); --wa-av-5: linear-gradient(135deg, #e0457b, #f18305);
  --wa-cover-audio: radial-gradient(80% 60% at 30% 20%, rgba(241, 170, 5, 0.55), transparent 70%), linear-gradient(140deg, #3a2a0a, #1c1c1c);
  --wa-cover-doc: radial-gradient(80% 60% at 70% 20%, rgba(90, 200, 250, 0.45), transparent 70%), linear-gradient(140deg, #0e2a3a, #1c1c1c);
  --wa-running: linear-gradient(135deg, rgba(22, 137, 255, 0.22), rgba(175, 81, 222, 0.12) 60%, transparent);
  --wa-publish: linear-gradient(120deg, #1689ff, #6a5cff 55%, #af51de);
  --wa-shimmer: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%); --wa-balance: #10233f;
  --wa-tile-continue: linear-gradient(140deg, #35aff1, #1689ff); --wa-tile-download: rgba(255, 255, 255, 0.12);
}
/* «Ассистенты» на странице «Диалоги GPT» (src/app/dialogs.css) */
.nsag { --nsag-text: #ffffff; --nsag-muted: #ffffff80; --nsag-faint: #ffffff4d; --nsag-card: #ffffff08; --nsag-card-hover: #ffffff12; --nsag-chip: #ffffff12; --nsag-ring: inset 0 0 0 1px #ffffff0f; --nsag-accent: #6db8ff; }
/* окно элемента библиотеки (src/app/library-item.css) */
.nsli { --nsli-scrim: #000000b3; --nsli-card: #171717; --nsli-media: #0b0b0b; --nsli-shadow: 0 30px 80px #00000099, inset 0 0 0 1px #ffffff12; --nsli-text: #ffffff; --nsli-text-2: #ffffffcc; --nsli-muted: #ffffff80; --nsli-chip: #ffffff12; --nsli-chip-hover: #ffffff1f; --nsli-primary: var(--ns-primary); --nsli-on-primary: #ffffff; --nsli-danger: #ff6b6e; --nsli-accent: #c9a6ff;
  --nsli-wave: #ffffff2e; --nsli-wave-on: linear-gradient(180deg, #c9a6ff, #8f6bff); --nsli-track-on: #8f6bff1f; }
/* предупреждение перед удалением (src/app/confirm-delete.css) */
.nscd { --nscd-scrim: #000000b3; --nscd-card: #1c1c1c; --nscd-shadow: 0 30px 80px #00000099, inset 0 0 0 1px #ffffff12; --nscd-text: #ffffff; --nscd-muted: #ffffff8c; --nscd-chip: #ffffff14; --nscd-chip-hover: #ffffff24; --nscd-danger: #ff453a; --nscd-danger-soft: #ff453a26; --nscd-on-danger: #ffffff; }
/* пейвол «Пополнить баланс» (src/app/paywall.css) */
.nspw {
  --nspw-scrim: #000000b3; --nspw-bg: #161616; --nspw-shadow: 0 30px 80px #00000099, inset 0 0 0 1px #ffffff12;
  --nspw-text: #ffffff; --nspw-muted: #ffffff99; --nspw-faint: #ffffff4d; --nspw-line: #ffffff14; --nspw-chip: #ffffff12; --nspw-none: #ffffff00;
  --nspw-option: #ffffff08; --nspw-option-ring: #ffffff14; --nspw-option-on: #1689ff1a; --nspw-primary: var(--ns-primary); --nspw-primary-text: #6db8ff;
  --nspw-on-primary: #ffffff; --nspw-pay: linear-gradient(135deg, #36a3ff, #1677ff); --nspw-pay-shadow: 0 12px 32px #1689ff59;
  --nspw-hot-bg: #1689ff2e; --nspw-hot-text: #7cc4ff; --nspw-why-bg: #ffd16b1f; --nspw-why-text: #ffd16b;
  --nspw-photo: #ffd16b; --nspw-video: #80cfff; --nspw-song: #c9a6ff;
  --nspw-accent: linear-gradient(90deg, #7cc4ff, #c9a6ff 55%, #ffb38a);
  --nspw-shot-shadow: 0 10px 30px #0000004d; --nspw-shot-ring: inset 0 1px 0 #ffffff59, inset 0 0 0 1px #ffffff1f;
  --nspw-fade: linear-gradient(to bottom, #16161600, #161616 90%);
}
/* вкладки профиля (src/app/profile.css) */
.nspr {
  --nspr-text: #ffffff; --nspr-muted: #ffffff8c; --nspr-faint: #ffffff4d; --nspr-card: #ffffff08; --nspr-line: #ffffff12;
  --nspr-chip: #ffffff14; --nspr-chip-on: #ffffff24; --nspr-input: #0000004d; --nspr-input-ring: #ffffff14;
  --nspr-primary: var(--ns-primary); --nspr-danger: #ff6b6e; --nspr-plus: var(--ns-accent);
  --nspr-knob: #ffffff; --nspr-knob-shadow: 0 2px 6px #00000040;
}
/* нижний бар на телефоне и шторка «Создать» (src/app/tabbar.css) — значения из tabbar.css и Hub.tsx вебаппа */
.nst, .nsh {
  --nst-mode-text: #ffffff99; --nst-glass-bg: #0000001f; --nst-lens-bg: #0000004d; --nst-text: #ffffff; --nst-none: #00000000;
  --nst-dot: #ff3b30; --nst-profile-bg: #282727f2; --nst-peek-bg: #282727b8; --nst-avatar: linear-gradient(135deg, #5b8cff, #a45bff);
  --nst-ease-expo: cubic-bezier(0.16, 1, 0.3, 1); --nst-ease-switch: cubic-bezier(1, 0, 0.4, 1);
  --nsh-text: #ffffff; --nsh-sub: #ffffffb3; --nsh-badge: #ffffff26; --nsh-text-shadow: 0 2px 12px #00000059;
  --nsh-glow: radial-gradient(circle, #ffffff38, #ffffff00 65%);
  --nsh-image: linear-gradient(140deg, #1689ff 0%, #6a5cff 55%, #af51de 100%);
  --nsh-video: linear-gradient(140deg, #af51de 0%, #e0457b 100%);
  --nsh-music: linear-gradient(140deg, #f1aa05 0%, #f18305 100%);
  --nsh-chat: linear-gradient(140deg, #16b36b 0%, #49df64 100%);
  --nsh-slides: linear-gradient(120deg, #35aff1 0%, #1689ff 60%, #3a3a3a 140%);
}
/* шторка выбора нейросети на телефоне (src/app/picker-sheet.css) — значения как в вебаппе */
.nsp {
  --nsp-overlay: #0000004d; --nsp-grip: #ffffff66; --nsp-cat: #ffffff73; --nsp-on: #1689ff26; --nsp-text: #ffffff;
  --nsp-sheet: var(--ns-sheet); --nsp-surface: var(--ns-surface); --nsp-surface-2: var(--ns-surface-2); --nsp-muted: var(--ns-muted);
  --nsp-primary: var(--ns-primary); --nsp-image: var(--ns-primary); --nsp-video: var(--ns-purple); --nsp-audio: var(--ns-gold);
  --nsp-glass: var(--glass-shadow); --nsp-fade: linear-gradient(to bottom, #212020, #21202000);
}
.nsf {
  --nsf-primary: var(--ns-primary); --nsf-primary-15: #1689ff26; --nsf-primary-25: #1689ff40; --nsf-primary-glow: #1689ff38;
  --nsf-surface: var(--ns-surface); --nsf-surface-2: var(--ns-surface-2); --nsf-input: #0000004d;
  --nsf-text: #ffffff; --nsf-text-70: #ffffffb3; --nsf-text-60: #ffffff99; --nsf-more-bg: #ffffff0f; --nsf-text-50: #ffffff80; --nsf-text-45: #ffffff73; --nsf-text-40: #ffffff66; --nsf-text-35: #ffffff59;
  --nsf-hint: var(--ns-muted); --nsf-danger: var(--ns-danger); --nsf-light: #ffffff;
  --nsf-card: #28272785; --nsf-sunken: #00000040; --nsf-seg-on: #ffffff1f; --nsf-tile: #ffffff0a; --nsf-ratio-line: #ffffff59;
  --nsf-track: #ffffff1f; --nsf-dash: #ffffff33; --nsf-add: #ffffff08; --nsf-remove: #00000099; --nsf-input-ring: inset 0 0 0 1px #ffffff0a;
  --nsf-glass-shadow: var(--glass-shadow); --nsf-lens-shadow: var(--lens-shadow);
  --nsf-control-shadow: inset 0 1px 2px #ffffff0f, 0 2px 6px #00000024;
  --nsf-thumb-shadow: 0 2px 10px #00000059; --nsf-knob-shadow: 0 3px 8px #00000040;
  --nsf-focus: 0 0 0 1.5px var(--ns-primary), 0 0 20px #1689ff38;
}