/* ============================================================================
 * liquid-glass.css — 液态玻璃 v2.0（像素级复刻 bobzhang.top）
 *
 * 参数对照表（bobzhang.top 实测值 → 本文件）：
 *   卡片底   bg-white/5            → rgba(255,255,255,0.05)
 *   淡面板   bg-white/[0.02~0.03]  → rgba(255,255,255,0.03)
 *   描边     border-white/10       → rgba(255,255,255,0.10)
 *   模糊     backdrop-blur-md/xl/[50px] + saturate(180%)
 *   圆角     rounded-full / 2xl(16px) / [2rem](32px) / [2.5rem](40px)
 *   投影     0 8px 32px rgba(0,0,0,.37) · 0 25px 50px -12px rgba(0,0,0,.25)
 *            大件 0 50px 100px rgba(0,0,0,.5)
 *   悬停     bg-white/10 · border-white/20 · 0 0 30px rgba(255,255,255,.2) · 上浮
 *   CTA 扫光 from-transparent via-white/20 to-transparent skew-x-12（2s 线性无限）
 *
 * 原则：
 *   1. 不动布局/字号/盒模型，只做视觉层
 *   2. 不用 ::before/::after（皮肤 skin-* 已占），高光走 background 多层
 *   3. 无 backdrop-filter 的老 WebView 自动降级为磨砂实底
 *   4. prefers-reduced-motion：停扫光、去位移，保留玻璃质感
 *   5. 顺手把全站直角框圆角化（select / 列表项 / 表板 / 色板 / 内联按钮）
 *
 * 卸载：删掉各页面 liquid-glass.css 引用即可。
 * ========================================================================== */

:root {
    --lg-blur: 24px;
    --lg-saturate: 1.8;
}

/* ============================================================================
 * 一级玻璃面 —— 卡片 / 面板（bobzhang.top 的 bg-white/5 配方）
 * ========================================================================== */
.navbar.scrolled,
.mobile-menu,
.menu-user-card,
.post-form-card,
.post-card,
.login-hint,
.weather-card,
.profile-card,
.auth-card,
.admin-stat-card,
.admin-section,
.modal,
.edit-modal,
.reply-modal,
.custom-confirm,
body .mp-bar,
body .mp-panel,
html .quick-item {
    background-color: rgba(255, 255, 255, 0.05);
    background-image: none;
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 悬停：底色提亮 + 描边提亮 + 白辉光 + 上浮（whileHover:{y:-5} 同款）
   注意：post-card 带 --sy/--rx/--ry 滚动进场 + 3D 倾斜变量，transform 必须保留它们 */
.post-card:hover {
    background-color: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.20);
    transform: translateY(var(--sy, -5px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    box-shadow:
        0 12px 20px rgba(0, 0, 0, 0.2),
        0 0 30px rgba(255, 255, 255, 0.2);
}
.post-form-card:hover,
html .quick-item:hover,
.profile-card:hover,
.auth-card:hover,
.admin-stat-card:hover,
.login-hint:hover,
.admin-section:hover,
.weather-card:hover {
    background-color: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.20);
    box-shadow:
        0 12px 20px rgba(0, 0, 0, 0.2),
        0 0 30px rgba(255, 255, 255, 0.2);
}

/* 导航条：他的深色玻璃胶囊配方 bg-black/20 + blur-md，只留底边线 */
.navbar.scrolled {
    /* 单层毛玻璃后导航不再自带 backdrop-filter，底色加厚以保证滚动内容不被“透”穿 */
    background-color: rgba(7, 15, 28, 0.78);
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* 弹窗：rounded-[2rem] + bg-black/40 + blur-3xl + 0 50px 100px */
.modal,
.edit-modal,
.reply-modal,
.custom-confirm,
body .mp-panel {
    background-color: rgba(0, 0, 0, 0.40);
    border-color: rgba(255, 255, 255, 0.10);
    border-radius: 32px;
    backdrop-filter: blur(48px) saturate(var(--lg-saturate));
    -webkit-backdrop-filter: blur(48px) saturate(var(--lg-saturate));
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5);
}
.modal-overlay,
.edit-modal-overlay,
.custom-confirm-overlay,
.mp-mask {
    background-color: rgba(0, 0, 0, 0.60);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ============================================================================
 * 玻璃按钮 —— bobzhang.top 全站按钮皆胶囊：
 *   常规钮  bg-white/10 backdrop-blur-md border-white/20 rounded-full
 *   主 CTA  渐变底 + via-white/20 skew 扫光无限循环
 *   语义色  保留色相，套胶囊
 *   （html 前缀盖过 PHP 页内联 <style> 的同级规则）
 * ========================================================================== */
html .btn-nav,
html .btn-action,
html .btn-sm,
html .btn-cancel,
html .btn-outline,
html .btn-icon,
html .btn-quote-refresh,
html .sort-btn,
html .upload-btn,
html .dt-btn,
html .crop-btn,
#newImgPv button {
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.10);
    background-image: none;
    border: 1px solid rgba(255, 255, 255, 0.20);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition:
        transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.24s ease,
        background-color 0.24s ease,
        border-color 0.24s ease,
        filter 0.24s ease;
}

