:root {
    --body-background-color: rgb(9, 28, 49);
    --body-color: rgb(51, 51, 51);

    --nav-background-color: rgba(15, 29, 59, 0.2);
    --nav-border-color: rgb(59, 155, 255);
    --nav-logotext-color: rgb(255, 255, 255);
    --nav-logotext-hover-color: rgb(59, 155, 255);
    --nav-links-hover-background-color: rgba(59, 155, 255, 0.05);
    --nav-links-selected-color: rgb(59, 155, 255);
    --nav-links-non-selected-color: rgba(255, 255, 255, 0.5);
    --nav-links-non-selected-hover-color: rgb(255, 255, 255);
    --nav-selected-secondary-background-color: rgba(59, 155, 255, 0.4);
    --nav-selected-color: rgb(255, 255, 255);
    --nav-non-selected-color: rgb(255, 255, 255);
    --nav-non-selected-hover-background-color: rgba(59, 155, 255, 0.1);

    --user-dropdown-background-color: rgba(0, 0, 0, 0);
    --user-dropdown-icon-color: rgb(255, 255, 255);
    --user-dropdown-content-background-color: rgba(31, 41, 55, 0.95);
    --user-dropdown-content-border-color: rgb(59, 155, 255);
    --user-dropdown-content-theme-icon-color: rgb(142, 197, 255);
    --user-dropdown-content-item-hover-background-color: rgba(255, 255, 255, 0.1);
    --user-dropdown-content-title: rgb(255, 255, 255);
    --user-dropdown-content-subtext: rgb(128, 128, 128);

    --user-dropdown-content-icon-background-color: rgba(49, 126, 209, 0.3);
    --user-dropdown-content-icon-color: rgb(59, 155, 255);

    --mobile-nav-background-color: rgba(31, 41, 55, 0.7);
    --mobile-nav-overlay-background-color: rgba(0, 0, 0, 0.5);
    --mobile-nav-border-color: rgb(59, 155, 255);

    --mobile-nav-text-color: rgb(232, 235, 240);
    --mobile-nav-secondary-text-color: rgb(162, 168, 179);
    --mobile-nav-third-text-color: rgb(108, 179, 255);
    --mobile-nav-third-text-hover-color: rgb(59, 155, 255);

    --mobile-nav-row-background-color: rgb(21, 25, 36);
    --mobile-nav-row-border-color: rgba(255, 255, 255, 0.07);

    --mobile-nav-scrollbar-color: rgba(59, 155, 255, 0.35);
    --mobile-nav-scrollbar-hover-color: rgba(59, 155, 255, 0.5);

    --mobile-nav-button-background-color: transparent;
    --mobile-nav-button-border-color: rgba(255, 255, 255, 0.12);
    --mobile-nav-button-hover-background-color: rgba(255, 255, 255, 0.05);
    --mobile-nav-button-hover-border-color: rgba(255, 255, 255, 0.2);
    --mobile-nav-button-accent-background-color: rgb(59, 155, 255);
    --mobile-nav-button-accent-border-color: rgba(255, 255, 255, 0.12);
    --mobile-nav-button-accent-text-color: rgb(232, 235, 240);
    --mobile-nav-button-accent-hover-background-color: rgb(59, 155, 255);
    --mobile-nav-button-accent-hover-border-color: rgba(255, 255, 255, 0.2);

    
    --drawer-background-color: rgb(31, 41, 55);
    --drawer-overlay-background-color: rgba(0, 0, 0, 0.5);
    --drawer-border-color: rgb(59, 155, 255);

    --drawer-text-color: rgb(232, 235, 240);
    --drawer-secondary-text-color: rgb(162, 168, 179);

    --drawer-box-background-color: rgb(25, 33, 44);
    --drawer-box-border-color: rgba(255, 255, 255, 0.07);
    --drawer-box-divider-color: rgba(255, 255, 255, 0.3);
    --drawer-box-text-color: rgb(255, 255, 255);
    --drawer-box-highlight: rgb(59, 155, 255);

    --drawer-box-switch-color-active: rgb(96, 159, 243);/*rgb(40, 197, 53);*/
    --drawer-box-switch-color-inactive: rgb(160, 160, 160);/*rgb(233, 80, 70);*/
    --drawer-box-switch-color-dot: rgb(255, 255, 255);

    --drawer-box-menu-background-color: rgb(40, 49, 63);
    --drawer-box-menu-hover-background-color: rgb(52, 62, 78);
    --drawer-box-menu-border-color: rgba(255, 255, 255, 0.2);
    --drawer-box-menu-hover-border-color: rgba(255, 255, 255, 0.4);
    --drawer-box-menu-text-color: rgba(255, 255, 255, 0.4);
    --drawer-box-menu-hover-text-color: rgba(255, 255, 255, 0.7);
    --drawer-box-menu-color-active: rgb(40, 197, 53);
    --drawer-box-menu-list-background-color: rgb(40, 49, 63);
    --drawer-box-menu-list-hover-background-color: rgb(34, 42, 54);
    --drawer-box-menu-list-border-color: rgba(255, 255, 255, 0.2);
    --drawer-box-menu-list-hover-border-color: rgba(255, 255, 255, 0.4);
    --drawer-box-menu-list-item-background-color: rgba(255, 255, 255, 0.02);
    --drawer-box-menu-list-item-hover-background-color: rgba(255, 255, 255, 0.1);
    --drawer-box-menu-list-item-text-color: rgba(255, 255, 255, 0.4);
    --drawer-box-menu-list-item-hover-text-color: rgba(255, 255, 255, 0.7);

    --drawer-scrollbar-color: rgba(59, 155, 255, 0.35);
    --drawer-scrollbar-hover-color: rgba(59, 155, 255, 0.5);

    --drawer-button-background-color: transparent;
    --drawer-button-border-color: rgba(255, 255, 255, 0.12);
    --drawer-button-hover-background-color: rgba(255, 255, 255, 0.05);
    --drawer-button-hover-border-color: rgba(255, 255, 255, 0.2);
    --drawer-button-accent-background-color: rgb(59, 155, 255);
    --drawer-button-accent-border-color: rgba(255, 255, 255, 0.12);
    --drawer-button-accent-text-color: rgb(232, 235, 240);
    --drawer-button-accent-hover-background-color: rgb(50, 136, 228);
    --drawer-button-accent-hover-border-color: rgba(255, 255, 255, 0.45);

    --footer-background-color: rgb(6, 9, 17);
    --footer-border-color: rgb(88, 88, 88);
    --footer-color: rgb(128, 128, 128);
    --footer-logotext-color: rgba(255, 255, 255, 0.5);
    --footer-tagline-color: rgb(102, 102, 102);
    --footer-text-color: rgba(255, 255, 255, 0.2);
    --footer-text-hover-color: rgba(255, 255, 255, 0.8);
}

