/* Bundled from css/neon_cosmos.css imports. Generated for faster mobile first load. */
/* External fonts removed: use local system font stack. */
:root { --font-sans: Inter, Poppins, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; }

/* === base/variables.css === */

:root {
    --cosmos-deep: #0a0a12;
    --cosmos-mid: #121325;
    --cosmos-soft: #1a1b30;
    --nebula-pink: #ff6b9d;
    --nebula-blue: #4facfe;
    --nebula-purple: #c471ed;
    --nebula-gold: #f5af19;
    --star-white: #fffef0;
    --text-main: #eef2ff;
    --text-muted: #b5c0df;
    --neon-text-color: #8ee8ff;
    --neon-text-glow-start: 0 0 12px rgba(142, 232, 255, 0.55), 0 0 24px rgba(142, 232, 255, 0.4), 0 0 40px rgba(142, 232, 255, 0.3);
    --neon-text-glow-end: 0 0 16px rgba(142, 232, 255, 0.7), 0 0 35px rgba(142, 232, 255, 0.55), 0 0 65px rgba(142, 232, 255, 0.4);
    --neon-text-gradient: linear-gradient(
        90deg,
        var(--neon-text-color),
        var(--neon-text-color),
        var(--neon-text-color)
    );
    --neon-text-shadow: var(--neon-text-glow-start);
    /* Свечение подзаголовков (мягче h1, но заметно на тёмном фоне) */
    --subtitle-text-glow:
        0 0 6px rgba(200, 245, 255, 0.95),
        0 0 14px rgba(142, 232, 255, 0.75),
        0 0 28px rgba(79, 172, 254, 0.55),
        0 0 44px rgba(79, 172, 254, 0.35),
        0 0 60px rgba(196, 113, 237, 0.22);
    --subtitle-text-color: #d4ebff;
    --line-cyan: rgba(0, 255, 255, 0.25);
    --line-magenta: rgba(255, 0, 255, 0.22);
}

html {
    min-height: 100%;
    background-color: var(--cosmos-deep);
    background: radial-gradient(circle at 20% 20%, #18162d 0%, var(--cosmos-deep) 45%, #06070f 100%);
    overscroll-behavior-y: none;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    color: var(--text-main);
    overflow-x: hidden;
    position: relative;
    background-color: var(--cosmos-deep);
    background: radial-gradient(circle at 20% 20%, #18162d 0%, var(--cosmos-deep) 45%, #06070f 100%);
    overscroll-behavior-y: none;
}

a {
    color: #7fd8ff;
}

a:hover {
    color: #c7f1ff;
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-blue,
.text-gradient {
    color: transparent !important;
    background: var(--neon-text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: var(--neon-text-shadow);
    animation: neonPulse 2s infinite alternate;
}

.lead,
.hero-subtitle,
.section-header p,
.cta-section > p,
.subtitle:not(.text-blue),
.text-center > h1 + p,
.text-center > h1.display-4 + p,
.text-center > .display-4 + p,
.footer .footer-brand-row + p.text-muted {
    color: var(--subtitle-text-color) !important;
    text-shadow: var(--subtitle-text-glow);
}

.lead.text-muted,
.text-center > h1 + p.text-muted,
.text-center > h1.display-4 + p.text-muted {
    color: var(--subtitle-text-color) !important;
}

.main-content {
    flex: 1;
    position: relative;
    z-index: 2;
    padding-top: 1.5rem;
}

@keyframes neonPulse {
    from {
        text-shadow: var(--neon-text-glow-start);
    }
    to {
        text-shadow: var(--neon-text-glow-end);
    }
}


/* === visual_fx.css === */

/* Управление нагрузкой: классы задаются из SoundAppSettings (visual_fx_body_class) */

.fx-master-off .animated-bg,
.fx-master-off #stars-container,
.fx-master-off .cosmos-bg,
.fx-master-off .particles-container,
.fx-master-off #mouseTrailCanvas {
    display: none !important;
}

.fx-gradient-off .animated-bg {
    display: none !important;
}

.fx-gradient-static .animated-bg {
    animation: none !important;
}

.fx-stars-off #stars-container {
    display: none !important;
}

.fx-nebula-off .cosmos-bg {
    display: none !important;
}

.fx-nebula-low .nebula {
    filter: blur(48px);
    opacity: 0.28;
    animation: none !important;
}

.fx-nebula-medium .nebula {
    filter: blur(72px);
    opacity: 0.38;
}

.fx-nebula-high .nebula {
    filter: blur(100px);
    opacity: 0.45;
}

.fx-fireflies-off .particles-container {
    display: none !important;
}

.fx-mouse-trail-off #mouseTrailCanvas {
    display: none !important;
}

/* Размытие «стекла» в шапке и футере */
.fx-glass-off .top-header,
.fx-glass-off .footer,
.fx-glass-off .sounds-top-bar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.fx-glass-light .top-header,
.fx-glass-light .footer,
.fx-glass-light .sounds-top-bar {
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
}

.fx-neon-pulse-off .top-header,
.fx-neon-pulse-off .footer,
.fx-neon-pulse-off h1.sounds-page-title.text-blue,
.fx-neon-pulse-off .fade-in {
    animation: none !important;
}

.fx-floating-off .floating {
    animation: none !important;
}

.fx-title-ripple-off h1 .title-ripple-char {
    transform: none !important;
}

.fx-card-tilt-off .sound-card-compact.is-hover {
    transform: none !important;
}

/* Aggressive mobile-safe mode (set by base.html runtime detection). */
.perf-mobile-safe .animated-bg,
.perf-mobile-safe #stars-container,
.perf-mobile-safe .cosmos-bg,
.perf-mobile-safe .particles-container,
.perf-mobile-safe #mouseTrailCanvas,
.perf-mobile-safe .card-particles,
.perf-mobile-safe .orbit-wave {
    display: none !important;
}

.perf-mobile-safe .nebula,
.perf-mobile-safe .top-header,
.perf-mobile-safe .footer,
.perf-mobile-safe .sounds-top-bar,
.perf-mobile-safe .btn,
.perf-mobile-safe .card,
.perf-mobile-safe .sound-card-compact,
.perf-mobile-safe .toast,
.perf-mobile-safe .form-control {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
}

.perf-mobile-safe .floating,
.perf-mobile-safe .title-ripple-char,
.perf-mobile-safe .fade-in,
.perf-mobile-safe .pulse-border::before,
.perf-mobile-safe .sound-card-compact,
.perf-mobile-safe .sound-card-compact *,
.perf-mobile-safe h1,
.perf-mobile-safe h2,
.perf-mobile-safe h3 {
    animation: none !important;
}

.perf-mobile-safe .sound-card-compact.is-hover,
.perf-mobile-safe .sound-card-compact:hover {
    transform: none !important;
}

@media (max-width: 900px) {
    html,
    body {
        background-color: #0a0a12 !important;
    }

    .perf-mobile-safe {
        background:
            radial-gradient(circle at 20% 18%, #18162d 0%, #0a0a12 48%, #06070f 100%) !important;
    }

    .perf-mobile-safe .top-header {
        background: rgba(6, 8, 20, 0.94) !important;
    }
}


/* === layout/background.css === */

/* Анимированный градиентный фон */
.animated-bg {
    position: fixed;
    top: -18vh;
    right: 0;
    bottom: -18vh;
    left: 0;
    width: 100vw;
    min-height: 136vh;
    min-height: 136dvh;
    z-index: 0;
    background: linear-gradient(45deg, #070b14, #120e2b, #070b14, #022016);
    background-size: 400% 400%;
    animation: gradientBG 20s ease infinite;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.cosmos-bg {
    position: fixed;
    inset: -18vh 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.7;
}

.nebula {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.4;
}

.nebula-1 {
    width: 620px;
    height: 620px;
    background: radial-gradient(circle, var(--nebula-pink), var(--nebula-purple));
    top: -220px;
    right: -130px;
    animation: nebulaDrift1 20s ease-in-out infinite alternate;
}

.nebula-2 {
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, var(--nebula-blue), var(--nebula-purple));
    bottom: -170px;
    left: -120px;
    animation: nebulaDrift2 25s ease-in-out infinite alternate;
}

.nebula-3 {
    width: 430px;
    height: 430px;
    background: radial-gradient(circle, var(--nebula-gold), var(--nebula-pink));
    top: 40%;
    left: 28%;
    animation: nebulaDrift3 18s ease-in-out infinite alternate;
}

@keyframes nebulaDrift1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(-30px, 40px) rotate(5deg); }
    66% { transform: translate(20px, -20px) rotate(-5deg); }
}

@keyframes nebulaDrift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(40px, -30px) scale(1.1); }
}