/* 主 CTA：渐变底 + 无限扫光（他的 contact submit 同款：via-white/20 skew-x-12，2s 线性） */
html .btn-primary,
html .btn-comment,
html .btn-submit,
html .msg-newov-fm button {
    border-radius: 9999px;
    background-color: transparent;
    background-image:
        linear-gradient(105deg,
            transparent 40%,
            rgba(255, 255, 255, 0.20) 50%,
            transparent 60%),
        linear-gradient(135deg, var(--primary), var(--accent));
    background-size: 250% 100%, 100% 100%;
    background-repeat: no-repeat;
    background-position: 150% 0, 0 0;
    border: 1px solid rgba(255, 255, 255, 0.30);
    animation: lgSheen 2s linear infinite;
}

@keyframes lgSheen {
    0%   { background-position: 150% 0, 0 0; }
    100% { background-position: -50% 0, 0 0; }
}

/* 语义色按钮：保留色相，只套胶囊 + 玻璃描边 */
html .btn-green,
html .btn-yellow,
html .btn-red,
html .btn-confirm-danger {
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.20);
}

/* 悬停：bg-white/20 + 白辉光 0 0 30px + 上浮（hover:bg-white/20 + hover:shadow-[0_0_30px_rgba(255,255,255,0.2)]） */
html .btn-nav:hover,
html .btn-primary:hover,
html .btn-green:hover,
html .btn-yellow:hover,
html .btn-red:hover,
html .btn-action:hover,
html .btn-sm:hover,
html .btn-comment:hover,
html .btn-submit:hover,
html .sort-btn:hover,
html .upload-btn:hover,
html .dt-btn:hover,
html .msg-newov-fm button:hover {
    background-color: rgba(255, 255, 255, 0.20);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.40);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(255, 255, 255, 0.2);
    filter: brightness(1.08);
}

/* 按压：scale(.95)（active:scale-95 同款） */
html .btn-nav:active,
html .btn-primary:active,
html .btn-green:active,
html .btn-yellow:active,
html .btn-red:active,
html .btn-action:active,
html .btn-sm:active,
html .btn-comment:active,
html .btn-submit:active,
html .dt-btn:active {
    transform: scale(0.95);
}

/* ============================================================================
 * 玻璃小件 —— 标签 / 徹章 / 回应（全部 rounded-full 胶囊）
 * ========================================================================== */
.tag,
.badge,
.badge-gray,
.user-level,
.user-title,
.shop-cnt,
.comment-toggle,
.crop-btn {
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.10);
    background-image: none;
    border: 1px solid rgba(255, 255, 255, 0.20);
    box-shadow: none;
    /* 不开 backdrop-filter：小徽章上模糊代价高、视觉收益接近零 */
}

/* ============================================================================
 * 玻璃输入框 —— 单行胶囊（rounded-full）/ 多行 12px
 * focus:border-cyan-500/50 + focus:ring（bobzhang.top 同款）
 * ========================================================================== */