:root[data-theme="light"] {
    /*--body-background-color: rgb(248, 250, 252);
    --body-color: rgb(0, 35, 73);

    --nav-background-color: rgba(68, 98, 131, 0.4);
    --nav-links-hover-background-color: rgba(59, 155, 255, 0.15);
    --nav-links-non-selected-color: rgba(0, 35, 73, 0.5);
    --nav-links-non-selected-hover-color: rgb(0, 35, 73);
    --nav-non-selected-color: rgb(255, 255, 255);
    --nav-non-selected-hover-background-color: rgba(0, 0, 0, 0.06);

    --user-dropdown-background-color: rgba(0, 0, 0, 0.06);
    --user-dropdown-icon-color: rgb(0, 35, 73);
    --user-dropdown-content-background-color: rgba(195, 220, 247, 0.98);
    --user-dropdown-content-item-hover-background-color: rgba(0, 0, 0, 0.1);
    --user-dropdown-content-title: rgb(0, 35, 73);
    --user-dropdown-content-subtext: rgb(45, 56, 80);*/
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-y: scroll;
    scrollbar-width: none;
}

* {
    -webkit-tap-highlight-color: transparent;
}

button:focus {
    outline: none;
}

button, a {
    -webkit-tap-highlight-color: transparent;
}

button::-moz-focus-inner {
    border: 0;
}

