/* === 变量：调参数改这里就行 === */
:root {
    --glass-blur: 16px;
    --glass-light: rgba(255, 255, 255, 0.7);
    --glass-dark: rgba(30, 30, 30, 0.7);
    --panel-light: rgba(255, 255, 255, 0.4);
    --panel-dark: rgba(0, 0, 0, 0.4);
    --border-light: rgba(0, 0, 0, 0.06);
    --border-dark: rgba(255, 255, 255, 0.08);
}

/* === 背景图 === */
body {
    background-image: url('/images/bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    z-index: 0;
}

/* === 全屏磨砂层 === */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--glass-light);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* === 内容区透明 === */
#main,
.content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* === 侧边栏 & 顶栏凸显 === */
#sidebar {
    background-color: var(--panel-light) !important;
    border-right: 1px solid var(--border-light) !important;
}

.page-top {
    background-color: var(--panel-light) !important;
    border-bottom: 1px solid var(--border-light) !important;
}

/* === 暗色模式 === */
html[style*="color-scheme: dark"] body::before {
    background-color: var(--glass-dark);
}

html[style*="color-scheme: dark"] #sidebar,
html[style*="color-scheme: dark"] .page-top {
    background-color: var(--panel-dark) !important;
    border-color: var(--border-dark) !important;
}

@media (prefers-color-scheme: dark) {
    html:not([style*="color-scheme: light"]) body::before {
        background-color: var(--glass-dark);
    }
    html:not([style*="color-scheme: light"]) #sidebar,
    html:not([style*="color-scheme: light"]) .page-top {
        background-color: var(--panel-dark) !important;
        border-color: var(--border-dark) !important;
    }
}