.comment-input,
.search-bar input,
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]),
.form-group select,
.msg-search input {
    border-radius: 9999px;
}
.reply-textarea,
.modal textarea,
.form-group textarea,
.post-form-card textarea,
.edit-input-wrap {
    border-radius: 12px;
}
/* .edit-input 不参与：外框由 .edit-input-wrap 提供，避免双层圆角框 */
.comment-input,
.reply-textarea,
.search-bar input,
.modal textarea,
.form-group input,
.form-group textarea,
.form-group select,
.post-form-card textarea {
    background: rgba(255, 255, 255, 0.05);
    background-image: none;
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: none;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.comment-input:focus,
.reply-textarea:focus,
.search-bar input:focus,
.modal textarea:focus,
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: rgba(34, 211, 238, 0.5);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2);
}

/* ============================================================================
 * 直角框圆角化（本次需求：把不是圆角的框优化一下）
 * ========================================================================== */
/* 后台表单下拉框 */
.form-group select {
    border-radius: 12px;
}
/* 私信会话列表项：加圆角 + 微边距，让悬停底色是圆角块 */
html .msg-citem {
    margin: 0 0.35rem;
    border-radius: 12px;
    border-bottom: none;
}
html .msg-citem + .msg-citem {
    margin-top: 2px;
}
html .msg-citem.active {
    border-left: none;
    box-shadow: inset 3px 0 0 var(--primary);
}
/* 私信表情面板 */
html .emoji-panel {
    left: 0.35rem;
    right: 0.35rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.10);
}
/* 私信图片预览条 */
html .msg-imgpv {
    margin: 0 0.35rem 0.35rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
}
/* 涂鸦板取色器 */
input[type="color"] {
    border-radius: 50% !important;
    overflow: hidden;
    padding: 2px !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    cursor: pointer;
}
/* 个人主页"退出登录"等 btn-edit-profile 内联按钮 */
html .btn-edit-profile {
    border-radius: 9999px;
}

/* ============================================================================
 * 浅色主题 —— bobzhang.top 的 light glass（bg-white/70~80 + 灰描边）
 * ========================================================================== */
