:root,
        [data-bs-theme="light"] {
            --bs-primary: #7c3aed;
            --brand-accent: #7c3aed;
            --nav-hover-bg: rgba(124, 58, 237, .10);

            --link: #1f2937;
            --link-hover: #6d28d9;
            --focus-ring: 0 0 0 .25rem rgba(124, 58, 237, .30);

            --hero-overlay-1: rgba(16, 10, 32, .42);
            --hero-overlay-2: rgba(124, 58, 237, .12);
            --hero-vignette: rgba(0, 0, 0, .22);

            --pill-bg: #ede9fe;
            --pill-text: #312e81;

            --card-radius: .5rem;
            --divider: rgba(0, 0, 0, .08);
            --li-item-hover-bg: rgba(124, 58, 237, .10);

            --search-btn: #6d28d9;
            --search-btn-hover: #5b21b6;
            --telegram: #229ED9;

            --footer-bg: #30334a;
            --footer-text: #f2f3fb;
            --footer-subtle: #c9cbe3;
            --footer-grad: linear-gradient(90deg, rgba(124, 58, 237, .25), rgba(96, 165, 250, .18), rgba(124, 58, 237, .25));
        }

        [data-bs-theme="dark"] {
            --bs-primary: #a78bfa;
            --brand-accent: #a78bfa;
            --nav-hover-bg: rgba(167, 139, 250, .12);
            --link: #f3f4f6;
            --link-hover: #c4b5fd;
            --focus-ring: 0 0 0 .25rem rgba(167, 139, 250, .35);

            --hero-overlay-1: rgba(2, 2, 8, .50);
            --hero-overlay-2: rgba(167, 139, 250, .16);
            --hero-vignette: rgba(0, 0, 0, .28);

            --pill-bg: #ddd6fe;
            --pill-text: #1e1b4b;
            --divider: rgba(255, 255, 255, .10);

            --search-btn: #8b5cf6;
            --search-btn-hover: #7c3aed;

            --footer-bg: #30334a;
            --footer-text: #f3f3ff;
            --footer-subtle: #d1d2eb;
            --footer-grad: linear-gradient(90deg, rgba(167, 139, 250, .25), rgba(125, 211, 252, .18), rgba(167, 139, 250, .25));
        }

        html,
        body {
            height: 100%
        }

        body {
            font-family: "Assistant", system-ui, -apple-system, "Segoe UI", Arial, sans-serif
        }

        /* smooth scroll (desktop+mobile) */
        html {
            scroll-behavior: smooth
        }

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

        /* heading size fix */
        h1 {
            font-size: clamp(1.8rem, 2.4vw, 2.6rem);
            line-height: 1.2;
            margin: 0
        }

        .content-max {
            max-width: 1600px
        }

        /* links style */
        a {
            color: var(--link);
            text-decoration: none;
            font-weight: 500
        }

        a:hover {
            color: var(--link-hover)
        }

        a:focus-visible {
            outline: none;
            box-shadow: var(--focus-ring);
            border-radius: .25rem
        }

        /* navbar */
        header.sticky-top {
            backdrop-filter: saturate(1.2) blur(6px);
            transition: box-shadow .18s ease;
            z-index: 1010
        }

        .scrolled header.sticky-top {
            box-shadow: 0 10px 28px rgba(0, 0, 0, .10)
        }

        .navbar-nav .nav-link {
            font-weight: 700;
            padding: .55rem .9rem;
            border-radius: .5rem
        }

        .navbar-nav .nav-link:hover,
        .navbar-nav .nav-link:focus {
            background: var(--nav-hover-bg);
            color: var(--brand-accent)
        }

        .navbar-nav .nav-link.active {
            color: var(--brand-accent)
        }

        .brand i {
            margin-inline-start: .35rem
        }

        .logo-light {
            display: inline
        }

        .logo-dark {
            display: none
        }

        html[data-bs-theme="dark"] .logo-light {
            display: none
        }

        html[data-bs-theme="dark"] .logo-dark {
            display: inline
        }

        /* theme switch */
        .theme-switch {
            position: relative;
            width: 72px;
            height: 32px;
            border-radius: 999px;
            border: 1px solid var(--bs-border-color);
            background: var(--bs-body-bg)
        }

        .theme-switch .knob {
            position: absolute;
            inset-block: 2px;
            inset-inline-start: 2px;
            width: 28px;
            height: 28px;
            border-radius: 999px;
            background: var(--bs-body-color);
            color: var(--bs-body-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all .2s ease
        }

        .theme-switch .icons {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 8px;
            color: var(--bs-body-color)
        }

        html[data-bs-theme="dark"] .theme-switch .knob {
            inset-inline-start: 42px
        }

        .theme-switch:focus-visible {
            box-shadow: var(--focus-ring)
        }

        /* mobile menu (modal) */
        .modal-backdrop.show {
            opacity: .55
        }

        .modal-nav .list-group-item {
            border: 0;
            border-radius: .5rem;
            padding: .9rem 1rem;
            font-weight: 700
        }

        .modal-nav .list-group-item:hover {
            background: var(--nav-hover-bg);
            color: var(--brand-accent)
        }

        /* hero */
        .hero {
            position: relative;
            display: grid;
            align-items: center;
            overflow: hidden;
            border-bottom: 1px solid var(--bs-border-color);
            min-height: 460px;
            z-index: 0;
        }

        .hero::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            background-image: var(--hero-image);
            background-size: cover;
            background-position: center;
            filter: blur(3.5px) saturate(.9) contrast(.9) brightness(.58);
            opacity: .62;
            transform: scale(1.02)
        }

        .hero::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            background:
                radial-gradient(120% 70% at 50% 10%, transparent 55%, rgba(0, 0, 0, .25) 100%),
                linear-gradient(120deg, var(--hero-overlay-1), var(--hero-overlay-2));
            mix-blend-mode: multiply
        }

        .hero-content {
            position: relative;
            z-index: 2;
            padding: 3rem 0;
            color: #fff
        }

        @media (max-width: 576px) {
            .hero {
                min-height: 520px
            }

            .hero-content {
                padding: 3.5rem 0
            }
        }

        /* pills */
        .pill {
            display: inline-block;
            padding: .28rem .62rem;
            border-radius: .4rem;
            font-weight: 700;
            font-size: .78rem;
            background: var(--pill-bg);
            color: var(--pill-text);
            border: 1px solid color-mix(in oklab, var(--pill-bg) 80%, #000 20%)
        }

        /* search card */
        .search-card {
            border-radius: var(--card-radius);
            box-shadow: 0 12px 28px rgba(0, 0, 0, .18)
        }

        .search-label {
            font-weight: 600
        }

        .icon-input {
            position: relative
        }

        .icon-input i {
            position: absolute;
            inset-inline-start: .75rem;
            inset-block: 50%;
            transform: translateY(-50%);
            opacity: .55
        }

        .icon-input .form-control,
        .icon-input .select2-container--bootstrap-5 .select2-selection--single {
            padding-inline-start: 2rem
        }

        /* keyboard icon global fix */
        i.fa-solid.fa-keyboard {
            top: 12px;
            transform: none
        }

        .btn-search {
            background: var(--search-btn);
            border-color: var(--search-btn)
        }

        .btn-search:hover {
            background: var(--search-btn-hover);
            border-color: var(--search-btn-hover)
        }

        #term::placeholder {
            padding-right: 20px;
        }

        /* select2 */
        .form-select {
            padding-inline-end: 2.25rem;
            padding-inline-start: .75rem
        }

        .select2-container--bootstrap-5 .select2-selection--single {
            height: calc(2.375rem + 2px);
            line-height: calc(2.375rem + 2px);
            display: flex;
            align-items: center;
            padding-inline-start: .75rem;
            padding-inline-end: 2rem
        }

        html[dir="rtl"] .select2-container--bootstrap-5 .select2-selection__arrow {
            inset-inline-start: .35rem;
            inset-inline-end: auto;
            height: calc(2.375rem + 2px);
            display: flex;
            align-items: center
        }

        span.select2-selection__placeholder {
            margin-right: 20px
        }

        .select2-container--bootstrap-5 .select2-selection__rendered {
            padding: 0 !important
        }

        /* category cards */
        li.list-group-item:hover {
            background-color: var(--li-item-hover-bg);
            transition: 0.3s;
        }

        .category-card {
            border-radius: var(--card-radius);
            box-shadow: 0 8px 22px rgba(0, 0, 0, .08)
        }

        .category-card .card-header {
            background: transparent;
            border-bottom: 1px solid var(--divider);
            font-weight: 800
        }

        .category-card .list-group-item {
            background: transparent;
            border: 0;
            border-top: 1px solid var(--divider);
            padding: 1rem
        }

        .category-card .list-group-item:first-child {
            border-top: 0
        }

        .item-top {
            display: flex;
            align-items: flex-start;
            gap: 1rem
        }

        .item-top .title {
            flex: 1 1 auto;
            font-weight: 700;
            line-height: 1.35;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical
        }

        .item-top .cat {
            flex: 0 0 auto;
            margin-inline-start: auto
        }

        .item-meta {
            margin-top: .35rem;
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            font-size: .9rem;
            color: #6b7280
        }

        @media (max-width: 576px) {
            .item-top {
                flex-direction: column
            }

            .item-top .cat {
                margin: 0
            }
        }

        .view-all {
            display: block;
            text-align: center;
            font-weight: 400;
            color: var(--brand-accent)
        }

        .view-all:hover {
            color: var(--link-hover)
        }

        /* action section */
        .action-card {
            border-radius: var(--card-radius);
            overflow: hidden;
            box-shadow: 0 12px 28px rgba(0, 0, 0, .10)
        }

        .action-img {
            min-height: 260px;
            background-size: cover;
            background-position: center
        }

        @media (max-width: 576px) {
            .action-img {
                min-height: 220px
            }
        }

        /* footer */
        footer {
            background: var(--footer-bg);
            color: var(--footer-text);
            padding: 2.6rem 0 2.2rem
        }

        footer h6 {
            font-weight: 700
        }

        .footer-gradient {
            height: 6px;
            background: var(--footer-grad);
            border-radius: 999px;
            margin-bottom: 1.1rem
        }

        footer a {
            color: var(--footer-text)
        }

        footer a:hover {
            color: var(--footer-subtle)
        }

        .footer-bottom {
            border-top: 1px solid color-mix(in oklab, var(--footer-bg) 80%, #fff 20%);
            margin-top: 1.2rem;
            padding-top: .7rem;
            color: var(--footer-subtle)
        }

        @media (max-width: 576px) {
            footer {
                padding: 3.2rem 0
            }
        }

        /* cookies in flow (above footer) */
        .cookie-banner {
            position: relative;
            inset: auto;
            background: #101018;
            color: #eee;
            padding: 1rem;
            box-shadow: 0 -8px 24px rgba(0, 0, 0, .2);
        }

        .cookie-banner .btn {
            border-radius: .35rem
        }

        .cookie-hidden {
            display: none
        }

        /* back-to-top button (right side) */
        .scroll-top {
            position: fixed;
            right: 1.25rem;
            left: auto;
            bottom: 1.25rem;
            width: 48px;
            height: 48px;
            border-radius: 999px;
            border: none;
            background: var(--brand-accent);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
            opacity: 0;
            visibility: hidden;
            transform: translateY(8px);
            transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
            z-index: 1100;
        }

        .scroll-top:hover {
            filter: brightness(.95)
        }

        .scroll-top:focus-visible {
            outline: none;
            box-shadow: var(--focus-ring)
        }

        .scroll-top.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0)
        }

        /* mobile tweaks */
        @media (max-width:576px) {
            input#q::placeholder {
                padding-right: 20px
            }

            .row.g-4.align-items-start {
                padding: 30px
            }
        }