body {
    background: radial-gradient(circle at top left, #19213b, #070815 55%);
    color: var(--body-color);
}

body::-webkit-scrollbar {
    display: none;
}

.nav {
    display: flex;
    align-items: center;
    padding: 1rem;
    background-color: var(--nav-background-color);
    min-width: auto;
    height: 3.5%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 100;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 2px solid var(--nav-border-color);
    transition: background 0.3s, backdrop-filter 0.3s;
}

.inner-nav {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    flex-wrap: nowrap;
    margin: 0 auto;
}

.nav-logo img {
    max-height: 50px;
}

.nav-logotext {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    color: var(--nav-logotext-color);
    text-decoration: none;
    font-size: 1.5rem;
    margin-left: 0.5rem;
    font-weight: bold;
    transition-duration: 0.3s;
}

.nav-logotext:hover {
    color: var(--nav-logotext-hover-color);
}

.nav-middle-out {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

.nav-right {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    margin-right: 10px;
}

.nav-links {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 15px;
}

.nav-links li {
    position: relative;
    border-radius: 10px;
    transition: background 0.3s ease, color 0.3s ease;
}

.nav-links li:hover {
    background: var(--nav-links-hover-background-color);
}

.nav-links li a {
    display: block;
    font-family: "Oswald", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
    padding: 0.5rem 1rem;
    transition: background 0.3s ease, color 0.3s ease;
}

.nav-links .selected a {
    color: var(--nav-links-selected-color);
}

.nav-links .non-selected a {
    color: var(--nav-links-non-selected-color);
}

.nav-links .non-selected:hover a {
    color: var(--nav-links-non-selected-hover-color);
}

.user-dropdown {
    position: relative;
    display: inline-block;
    background-color: var(--user-dropdown-background-color);
    border: none;
    cursor: pointer;
    padding: 0.5rem 1rem;
    color: white;
    font-size: 1rem;
    border-radius: 1rem;
    transition: background-color 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.nav-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    padding: 0.5rem 1rem;
}

.nav-button {
    cursor: pointer;
}

.nav-button svg {
    display: inline-block;
    width: 24px;
    height: 24px;
    color: var(--user-dropdown-icon-color);
    transform-origin: center;
    transform-box: fill-box;
}

.nav-gear svg {
    margin-top: 2px;
    width: 20px;
    height: 20px;
}

.nav-gear:hover svg {
    animation: gear 1.3s cubic-bezier(0.25, 1, 0.5, 1) 1;
}

@keyframes gear {
    from { transform: rotate(0deg); }
    to   { transform: rotate(180deg); }
}

.nav-discord:hover svg {
    animation: discord 1s cubic-bezier(.25, .8, .25, 1) 1 both;
    will-change: transform;
}

@keyframes discord {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-10deg);
    }
    55% {
        transform: rotate(10deg);
    }
    80% {
        transform: rotate(-2deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.user-dropdown-icon {
    color: var(--user-dropdown-icon-color);
}

.user-dropdown-avatar {
    border-radius: 50%;
}

.user-dropdown-content {
    display: block;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    width: 300px;
    max-width: min(90vw, 360px);
    transform: translateX(calc(-50% + var(--shift, 0px)));
    background-color: var(--user-dropdown-content-background-color);
    backdrop-filter: blur(5px);
    border: 2px solid var(--user-dropdown-content-border-color);
    border-radius: 0.5rem;
    padding: 8px;
    padding-bottom: 12px;
    box-sizing: border-box;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
        background 0.3s ease,
        opacity 0.3s ease,
        visibility 0.3s ease;
    max-height: calc(100dvh - 20px);
    overflow: auto;
}

.user-dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
    background: transparent;
    pointer-events: auto;
    z-index: 999;
}

.user-dropdown-content ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.user-dropdown:hover .user-dropdown-content {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

@supports (selector(:has(*))) {
    .user-dropdown:has(.user-dropdown-content:hover) .user-dropdown-content {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }
}

.user-dropdown-content-out {
    position: static;
    display: block;
    width: auto;
}

.user-dropdown-content-item {
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: .5rem;
    transition-duration: 0.3s;
}

.user-dropdown-content-item:hover {
    background-color: var(--user-dropdown-content-item-hover-background-color);
}

.user-dropdown-content-item a {
    display: contents;
    text-decoration: none;
    color: inherit;
}

.user-dropdown-content-icon {
    position: static;
    background-color: var(--user-dropdown-content-icon-background-color);
    color: var(--user-dropdown-content-icon-color);
    margin-right: 0.5rem;
    border-radius: 0.25rem;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    padding: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-duration: 0.3s;
}

.user-dropdown-content-item:hover .user-dropdown-content-icon {
    transform: scale(1.17);
}

.user-dropdown-content-texts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    font-family: "Acme", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.user-dropdown-content-title {
    color: var(--user-dropdown-content-title);
    font-weight: bold;
}

.user-dropdown-content-subtext {
    color: var(--user-dropdown-content-subtext);
    font-size: 0.875rem;
}

.user-dropdown-content-theme-icon {
    display: inline-block;
    transform-origin: center;
    transform-box: fill-box;
    color: var(--user-dropdown-content-theme-icon-color);
}

.user-dropdown-content-item-theme:hover .user-dropdown-content-theme-icon {
    animation: spin 1.3s cubic-bezier(0.25, 1, 0.5, 1) 1;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.mobile-nav-button {
    position: absolute;
    right: 50px;
    transition: transform 0.5s ease;
}

/*.mobile-nav-button[aria-expanded="true"] {
    transform: rotate(45deg);
}*/

.mobile-nav-button svg {
    width: 30px;
    height: auto;
    color: rgb(255, 255, 255);
    transition-duration: 0.3s;
}

.mobile-nav-overlay {
    position: fixed;
    inset: 0;
    background: var(--mobile-nav-overlay-background-color);
    backdrop-filter: saturate(120%) blur(2px);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.mobile-nav-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    max-height: 100dvh;

    background: var(--mobile-nav-background-color);
    color: var(--mobile-nav-text-color);

    border-bottom: 2px solid var(--mobile-nav-border-color);
    z-index: 9999;

    transform: translateY(-100%);
    transition: transform 260ms cubic-bezier(.22,.61,.36,1);
    will-change: transform;

    pointer-events: none;
    display: grid;
    grid-template-rows: auto 1fr;
}

.mobile-nav.is-open {
    transform: translateY(0);
    pointer-events: auto;
}

.mobile-nav-buttons {
    display: flex;
    flex-wrap: nowrap;
}

.mobile-nav-theme {
    position: absolute;
    top: 12px;
    right: 58px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: var(--mobile-nav-button-background-color);
    border: 1px solid var(--mobile-nav-button-border-color);
    border-radius: 10px;
    color: inherit;
    cursor: pointer;
    transition-duration: 0.3s;
}

.mobile-nav-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: var(--mobile-nav-button-background-color);
    border: 1px solid var(--mobile-nav-button-border-color);
    border-radius: 10px;
    color: inherit;
    cursor: pointer;
    transition-duration: 0.3s;
}

.mobile-nav-theme:hover, .mobile-nav-close:hover, .mobile-nav-close:focus-visible {
    transform: scale(1.05);
    background: var(--mobile-nav-button-hover-background-color);
    border-color: var(--mobile-nav-button-hover-border-color);
}

.mobile-nav-theme svg path, .mobile-nav-close svg path {
    fill: currentColor;
}

.mobile-nav-header {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    padding: 64px 20px 12px 25px;
}

.mobile-nav-header img {
    height: 50px;
}

.mobile-nav-header p {
    margin: 6px 0 0;
    font-family: "Varela Round", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--mobile-nav-secondary-text-color);
    transition-duration: 0.3s;
}

.mobile-nav-header p a {
    text-decoration: none;
    color: var(--mobile-nav-third-text-color);
    transition-duration: 0.3s;
}

.mobile-nav-header p a:hover {
    color: var(--mobile-nav-third-text-hover-color)
}

.mobile-nav-links {
    padding: 8px 20px 24px 25px;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    max-height: 100%;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;

    display: grid;
    gap: 14px;

    align-content: start;
    align-items: start;
    grid-auto-rows: auto;

    scrollbar-width: thin;
    scrollbar-color: var(--mobile-nav-scrollbar-color) transparent;
    -webkit-tap-highlight-color: transparent;

    transition-duration: 0.3s;
}

.mobile-nav-links:hover {
    scrollbar-color: var(--mobile-nav-scrollbar-hover-color) transparent;
}

.mobile-nav-links::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.mobile-nav-links::-webkit-scrollbar-track {
    background: transparent;
}

.mobile-nav-links::-webkit-scrollbar-thumb {
    background-color: var(--mobile-nav-scrollbar-color);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition-duration: 0.3s;
}

.mobile-nav-links::-webkit-scrollbar-thumb:hover {
    background-color: var(--mobile-nav-scrollbar-hover-color);
}

.mobile-nav-links li {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: color-mix(in hsl, var(--mobile-nav-row-background-color) 85%, transparent);
    border: 1px solid var(--mobile-nav-row-border-color);
    border-radius: 12px;
}

.mobile-nav-links li a {
    font-family: "Oswald", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.3rem;
    text-decoration: none;
}

.mobile-nav-links li:hover a {
    transform: translateX(7px);
}

.mobile-nav-links .selected {
    background-color: var(--nav-selected-secondary-background-color);
    transition-duration: 0.3s;
}

.mobile-nav-links .selected a {
    color: var(--nav-selected-color);
    transition-duration: 0.3s;
}

.mobile-nav-links .non-selected {
    transition-duration: 0.3s;
}

.mobile-nav-links .non-selected:hover {
    background-color: var(--nav-non-selected-hover-background-color);
}

.mobile-nav-links .non-selected a {
    color: var(--nav-non-selected-color);
    transition-duration: 0.3s;
}

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: var(--drawer-overlay-background-color);
    backdrop-filter: saturate(120%) blur(2px);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.drawer-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: clamp(30%, 40vw, 50%);
    max-width: 720px;

    background: var(--drawer-background-color);
    color: var(--drawer-text-color);
    border-left: 2px solid var(--drawer-border-color);
    z-index: 9999;

    transform: translateX(100%);
    transition: transform 260ms cubic-bezier(.22,.61,.36,1);
    will-change: transform;

    pointer-events: none;
    display: grid;
    grid-template-rows: auto 1fr;
}

.drawer.is-open {
    transform: translateX(0);
    pointer-events: auto;
}

.drawer-close {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: var(--drawer-button-background-color);
    border: 1px solid var(--drawer-button-border-color);
    border-radius: 10px;
    color: inherit;
    cursor: pointer;
    transition-duration: 0.3s;
}

.drawer-close:hover, .drawer-close:focus-visible {
    transform: scale(1.05);
    background: var(--drawer-button-hover-background-color);
    border-color: var(--drawer-button-hover-border-color);
}

.drawer-close svg path {
    fill: currentColor;
}

.drawer-header {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    padding: 64px 20px 12px 64px;
    margin-bottom: 20px;
}

.drawer-header p {
    margin: 6px 0 0;
    font-family: "Varela Round", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--drawer-secondary-text-color);
}

