html[data-theme="light"] {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --primary: #6ea2ff;
    --dark-text: #edf4ff;
    --dark-text-secondary: #f6f8fb;
    --secondary: #1d355a;
    --background: #111a2a;
    --text-gray-menu: #9dadc5;
    --text-grey: #7f8fa8;
    --grey-icons: #8898b1;
    --lines: #27374e;
    --stroke: #33455f;
    --grey-bg: #0b1220;
    --light-green: #1f6d3a;
    --red: #ff7073;
    --state-on-moderation: #243955;
    --state-finished: #2a3342;
    --state-complited: #244c86;
    --state-pre-moderation: #59451d;
    --hover: #8db7ff;
    --disabled-text: #657288;
    --backdrop: rgba(2, 8, 19, 0.74);
    --shadow-1: 0 27px 40px 0 rgba(0, 0, 0, 0.48);
    --shadow-2: 0 0 22px 0 rgba(0, 0, 0, 0.36);
    --shadow-modal: 0 24px 52px 0 rgba(0, 0, 0, 0.46);
}

html[data-theme="dark"],
html[data-theme="dark"] body {
    background: var(--grey-bg);
    color: var(--dark-text);
}

.theme-toggle {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--border);
    border-radius: 50%;
    background: var(--background);
    color: var(--dark-text);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.theme-toggle:hover {
    background: var(--secondary);
    transform: translateY(-1px);
}

.theme-toggle:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 28%, transparent);
    outline-offset: 2px;
}

.theme-toggle__icon {
    display: none;
    width: 18px;
    height: 18px;
}

.theme-toggle__icon path,
.theme-toggle__icon circle {
    stroke: currentColor;
}

.sidebar-theme-toggle {
    display: none;
}

html[data-theme="light"] .theme-toggle__icon--moon,
html:not([data-theme]) .theme-toggle__icon--moon {
    display: block;
}

html[data-theme="dark"] .theme-toggle__icon--sun {
    display: block;
}

