:root {
    --theme-primary: #047857;
    --theme-secondary: #065f46;
    --theme-accent: #f59e0b;
    --theme-bg: #ffffff;
    --theme-text: #111827;

    --theme-dark: #022c22;
    --theme-muted: #64748b;
    --theme-card: rgba(255, 255, 255, .82);
    --theme-line: rgba(15, 23, 42, .10);
    --theme-soft: color-mix(in srgb, var(--theme-primary) 10%, white);
    --theme-shadow: 0 24px 80px rgba(15, 23, 42, .14);

    --auth-primary: var(--theme-primary);
    --auth-secondary: var(--theme-secondary);
    --auth-accent: var(--theme-accent);
    --auth-bg: var(--theme-bg);
    --auth-text: var(--theme-text);
    --auth-dark: var(--theme-dark);
    --auth-muted: var(--theme-muted);
    --auth-card: var(--theme-card);
    --auth-line: var(--theme-line);
    --auth-soft: var(--theme-soft);
    --auth-shadow: var(--theme-shadow);
}

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

.theme-switcher {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 99999;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 7px 10px 7px 13px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--theme-primary) 20%, transparent);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .76));
    backdrop-filter: blur(20px);
    box-shadow: 0 14px 38px rgba(15, 23, 42, .14);
}

.theme-switcher::before {
    content: "";
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-primary) 12%, transparent);
}

.theme-switcher i {
    color: var(--theme-primary);
    font-size: 17px;
}

.theme-switcher select {
    appearance: none;
    -webkit-appearance: none;
    min-width: 150px;
    border: 0;
    outline: 0;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 8%, white), #fff);
    color: var(--theme-text);
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    border-radius: 999px;
    padding: 9px 34px 9px 14px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-primary) 14%, transparent);
}

.theme-switcher::after {
    content: "⌄";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-56%);
    color: var(--theme-primary);
    font-size: 18px;
    font-weight: 900;
    pointer-events: none;
}

.theme-switcher select option {
    color: #111827;
    background: #fff;
}

@media(max-width: 640px) {
    .theme-switcher {
        top: 10px;
        left: 10px;
        right: 10px;
        justify-content: center;
    }

    .theme-switcher select {
        width: 100%;
    }

    .auth-page {
        padding-top: 72px !important;
    }
}

.theme-switcher i {
    color: var(--theme-primary);
    font-size: 16px;
}

.theme-switcher select {
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--theme-text);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.theme-switcher select option {
    color: #111827;
}

@media(max-width: 640px) {
    .theme-switcher {
        top: 10px;
        left: 10px;
        right: 10px;
        justify-content: center;
    }
}


@media(max-width: 640px) {
    .theme-switcher {
        top: 10px;
        left: 10px;
        right: 10px;
        justify-content: center;
    }

    .auth-page {
        padding-top: 72px !important;
    }
}

.theme-switcher {
    position: fixed;
    top: 92px;
    right: 24px;
    z-index: 1100;

    width: 48px;
    overflow: hidden;

    transition: all .25s ease;
}

.theme-switcher:hover,
.theme-switcher:focus-within {
    width: 220px;
}

.theme-switcher {
    position: fixed;
    top: 96px;
    right: 24px;

    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(20px);

    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}