.drawer-content {
    padding: 24px 20px 24px 64px;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;

    display: grid;
    gap: 14px;

    align-content: start;
    align-items: start;
    grid-auto-rows: auto;

    scrollbar-width: thin;
    scrollbar-color: var(--drawer-scrollbar-color) transparent;

    transition-duration: 0.3s;
}

.drawer-content:hover {
    scrollbar-color: var(--drawer-scrollbar-hover-color) transparent;
}

.drawer-content::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.drawer-content::-webkit-scrollbar-track {
    background: transparent;
}

.drawer-content::-webkit-scrollbar-thumb {
    background-color: var(--drawer-scrollbar-color);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition-duration: 0.3s;
}

.drawer-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--drawer-scrollbar-hover-color);
}

.setting {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-self: center;
    gap: 12px;
    width: 90%;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--drawer-box-background-color);
}

.setting-divider {
    display: flex;
    align-items: center;
    margin-top: 20px;
    width: 100%;
}

.setting-divider::before,
.setting-divider::after {
    content: "";
    flex: 1 1 auto;
    border-bottom: 1px solid var(--drawer-box-divider-color);
    transform: translateY(0.05px);
}

.setting-divider span {
    margin: 0 5px;
    padding: 0 .6rem;
    border-radius: .5rem;
    font-family: "Rubik", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: var(--drawer-box-divider-color);
    transition-duration: 0.3s;
}