[data-theme="light"] .navbar.scrolled,
[data-theme="light"] .mobile-menu,
[data-theme="light"] .menu-user-card,
[data-theme="light"] .post-form-card,
[data-theme="light"] .post-card,
[data-theme="light"] .login-hint,
[data-theme="light"] .weather-card,
[data-theme="light"] .profile-card,
[data-theme="light"] .auth-card,
[data-theme="light"] .admin-stat-card,
[data-theme="light"] .admin-section,
[data-theme="light"] .modal,
[data-theme="light"] .edit-modal,
[data-theme="light"] .reply-modal,
[data-theme="light"] .custom-confirm,
html[data-theme="light"] body .mp-bar,
html[data-theme="light"] body .mp-panel,
html[data-theme="light"] .quick-item {
    /* 半透明暖白 + 棱光渐变：纯白 0.8 叠在米色底上会糊成一块白板，玻璃要能透出底色 */
    background-color: rgba(255, 255, 255, 0.42);
    background-image: linear-gradient(160deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.12) 42%,
        rgba(255, 255, 255, 0.06) 62%,
        rgba(255, 255, 255, 0.28) 100%);
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow:
        0 8px 20px rgba(90, 75, 58, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 -1px 0 rgba(255, 255, 255, 0.22);
}
[data-theme="light"] .post-card:hover,
[data-theme="light"] .post-form-card:hover,
[data-theme="light"] .profile-card:hover,
[data-theme="light"] .auth-card:hover,
[data-theme="light"] .admin-stat-card:hover,
[data-theme="light"] .login-hint:hover,
[data-theme="light"] .weather-card:hover,
[data-theme="light"] .admin-section:hover {
    /* 悬停提亮也保持半透明（#f9fafb/#fff 会让卡片瞬间变纯白，手机上 :hover 还会粘住） */
    background-color: rgba(255, 255, 255, 0.58);
    border-color: rgba(255, 255, 255, 0.75);
    box-shadow:
        0 10px 24px rgba(90, 75, 58, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
[data-theme="light"] .navbar.scrolled {
    background-color: rgba(250, 247, 242, 0.82);
    border-bottom-color: rgba(255, 255, 255, 0.55);
}

[data-theme="light"] .btn-nav,
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-green,
[data-theme="light"] .btn-yellow,
[data-theme="light"] .btn-red,
[data-theme="light"] .btn-action,
[data-theme="light"] .btn-sm,
[data-theme="light"] .btn-comment,
[data-theme="light"] .btn-submit,
[data-theme="light"] .btn-cancel,
[data-theme="light"] .btn-outline,
[data-theme="light"] .sort-btn,
[data-theme="light"] .upload-btn,
[data-theme="light"] .dt-btn {
    border-color: #e5e7eb;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .btn-action,
[data-theme="light"] .btn-cancel,
[data-theme="light"] .btn-outline,
[data-theme="light"] .btn-icon,
[data-theme="light"] .btn-quote-refresh,
[data-theme="light"] .sort-btn,
[data-theme="light"] .upload-btn,
[data-theme="light"] .dt-btn,
[data-theme="light"] .tag,
[data-theme="light"] .badge,
[data-theme="light"] .badge-gray,
[data-theme="light"] .user-level,
[data-theme="light"] .user-title,
[data-theme="light"] .shop-cnt,
[data-theme="light"] .comment-toggle {
    background-color: rgba(255, 255, 255, 0.50);
    border-color: rgba(255, 255, 255, 0.60);
}
[data-theme="light"] .btn-nav:hover,
[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .btn-green:hover,
[data-theme="light"] .btn-yellow:hover,
[data-theme="light"] .btn-red:hover,
[data-theme="light"] .btn-action:hover,
[data-theme="light"] .btn-sm:hover,
[data-theme="light"] .btn-comment:hover,
[data-theme="light"] .btn-submit:hover,
[data-theme="light"] .sort-btn:hover,
[data-theme="light"] .upload-btn:hover,
[data-theme="light"] .dt-btn:hover {
    background-color: rgba(255, 255, 255, 0.72);
    border-color: rgba(255, 255, 255, 0.80);
    box-shadow: 0 4px 15px rgba(90, 75, 58, 0.10);
}
[data-theme="light"] .comment-input,
[data-theme="light"] .reply-textarea,
[data-theme="light"] .search-bar input,
[data-theme="light"] .modal textarea,
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group textarea,
[data-theme="light"] .form-group select {
    background: rgba(255, 255, 255, 0.50);
    border-color: rgba(255, 255, 255, 0.60);
}
[data-theme="light"] .modal,
[data-theme="light"] .edit-modal,
[data-theme="light"] .reply-modal,
[data-theme="light"] .custom-confirm,
html[data-theme="light"] body .mp-panel {
    /* 弹窗保留一点透：背后是压暗遮罩，微透才有玻璃感，又不影响阅读 */
    background-color: rgba(255, 255, 255, 0.85);
    background-image: none;
    border-color: rgba(255, 255, 255, 0.65);
    box-shadow:
        0 25px 50px -12px rgba(60, 50, 40, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.80);
}

/* ============================================================================
 * 降级兜底 —— 无 backdrop-filter：磨砂实底，不糊字
 * ========================================================================== */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .navbar.scrolled,
    .mobile-menu,
    .menu-user-card,
    .post-form-card,
    .post-card,
    .login-hint,
    .weather-card,
    .profile-card,
    .auth-card,
    .admin-stat-card,
    .admin-section,
    .modal,
    .edit-modal,
    .reply-modal,
    .custom-confirm,
    body .mp-bar,
    body .mp-panel,
    html .quick-item,
    .tag,
    .badge,
    .badge-gray,
    .user-level,
    .user-title,
    .shop-cnt,
    .comment-toggle,
    .crop-btn {
        background-color: rgba(11, 26, 46, 0.92);
    }
    [data-theme="light"] .post-card,
    [data-theme="light"] .post-form-card,
    [data-theme="light"] .navbar.scrolled,
    [data-theme="light"] .profile-card,
    [data-theme="light"] .auth-card,
    [data-theme="light"] .weather-card,
    [data-theme="light"] .login-hint,
    [data-theme="light"] .admin-stat-card,
    [data-theme="light"] .admin-section,
    [data-theme="light"] .modal,
    [data-theme="light"] .edit-modal,
    [data-theme="light"] .reply-modal,
    [data-theme="light"] .custom-confirm,
    html[data-theme="light"] body .mp-bar,
    html[data-theme="light"] body .mp-panel,
    [data-theme="light"] .tag,
    [data-theme="light"] .badge,
    [data-theme="light"] .badge-gray,
    [data-theme="light"] .user-level,
    [data-theme="light"] .user-title,
    [data-theme="light"] .shop-cnt,
    [data-theme="light"] .comment-toggle,
    /* 无 backdrop-filter 时用暖白实底（0.96 纯白会白得刺眼，且和米色画布脱节） */
    [data-theme="light"] .crop-btn {
        background-color: rgba(252, 250, 246, 0.94);
    }
}

/* ============================================================================
 * 减少动态 —— 停扫光、去位移，保留玻璃质感
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .btn-primary {
        animation: none;
        background-position: -50% 0, 0 0;
    }
    .btn-nav:hover, .btn-primary:hover, .btn-green:hover, .btn-yellow:hover,
    .btn-red:hover, .btn-action:hover, .btn-sm:hover, .btn-comment:hover,
    .btn-submit:hover, .sort-btn:hover, .upload-btn:hover, .dt-btn:hover,
    .post-card:hover, .post-form-card:hover, html .quick-item:hover,
    .profile-card:hover, .auth-card:hover, .admin-stat-card:hover,
    .login-hint:hover, .admin-section:hover, .weather-card:hover {
        transform: none;
    }
}

/* ============================================================================
 * 评论区去框 —— 评论卡片 / 输入条 / 收起按钮 / 图片与发送按钮全部平铺
 *（覆盖上方玻璃样式；仅作用于评论区相关类）
 * ========================================================================== */
.comment-item,
.comment-form,
.comment-toggle,
.comment-input,
html .btn-comment {
    background: none !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.comment-input:focus,
.comment-toggle:hover,
.comment-toggle:active,
html .btn-comment:hover,
html .btn-comment:active {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}
.comment-input:focus {
    /* 仅聚焦时保留极淡光晕，方便定位输入位置 */
    box-shadow: 0 0 0 3px rgba(34,211,238,0.10) !important;
}

/* ============================================================================
 * 单层毛玻璃优化（安卓滚动卡顿修复）—— v2：背景不模糊
 * ----------------------------------------------------------------------------
 * 原 v1 用 body::before 做一层全屏 backdrop-filter，把壁纸模糊掉。
 * 现按需求改为：背景不做任何模糊，直接显示原图（.hero-bg 清晰）。
 * 因此这里不再创建全屏模糊层；壁纸保持原始清晰度。
 *
 * 性能侧仍然保留：关闭所有元素的独立 backdrop-filter（* 通配规则），
 * 避免 40+ 个卡片滚动时各自重算高斯模糊导致安卓卡顿。
 * 面板仍是半透明底，透过它们能看到清晰的背景原图。
 * 图库弹窗那几个元素（.gs-*）和导航条的玻璃在下方单独放行。
 * ========================================================================== */

/* 背景原图不做全局模糊：不再生成 body::before 模糊层 */

/* 关闭所有元素的独立毛玻璃（伪元素不受 * 影响）。
   注意：这会让面板失去“磨砂”感，只留半透明底色；这是换取流畅的代价。 */
* {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 移动端把唯一这层的模糊半径调小，进一步省 GPU（视觉差别很小） */
@media (max-width: 767px) {
    :root { --lg-blur: 12px; --lg-saturate: 1.4; }
}

/* ----------------------------------------------------------------------------
 * 毛玻璃白名单（放行上面的 * 通配禁用）
 * 用 !important + 类选择器，可压过 * { backdrop-filter:none !important }。
 * 这些是“需要磨砂质感”的局部元素，数量少、区域集中，保留后对滚动性能影响可控。
 * -------------------------------------------------------------------------- */

/* 首页功能区卡片：图库 / 涂鸦墙 / 直连热线 / 排行榜 / 公告（以及附近的玻璃件）*/
html .quick-item,
.breath-badge,
.q-pill {
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate)) !important;
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate)) !important;
}

/* 帖子卡片 / 发帖框 / 未登录提示：恢复磨砂玻璃（半径调小到 10px，比原来的 24px 省 GPU）
   同屏可见的帖子一般只有 2~3 张，只有视口内的元素才会真正计算模糊，性能影响可控 */
.post-card,
.post-form-card,
.login-hint {
    backdrop-filter: blur(10px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.5) !important;
}

/* 导航栏 / 个人主页卡 / 天气·登录·管理面板：补上遗漏的真模糊。
   这些元素原先不在白名单里，被上面的 *{backdrop-filter:none!important} 关掉了模糊。
   深色主题下卡片底色只有 5% 白、几乎全透，没模糊也像玻璃；
   浅色主题底色是 42% 白 + 白色棱光渐变，一旦没模糊就只剩“一层白纱”，
   壁纸细节直接透过来 —— 这就是“浅色模式毛玻璃没效果”的根因。
   它们都是单个/少量元素（不随滚动反复出屏），加回模糊对性能影响很小。 */
.navbar.scrolled {
    backdrop-filter: blur(18px) saturate(1.7) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.7) !important;
}
.profile-card,
.weather-card,
.auth-card,
.admin-stat-card,
.admin-section,
.menu-user-card,
.mp-bar {
    backdrop-filter: blur(14px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.6) !important;
}

