:root {
    color-scheme: light dark;
    --grp-bg: #f5f7fa;
    --grp-surface: #ffffff;
    --grp-text: #1f252e;
    --grp-muted: #5d6774;
    --grp-border: #d8dde6;
    --grp-accent: #8bc53e;
    --grp-accent-strong: #6aa12a;
    --grp-radius: 12px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --grp-bg: #10161d;
        --grp-surface: #17202a;
        --grp-text: #e8eef5;
        --grp-muted: #b8c4d1;
        --grp-border: #2f3a47;
        --grp-accent: #9fd44e;
        --grp-accent-strong: #b0df68;
    }
}

html[data-theme="light"] {
    --grp-bg: #f5f7fa;
    --grp-surface: #ffffff;
    --grp-text: #1f252e;
    --grp-muted: #5d6774;
    --grp-border: #d8dde6;
    --grp-accent: #8bc53e;
    --grp-accent-strong: #6aa12a;
}

html[data-theme="dark"] {
    --grp-bg: #10161d;
    --grp-surface: #17202a;
    --grp-text: #e8eef5;
    --grp-muted: #b8c4d1;
    --grp-border: #2f3a47;
    --grp-accent: #9fd44e;
    --grp-accent-strong: #b0df68;
}

body {
    background: var(--grp-bg);
    color: var(--grp-text);
}

a {
    color: var(--grp-accent-strong);
}

img,
video {
    max-width: 100%;
    height: auto;
}

input,
select,
textarea,
button {
    font: inherit;
}

.subscription-modal,
.subscription-modal-body,
.cookie-window,
.grp-cookie {
    color: var(--grp-text);
}

.subscription-modal,
.subscription-result,
.rb-subscription {
    background: var(--grp-surface);
    border: 1px solid var(--grp-border);
    border-radius: var(--grp-radius);
}

@media screen and (max-width: 1024px) {
    #container-for-sticky-footer,
    #content,
    #fb-main {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 768px) {
    #header,
    .top-center,
    .top-right,
    .new-search-mainPage {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .top-right ul,
    #user-menu-container ul {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
}