:root {
    --bg: #061826;
    --surface: rgba(8, 47, 73, 0.72);
    --surface-strong: #0b2239;
    --header-bg: rgba(45, 95, 140, 0.95);
    --text: #e0f2fe;
    --muted: #7dd3fc;
    --accent: #0ea5e9;
    --accent-2: #38bdf8;
    --border: rgba(56, 189, 248, 0.24);
    --shadow: 0 22px 60px rgba(3, 15, 28, 0.45);
    --hero: linear-gradient(135deg, rgba(14, 165, 233, 0.26), rgba(56, 189, 248, 0.1));
    --radius: 18px;
}
body { background: linear-gradient(180deg, #03111f 0%, #061826 40%, #0a2540 100%); color: var(--text); font-family: "Segoe UI", Arial, sans-serif; }
.site-shell { background-image: radial-gradient(circle at 20% 10%, rgba(56,189,248,0.18), transparent 28%), radial-gradient(circle at 80% 0%, rgba(14,165,233,0.14), transparent 22%); }
.site-footer { background: rgba(6, 24, 38, 0.86); border-color: rgba(56,189,248,0.18); }
.logo-box, .page-card, .style-card, .submenu-list { background: var(--surface); box-shadow: var(--shadow); }
.main-menu a:hover, .main-menu .is-active > a, .submenu-item a:hover, .style-card.active { background: rgba(14, 165, 233, 0.16); border-color: rgba(56, 189, 248, 0.35); }
.style-badge { background: linear-gradient(135deg, #0ea5e9, #67e8f9); color: #04263d; }
.site-accent { background: linear-gradient(90deg, #0ea5e9, #67e8f9); }

/* Breadcrumbs */
.breadcrumbs__list { backdrop-filter: blur(10px); }
.breadcrumbs__link { text-decoration: none; }
.breadcrumbs__item.is-current .breadcrumbs__link { letter-spacing: 0.01em; }
.breadcrumbs__list { background: rgba(8, 47, 73, 0.72); border-color: rgba(56, 189, 248, 0.24); }
.breadcrumbs__link:hover { background: rgba(14, 165, 233, 0.14); border-color: rgba(56, 189, 248, 0.34); }
.breadcrumbs__item.is-current .breadcrumbs__link { box-shadow: 0 18px 34px rgba(14, 165, 233, 0.26); }

/* Footer menu */
.footer-menu a { background: rgba(8, 47, 73, 0.78); color: var(--text); box-shadow: 0 14px 30px rgba(3, 15, 28, 0.28); }
.footer-menu a:hover, .footer-menu .is-active > a, .footer-menu .submenu-item a:hover { background: linear-gradient(135deg, rgba(14, 165, 233, 0.24), rgba(103, 232, 249, 0.18)); border-color: rgba(103, 232, 249, 0.36); }
.footer-menu .submenu-list { background: rgba(6, 24, 38, 0.96); border-color: rgba(56, 189, 248, 0.3); box-shadow: 0 26px 54px rgba(3, 15, 28, 0.44); }
.footer-meta { background: transparent; border: none; }

/* Mobile menu */
.menu-toggle, .mobile-header, .mobile-menu-layer { display: none; }
@media (max-width: 900px) {
    :root {
        --site-side-gutter: 12px;
        --content-inline-pad: 14px;
    }
    .site-header { display: none; }
    .footer-columns {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }
    .footer-column {
        min-width: 100%;
        width: 100%;
    }
    .footer-column--brand { max-width: 100%; }
    .footer-meta { padding: 18px 0; }
    .footer-meta-bar { flex-direction: column; align-items: flex-start; }
    .footer-meta-bar__copy { padding-left: 0; }
    .footer-meta-bar__links { justify-content: flex-start; padding-right: 0; }
    .mobile-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; position: absolute; top: 0; left: 0; right: 0; height: 56px; padding: 0 16px; background: transparent; color: #fff; z-index: 1000; transition: transform 0.3s ease-in-out, background 0.3s ease-in-out; }
    .mobile-header--fixed { position: fixed; background: rgba(0,0,0,0.8); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,0.1); }
    .mobile-header--hidden { transform: translateY(-100%); }
    .mobile-header__brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
    .mobile-logo { width: 40px; height: 40px; object-fit: contain; padding: 3px; }
    .mobile-header__toggle { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; cursor: pointer; z-index: 1002; }
    .mobile-header__toggle-line, .mobile-header__toggle-line::before, .mobile-header__toggle-line::after { display: block; width: 18px; height: 2px; background: #fff; transition: transform 0.25s ease; content: ''; position: relative; }
    .mobile-header__toggle-line::before { position: absolute; top: -6px; left: 0; }
    .mobile-header__toggle-line::after { position: absolute; top: 6px; left: 0; }
    
    .mobile-menu-layer { display: block; position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
    .mobile-menu-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.7); opacity: 0; transition: opacity 0.3s ease; }
    .mobile-menu-drawer { position: absolute; top: 0; right: 0; width: min(88vw, 300px); max-width: 100%; height: 100vh; padding: 80px 20px 20px; background: var(--surface); transform: translateX(100%); transition: transform 0.3s ease; }
    .mobile-menu-nav .main-menu a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 52px;
        padding: 14px 16px; /* Возвращаем исходный отступ */
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--surface, rgba(255,255,255,0.04));
        box-shadow: none;
        line-height: 1.35;
    }
    .footer-column__link {
        padding-left: 50px; /* Увеличенный отступ для футер меню */
    }
}

@media (max-width: 480px) {
    :root {
        --site-side-gutter: 10px;
        --content-inline-pad: 12px;
    }
}