/* 弹窗 / 面板类：liquid-glass 把它们的背景改成了半透明并依赖 backdrop-filter 模糊来保证可读，
   全站关掉逐元素模糊后它们会变成“没模糊的半透明”导致正文透出来、字看不清。
   它们都是“一次只显示一个”的瞬时元素（不随滚动重算），加回模糊对性能影响极小。 */
.modal,
.edit-modal,
.reply-modal,
.custom-confirm,
.mp-panel,
.mobile-menu {
    backdrop-filter: blur(24px) saturate(var(--lg-saturate)) !important;
    -webkit-backdrop-filter: blur(24px) saturate(var(--lg-saturate)) !important;
}

/* 涂鸦墙的工具条与日志面板 */
.doodle-tools,
.doodle-log {
    backdrop-filter: blur(14px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.5) !important;
}

/* 图库详情弹窗 / 上传面板 / 评论卡（平时 display:none，只在点开时渲染）*/
.gs-mask {
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
}
.gs-up-mask {
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
}
.gs-modal,
.gs-up-panel {
    backdrop-filter: blur(30px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.8) !important;
}
.gs-cmt {
    backdrop-filter: blur(14px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.6) !important;
}

/* 不支持 backdrop-filter 的旧 WebView：body::before 无效果，
   各面板沿用文件末尾 @supports not(...) 里的磨砂实底兜底即可 */

