html {
    background: var(--page-bg);
}

:root:root body {
    background: url("../images/vanila.webp?v=1") no-repeat center top;
    background-size: cover;
    background-attachment: fixed;
    background-color: var(--page-bg);
}

:root:root body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, rgba(3, 3, 8, .82) 0%, rgba(3, 3, 8, .94) 60%, #030308 100%);
    pointer-events: none;
    z-index: 0;
}

:root:root .l-wrapper,
:root:root .l-main,
:root:root .l-page {
    position: relative;
    z-index: 1;
    background: transparent;
}

:root:root .c-sidebar {
    background: rgba(6, 6, 14, .92);
    border-right: 1px solid rgba(255, 255, 255, .06);
}

:root:root .c-sidebar__link {
    border-radius: 3px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sidebar-item-fg);
    transition: background var(--transition-fast), color var(--transition-fast);
}

:root:root .c-sidebar__link:hover {
    background: var(--sidebar-item-hover-bg);
    color: var(--sidebar-item-hover-fg);
    box-shadow: var(--sidebar-item-hover-shadow);
}

:root:root .c-sidebar__link.is-active,
:root:root .c-sidebar__link[aria-current="page"] {
    background: var(--sidebar-item-active-bg);
    color: var(--sidebar-item-active-fg);
    box-shadow: var(--sidebar-item-active-shadow);
}

:root:root .c-sidebar__link.is-active .c-sidebar__link-icon,
:root:root .c-sidebar__link[aria-current="page"] .c-sidebar__link-icon {
    color: var(--sidebar-item-active-icon);
}

:root:root .c-sidebar.is-collapsed .c-sidebar__link,
:root:root .c-sidebar.is-collapsed .c-sidebar__link:hover {
    font-size: 0;
    letter-spacing: 0;
}

:root:root .c-sidebar__sep {
    background: rgba(255, 255, 255, .06);
}

:root:root .c-navbar,
:root:root .c-mobile-bar {
    background: rgba(6, 6, 14, .9);
    border-color: rgba(255, 255, 255, .06);
}

:root:root .c-panel,
:root:root .c-card,
:root:root .c-modal,
:root:root .c-table-wrap,
:root:root .c-drawer {
    background: rgba(11, 11, 20, .92);
    border-color: rgba(255, 255, 255, .06);
}

:root:root .c-page-title {
    font-family: var(--font-display);
    letter-spacing: 1px;
    text-transform: uppercase;
}

:root:root .c-table th {
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--stone-500);
}

:root:root .c-toast {
    border-radius: 3px;
    box-shadow: 0 0 6px -2px rgba(255, 255, 255, .5);
}

:root:root .c-toast.is-success,
:root:root .c-toast--success {
    background: #1d4144;
    color: #fff;
}

:root:root .c-toast.is-error,
:root:root .c-toast--error {
    background: #401313;
    color: #fff;
}

:root:root * {
    scrollbar-width: thin;
    scrollbar-color: #6a0010 #07070f;
}

:root:root *::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

:root:root *::-webkit-scrollbar-track {
    background: #07070f;
}

:root:root *::-webkit-scrollbar-thumb {
    background: #6a0010;
    border-radius: 2px;
}

:root:root *::-webkit-scrollbar-thumb:hover {
    background: #d3051d;
}