@keyframes nebulaDrift3 {
    0%, 100% { transform: translate(0, 0); opacity: 0.3; }
    50% { transform: translate(-40px, 30px); opacity: 0.5; }
}

/* Плавающие частицы (светлячки) */
.particles-container {
    position: fixed; top: -18vh; left: 0; width: 100%; height: 136vh; height: 136dvh; z-index: 1; pointer-events: none;
}

.particle {
    position: absolute; background: rgba(255, 255, 255, 0.6); border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.4);
    bottom: -20px;
    animation: rise linear infinite;
}

@keyframes rise {
    0% { transform: translateY(0) scale(0) translateX(0); opacity: 0; }
    10% { opacity: 1; transform: translateY(-10vh) scale(1) translateX(10px); }
    50% { transform: translateY(-50vh) scale(1.5) translateX(-15px); opacity: 0.8; }
    90% { opacity: 1; transform: translateY(-90vh) scale(1) translateX(10px); }
    100% { transform: translateY(-110vh) scale(0) translateX(0); opacity: 0; }
}

/* Интерактивный след мыши */
#mouseTrailCanvas {
    position: fixed; top: -18vh; left: 0; width: 100%; height: 136vh; height: 136dvh; z-index: 1; pointer-events: none;
}


/* === layout/header.css === */

.top-header {
    border-bottom: 1px solid var(--line-cyan);
    background: rgba(8, 10, 24, 0.01);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    position: sticky;
    top: 0;
    z-index: 10;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

.top-header-nav {
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: center;
}

.top-header-nav-link {
    font-size: 0.92rem;
    padding: 0.3rem 0.65rem;
    white-space: nowrap;
}

.top-header-content--auth .top-header-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0.25rem;
    border-top: 1px solid rgba(79, 172, 254, 0.12);
    padding-top: 0.4rem;
}

.top-header .container {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.top-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-inline: 2rem;
}

.top-header-content--auth {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-items: stretch;
}

.top-header-content > .d-flex {
    min-width: 0;
}

.top-header a,
.top-header span,
.top-header .top-header-user,
.top-header-link {
    color: #c5eeff !important;
    text-shadow: 0 0 12px rgba(79, 172, 254, 0.35);
}

.top-header a {
    text-decoration: none !important;
}

.top-header-content {
    flex-wrap: wrap;
    row-gap: 0.25rem;
}

