:root {
    --glass-panel-background: rgba(255, 255, 255, 0.7);
    --glass-panel-background-stuck: rgba(255, 255, 255, 0.64);
    --glass-panel-header-background: rgba(255, 255, 255, 0.16);
    --glass-panel-border: rgba(255, 255, 255, 0.3);
    --glass-panel-shadow: 0 12px 34px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    --border-glow-card-bg: #ffffff;
}

[data-theme="dark"] {
    --glass-panel-background: rgba(24, 24, 43, 0.72);
    --glass-panel-background-stuck: rgba(20, 20, 38, 0.68);
    --glass-panel-header-background: rgba(12, 18, 36, 0.22);
    --glass-panel-border: rgba(148, 163, 184, 0.22);
    --glass-panel-shadow: 0 14px 36px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --border-glow-card-bg: #120F17;
}

.site-nav-sentinel {
    height: 1px;
    margin-bottom: -1px;
    pointer-events: none;
}

.header.site-nav,
#calendar,
.card,
.popup-box {
    border: 1px solid var(--glass-panel-border);
    background: var(--glass-panel-background);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
    box-shadow: var(--glass-panel-shadow);
}

.header.site-nav {
    --site-nav-top: 12px;
    position: sticky;
    top: var(--site-nav-top);
    z-index: 900;
    isolation: isolate;
    border-radius: 10px;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.header.site-nav.is-stuck {
    border-color: rgba(96, 165, 250, 0.42);
    background: var(--glass-panel-background-stuck);
    box-shadow:
        0 18px 42px rgba(15, 23, 42, 0.2),
        0 0 24px rgba(59, 130, 246, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

[data-theme="dark"] .header.site-nav.is-stuck {
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.38),
        0 0 28px rgba(59, 130, 246, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#calendar,
.card,
.popup-box {
    --panel-radius: 18px;
    border-radius: var(--panel-radius);
}

#calendar {
    --fc-page-bg-color: transparent;
}

#calendar .fc-col-header,
#calendar .fc-daygrid-body,
#calendar .fc-scrollgrid-sync-table,
#calendar .fc-scrollgrid-section > td {
    background-color: transparent !important;
}

.card-header {
    background: var(--glass-panel-header-background);
}

.card-body,
.popup-content,
.popup-footer {
    background-color: transparent;
}

.admin-button {
    font-family: 'Segoe UI', 'Microsoft YaHei', '微软雅黑', Tahoma, Geneva, Verdana, sans-serif;
}

.logo-text {
    border-radius: 10px;
}
.border-glow-card {
    --card-bg: var(--border-glow-card-bg);
    --edge-proximity: 0;
    --cursor-angle: 45deg;
    --edge-sensitivity: 30;
    --color-sensitivity: calc(var(--edge-sensitivity) + 20);
    --glow-padding: 40px;
    --cone-spread: 25;
    --fill-opacity: 0.5;

    position: relative;
    box-sizing: border-box;
    isolation: isolate;
    overflow: visible;
    transform: translate3d(0, 0, 0.01px);
}

.card.border-glow-card > .card-header {
    border-radius: var(--panel-radius) var(--panel-radius) 0 0;
}

.border-glow-card::before,
.border-glow-card::after,
.border-glow-card > .edge-light {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    transition: opacity 0.25s ease-out;
    z-index: -1;
}

.border-glow-card:not(:hover):not(.is-pointer-active)::before,
.border-glow-card:not(:hover):not(.is-pointer-active)::after,
.border-glow-card:not(:hover):not(.is-pointer-active) > .edge-light {
    opacity: 0;
    transition: opacity 0.75s ease-in-out;
}

.border-glow-card::before {
    border: 1px solid transparent;
    background:
        linear-gradient(var(--card-bg) 0 100%) padding-box,
        linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
        var(--gradient-one) border-box,
        var(--gradient-two) border-box,
        var(--gradient-three) border-box,
        var(--gradient-four) border-box,
        var(--gradient-five) border-box,
        var(--gradient-six) border-box,
        var(--gradient-seven) border-box,
        var(--gradient-base) border-box;
    opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
    -webkit-mask-image: conic-gradient(
        from var(--cursor-angle) at center,
        black calc(var(--cone-spread) * 1%),
        transparent calc((var(--cone-spread) + 15) * 1%),
        transparent calc((100 - var(--cone-spread) - 15) * 1%),
        black calc((100 - var(--cone-spread)) * 1%)
    );
    mask-image: conic-gradient(
        from var(--cursor-angle) at center,
        black calc(var(--cone-spread) * 1%),
        transparent calc((var(--cone-spread) + 15) * 1%),
        transparent calc((100 - var(--cone-spread) - 15) * 1%),
        black calc((100 - var(--cone-spread)) * 1%)
    );
}

.border-glow-card::after {
    border: 1px solid transparent;
    background:
        var(--gradient-one) padding-box,
        var(--gradient-two) padding-box,
        var(--gradient-three) padding-box,
        var(--gradient-four) padding-box,
        var(--gradient-five) padding-box,
        var(--gradient-six) padding-box,
        var(--gradient-seven) padding-box,
        var(--gradient-base) padding-box;
    mask-image:
        linear-gradient(to bottom, black, black),
        radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
        radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
        radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
        radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
        radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
        conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
    mask-composite: subtract, add, add, add, add, add;
    opacity: calc(var(--fill-opacity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
    mix-blend-mode: soft-light;
}

.border-glow-card > .edge-light {
    inset: calc(var(--glow-padding) * -1);
    z-index: 1;
    opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
    mix-blend-mode: plus-lighter;
    -webkit-mask-image: conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
    mask-image: conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
}

.border-glow-card > .edge-light::before {
    content: "";
    position: absolute;
    inset: var(--glow-padding);
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 1px var(--glow-color),
        inset 0 0 1px 0 var(--glow-color-60),
        inset 0 0 3px 0 var(--glow-color-50),
        inset 0 0 6px 0 var(--glow-color-40),
        inset 0 0 15px 0 var(--glow-color-30),
        inset 0 0 25px 2px var(--glow-color-20),
        inset 0 0 50px 2px var(--glow-color-10),
        0 0 1px 0 var(--glow-color-60),
        0 0 3px 0 var(--glow-color-50),
        0 0 6px 0 var(--glow-color-40),
        0 0 15px 0 var(--glow-color-30),
        0 0 25px 2px var(--glow-color-20),
        0 0 50px 2px var(--glow-color-10);
}

#calendar.calendar-border-glow-lite {
    --calendar-glow-x: 50%;
    --calendar-glow-y: 50%;
    transform: none;
}

#calendar.calendar-border-glow-lite::before {
    border: 1px solid transparent;
    border-image-source: radial-gradient(
        circle 170px at var(--calendar-glow-x) var(--calendar-glow-y),
        #c084fc 0%,
        #f472b6 36%,
        #38bdf8 62%,
        transparent 78%
    );
    border-image-slice: 1;
    background: none;
    opacity: 0;
    -webkit-mask-image: none;
    mask-image: none;
    clip-path: inset(0 round var(--panel-radius));
    box-shadow: 0 0 12px rgba(244, 114, 182, 0.14);
    transition: opacity 0.2s ease-out;
}

#calendar.calendar-border-glow-lite:hover::before,
#calendar.calendar-border-glow-lite.is-pointer-active::before {
    opacity: 1;
}

#calendar.calendar-border-glow-lite::after,
#calendar.calendar-border-glow-lite > .edge-light {
    display: none;
}