.setting-line {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.setting-icon {
    height: 100%;
    width: auto;
    margin-right: 10px;
    color: var(--drawer-box-text-color);
    transition-duration: 0.3s;
}

.setting-icon, .setting-icon * {
    stroke-width: 1.7;
}

.setting-label {
    font-family: "Rubik", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--drawer-box-text-color);
    transition-duration: 0.3s;
}

.setting-label.strong {
    font-weight: 600;
}

.email-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--drawer-box-menu-border-color);
    border-radius: 8px;
    background: var(--drawer-box-menu-background-color);
    color: var(--drawer-box-menu-text-color);
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.email-toggle:hover {
    background: var(--drawer-box-menu-hover-background-color);
    border-color: var(--drawer-box-menu-hover-border-color);
    color: var(--drawer-box-menu-hover-text-color);
}

.switch-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.switch {
    --w: 56px;
    --h: 30px;
    --p: 3px;
    --thumb: calc(var(--h) - var(--p) * 2);
    --on: var(--drawer-box-switch-color-active);
    --off: var(--drawer-box-switch-color-inactive);
    --track: var(--off);
    position: relative;
    width: var(--w);
    height: var(--h);
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    justify-self: end;
    -webkit-tap-highlight-color: transparent;
}

.switch-track {
    position: absolute;
    inset: 0;
    background: var(--track);
    border-radius: var(--h);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: background 200ms ease, box-shadow 200ms ease;
}