.top-header-link {
    color: transparent !important;
    background: var(--neon-text-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: var(--neon-text-shadow);
    animation: neonPulse 2s infinite alternate;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    transition: transform 0.2s ease, text-shadow 0.25s ease, background-color 0.25s ease;
}

.top-header-link i {
    color: var(--neon-text-color, #8ee8ff);
    -webkit-text-fill-color: var(--neon-text-color, #8ee8ff);
    background: none;
    transition: filter 0.25s ease, transform 0.25s ease;
    filter: drop-shadow(0 0 6px rgba(79, 172, 254, 0.45));
}

.top-header-user {
    color: #d6f0ff !important;
}

.top-header-link:hover {
    text-shadow:
        0 0 16px rgba(0, 255, 255, 0.9),
        0 0 42px rgba(79, 172, 254, 0.7);
    text-decoration: none;
    transform: translateY(-2px);
    background-color: rgba(79, 172, 254, 0.08);
}

.top-header-link:hover i {
    transform: scale(1.15);
    filter: drop-shadow(0 0 12px rgba(0, 255, 255, 0.85));
}

.top-header-link:active {
    transform: translateY(0);
}

.top-header-brand,
.neon-brand-text {
    letter-spacing: 0.4px;
    text-transform: none;
}

.neon-brand-text,
.top-header-brand-text {
    color: transparent !important;
    background: var(--neon-text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
        var(--neon-text-shadow);
    animation: neonPulse 2s infinite alternate;
}

.top-header-brand {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    transition: transform 0.25s ease;
}

.top-header-brand:hover {
    transform: translateY(-2px);
}

.top-header-brand:hover .top-header-logo {
    transform: rotate(-8deg) scale(1.12);
    box-shadow:
        0 0 22px rgba(0, 255, 255, 0.7),
        0 0 44px rgba(79, 172, 254, 0.5);
}

.top-header-brand:hover .top-header-brand-text {
    letter-spacing: 0.8px;
    text-shadow:
        0 0 18px rgba(0, 255, 255, 0.95),
        0 0 38px rgba(79, 172, 254, 0.7),
        0 0 70px rgba(196, 113, 237, 0.45);
    filter: brightness(1.15);
}

.top-header-brand-text {
    transition: text-shadow 0.3s ease, letter-spacing 0.3s ease, filter 0.3s ease;
}

.top-header-brand-with-logo {
    gap: 0.5rem;
}

.top-header-logo {
    width: 36px;
    height: 36px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(79, 172, 254, 0.35);
    transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.3s ease;
}

.top-header-brand-text {
    display: inline-block;
}

.top-header-brand-block,
.top-header-actions {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.top-header-content--auth .top-header-brand-block {
    justify-self: start;
}

.top-header-content--auth .top-header-user-block {
    justify-self: center;
}

.top-header-content--auth .top-header-actions {
    justify-self: end;
}

.top-header-brand-block {
    margin-left: 1rem;
}

.top-header-actions {
    margin-right: 0.75rem;
}

@media (max-width: 768px) {
    .top-header-content--auth {
        grid-template-columns: 1fr;
        justify-items: center;
        row-gap: 0.25rem;
    }

    .top-header-content--auth .top-header-brand-block,
    .top-header-content--auth .top-header-user-block,
    .top-header-content--auth .top-header-actions {
        justify-self: center;
    }

    .top-header-content--auth .top-header-actions {
        width: 100%;
        justify-content: center;
    }
}

/* === Burger button === */
.top-header-burger {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(79, 172, 254, 0.35);
    background: rgba(10, 14, 30, 0.45);
    border-radius: 10px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.top-header-burger:hover,
.top-header-burger:focus-visible {
    border-color: rgba(0, 255, 255, 0.6);
    background: rgba(15, 20, 40, 0.65);
    box-shadow: 0 0 14px rgba(79, 172, 254, 0.35);
    outline: none;
}

.top-header-burger-line {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--neon-text-color, #8ee8ff);
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.55);
    transition: transform 0.3s ease, opacity 0.2s ease;
}

.top-header-burger[aria-expanded="true"] .top-header-burger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.top-header-burger[aria-expanded="true"] .top-header-burger-line:nth-child(2) {
    opacity: 0;
}

.top-header-burger[aria-expanded="true"] .top-header-burger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* === Mobile drawer === */
.top-header-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 1100;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.top-header-mobile-menu.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.top-header-mobile-menu-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 6, 16, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.top-header-mobile-menu-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(86vw, 340px);
    background: linear-gradient(180deg, rgba(15, 16, 32, 0.97), rgba(8, 10, 22, 0.97));
    border-left: 1px solid rgba(79, 172, 254, 0.25);
    box-shadow: -16px 0 50px rgba(0, 0, 0, 0.55);
    padding: 1rem 1.1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.34, 1.05, 0.64, 1);
    overflow-y: auto;
}

.top-header-mobile-menu.is-open .top-header-mobile-menu-panel {
    transform: translateX(0);
}

.top-header-mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(79, 172, 254, 0.18);
    margin-bottom: 0.4rem;
}

.top-header-mobile-menu-title {
    font-weight: 600;
    font-size: 1rem;
    color: transparent;
    background: var(--neon-text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: var(--neon-text-shadow);
}

.top-header-mobile-menu-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(79, 172, 254, 0.3);
    background: rgba(10, 14, 30, 0.5);
    color: #c5eeff;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.top-header-mobile-menu-close:hover,
.top-header-mobile-menu-close:focus-visible {
    border-color: rgba(0, 255, 255, 0.7);
    background: rgba(15, 20, 40, 0.7);
    color: #fff;
    outline: none;
    transform: rotate(90deg);
}

.top-header-mobile-menu-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.top-header-mobile-link {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    color: transparent !important;
    background: var(--neon-text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: var(--neon-text-shadow);
    text-decoration: none !important;
    font-weight: 500;
    transition: background-color 0.25s ease, transform 0.2s ease, text-shadow 0.25s ease;
}

.top-header-mobile-link i {
    background: none;
    -webkit-text-fill-color: var(--neon-text-color, #8ee8ff);
    color: var(--neon-text-color, #8ee8ff);
    filter: drop-shadow(0 0 6px rgba(79, 172, 254, 0.45));
    transition: transform 0.25s ease, filter 0.25s ease;
}

.top-header-mobile-link:hover,
.top-header-mobile-link:focus-visible {
    background-color: rgba(79, 172, 254, 0.1);
    text-shadow: 0 0 14px rgba(0, 255, 255, 0.85), 0 0 32px rgba(79, 172, 254, 0.55);
    transform: translateX(2px);
    outline: none;
}

.top-header-mobile-link:hover i,
.top-header-mobile-link:focus-visible i {
    transform: scale(1.12);
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.75));
}

.top-header-mobile-menu-divider {
    height: 1px;
    background: rgba(79, 172, 254, 0.18);
    margin: 0.4rem 0.2rem;
}

body.has-mobile-menu-open {
    overflow: hidden;
}


/* === layout/main.css === */

.main-content > .container {
    position: relative;
    z-index: 2;
}

.logo-container {
    text-align: center;
    margin: 1.5rem 0 3rem;
}

.logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.25), rgba(196, 113, 237, 0.35));
    border: 1px solid var(--line-cyan);
    box-shadow: 0 0 35px rgba(79, 172, 254, 0.35);
}

.main-title {
    font-size: clamp(2rem, 5vw, 3.4rem);
    margin-bottom: 0.5rem;
    letter-spacing: 0.4px;
}

.main-title.text-blue {
    color: transparent !important;
    background: var(--neon-text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: var(--neon-text-shadow);
    animation: neonPulse 2s infinite alternate;
}

.subtitle.text-blue {
    color: #dff3ff;
    text-shadow: 0 0 20px rgba(112, 225, 255, 0.35);
    animation: neonPulse 2s infinite alternate;
}

section.hero > h1,
section.hero h1,
.landing-hero > h1,
.hero > h1,
.hero h1 {
    color: transparent !important;
    background: var(--neon-text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: var(--neon-text-shadow);
    animation: neonPulse 2s infinite alternate;
    letter-spacing: 0.4px;
}

.hero h1 {
    color: transparent !important;
    background: var(--neon-text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: var(--neon-text-shadow);
    animation: neonPulse 2s infinite alternate;
    letter-spacing: 0.4px;
}

.subtitle {
    color: var(--subtitle-text-color);
    max-width: 760px;
    margin: 0 auto;
    text-shadow: var(--subtitle-text-glow);
}

/* Заголовок /sounds/ — рябь по буквам (sounds_title_ripple.js) */
h1.sounds-page-title {
    letter-spacing: 0.02em;
}

h1.sounds-page-title .title-ripple-char {
    display: inline-block;
    color: var(--neon-text-color);
    -webkit-text-fill-color: var(--neon-text-color);
    text-shadow: var(--neon-text-shadow);
    transform-origin: 50% 88%;
    backface-visibility: hidden;
}

/* Ripple-эффект на заголовках лендинга */
.neon-brand-text .title-ripple-char {
    display: inline-block;
    transform-origin: 50% 88%;
    backface-visibility: hidden;
    /* Принудительно сплошной цвет — иначе из-за transform ломается background-clip
       у родителя и буквы становятся призрачными/размытыми */
    color: var(--neon-text-color) !important;
    -webkit-text-fill-color: var(--neon-text-color) !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    text-shadow: var(--neon-text-shadow);
}

h1.sounds-page-title.text-blue {
    animation: neonPulse 2s infinite alternate;
}

.fade-in {
    animation: fadeIn 0.6s ease both;
}

.floating {
    animation: floating 3.8s ease-in-out infinite;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes floating {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@media (max-width: 900px) {
    .main-content {
        padding-top: 1rem;
    }
}


/* === layout/home.css === */

/* Главная страница — лендинг */

.home-hero {
    padding: 0.5rem 0 2rem;
}

.home-features {
    padding-bottom: 1rem;
}

.home-features .row {
    justify-content: center;
}

.home-features .feature-card {
    height: 100%;
}

.home-cta {
    padding: 2.5rem 0 3rem;
    max-width: 720px;
    margin: 0 auto;
}

.home-cta .btn-lg {
    min-height: 48px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (max-width: 576px) {
    .home-cta .btn {
        display: block;
        width: 100%;
        margin-bottom: 0.75rem !important;
        margin-right: 0 !important;
    }
}


/* === layout/footer.css === */

.footer {
    margin-top: 0;
    border-top: 1px solid rgba(79, 172, 254, 0.2);
    background: rgba(9, 11, 24, 0.02);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--text-muted);
    position: relative;
    z-index: 2;
    padding-top: 2rem;
    padding-bottom: 1.5rem;
}

.footer h5 {
    color: #e8eeff;
}


.footer-brand-row {
    text-align: center;
}

.footer-brand-logo {
    width: 40px;
    height: 40px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 50%;
    box-shadow: 0 0 14px rgba(79, 172, 254, 0.3);
    transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.3s ease;
}

.footer-brand-row:hover .footer-brand-logo {
    transform: rotate(-8deg) scale(1.08);
    box-shadow:
        0 0 22px rgba(0, 255, 255, 0.55),
        0 0 44px rgba(79, 172, 254, 0.35);
}

.footer-brand-row:hover .footer-brand-title {
    text-shadow:
        0 0 18px rgba(0, 255, 255, 0.9),
        0 0 38px rgba(79, 172, 254, 0.6);
}

.footer-brand-title {
    text-align: center;
    margin-bottom: 0.5rem;
    color: transparent !important;
    background: var(--neon-text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: var(--neon-text-shadow);
    animation: neonPulse 2s infinite alternate;
    transition: text-shadow 0.3s ease, transform 0.3s ease, letter-spacing 0.3s ease;
}

.footer .col-md-4 {
    text-align: center;
}

.footer-section-title {
    margin-bottom: 0.65rem;
    font-size: 1rem;
    text-align: center;
    color: transparent !important;
    background: var(--neon-text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: var(--neon-text-shadow);
    animation: neonPulse 2s infinite alternate;
    transition: text-shadow 0.3s ease, transform 0.3s ease, letter-spacing 0.3s ease;
    cursor: default;
}

.footer .col-md-4:hover .footer-section-title {
    transform: translateY(-2px);
    letter-spacing: 0.6px;
    text-shadow:
        0 0 18px rgba(0, 255, 255, 0.95),
        0 0 38px rgba(79, 172, 254, 0.65);
}

.footer .col-md-4:hover .footer-brand-title {
    transform: translateY(-2px);
    letter-spacing: 0.6px;
    text-shadow:
        0 0 18px rgba(0, 255, 255, 0.95),
        0 0 38px rgba(79, 172, 254, 0.65);
}

.footer a {
    color: #9edffb;
    text-decoration: none;
    transition: color 0.25s ease, text-shadow 0.25s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.footer a i {
    transition: transform 0.25s ease, filter 0.25s ease, color 0.25s ease;
    filter: drop-shadow(0 0 6px rgba(79, 172, 254, 0.35));
}

.footer a:hover {
    color: #ffffff;
    text-shadow:
        0 0 12px rgba(0, 255, 255, 0.7),
        0 0 28px rgba(79, 172, 254, 0.45);
    transform: translateY(-1px);
}

.footer a:hover i {
    transform: scale(1.18);
    color: #00f0ff;
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.85));
}

.footer-policy-link {
    color: transparent !important;
    background: var(--neon-text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: var(--neon-text-shadow);
    animation: neonPulse 2s infinite alternate;
    transition: text-shadow 0.25s ease, transform 0.2s ease, letter-spacing 0.3s ease;
    display: inline-block;
}

.footer-policy-link:hover {
    color: transparent !important;
    text-decoration: none;
    text-shadow:
        0 0 16px rgba(0, 255, 255, 0.95),
        0 0 38px rgba(79, 172, 254, 0.65);
    transform: translateY(-1px);
    letter-spacing: 0.5px;
}

.footer-copyright {
    color: #9eaad0;
    margin: 0;
}

@media (max-width: 768px) {
    .footer .col-md-4 {
        margin-bottom: 1.35rem !important;
    }

    .footer .footer-section-title,
    .footer .footer-brand-title {
        margin-bottom: 0.8rem;
    }

    .footer .col-md-4 > div,
    .footer .col-md-4 > p {
        margin-bottom: 0.45rem;
    }
}


/* === components/cards.css === */

.glass-effect,
.feature-card {
    background: rgba(20, 20, 32, 0.78);
    border: 1px solid rgba(79, 172, 254, 0.24);
    border-radius: 18px;
    backdrop-filter: blur(8px);
    box-shadow: 0 14px 40px rgba(7, 9, 20, 0.45);
}

.feature-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    isolation: isolate;
}

.feature-card::before {
    content: "";
    position: absolute;
    inset: -60% -40%;
    background: conic-gradient(from 0deg, transparent, rgba(79, 172, 254, 0.16), transparent, rgba(255, 107, 157, 0.15), transparent);
    opacity: 0.02;
    transition: opacity 0.3s ease;
    animation: cardSpin 4s linear infinite;
}

.feature-card > * {
    position: relative;
    z-index: 1;
}

.feature-card:hover {
    transform: translateY(-10px);
    border-color: rgba(79, 172, 254, 0.48);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.3), 0 0 60px rgba(255, 0, 255, 0.2);
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-icon,
.sound-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #00ffff;
    font-size: 1.8rem;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(255, 0, 255, 0.2));
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
    transition: all 0.3s;
}

.feature-card h4 {
    color: #ecf1ff;
    margin-bottom: 10px;
    font-size: 1.3rem;
    text-align: left;
}

.feature-card h4,
.feature-card p {
    text-align: center;
}

.sound-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    width: auto;
}

.volume-control {
    margin-top: 0;
    width: 100%;
}

.volume-label {
    display: block;
    margin-bottom: 0.35rem;
    color: #c9d2f0;
    font-size: 0.88rem;
    text-align: left;
}

.volume-value {
    color: #89ecff;
}

.volume-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    appearance: none;
    background: rgba(0, 255, 255, 0.2);
    outline: none;
}

.volume-slider::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #00ffff;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
    cursor: pointer;
}

.volume-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: #00ffff;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
    cursor: pointer;
}

.ai-sounds-page .glass-effect {
    border-radius: 20px;
}

@keyframes cardSpin {
    100% { transform: rotate(360deg); }
}

@keyframes iconGlow {
    to {
        box-shadow: 0 0 40px rgba(0, 255, 255, 0.6);
        transform: scale(1.1);
    }
}

@media (max-width: 900px) {
    .sound-controls {
        width: 100%;
        flex-wrap: wrap;
        gap: 10px;
    }
}


/* === components/sound-card-compact.css === */

/* Compact Orbit — 1:1 from Docs/sound-card-mockup-03-compact-orbit.html */

.sound-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-flow: row;
    gap: 25px;
    align-items: stretch;
}