html[data-theme="dark"] .header,
html[data-theme="dark"] .mobile-header {
    background: rgba(17, 26, 42, 0.94);
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .sidebar__logo-link {
    background-color: var(--grey-bg);
}

html[data-theme="dark"] .main {
    background: var(--grey-bg);
}

html[data-theme="dark"] .sidebar__logo,
html[data-theme="dark"] .blog-site-header__brand img,
html[data-theme="dark"] .blog-site-footer img {
    filter: brightness(0) invert(1);
}

html[data-theme="dark"] .menu-item:hover,
html[data-theme="dark"] .menu-item--active,
html[data-theme="dark"] .user-vidget-popup__link:hover,
html[data-theme="dark"] .user-vidget-popup__user-account:hover,
html[data-theme="dark"] .user-vidget-popup__user-account--active {
    background-color: var(--secondary);
}

html[data-theme="dark"] .quick-notifications,
html[data-theme="dark"] .quick-notifications::after,
html[data-theme="dark"] .user-vidget-popup,
html[data-theme="dark"] .modal-window,
html[data-theme="dark"] .card-item,
html[data-theme="dark"] .general-info__container,
html[data-theme="dark"] .general_container,
html[data-theme="dark"] .smart-contract__container,
html[data-theme="dark"] .profile-crop-dialog,
html[data-theme="dark"] .auc-card__header,
html[data-theme="dark"] .aucStart-card__header .auc-card__title--block,
html[data-theme="dark"] .auc-card__details,
html[data-theme="dark"] .auc-card__content--white,
html[data-theme="dark"] .auction-card,
html[data-theme="dark"] .deal-card,
html[data-theme="dark"] .fehu-card,
html[data-theme="dark"] .blog-card,
html[data-theme="dark"] .blog-detail__content {
    background: var(--background) !important;
    border-color: var(--lines);
}

html[data-theme="dark"] .quick-notifications__item.notify-content,
html[data-theme="dark"] .auc-card__content,
html[data-theme="dark"] .auc-card__bid,
html[data-theme="dark"] .auction-preview,
html[data-theme="dark"] .side-steps,
html[data-theme="dark"] .choose-date__item,
html[data-theme="dark"] .smart-contract__middle-section,
html[data-theme="dark"] .notifications__content,
html[data-theme="dark"] .notification-card,
html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .section-menu,
html[data-theme="dark"] .fehu-row:hover,
html[data-theme="dark"] .blog-list-hero,
html[data-theme="dark"] .blog-site-main {
    background: var(--grey-bg) !important;
    border-color: var(--lines);
}

html[data-theme="dark"] .notification-card--unread {
    background: color-mix(in srgb, var(--primary) 13%, var(--background)) !important;
}

html[data-theme="dark"] .input-item,
html[data-theme="dark"] .input-item__input,
html[data-theme="dark"] .input-item__textarea,
html[data-theme="dark"] .select-selected,
html[data-theme="dark"] .select-dropdown-container,
html[data-theme="dark"] .select-dropdown,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .dropdown-menu .dropdown-list-container,
html[data-theme="dark"] .dropdown-search-container,
html[data-theme="dark"] .dropdown-selected,
html[data-theme="dark"] .textarea,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] select {
    background-color: var(--background);
    border-color: var(--lines);
    color: var(--dark-text);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .input-item__input::placeholder,
html[data-theme="dark"] .input-item__textarea::placeholder,
html[data-theme="dark"] .dropdown-selected::placeholder,
html[data-theme="dark"] .dropdown-search::placeholder {
    color: var(--text-gray-menu);
}

html[data-theme="dark"] .select-dropdown div,
html[data-theme="dark"] .dropdown-list li,
html[data-theme="dark"] .dropdown-list label {
    color: var(--dark-text);
}

html[data-theme="dark"] .select-dropdown div:hover,
html[data-theme="dark"] .select-dropdown .selected-option,
html[data-theme="dark"] .dropdown-list li:hover {
    background-color: var(--secondary);
}

html[data-theme="dark"] input[type="checkbox"] {
    background-color: var(--background);
    border-color: var(--stroke);
}

html[data-theme="dark"] input[type="checkbox"]:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

html[data-theme="dark"] .flatpickr-calendar,
html[data-theme="dark"] .flatpickr-months .flatpickr-month,
html[data-theme="dark"] .flatpickr-months .flatpickr-prev-month,
html[data-theme="dark"] .flatpickr-months .flatpickr-next-month,
html[data-theme="dark"] .flatpickr-day,
html[data-theme="dark"] .ui-timepicker-wrapper,
html[data-theme="dark"] .ui-timepicker-standard {
    background: var(--background);
    border-color: var(--lines);
    color: var(--dark-text);
}

html[data-theme="dark"] .flatpickr-day:hover,
html[data-theme="dark"] .flatpickr-day:focus,
html[data-theme="dark"] .ui-timepicker-standard .ui-state-hover {
    background: var(--secondary);
    color: var(--dark-text);
}

html[data-theme="dark"] .flatpickr-day.selected,
html[data-theme="dark"] .flatpickr-day.startRange,
html[data-theme="dark"] .flatpickr-day.endRange {
    background: var(--primary);
    border-color: var(--primary);
    color: #06101f;
}

html[data-theme="dark"] .button--blue,
html[data-theme="dark"] .button--add {
    color: #06101f;
}

html[data-theme="dark"] .button--blue svg path[stroke="white"],
html[data-theme="dark"] .button--add svg path[stroke="white"] {
    stroke: #06101f;
}

html[data-theme="dark"] .button--blue svg rect[fill="white"],
html[data-theme="dark"] .button--add svg rect[fill="white"] {
    fill: #06101f;
}

html[data-theme="dark"] .button--white,
html[data-theme="dark"] .button--small-white,
html[data-theme="dark"] .button--back,
html[data-theme="dark"] .button--attach,
html[data-theme="dark"] .button--edit,
html[data-theme="dark"] .button--link,
html[data-theme="dark"] .card-item__button,
html[data-theme="dark"] .auc-card__button--white,
html[data-theme="dark"] .leave__auc,
html[data-theme="dark"] .pagination__button,
html[data-theme="dark"] .btn-outline-dark,
html[data-theme="dark"] .btn-fehu {
    background: var(--background);
    border-color: var(--lines);
    color: var(--dark-text);
}

html[data-theme="dark"] .button--white:hover,
html[data-theme="dark"] .button--small-white:hover,
html[data-theme="dark"] .button--back:hover,
html[data-theme="dark"] .button--attach:hover,
html[data-theme="dark"] .button--edit:hover,
html[data-theme="dark"] .button--link:hover,
html[data-theme="dark"] .card-item__button:hover,
html[data-theme="dark"] .auc-card__button--white:hover,
html[data-theme="dark"] .pagination__button:hover,
html[data-theme="dark"] .btn-outline-dark:hover,
html[data-theme="dark"] .btn-fehu:hover {
    background: var(--secondary);
    color: var(--dark-text);
}

html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td,
html[data-theme="dark"] .table__container,
html[data-theme="dark"] .fehu-table th,
html[data-theme="dark"] .fehu-table td,
html[data-theme="dark"] .spacex-table th,
html[data-theme="dark"] .spacex-table td {
    border-color: var(--lines) !important;
    color: var(--dark-text);
}

html[data-theme="dark"] .spacex-table th,
html[data-theme="dark"] .fehu-table th,
html[data-theme="dark"] .fehu-table a,
html[data-theme="dark"] .fehu-table a:visited {
    background: var(--background);
    color: var(--dark-text);
}

html[data-theme="dark"] .badge-fehu,
html[data-theme="dark"] .status-dot {
    border-color: var(--lines);
}

html[data-theme="dark"] .tag-down {
    background: var(--secondary);
    color: var(--dark-text);
}

html[data-theme="dark"] .notify__tag,
html[data-theme="dark"] .notification-card__tags div {
    color: var(--dark-text);
}

html[data-theme="dark"] .stateBanner {
    color: var(--dark-text);
}

html[data-theme="dark"] .stateBanner.lightGreenBig,
html[data-theme="dark"] .stateBanner.lightGreenSmall {
    color: #7ff09b;
}

html[data-theme="dark"] .segment-display__top,
html[data-theme="dark"] .segment-overlay__top {
    background: #192944;
    border-color: var(--lines);
    color: var(--dark-text);
}

html[data-theme="dark"] .segment-display__bottom,
html[data-theme="dark"] .segment-overlay__bottom {
    background: #152238;
    border-color: var(--lines);
    color: var(--dark-text);
}

html[data-theme="dark"] svg path[stroke="#131313"],
html[data-theme="dark"] svg path[stroke="black"],
html[data-theme="dark"] svg line[stroke="#131313"],
html[data-theme="dark"] svg line[stroke="black"] {
    stroke: var(--dark-text);
}

html[data-theme="dark"] svg path[fill="#131313"],
html[data-theme="dark"] svg path[fill="black"] {
    fill: var(--dark-text);
}

html[data-theme="dark"] .blog-site {
    background: var(--grey-bg);
    color: var(--dark-text);
}

html[data-theme="dark"] .blog-site-header,
html[data-theme="dark"] .blog-site-footer {
    background: rgba(17, 26, 42, 0.94);
    border-color: var(--lines);
}

html[data-theme="dark"] .blog-site-header__nav a,
html[data-theme="dark"] .blog-site-footer a,
html[data-theme="dark"] .blog-card__title a {
    color: var(--dark-text);
}

html[data-theme="dark"] .blog-site-footer p,
html[data-theme="dark"] .blog-card__date,
html[data-theme="dark"] .blog-detail__date,
html[data-theme="dark"] .blog-card__excerpt {
    color: var(--text-gray-menu);
}

@media (max-width: 900px) {
    .sidebar-theme-toggle {
        display: flex;
        padding: 15px;
        border-bottom: var(--border);
    }

    .sidebar-theme-toggle .theme-toggle {
        width: 43px;
        height: 43px;
        min-width: 43px;
        border-radius: 17px;
    }

    html[data-theme="dark"] .sidebar {
        background-color: var(--background);
    }
}