/* Premium celestial theme control — shared across desktop and mobile. */
.navbar .theme-toggle {
    --theme-toggle-accent: #fbbf24;
    --theme-toggle-accent-soft: rgba(251, 191, 36, 0.22);
    --theme-toggle-surface: linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.025));
    --theme-toggle-inset: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.035) 48%, rgba(3, 10, 24, 0.18) 100%);
    position: relative;
    isolation: isolate;
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    flex: 0 0 46px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(251, 191, 36, 0.38);
    border-radius: 50%;
    background: var(--theme-toggle-surface);
    color: var(--theme-toggle-accent);
    box-shadow:
        0 9px 24px rgba(2, 6, 23, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.17),
        inset 0 -1px 0 rgba(2, 6, 23, 0.22);
    -webkit-backdrop-filter: blur(12px) saturate(125%);
    backdrop-filter: blur(12px) saturate(125%);
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.28s ease,
        box-shadow 0.32s ease,
        background 0.32s ease;
}

.navbar .theme-toggle::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    background: var(--theme-toggle-inset);
    box-shadow: inset 0 0 0 1px rgba(2, 6, 23, 0.1);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s ease;
}

.navbar .theme-toggle::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 9px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff8dc;
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.09), 0 0 8px var(--theme-toggle-accent);
    opacity: 0.82;
    transition: transform 0.32s ease, opacity 0.28s ease;
}

.navbar .theme-toggle i,
.navbar .theme-toggle #themeIcon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    color: var(--theme-toggle-accent) !important;
    font-size: 1.02rem;
    line-height: 1;
    filter: drop-shadow(0 2px 5px var(--theme-toggle-accent-soft));
    transform: translateZ(0);
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease;
}

/* The bundled Font Awesome fallback moon extends outside its own viewBox, which
   crops the lower-left curve. This in-bounds mask keeps the crescent complete
   and optically centred at every pixel density. */
.navbar .theme-toggle .fa-moon {
    top: -0.5px;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.4 14.2A8.5 8.5 0 0 1 9.8 3.6a8.5 8.5 0 1 0 10.6 10.6Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.4 14.2A8.5 8.5 0 0 1 9.8 3.6a8.5 8.5 0 1 0 10.6 10.6Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}

.navbar .theme-toggle .fa-moon::before {
    content: none;
}

.navbar .theme-toggle:hover {
    transform: translateY(-2px);
    border-color: rgba(251, 191, 36, 0.68);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(251, 191, 36, 0.055));
    box-shadow: 0 13px 30px rgba(2, 6, 23, 0.34), 0 0 0 3px rgba(251, 191, 36, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.navbar .theme-toggle:hover::before {
    transform: scale(0.96);
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.12), 0 0 18px rgba(251, 191, 36, 0.08);
}

.navbar .theme-toggle:hover::after {
    transform: scale(1.35);
    opacity: 1;
}

.navbar .theme-toggle:hover i,
.navbar .theme-toggle:hover #themeIcon {
    transform: rotate(14deg) scale(1.06);
    filter: drop-shadow(0 2px 8px var(--theme-toggle-accent-soft));
}

.navbar .theme-toggle:active {
    transform: translateY(0) scale(0.94);
    box-shadow: 0 4px 12px rgba(2, 6, 23, 0.26), inset 0 2px 5px rgba(2, 6, 23, 0.2);
}

.navbar .theme-toggle:focus-visible {
    outline: 0;
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.28), 0 0 0 3px #0f172a, 0 0 0 5px rgba(251, 191, 36, 0.85);
}

html[data-theme="light"] .navbar .theme-toggle {
    --theme-toggle-accent: #15588f;
    --theme-toggle-accent-soft: rgba(21, 88, 143, 0.22);
    --theme-toggle-surface: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(235, 243, 250, 0.88));
    --theme-toggle-inset: radial-gradient(circle at 35% 28%, #ffffff 0%, #f5f9fd 46%, #e7f0f8 100%);
    border-color: rgba(21, 88, 143, 0.25);
    background: var(--theme-toggle-surface);
    color: var(--theme-toggle-accent);
    box-shadow: 0 8px 20px rgba(30, 90, 150, 0.12), inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(30, 90, 150, 0.09);
}

html[data-theme="light"] .navbar .theme-toggle::before {
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 0 0 1px rgba(30, 90, 150, 0.055);
}

html[data-theme="light"] .navbar .theme-toggle::after {
    background: #2d7bc4;
    box-shadow: 0 0 0 2px rgba(45, 123, 196, 0.08), 0 0 7px rgba(45, 123, 196, 0.32);
}

html[data-theme="light"] .navbar .theme-toggle:hover {
    border-color: rgba(21, 88, 143, 0.45);
    background: linear-gradient(145deg, #ffffff, #e9f3fb);
    box-shadow: 0 12px 26px rgba(30, 90, 150, 0.17), 0 0 0 3px rgba(30, 90, 150, 0.055), inset 0 1px 0 #ffffff;
}

html[data-theme="light"] .navbar .theme-toggle:focus-visible {
    box-shadow: 0 9px 22px rgba(30, 90, 150, 0.14), 0 0 0 3px #ffffff, 0 0 0 5px rgba(21, 88, 143, 0.78);
}

@media (max-width: 768px) {
    .navbar .theme-toggle {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        flex-basis: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navbar .theme-toggle,
    .navbar .theme-toggle::before,
    .navbar .theme-toggle::after,
    .navbar .theme-toggle i {
        transition: none;
    }
}