.sound-card-stage {
    perspective: 1000px;
    width: 100%;
    min-width: 0;
    display: flex;
    justify-content: center;
}

.sound-card-stage > .sound-card-compact {
    flex-shrink: 0;
}



    

    

    :root {
      --card-size: 320px;
      --cyan: #00eaff;
      --pink: #ff2d9b;
      --card-bg: #0c0d12;
      --ring-dark: #14151c;
      --vol-thumb: 10px;
      --vol-track-h: 2px;
    }

    @keyframes cardBorderPulse {
      0%, 100% {
        box-shadow:
          -8px 0 20px rgba(0, 234, 255, 0.14),
          8px 0 20px rgba(255, 45, 155, 0.14),
          0 -6px 24px rgba(0, 234, 255, 0.08),
          0 6px 24px rgba(255, 45, 155, 0.08);
      }
      50% {
        box-shadow:
          -16px 0 36px rgba(0, 234, 255, 0.32),
          16px 0 36px rgba(255, 45, 155, 0.32),
          0 -10px 40px rgba(0, 234, 255, 0.16),
          0 10px 40px rgba(255, 45, 155, 0.16);
      }
    }

    @keyframes edgeGlowPulse {
      0%, 100% {
        opacity: 0.45;
        transform: scale(0.98);
        filter: blur(11px);
      }
      50% {
        opacity: 0.9;
        transform: scale(1.02);
        filter: blur(16px);
      }
    }

    @keyframes ambientDrift {
      0% {
        transform: translate(-3%, -2%) scale(1);
        opacity: 0.55;
      }
      50% {
        transform: translate(2%, 1%) scale(1.04);
        opacity: 0.85;
      }
      100% {
        transform: translate(4%, -3%) scale(1.06);
        opacity: 0.65;
      }
    }

    .sound-card-compact {
      position: relative;
      width: var(--card-size);
      height: var(--card-size);
      border-radius: 42px;
      padding: 3px;
      background: linear-gradient(135deg, var(--cyan) 0%, transparent 38%, transparent 62%, var(--pink) 100%);
      box-shadow:
        -12px 0 28px rgba(0, 234, 255, 0.2),
        12px 0 28px rgba(255, 45, 155, 0.2);
      animation: cardBorderPulse 5s ease-in-out infinite;
      transition: transform 0.14s ease-out, box-shadow 0.35s ease;
      transform-style: preserve-3d;
      will-change: transform, box-shadow;
      isolation: isolate;
    }

    .sound-card-compact.is-hover {
      transition: transform 0.1s ease-out, box-shadow 0.35s ease;
    }

    .sound-card-compact::before {
      content: "";
      position: absolute;
      inset: -6px;
      border-radius: 48px;
      z-index: -1;
      pointer-events: none;
      background:
        linear-gradient(160deg, rgba(0, 234, 255, 0.55) 0%, transparent 42%),
        linear-gradient(340deg, rgba(255, 45, 155, 0.5) 0%, transparent 42%);
      animation: edgeGlowPulse 5s ease-in-out infinite;
    }

    .sound-card-compact .sound-card__inner {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 39px;
      --shine-x: 50%;
      --shine-y: 35%;
      background:
        radial-gradient(ellipse 80% 45% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, transparent 55%),
        linear-gradient(168deg, #12131a 0%, var(--card-bg) 45%, #090a0f 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 28px 22px 22px;
      overflow: hidden;
      transform: translateZ(1px);
      transform-style: preserve-3d;
    }

    .card-shine {
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      z-index: 4;
      opacity: 0;
      transition: opacity 0.25s ease;
      background: radial-gradient(
        circle 55% at var(--shine-x) var(--shine-y),
        rgba(255, 255, 255, 0.14) 0%,
        rgba(0, 234, 255, 0.05) 28%,
        transparent 62%
      );
    }

    .sound-card-compact.is-hover .card-shine {
      opacity: 1;
    }

    .sound-card-compact .sound-card__inner > :not(.card-ambient):not(.card-particles):not(.sound-card-compact__actions) {
      position: relative;
      z-index: 2;
    }

    .card-ambient {
      position: absolute;
      inset: -20%;
      border-radius: inherit;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(ellipse 55% 45% at 25% 35%, rgba(0, 234, 255, 0.09) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 78% 68%, rgba(255, 45, 155, 0.08) 0%, transparent 55%);
      animation: ambientDrift 16s ease-in-out infinite alternate;
    }

    .card-particles {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      pointer-events: none;
      z-index: 1;
      opacity: 0.7;
    }

    .sound-card-compact .sound-card__inner::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      border: 1px solid rgba(0, 234, 255, 0.12);
      pointer-events: none;
      z-index: 3;
    }

    .sound-card-compact .sound-card__inner::after {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
      pointer-events: none;
      z-index: 3;
    }

    .orbit-wrap {
      position: relative;
      width: 168px;
      height: 168px;
      flex-shrink: 0;
      margin-top: 4px;
    }

    .orbit-bezel {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: linear-gradient(145deg, #22232e 0%, var(--ring-dark) 35%, #0a0b10 100%);
      box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.12),
        inset 0 -6px 14px rgba(0, 0, 0, 0.65),
        0 4px 18px rgba(0, 0, 0, 0.5);
    }

    .orbit-bezel::after {
      content: "";
      position: absolute;
      inset: 14px;
      border-radius: 50%;
      background: radial-gradient(circle at 50% 38%, #1e1f28 0%, #0e0f14 70%);
      box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
    }

    .orbit-wave {
      position: absolute;
      inset: 18px;
      border-radius: 50%;
      pointer-events: none;
    }

    .orbit-wave canvas {
      width: 100%;
      height: 100%;
      display: block;
    }

    .orbit-play {
      position: absolute;
      inset: 52px;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      background: radial-gradient(circle at 45% 35%, #252630 0%, #101118 65%, #08090d 100%);
      box-shadow:
        inset 0 2px 6px rgba(255, 255, 255, 0.08),
        inset 0 -4px 12px rgba(0, 0, 0, 0.7),
        0 0 20px rgba(0, 234, 255, 0.08);
      display: grid;
      place-items: center;
      transition: box-shadow 0.25s ease, transform 0.15s ease;
      z-index: 2;
    }

    .orbit-play:hover {
      box-shadow:
        inset 0 2px 6px rgba(255, 255, 255, 0.1),
        inset 0 -4px 12px rgba(0, 0, 0, 0.7),
        0 0 28px rgba(0, 234, 255, 0.25);
    }

    .orbit-play:active { transform: scale(0.96); }

    .orbit-play .icon-play {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 11px 0 11px 18px;
      border-color: transparent transparent transparent var(--cyan);
      margin-left: 5px;
      filter: drop-shadow(0 0 6px rgba(0, 234, 255, 0.95)) drop-shadow(0 0 14px rgba(0, 234, 255, 0.6));
    }

    .orbit-play .icon-pause {
      display: none;
      width: 16px;
      height: 20px;
      position: relative;
    }

    .orbit-play .icon-pause::before,
    .orbit-play .icon-pause::after {
      content: "";
      position: absolute;
      top: 0;
      width: 5px;
      height: 20px;
      background: var(--cyan);
      border-radius: 1px;
      box-shadow: 0 0 8px var(--cyan);
    }

    .orbit-play .icon-pause::before { left: 0; }
    .orbit-play .icon-pause::after { right: 0; }

    .orbit-play.is-playing .icon-play { display: none; }
    .orbit-play.is-playing .icon-pause { display: block; }

    .sound-title-wrap {
      width: 100%;
      height: 56px;
      margin-top: -14px;
      flex-shrink: 0;
    }

    .sound-title-wrap svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .sound-title-wrap text {
      fill: var(--cyan);
      font-size: 15px;
      font-weight: 500;
      letter-spacing: 0.06em;
      filter: drop-shadow(0 0 4px rgba(0, 234, 255, 0.95)) drop-shadow(0 0 12px rgba(0, 234, 255, 0.5));
    }

    .volume-row {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 0 2px;
      z-index: 1;
    }

    .vol-btn {
      flex-shrink: 0;
      display: grid;
      place-items: center;
      padding: 4px;
      border: none;
      background: transparent;
      color: var(--cyan);
      cursor: pointer;
      border-radius: 6px;
      filter: drop-shadow(0 0 4px rgba(0, 234, 255, 0.8));
      transition: transform 0.12s ease, filter 0.12s ease;
    }

    .vol-btn:hover {
      filter: drop-shadow(0 0 8px rgba(0, 234, 255, 1));
      transform: scale(1.08);
    }

    .vol-btn:active { transform: scale(0.94); }

    .vol-btn svg {
      display: block;
    }

    .vol-btn--down svg { width: 14px; height: 14px; }
    .vol-btn--up svg { width: 18px; height: 18px; }

    .volume-track-wrap {
      flex: 1;
      position: relative;
      height: var(--vol-thumb);
      display: flex;
      align-items: center;
    }

    .volume-track {
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      height: var(--vol-track-h);
      border-radius: 2px;
      background: rgba(60, 50, 80, 0.55);
      overflow: hidden;
      pointer-events: none;
    }

    .volume-fill {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 70%;
      background: linear-gradient(90deg, rgba(0, 234, 255, 0.5), var(--cyan));
      box-shadow: 0 0 8px rgba(0, 234, 255, 0.7);
      border-radius: 2px;
      transition: none;
      will-change: width;
    }

    .volume-input {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      width: 100%;
      height: var(--vol-thumb);
      margin: 0;
      -webkit-appearance: none;
      appearance: none;
      background: transparent;
      cursor: pointer;
      z-index: 1;
      outline: none;
      border: none;
      -webkit-tap-highlight-color: transparent;
    }

    .volume-input:focus,
    .volume-input:focus-visible,
    .volume-input:active {
      outline: none;
      box-shadow: none;
    }

    .vol-btn:focus,
    .vol-btn:focus-visible,
    .orbit-play:focus,
    .orbit-play:focus-visible {
      outline: none;
    }

    .volume-input::-webkit-slider-runnable-track {
      height: var(--vol-track-h);
      background: transparent;
      border: none;
    }

    .volume-input::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: var(--vol-thumb);
      height: var(--vol-thumb);
      margin-top: calc((var(--vol-track-h) - var(--vol-thumb)) / 2);
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 8px rgba(0, 234, 255, 0.95), 0 0 16px rgba(0, 234, 255, 0.5);
      border: none;
    }

    .volume-input::-moz-range-track {
      height: var(--vol-track-h);
      background: transparent;
      border: none;
    }

    .volume-input::-moz-range-thumb {
      width: var(--vol-thumb);
      height: var(--vol-thumb);
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 8px rgba(0, 234, 255, 0.95), 0 0 16px rgba(0, 234, 255, 0.5);
      border: none;
    }

    .volume-input::-moz-focus-outer {
      border: 0;
    }
.sound-card-compact__actions {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 6;
    display: flex;
    gap: 4px;
    align-items: center;
    pointer-events: auto;
}

.sound-card-compact__actions .trash-bin-btn,
.sound-card-compact__actions .rename-sound-btn {
    padding: 4px 6px;
    background: rgba(8, 10, 20, 0.65);
    border-radius: 8px;
    border: none;
}

.sound-card-compact.is-playing {
    animation-duration: 3.5s;
}

/* Bootstrap reset inside compact cards */
.sound-card-compact button.orbit-play,
.sound-card-compact button.vol-btn {
    font: inherit;
    line-height: normal;
}

.sound-card-compact--promo .orbit-promo-center {
    position: absolute;
    inset: 52px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
}

.sound-card-compact--promo .orbit-promo-btn {
    border: none;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    color: #0a0a12;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    box-shadow: 0 0 16px rgba(79, 172, 254, 0.45);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sound-card-compact--promo .orbit-promo-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.sound-card-compact--promo .volume-row--promo .vol-btn {
    display: none;
}

.sound-card-compact--promo .volume-row--promo .volume-input {
    pointer-events: none;
    opacity: 0.35;
}

.sound-card-compact--promo .orbit-promo-hint {
    font-size: 0.65rem;
    color: #b5c0df;
    text-align: center;
    max-width: 90px;
    line-height: 1.2;
}

@media (prefers-reduced-motion: reduce) {
    .sound-card-compact,
    .sound-card-compact::before,
    .sound-card-compact .card-ambient {
        animation: none !important;
    }
    .sound-card-compact.is-hover {
        transform: none !important;
    }
}


/* === components/forms.css === */

.form-control,
.form-select {
    background-color: rgba(16, 17, 30, 0.75);
    border: 1px solid rgba(79, 172, 254, 0.35);
    color: #edf2ff;
}

.auth-form .form-control,
.glass-effect.auth-card .form-control {
    width: 100%;
    min-height: 44px;
    border-radius: 12px;
}

.auth-form .mb-3 .form-label {
    display: block;
    width: 100%;
}

.form-label {
    color: #dce7ff;
}

.auth-title {
    color: transparent !important;
    background: var(--neon-text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: var(--neon-text-shadow);
    animation: neonPulse 2s infinite alternate;
}

.auth-subtitle {
    color: transparent !important;
    background: var(--neon-text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: var(--neon-text-shadow);
    animation: neonPulse 2s infinite alternate;
}

.form-control:focus,
.form-select:focus {
    background-color: rgba(16, 17, 30, 0.92);
    border-color: #89ecff;
    color: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(79, 172, 254, 0.2);
}

/* Keep autofilled fields in the same dark theme */
input.form-control:-webkit-autofill,
input.form-control:-webkit-autofill:hover,
input.form-control:-webkit-autofill:focus,
textarea.form-control:-webkit-autofill,
textarea.form-control:-webkit-autofill:hover,
textarea.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #edf2ff;
    caret-color: #edf2ff;
    -webkit-box-shadow: 0 0 0 1000px rgba(16, 17, 30, 0.92) inset;
    box-shadow: 0 0 0 1000px rgba(16, 17, 30, 0.92) inset;
    border: 1px solid rgba(79, 172, 254, 0.35);
    transition: background-color 9999s ease-in-out 0s;
}

.form-check-input {
    background-color: rgba(16, 17, 30, 0.75);
    border: 1px solid rgba(79, 172, 254, 0.45);
}

.form-check-input:checked {
    background-color: #4facfe;
    border-color: #4facfe;
}

.dropdown-menu {
    background: rgba(14, 16, 30, 0.95);
    border: 1px solid rgba(79, 172, 254, 0.33);
    color: #dce7ff;
    box-shadow: 0 16px 35px rgba(6, 7, 16, 0.45);
}

.dropdown-item {
    color: #dce7ff;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: #ffffff;
    background: rgba(79, 172, 254, 0.22);
}

.modal-content {
    background: rgba(11, 12, 26, 0.96);
    border: 1px solid rgba(79, 172, 254, 0.35);
    color: #edf2ff;
}

.modal-content .form-text,
.modal-content .text-muted,
.modal-content .form-text small {
    color: rgba(220, 231, 255, 0.88) !important;
}

/* Пресет: ниже шапки, кликабельное окно поверх backdrop */
.save-preset-modal,
.rename-sound-modal {
    --bs-modal-zindex: 1060;
    z-index: 1060;
}

.save-preset-modal .modal-dialog,
.rename-sound-modal .modal-dialog {
    margin: 5.25rem auto 1.5rem;
    max-width: 520px;
    pointer-events: auto;
}

.save-preset-modal .modal-content,
.rename-sound-modal .modal-content {
    pointer-events: auto;
}

body.modal-open .modal-backdrop {
    z-index: 1050;
}

body.modal-open .save-preset-modal,
body.modal-open .rename-sound-modal {
    z-index: 1060;
}

body.modal-open .top-header {
    z-index: 1030;
}

.modal-header,
.modal-footer {
    border-color: rgba(79, 172, 254, 0.2);
}

.btn-close {
    filter: invert(1) brightness(1.2);
}

.alert {
    border: 1px solid rgba(79, 172, 254, 0.28);
    background: rgba(12, 15, 28, 0.82);
    color: #e7eeff;
}

.alert-info {
    border-color: rgba(79, 172, 254, 0.35);
}

.alert-success {
    border-color: rgba(35, 209, 139, 0.4);
}

hr {
    border-color: rgba(79, 172, 254, 0.22);
    opacity: 1;
}

.main-content .row.mb-4 .glass-effect {
    background: rgba(20, 20, 30, 0.8);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 28px rgba(79, 172, 254, 0.16);
}

/* Панель «Активные звуки» */
.sounds-control-panel-wrap {
    position: relative;
    z-index: 40;
    overflow: visible;
    border-radius: 20px;
    background: rgba(20, 20, 30, 0.8);
    border: 1px solid rgba(0, 255, 255, 0.2);
    box-shadow: 0 0 28px rgba(79, 172, 254, 0.16);
}

.main-content .sounds-control-row,
.main-content .sounds-control-row .col-12 {
    position: relative;
    z-index: 40;
    overflow: visible;
}

/* Вращающаяся полоса — отдельный слой, обрезается только он */
.sounds-control-panel-shine {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.sounds-control-panel-shine::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(0, 255, 255, 0.08), transparent, rgba(255, 0, 255, 0.08), transparent);
    animation: controlPanelSpin 8s linear infinite;
    opacity: 0.65;
    pointer-events: none;
}

.sounds-control-panel-content {
    position: relative;
    z-index: 1;
    overflow: visible;
}

.sounds-control-panel-content .sounds-presets-dropdown {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

.sounds-control-panel-content .col-md-6.text-end {
    position: relative;
    overflow: visible;
}

/* Меню пресетов уходит в body через JS (класс sounds-presets-menu-portal) */
.dropdown-menu.sounds-presets-menu-portal {
    z-index: 1100;
}

.sounds-control-panel-wrap .btn {
    border-radius: 14px;
    min-height: 36px;
}

.sounds-control-panel-wrap .btn-group .btn {
    border-radius: 14px;
}

.main-content .row.mb-4 .glass-effect > * {
    position: relative;
    z-index: 1;
}

@keyframes controlPanelSpin {
    100% { transform: rotate(360deg); }
}

/* Загрузка своего звука (Максимальный тариф) */
.custom-sound-file-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    padding: 0.35rem 0.75rem 0.35rem 0.35rem;
    background-color: rgba(16, 17, 30, 0.75);
    border: 1px solid rgba(79, 172, 254, 0.35);
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.custom-sound-file-field:focus-within {
    border-color: #89ecff;
    box-shadow: 0 0 0 0.2rem rgba(79, 172, 254, 0.2);
}

.custom-sound-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.custom-sound-file-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(79, 172, 254, 0.45);
    color: var(--nebula-blue, #4facfe);
    background: rgba(79, 172, 254, 0.1);
    font-size: 0.875rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.custom-sound-file-btn:hover,
.custom-sound-file-btn:focus-visible {
    background: rgba(79, 172, 254, 0.18);
    border-color: rgba(79, 172, 254, 0.75);
    color: #ffffff;
}

.custom-sound-file-name {
    flex: 1;
    min-width: 0;
    color: rgba(220, 231, 255, 0.75);
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* === components/buttons.css === */

/* Кнопки — неон + стекло (общий стиль ШумОазис) */

:root {
    --btn-glass: rgba(12, 14, 28, 0.82);
    --btn-glass-hover: rgba(18, 22, 44, 0.92);
    --btn-border-cyan: rgba(79, 172, 254, 0.55);
    --btn-border-cyan-hover: rgba(142, 232, 255, 0.85);
    --btn-text: #e8f4ff;
    --btn-text-bright: #f4fbff;
    --btn-glow-cyan:
        0 0 12px rgba(142, 232, 255, 0.35),
        0 0 24px rgba(79, 172, 254, 0.22);
    --btn-glow-cyan-hover:
        0 0 16px rgba(142, 232, 255, 0.55),
        0 0 32px rgba(79, 172, 254, 0.38),
        0 0 48px rgba(196, 113, 237, 0.15);
}

.btn {
    border-radius: 999px;
    border-width: 1px;
    border-style: solid;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--btn-glow-cyan-hover);
}

.btn:disabled,
.btn.disabled,
.btn-landing:disabled {
    opacity: 0.42;
    transform: none !important;
    pointer-events: none;
    box-shadow: none;
    filter: none;
}

/* --- Primary / success / warning / danger (glass + неоновая обводка) --- */

.btn-primary,
.btn-success,
.btn-warning,
.btn-danger {
    color: var(--btn-text-bright) !important;
    background: var(--btn-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-shadow: 0 0 10px rgba(142, 232, 255, 0.35);
    box-shadow:
        var(--btn-glow-cyan),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.btn-primary {
    border-color: var(--btn-border-cyan);
    background:
        linear-gradient(135deg, rgba(79, 172, 254, 0.22) 0%, rgba(12, 14, 28, 0.88) 55%),
        var(--btn-glass);
}

.btn-success {
    border-color: rgba(94, 252, 232, 0.5);
    background:
        linear-gradient(135deg, rgba(94, 252, 232, 0.15) 0%, rgba(12, 14, 28, 0.88) 55%),
        var(--btn-glass);
    text-shadow: 0 0 10px rgba(94, 252, 232, 0.4);
}

.btn-warning {
    border-color: rgba(245, 175, 25, 0.55);
    background:
        linear-gradient(135deg, rgba(245, 175, 25, 0.18) 0%, rgba(12, 14, 28, 0.88) 55%),
        var(--btn-glass);
    text-shadow: 0 0 10px rgba(255, 213, 110, 0.35);
}

.btn-danger {
    border-color: rgba(255, 107, 157, 0.55);
    background:
        linear-gradient(135deg, rgba(255, 107, 157, 0.18) 0%, rgba(12, 14, 28, 0.88) 55%),
        var(--btn-glass);
    text-shadow: 0 0 10px rgba(255, 143, 180, 0.35);
}

.btn-primary:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-danger:hover,
.btn-primary:focus-visible,
.btn-success:focus-visible,
.btn-warning:focus-visible,
.btn-danger:focus-visible {
    transform: translateY(-2px);
    color: #fff !important;
    background: var(--btn-glass-hover);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    border-color: var(--btn-border-cyan-hover);
    box-shadow: var(--btn-glow-cyan-hover), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.btn-success:hover,
.btn-success:focus-visible {
    border-color: rgba(121, 255, 229, 0.85);
    box-shadow:
        0 0 16px rgba(94, 252, 232, 0.45),
        0 0 28px rgba(79, 172, 254, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-warning:hover,
.btn-warning:focus-visible {
    border-color: rgba(255, 213, 110, 0.85);
    box-shadow:
        0 0 16px rgba(245, 175, 25, 0.4),
        0 0 28px rgba(255, 213, 110, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-danger:hover,
.btn-danger:focus-visible {
    border-color: rgba(255, 143, 180, 0.85);
    box-shadow:
        0 0 16px rgba(255, 107, 157, 0.45),
        0 0 28px rgba(255, 107, 157, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-primary:active,
.btn-success:active,
.btn-warning:active,
.btn-danger:active,
.btn-primary.active,
.btn-success.active,
.btn-warning.active,
.btn-danger.active {
    transform: translateY(0);
}

.btn-secondary {
    color: var(--btn-text) !important;
    background: rgba(10, 12, 24, 0.55);
    border-color: rgba(79, 172, 254, 0.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    color: var(--btn-text-bright) !important;
    background: var(--btn-glass-hover);
    border-color: var(--btn-border-cyan-hover);
    box-shadow: var(--btn-glow-cyan);
    transform: translateY(-1px);
}

/* --- Outline --- */

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-warning,
.btn-outline-danger {
    color: var(--btn-text) !important;
    background: rgba(10, 12, 24, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.btn-outline-primary {
    border-color: rgba(79, 172, 254, 0.5);
    text-shadow: 0 0 8px rgba(142, 232, 255, 0.25);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
    color: #fff !important;
    background: rgba(79, 172, 254, 0.14);
    border-color: var(--btn-border-cyan-hover);
    box-shadow: var(--btn-glow-cyan);
    transform: translateY(-1px);
}

.btn-outline-secondary {
    border-color: rgba(181, 192, 223, 0.35);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible {
    color: #fff !important;
    border-color: rgba(142, 232, 255, 0.5);
    background: rgba(79, 172, 254, 0.1);
    box-shadow: 0 0 14px rgba(79, 172, 254, 0.2);
}

.btn-outline-warning {
    border-color: rgba(245, 175, 25, 0.45);
}

.btn-outline-warning:hover,
.btn-outline-warning:focus-visible {
    color: #fff !important;
    border-color: rgba(255, 213, 110, 0.75);
    background: rgba(245, 175, 25, 0.12);
    box-shadow: 0 0 14px rgba(245, 175, 25, 0.3);
}

.btn-outline-danger {
    border-color: rgba(255, 107, 157, 0.45);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus-visible {
    color: #fff !important;
    border-color: rgba(255, 143, 180, 0.75);
    background: rgba(255, 107, 157, 0.12);
    box-shadow: 0 0 14px rgba(255, 107, 157, 0.32);
}

/* --- Лендинг --- */

.btn-landing {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    letter-spacing: 0.02em;
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease;
}

.btn-landing i {
    text-shadow: 0 0 10px rgba(142, 232, 255, 0.5);
}

.btn-primary-landing {
    color: var(--btn-text-bright) !important;
    border-color: var(--btn-border-cyan-hover);
    background:
        linear-gradient(135deg, rgba(79, 172, 254, 0.28) 0%, rgba(12, 14, 28, 0.9) 50%),
        rgba(12, 14, 28, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    text-shadow: 0 0 12px rgba(142, 232, 255, 0.45);
    box-shadow:
        var(--btn-glow-cyan-hover),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-primary-landing:hover,
.btn-primary-landing:focus-visible {
    transform: translateY(-2px);
    color: #fff !important;
    border-color: #a8f0ff;
    box-shadow:
        0 0 20px rgba(142, 232, 255, 0.6),
        0 0 40px rgba(79, 172, 254, 0.4),
        0 0 56px rgba(196, 113, 237, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.btn-secondary-landing {
    color: var(--btn-text) !important;
    border-color: rgba(79, 172, 254, 0.4);
    background: rgba(10, 12, 24, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.btn-secondary-landing:hover,
.btn-secondary-landing:focus-visible {
    transform: translateY(-2px);
    color: #fff !important;
    border-color: var(--btn-border-cyan-hover);
    background: rgba(79, 172, 254, 0.12);
    box-shadow: var(--btn-glow-cyan);
}

.btn-landing.btn-landing-lg {
    font-size: 1.1rem;
    padding: 16px 40px;
}

/* --- Auth --- */

.auth-form .btn,
.glass-effect.auth-card .btn {
    border-radius: 14px;
    min-height: 42px;
}

.auth-form .btn-primary {
    width: 100%;
}

.glass-effect.auth-card .btn-lg {
    min-height: 48px;
}

/* --- Прочее --- */

.btn-modern-green {
    color: var(--btn-text-bright) !important;
    background:
        linear-gradient(135deg, rgba(94, 252, 232, 0.22) 0%, rgba(12, 14, 28, 0.88) 55%),
        var(--btn-glass);
    border: 1px solid rgba(94, 252, 232, 0.55);
    padding: 0.72rem 1.5rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    backdrop-filter: blur(10px);
    text-shadow: 0 0 10px rgba(94, 252, 232, 0.4);
    box-shadow: 0 0 14px rgba(94, 252, 232, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.btn-modern-green:hover {
    color: #fff !important;
    transform: translateY(-2px);
    border-color: rgba(121, 255, 229, 0.85);
    box-shadow:
        0 0 18px rgba(94, 252, 232, 0.5),
        0 0 32px rgba(79, 172, 254, 0.25);
}

.btn-link {
    color: #8ee8ff !important;
    text-decoration: none;
    text-shadow: 0 0 8px rgba(142, 232, 255, 0.3);
}

.btn-link:hover,
.btn-link:focus-visible {
    color: #c7f1ff !important;
    text-shadow: 0 0 12px rgba(142, 232, 255, 0.55);
}

.preset-delete-btn {
    color: #ff9ec4;
    background: rgba(255, 107, 157, 0.08);
    border: 1px solid rgba(255, 107, 157, 0.45);
    border-radius: 8px;
    padding: 0.25rem 0.5rem;
    margin-right: 0.5rem;
    transition: all 0.25s ease;
}

.preset-delete-btn:hover {
    color: #ffd0e4;
    background: rgba(255, 107, 157, 0.16);
    border-color: rgba(255, 143, 180, 0.75);
    box-shadow: 0 0 12px rgba(255, 107, 157, 0.4);
}

.preset-delete-btn:active {
    transform: scale(0.96);
}

.password-toggle-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #8feaff;
    padding: 0.25rem;
    cursor: pointer;
    z-index: 10;
    text-decoration: none;
}

.password-toggle-btn:hover {
    color: #ffffff;
}

.password-toggle-btn:focus {
    outline: none;
    box-shadow: none;
}

.auth-form input[type="password"],
.auth-form input[type="text"] {
    padding-right: 40px;
}

.trash-bin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.5rem;
    line-height: 1;
    vertical-align: middle;
}

.trash-bin {
    position: relative;
    display: inline-block;
    width: 1.15rem;
    height: 1.25rem;
}

.trash-bin__body {
    position: absolute;
    left: 0.12rem;
    right: 0.12rem;
    bottom: 0;
    height: 0.85rem;
    border: 2px solid #ff6b9d;
    border-top: none;
    border-radius: 0 0 4px 4px;
    background: rgba(255, 107, 157, 0.12);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.trash-bin__lid {
    position: absolute;
    left: 0;
    right: 0;
    top: 0.1rem;
    height: 3px;
    background: #ff6b9d;
    border-radius: 2px;
    transform-origin: 85% 100%;
    transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.25s ease;
}

.trash-bin-btn:hover .trash-bin__lid,
.trash-bin-btn:focus-visible .trash-bin__lid {
    transform: rotate(32deg) translateY(-2px);
    box-shadow: 0 0 8px rgba(255, 107, 157, 0.65);
    background: #ff8fb8;
}

.trash-bin-btn:hover .trash-bin__body,
.trash-bin-btn:focus-visible .trash-bin__body {
    border-color: #ff8fb8;
    box-shadow: 0 0 10px rgba(255, 107, 157, 0.35);
}

.trash-bin-btn.ai-delete-btn .trash-bin {
    margin-right: 0.35rem;
    vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .btn-landing,
    .btn-modern-green {
        transition: none;
    }

    .btn:hover,
    .btn-landing:hover {
        transform: none;
    }

    .trash-bin__lid,
    .trash-bin__body {
        transition: none;
    }

    .trash-bin-btn:hover .trash-bin__lid,
    .trash-bin-btn:focus-visible .trash-bin__lid {
        transform: none;
    }
}


/* === components/markdown-legal.css === */

/* Rendered Markdown for legal / policy pages */

.markdown-legal {
    --md-heading-color: #e8eeff;
    --md-text-color: rgba(220, 230, 255, 0.92);
    --md-muted-color: rgba(180, 198, 235, 0.85);
    --md-border-color: rgba(79, 172, 254, 0.28);
    --md-link-color: #7bdcff;
}

.markdown-legal h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--md-heading-color);
    margin-bottom: 1.25rem;
    line-height: 1.35;
}

.markdown-legal h2 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--md-heading-color);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--md-border-color);
}

.markdown-legal h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--md-heading-color);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.markdown-legal p {
    color: var(--md-text-color);
    margin-bottom: 0.9rem;
    line-height: 1.6;
}

.markdown-legal ul,
.markdown-legal ol {
    color: var(--md-text-color);
    margin-bottom: 1rem;
    padding-left: 1.35rem;
}

.markdown-legal li {
    margin-bottom: 0.45rem;
    line-height: 1.55;
}

.markdown-legal li > p {
    margin-bottom: 0.35rem;
}

.markdown-legal hr {
    border: none;
    border-top: 1px solid var(--md-border-color);
    margin: 1.75rem 0;
    opacity: 0.9;
}

.markdown-legal strong {
    color: var(--md-heading-color);
    font-weight: 600;
}

.markdown-legal a {
    color: var(--md-link-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.markdown-legal a:hover {
    color: #a8f0ff;
}

.markdown-legal table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.markdown-legal th,
.markdown-legal td {
    border: 1px solid var(--md-border-color);
    padding: 0.5rem 0.65rem;
    text-align: left;
}

.markdown-legal th {
    background: rgba(79, 172, 254, 0.08);
    color: var(--md-heading-color);
}

.markdown-legal blockquote {
    border-left: 3px solid var(--md-border-color);
    margin: 0 0 1rem;
    padding: 0.25rem 0 0.25rem 1rem;
    color: var(--md-muted-color);
}

.markdown-legal code {
    font-size: 0.9em;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: rgba(12, 18, 40, 0.65);
    color: #c8e8ff;
}

.markdown-legal pre {
    padding: 1rem;
    overflow-x: auto;
    margin-bottom: 1rem;
    border-radius: 8px;
    background: rgba(12, 18, 40, 0.72);
    border: 1px solid var(--md-border-color);
}

.markdown-legal pre code {
    padding: 0;
    background: transparent;
    color: var(--md-text-color);
}

@media (max-width: 576px) {
    .markdown-legal h1 {
        font-size: 1.3rem;
    }

    .markdown-legal h2 {
        font-size: 1.05rem;
    }
}


/* === components/toast.css === */

#site-toast-container {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: min(420px, calc(100vw - 2rem));
    pointer-events: none;
}

.site-toast {
    pointer-events: auto;
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    border-radius: 18px;
    background: rgba(14, 16, 30, 0.94);
    border: 1px solid rgba(79, 172, 254, 0.45);
    box-shadow:
        0 0 24px rgba(79, 172, 254, 0.22),
        0 16px 40px rgba(6, 7, 16, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #e8eeff;
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.site-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.site-toast.is-hiding {
    opacity: 0;
    transform: translateY(1rem);
}

.site-toast--warning {
    border-color: rgba(245, 175, 25, 0.55);
    box-shadow:
        0 0 22px rgba(245, 175, 25, 0.18),
        0 16px 40px rgba(6, 7, 16, 0.55);
}

.site-toast--error {
    border-color: rgba(255, 107, 157, 0.5);
    box-shadow:
        0 0 22px rgba(255, 107, 157, 0.2),
        0 16px 40px rgba(6, 7, 16, 0.55);
}

.site-toast__icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: rgba(79, 172, 254, 0.15);
    color: #8ee8ff;
    box-shadow: 0 0 14px rgba(79, 172, 254, 0.35);
}

.site-toast--warning .site-toast__icon {
    background: rgba(245, 175, 25, 0.18);
    color: #ffd98a;
    box-shadow: 0 0 14px rgba(245, 175, 25, 0.35);
}

.site-toast__body {
    flex: 1;
    min-width: 0;
}

.site-toast__title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    color: transparent;
    background: var(--neon-text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: var(--neon-text-shadow);
}

.site-toast__message {
    font-size: 0.9rem;
    line-height: 1.45;
    color: #c5d4f5;
    margin: 0;
}

.site-toast__actions {
    margin-top: 0.65rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.site-toast__action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    color: #0a0a12;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border: none;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.site-toast__action:hover {
    color: #0a0a12;
    box-shadow: 0 0 16px rgba(79, 172, 254, 0.55);
    transform: translateY(-1px);
}

.site-toast__close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: #8b9bc7;
    padding: 0.15rem;
    line-height: 1;
    cursor: pointer;
    font-size: 1.1rem;
    transition: color 0.2s ease;
}

.site-toast__close:hover {
    color: #ffffff;
}

@media (max-width: 576px) {
    #site-toast-container {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        width: auto;
        transform: none;
    }
}


/* === components/ai-player.css === */

.ai-sounds-page .sound-container {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
}

.ai-sounds-page .ai-generated-card {
    min-height: auto;
    overflow: visible;
    cursor: default;
}

.ai-sounds-page .ai-action-row {
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
}

.ai-sounds-page .ai-action-row .ai-action-btn {
    min-width: 0;
    flex: 1 1 auto;
    white-space: normal;
    text-align: center;
}

.ai-sounds-page .ai-action-row .ai-action-btn.ai-action-btn--wide {
    flex: 1 1 100%;
}

.ai-audio-player {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 14px;
    background: rgba(8, 10, 22, 0.85);
    border: 1px solid rgba(79, 172, 254, 0.35);
    box-shadow: inset 0 0 12px rgba(79, 172, 254, 0.08);
}

.ai-audio-play {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0a0a12;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    box-shadow: 0 0 14px rgba(79, 172, 254, 0.45);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ai-audio-play:hover {
    transform: scale(1.06);
    box-shadow: 0 0 18px rgba(79, 172, 254, 0.6);
}

.ai-audio-time {
    flex-shrink: 0;
    font-size: 0.78rem;
    color: #b5c8f0;
    min-width: 4.5rem;
    font-variant-numeric: tabular-nums;
}

.ai-audio-seek {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.ai-audio-native {
    display: none;
}


/* Mobile performance overrides: keep scrolling stable on coarse pointers. */
@media (max-width: 900px), (pointer: coarse) {
    .perf-mobile-safe .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .perf-mobile-safe .carousel-track,
    .perf-mobile-safe .viz-bar,
    .perf-mobile-safe .wave-bar,
    .perf-mobile-safe .sound-waves *,
    .perf-mobile-safe .feature-visual-card *,
    .perf-mobile-safe .price-card-landing,
    .perf-mobile-safe .testimonial-card {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        will-change: auto !important;
    }

    .perf-mobile-safe .testimonials-carousel,
    .perf-mobile-safe .feature-carousel {
        contain: content;
    }
}