@media (max-width: 768px) {
    :root {
        --glass-panel-background: rgba(255, 255, 255, 0.94);
        --glass-panel-background-stuck: rgba(255, 255, 255, 0.97);
        --glass-panel-header-background: rgba(255, 255, 255, 0.82);
        --glass-panel-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    }

    [data-theme="dark"] {
        --glass-panel-background: rgba(18, 18, 32, 0.94);
        --glass-panel-background-stuck: rgba(16, 16, 29, 0.97);
        --glass-panel-header-background: rgba(12, 18, 36, 0.82);
        --glass-panel-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
    }

    .header.site-nav,
    #calendar,
    .card,
    .popup-box {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: var(--glass-panel-shadow);
    }

    .header.site-nav.is-stuck,
    [data-theme="dark"] .header.site-nav.is-stuck {
        box-shadow: var(--glass-panel-shadow);
    }

    .logo-emoji::before,
    .logo-emoji::after,
    .logo-emoji-core::before,
    .logo-emoji-core::after {
        animation: none !important;
    }

    .logo-emoji-core::before,
    .logo-emoji-core::after {
        display: none;
    }

    .header.site-nav {
        --site-nav-top: 8px;
        width: auto;
        max-width: 100%;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        padding: 1px 8px;
        margin-bottom: 15px;
        border-radius: 20px;
    }

    .header.site-nav .header-left {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        margin-bottom: 0;
        justify-content: flex-start;
    }

    .header.site-nav .logo {
        min-width: 0;
    }

    .header.site-nav .logo-glass {
        gap: 0;
        padding-inline: 4px;
    }

    .header.site-nav .logo-text {
        white-space: nowrap;
    }

    .header.site-nav .theme-switch-wrapper {
        flex: 0 0 auto;
        margin-left: 6px;
    }

    .header.site-nav .admin-button {
        flex: 0 0 auto;
        padding: 8px 10px;
    }

    #calendar,
    .card,
    .popup-box {
        --panel-radius: 20px;
    }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .border-glow-card::before,
    .border-glow-card::after,
    .border-glow-card > .edge-light {
        display: none;
    }
}