/* Vision Flow — общий чёрно-белый слой для служебных страниц (профиль, магазин, вход, каталог, история). */
:root {
    --vf-s-bg: #040706;
    --vf-s-line: rgba(236, 224, 198, 0.12);
    --vf-s-line-2: rgba(236, 224, 198, 0.24);
    --vf-s-dim: rgba(239, 231, 214, 0.64);
}
html, body { background: var(--vf-s-bg) !important; background-image: none !important; font-family: "Inter", -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
body video { filter: grayscale(1) brightness(0.55) contrast(1.1); }
body ::selection { background: var(--vf-cta); color: var(--vf-on); }
body .header { background: linear-gradient(180deg, rgba(3, 3, 5, 0.86), rgba(3, 3, 5, 0.5)) !important; -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); border-bottom: 1px solid var(--vf-s-line) !important; box-shadow: none !important; }
body .nav-link { color: var(--vf-s-dim) !important; border-radius: 999px; transition: color .25s, background .25s; }
body .nav-link:hover { color: var(--vf-ink) !important; background: rgba(247, 239, 222, 0.08) !important; }
html body .profile-buy-btn { background: var(--vf-cta) !important; color: var(--vf-on) !important; border: 0 !important; border-radius: 999px !important; font-weight: 700; }
/* карточки и панели */
body .profile-sidebar, body .profile-card, body .profile-section, body .shop-card, body .vf-card, body .login-card, body .auth-card, body .model-card, body .ai-model-card {
    background: linear-gradient(180deg, rgba(247, 239, 222, 0.05), rgba(247, 239, 222, 0.015)) !important;
    border: 1px solid var(--vf-s-line) !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}
/* кнопки действий */
body button.primary, body .btn-primary, body .shop-buy-btn, body .package-buy-btn, body .login-btn, body .auth-btn, body .profile-btn-primary, body .model-card .use-btn, body .ai-model-card a.btn, body a.btn-use {
    background: var(--vf-cta) !important;
    color: var(--vf-on) !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-weight: 700;
    box-shadow: 0 10px 34px rgba(236, 224, 198, 0.16) !important;
}
body input, body textarea, body select { caret-color: #f7efde; }
body input:focus, body textarea:focus { border-color: var(--vf-gold) !important; box-shadow: 0 0 0 3px rgba(247, 239, 222, 0.08) !important; outline: none; }
body video, body [class*="bg-video"], body [class*="-bg-video"] { filter: grayscale(1) brightness(0.5) contrast(1.1) !important; }
body .profile-bg-shape, body .profile-bg-circle { background: var(--vf-cta) !important; opacity: 0.05 !important; }
body .profile-bg-mesh { background: none !important; }
body .profile-bg-animation { background: var(--vf-s-bg) !important; }
body .profile-bg-vignette { background: rgba(0, 0, 0, 0.55) !important; }
html body .profile-buy-btn, html body button.profile-buy-btn { background: var(--vf-cta) !important; color: var(--vf-on) !important; opacity: 1 !important; }


/* ==========================================================================
   СЦЕНА ФОНА — горизонт планеты, туманности, зерно
   ========================================================================== */
#vfScene {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(120% 70% at 50% 115%, rgba(247, 239, 222, 0.07), transparent 60%),
        linear-gradient(180deg, #010102 0%, #040407 55%, #07070b 100%);
}
.vf-scene__neb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.5;
    will-change: transform;
}
.vf-scene__neb--a { width: calc(58vw / var(--vf-z, 1)); height: calc(58vw / var(--vf-z, 1)); left: calc(-16vw / var(--vf-z, 1)); top: calc(-22vw / var(--vf-z, 1)); background: radial-gradient(circle, rgba(247, 239, 222, 0.11), transparent 65%); animation: vf-neb-a 38s ease-in-out infinite alternate; }
.vf-scene__neb--b { width: calc(46vw / var(--vf-z, 1)); height: calc(46vw / var(--vf-z, 1)); right: calc(-14vw / var(--vf-z, 1)); top: calc(8vh / var(--vf-z, 1)); background: radial-gradient(circle, rgba(215, 222, 240, 0.085), transparent 65%); animation: vf-neb-b 46s ease-in-out infinite alternate; }
.vf-scene__neb--c { width: calc(40vw / var(--vf-z, 1)); height: calc(40vw / var(--vf-z, 1)); left: calc(30vw / var(--vf-z, 1)); bottom: calc(6vh / var(--vf-z, 1)); background: radial-gradient(circle, rgba(247, 239, 222, 0.06), transparent 65%); animation: vf-neb-a 52s ease-in-out infinite alternate-reverse; }
@keyframes vf-neb-a { to { transform: translate3d(calc(9vw / var(--vf-z, 1)), calc(7vh / var(--vf-z, 1)), 0) scale(1.18); } }
@keyframes vf-neb-b { to { transform: translate3d(calc(-10vw / var(--vf-z, 1)), calc(10vh / var(--vf-z, 1)), 0) scale(0.88); } }
/* планета: огромный круг, видна только светящаяся дуга горизонта */
.vf-scene__planet {
    position: absolute;
    left: 50%;
    top: calc(100% - calc(15vh / var(--vf-z, 1)));
    width: calc(230vw / var(--vf-z, 1));
    aspect-ratio: 1;
    margin-left: calc(-115vw / var(--vf-z, 1));
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 0%, rgba(247, 239, 222, 0.16) 0%, rgba(247, 239, 222, 0.04) 8%, transparent 22%),
        #020203;
    box-shadow:
        0 -1px 0 rgba(247, 239, 222, 0.85),
        0 -2px 14px rgba(247, 239, 222, 0.55),
        0 -26px 70px rgba(247, 239, 222, 0.22),
        0 -90px 190px rgba(210, 220, 245, 0.12),
        inset 0 22px 60px rgba(247, 239, 222, 0.1);
    animation: vf-planet 14s ease-in-out infinite;
}
@keyframes vf-planet { 50% { transform: translateY(-5px); box-shadow: 0 -1px 0 rgba(236, 224, 198, .95), 0 -2px 18px rgba(236, 224, 198, .7), 0 -34px 90px rgba(236, 224, 198, .28), 0 -110px 220px rgba(210,220,245,.15), inset 0 22px 60px rgba(236, 224, 198, .12); } }
.vf-scene__grain {
    position: absolute;
    inset: -50%;
    opacity: 0.07;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: vf-grain 0.9s steps(6) infinite;
}
@keyframes vf-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
#vfArtStars { z-index: 1; }
.vf-scene__vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(0, 0, 0, 0.55)); }


/* общий фон-сцена и типографика служебных страниц */
html body { position: relative; font-family: "Inter", -apple-system, sans-serif; }
body > .app-container, body > main, body > .profile-layout, body > .page-wrap { position: relative; z-index: 2; }
#vfScene { z-index: 0; }
body .profile-bg-animation, body .profile-bg-video, body .login-bg, body video { opacity: 0.0 !important; }
h1, h2, .profile-section-title, .shop-title, .page-title { font-family: "Unbounded", "Inter", sans-serif; letter-spacing: -0.02em; }
body .profile-sidebar a, body .profile-nav-item { border-radius: 16px !important; transition: background .25s, transform .4s cubic-bezier(.34,1.56,.64,1) !important; }
body .profile-nav-item:hover, body .profile-sidebar a:hover { transform: translateX(4px); }
body .profile-nav-item.active, body .profile-sidebar a.active { background: var(--vf-cta) !important; color: var(--vf-on) !important; }
body .profile-nav-item.active *, body .profile-sidebar a.active * { color: var(--vf-on) !important; stroke: var(--vf-on) !important; }