/* ============================================================================
   毛玻璃与滚动性能的平衡 —— 用 will-change 提前提升合成层，而不是关掉模糊

   背景：滚动时每个 backdrop-filter 元素都要逐帧重新采样背景做模糊，
   而本站背景是 position:fixed 的壁纸层，等于每帧重算一遍全屏背景。
   412×915 实测（y=1200~1500 功能入口区，同时 9 个毛玻璃元素）：
     原样（无优化）          → 平均 26ms / 单次采样 17 个掉帧 / 最差 67ms
     直接关掉 backdrop-filter → 平均 17ms / 0 掉帧（但磨砂质感没了）

   解法：给这些“随滚动进出视口”的毛玻璃元素加 will-change: backdrop-filter。
   它告诉浏览器该属性的合成层会被反复重绘，浏览器提前把元素提升为
   独立合成层并预分配模糊资源，不必每帧重新分配/重算。
     加 will-change 后        → 平均 17ms / 0 掉帧（与关掉模糊同样流畅）
   实测对比：只加 transform:translateZ(0)（11 掉帧）不够，
   必须是 will-change:backdrop-filter（单独一项即可 0 掉帧）。

   所以这里保留（其实是“恢复”）毛玻璃本身，只补上合成层提示。
   ========================================================================== */
html .quick-item,
.breath-badge,
.q-pill,
.post-card,
.post-form-card,
.login-hint,
.navbar.scrolled,
.profile-card,
.weather-card,
.admin-stat-card,
.admin-section {
    will-change: backdrop-filter;
}