:root {
    --bg: #020403;
    --surface: rgba(2, 10, 4, 0.84);
    --surface-strong: #041107;
    --header-bg: rgba(60, 80, 70, 0.95);
    --text: #d8ffe4;
    --muted: #79d98f;
    --accent: #00ff41;
    --accent-2: #008f11;
    --border: rgba(0, 255, 65, 0.22);
    --shadow: 0 0 18px rgba(0, 255, 65, 0.18), 0 0 38px rgba(0, 143, 17, 0.16), 0 24px 70px rgba(0, 0, 0, 0.55);
    --hero: linear-gradient(135deg, rgba(0, 255, 65, 0.08), rgba(0, 143, 17, 0.22));
    --radius: 18px;
}
body {
    background:
        radial-gradient(circle at top, rgba(0, 255, 65, 0.08), transparent 26%),
        linear-gradient(180deg, #010201 0%, #020403 38%, #000000 100%);
    color: var(--text);
    font-family: "Share Tech Mono", "JetBrains Mono", "Fira Code", monospace;
    text-shadow: 0 0 6px rgba(0, 255, 65, 0.14);
}
.site-shell {
    position: relative;
    background:
        linear-gradient(rgba(0, 255, 65, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 65, 0.03) 1px, transparent 1px),
        radial-gradient(circle at 15% 20%, rgba(0, 255, 65, 0.12), transparent 22%),
        radial-gradient(circle at 85% 0%, rgba(0, 143, 17, 0.16), transparent 20%);
    background-size: 24px 24px, 24px 24px, auto, auto;
}
.site-shell::before,
.site-shell::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.site-shell::before {
    background:
        repeating-linear-gradient(180deg, rgba(0, 255, 65, 0.045) 0 2px, transparent 2px 8px),
        linear-gradient(90deg, transparent 0%, rgba(0, 255, 65, 0.03) 50%, transparent 100%);
    mix-blend-mode: screen;
    opacity: 0.42;
}
.site-shell::after {
    background:
        radial-gradient(circle at 20% 30%, rgba(0, 255, 65, 0.06), transparent 14%),
        radial-gradient(circle at 76% 16%, rgba(0, 255, 65, 0.08), transparent 18%),
        linear-gradient(135deg, transparent 0 46%, rgba(0, 255, 65, 0.06) 46% 47%, transparent 47% 100%);
    opacity: 0.55;
}

.site-footer {
    background: rgba(1, 8, 3, 0.82);
    border-color: rgba(0, 255, 65, 0.16);
    backdrop-filter: blur(14px);
}
.logo-box,
.page-card,
.style-card,
.submenu-list,
.news-card,
.news-calendar-widget {
    background: linear-gradient(180deg, rgba(2, 10, 4, 0.92), rgba(3, 18, 7, 0.82));
    box-shadow: var(--shadow);
}
.logo-box,
.page-card,
.submenu-list,
.news-card,
.news-calendar-widget,
.news-badge,
.news-category-chip,
.news-link,
.news-calendar-day,
.news-pagination,
.news-pagination__link {
    border-color: rgba(0, 255, 65, 0.2);
}
.brand-title,
.page-card h1,
.page-card h2,
.page-card h3,
.news-card__title,
.mobile-menu-title {
    color: #f3fff7;
    text-shadow: 0 0 8px rgba(0, 255, 65, 0.28), 0 0 18px rgba(0, 143, 17, 0.18);
}
.brand-subtitle,
.news-block__eyebrow,
.news-block__intro,
.news-block__selected-date,
.news-card__meta,
.news-calendar-day__count,
.breadcrumbs__separator {
    color: var(--muted);
}
.main-menu a,
.footer-menu a,
.mobile-menu-nav .main-menu a,
.mobile-menu-nav .submenu-item > a,
.breadcrumbs__link,
.news-link,
.news-badge,
.news-category-chip,
.news-pagination__link,
.mobile-menu-close,
.mobile-header__toggle {
    color: var(--text);
    border-color: rgba(0, 255, 65, 0.14);
}
.main-menu a:hover,
.main-menu .is-active > a,
.submenu-item a:hover,
.style-card.active,
.mobile-menu-nav .main-menu a:hover,
.mobile-menu-nav .submenu-item > a:hover,
.news-link:hover,
.news-pagination__link:hover,
.news-category-chip.is-current,
.news-pagination__link.is-current,
.news-calendar-day.is-active {
    background: linear-gradient(135deg, rgba(0, 255, 65, 0.16), rgba(0, 143, 17, 0.24));
    border-color: rgba(0, 255, 65, 0.44);
    box-shadow: 0 0 0 1px rgba(0, 255, 65, 0.12), 0 0 16px rgba(0, 255, 65, 0.18);
}
.style-badge {
    background: linear-gradient(135deg, var(--accent), #7dff9f);
    color: #001b06;
    box-shadow: 0 0 18px rgba(0, 255, 65, 0.3);
}
.site-accent {
    background: linear-gradient(90deg, rgba(0, 143, 17, 0.8), rgba(0, 255, 65, 1), rgba(0, 143, 17, 0.8));
    box-shadow: 0 0 18px rgba(0, 255, 65, 0.52);
}
.breadcrumbs__list {
    backdrop-filter: blur(10px);
    background: rgba(2, 10, 4, 0.84);
    border-color: rgba(0, 255, 65, 0.18);
}
.breadcrumbs__link {
    text-decoration: none;
}
.breadcrumbs__link:hover {
    background: rgba(0, 255, 65, 0.1);
    border-color: rgba(0, 255, 65, 0.28);
}
.breadcrumbs__item.is-current .breadcrumbs__link {
    letter-spacing: 0.04em;
    color: #001806;
    background: linear-gradient(135deg, var(--accent), #56ff81);
    box-shadow: 0 0 22px rgba(0, 255, 65, 0.3);
}
.footer-menu a {
    background: rgba(2, 10, 4, 0.82);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), 0 0 14px rgba(0, 255, 65, 0.1);
}
.footer-menu .submenu-list {
    background: rgba(1, 9, 3, 0.96);
    border-color: rgba(0, 255, 65, 0.24);
    box-shadow: 0 0 22px rgba(0, 255, 65, 0.12), 0 24px 60px rgba(0, 0, 0, 0.56);
}
.news-calendar-day {
    background: rgba(2, 10, 4, 0.75);
}
.news-empty-state {
    border-color: rgba(0, 255, 65, 0.26);
    color: var(--muted);
    background: rgba(0, 255, 65, 0.03);
}
.news-pagination {
    background: linear-gradient(180deg, rgba(2, 10, 4, 0.9), rgba(1, 8, 3, 0.82));
    box-shadow: 0 0 22px rgba(0, 255, 65, 0.1), 0 18px 48px rgba(0, 0, 0, 0.34);
}
.news-card__title--compact {
    margin: 0;
}
.news-pagination__link.is-disabled {
    opacity: 0.4;
    box-shadow: none;
}
@media (max-width: 900px) {
    .mobile-header {
        background: rgba(1, 8, 3, 0.94);
        color: var(--text);
        border-bottom-color: rgba(0, 255, 65, 0.18);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42), 0 0 18px rgba(0, 255, 65, 0.12);
    }
    .mobile-header__brand {
        color: #f3fff7;
        text-shadow: 0 0 8px rgba(0, 255, 65, 0.22);
    }
    .mobile-header__toggle {
        background: rgba(2, 10, 4, 0.94);
        box-shadow: 0 0 14px rgba(0, 255, 65, 0.12);
    }
    .mobile-header__toggle-line,
    .mobile-header__toggle-line::before,
    .mobile-header__toggle-line::after {
        background: var(--accent);
        box-shadow: 0 0 8px rgba(0, 255, 65, 0.42);
    }
    .mobile-menu-backdrop {
        background: rgba(0, 0, 0, 0.78);
    }
    .mobile-menu-drawer {
        background: linear-gradient(180deg, rgba(1, 8, 3, 0.98), rgba(0, 0, 0, 0.98));
        box-shadow: -20px 0 60px rgba(0, 0, 0, 0.62), -2px 0 0 rgba(0, 255, 65, 0.14);
    }
}