.switch-thumb {
    position: absolute;
    left: var(--p);
    width: var(--thumb);
    height: var(--thumb);
    border-radius: 50%;
    background: var(--drawer-box-switch-color-dot);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    transform: translateX(calc(var(--w) - var(--thumb) - var(--p) * 2));
    transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms ease;
}

.switch:hover .switch-thumb {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.switch-input:focus-visible + .switch {
    outline: 2px solid var(--drawer-box-highlight);
    outline-offset: 2px;
}

.switch-input:checked + .switch {
    --track: var(--on);
}

.switch-input:checked + .switch .switch-thumb {
    transform: translateX(0);
}

@keyframes thumb-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.switch-input:checked + .switch .switch-thumb, .switch-input:not(:checked) + .switch .switch-thumb {
    animation: thumb-pop 160ms ease;
}

.custom-select {
    position: relative;
    display: inline-block;
    min-width: 240px;
    font-weight: 600;
    justify-self: end;
    --radius: 12px;
    --ring: rgba(99, 102, 241, 0.25);
}

.cs-trigger {
    width: 100%;
    padding: 12px 44px 12px 14px;
    border: 1px solid var(--drawer-box-menu-border-color);
    border-radius: var(--radius);
    background: var(--drawer-box-menu-background-color);
    box-shadow: 0 2px 10px rgba(17, 24, 39, 0.06);
    color: var(--drawer-box-menu-text-color);
    cursor: pointer;
    text-align: left;
    line-height: 1.1;
    transition: transform 120ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
    position: relative;
    outline: none;
}

.cs-trigger .cs-caret {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 180ms ease, opacity 160ms ease;
    opacity: 0.9;
}

.custom-select.open .cs-caret {
    transform: translateY(-50%) rotate(180deg);
}

.cs-trigger:hover {
    background: var(--drawer-box-menu-hover-background-color);
    border-color: var(--drawer-box-menu-hover-border-color);
    color: var(--drawer-box-menu-hover-text-color);
}

.cs-trigger:focus-visible {
    border-color: var(--drawer-box-highlight);
    box-shadow: 0 0 0 6px var(--ring), 0 6px 20px rgba(17, 24, 39, 0.10);
}

.cs-list {
    position: absolute;
    left: 0;
    right: 0;
    margin: 6px 0 0 0;
    list-style: none;
    background: var(--drawer-box-menu-list-background-color);
    border: 1px solid var(--drawer-box-menu-list-hover-border-color);
    border-radius: var(--radius);
    padding: 8px;
    max-height: 240px;
    overflow: auto;
    box-shadow: 0 14px 40px rgba(17, 24, 39, 0.18);
    transform-origin: top center;
    transform: translateY(-6px) scaleY(0.96);
    opacity: 0;
    visibility: hidden;
    transition: transform 160ms cubic-bezier(.2, .8, .2, 1), opacity 160ms ease, visibility 0s linear 160ms, background 0.3s ease, border-color 0.3s ease;
    z-index: 30;
}

.custom-select.open .cs-list {
    transform: translateY(0) scaleY(1);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.custom-select.open .cs-list:hover {
    background: var(--drawer-box-menu-list-hover-background-color);
    border-color: var(--drawer-box-menu-list-hover-border-color);
}

.custom-select.open .cs-trigger::after {
    transform: translateY(-50%) rotate(180deg);
}

.cs-list li {
    padding: 10px 12px 10px 36px;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    font-family: "Rubik", sans-serif;
    font-weight: 200;
    font-style: normal;
    color: var(--drawer-box-menu-list-item-text-color);
    transition: background 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
    outline: none;
}

.cs-list li:hover {
    background: var(--drawer-box-menu-list-item-hover-background-color);
    color: var(--drawer-box-menu-list-item-hover-text-color);
    transform: translateY(-1.4px);
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.08);
}

.cs-list li:active {
    transform: translateY(0);
}

.cs-list li[aria-selected="true"] {
    font-weight: 500;
}

.cs-list li[aria-selected="true"]::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%) scale(1);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, var(--drawer-box-menu-color-active) 0 45%, transparent 46% 100%);
    filter: drop-shadow(0 2px 6px rgba(34, 197, 94, .35));
    animation: cs-pop 160ms ease;
}

@keyframes cs-pop {
    0%   { transform: translateY(-50%) scale(0.6); opacity: .6; }
    100% { transform: translateY(-50%) scale(1.0); opacity: 1; }
}

.actions {
    display: flex;
    gap: 10px;
    justify-self: flex-end;
    margin-top: 30px;
}

.btn {
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--drawer-button-background-color);
    border: 1px solid var(--drawer-button-border-color);
    color: var(--drawer-text-color);
    cursor: pointer;
    font-family: "Varela Round", sans-serif;
    font-weight: 400;
    font-style: normal;
    transition-duration: 0.3s;
}

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

.btn.primary {
    background: var(--drawer-button-accent-background-color);
    border-color: var(--drawer-button-accent-border-color);
    color: var(--drawer-button-accent-text-color);
}

.btn.primary:hover {
    background: var(--drawer-button-accent-hover-background-color);
    border-color: var(--drawer-button-accent-hover-border-color);
}

@media (prefers-reduced-motion: reduce) {
    .drawer, .drawer-overlay {
        transition: none;
    }
}

.footer {
    background: var(--footer-background-color);
    color: var(--footer-color);
    min-height: 200px;
    border-top: 1px solid var(--footer-border-color);
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 20px;
    display: flex;
    gap: 32px;
    flex-wrap: nowrap;
}

.footer-container {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    transition-duration: 0.3s;
}

.footer-container:hover {
    transform: scale(1.04);
}

.footer-logobox {
    margin-right: 30px;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.footer-logotext {
    font-family: "Hanken Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 700;
    font-size: clamp(18px, 2.2vw, 22px);
    color: var(--footer-logotext-color);
    transition-duration: 0.3s;
}

.footer-logotext:hover {
    color: var(--footer-text-hover-color);
    transform: scale(1.10);
}

.footer-logotagline {
    font-family: "Acme", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin-top: 8px;
    color: var(--footer-tagline-color);
}

.footer-title {
    font-family: "Hanken Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    margin: 0 0 10px;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: .02em;
}

.footer-links {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    gap: 8px;
}

.footer-links a {
    font-family: "Varela Round", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--footer-text-color);
    text-decoration: none;
    transition-duration: 0.3s;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: var(--footer-text-hover-color);
    outline: none;
}

.footer-bottom-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.footer-bottom {
    border-top: 1px solid var(--footer-border-color);
    padding: 12px 20px;
    color: var(--footer-text-color);
    font-family: "Varela Round", sans-serif;
    font-size: .9rem;
    padding-bottom: 40px;
}

.footer-bottom a {
    color: var(--footer-text-color);
    font-family: "Varela Round", sans-serif;
    font-size: .9rem;
    text-decoration: none;
    transition-duration: 0.3s;
}

.footer-bottom a:hover {
    color: var(--footer-text-hover-color);
}

@media (max-width: 1300px) {
    .drawer {
        width: 97%;
    }

    .drawer-header, .drawer-content {
        padding-left: 24px;
    }
}

@media (max-width: 1300px) {
    .nav-logo img {
        max-height: 35px;
    }
}

@media (max-width: 1000px) {
    .nav-right {
        position: absolute;
        right: 70px;
    }

    .footer-inner {
        flex-wrap: none;
        flex-direction: column;
        align-items: stretch;
    }

    .footer-container, .footer-container * {
        align-items: center;
        text-align: center;
    }

    .footer-logobox {
        margin-right: 0;
    }

    .footer-bottom-inner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}