/* =========================================================================
   材质① 磨砂（默认）material-frosted.css
   用 body[data-material="frosted"] 显式声明当前磨砂参数，
   与清透档（material-clear.css）结构对等，后续调磨砂只动这个文件。
   参数 = 主文件隐式默认值：blur(22px)+saturate(200%)、白渐变底、
   4层物理光影、噪点 0.07。
   ========================================================================= */

/* ---------- 通用玻璃按钮 ---------- */
body[data-material="frosted"] .glass-btn {
    -webkit-backdrop-filter: blur(22px) saturate(200%);
    backdrop-filter: blur(22px) saturate(200%);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1.5px 0 rgba(0, 0, 0, 0.08),
        0 10px 35px rgba(0, 0, 0, 0.12),
        0 0 0 0.5px rgba(255, 255, 255, 0.18);
}
body:not(.input-no-hover)[data-material="frosted"] .glass-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1.5px 0 rgba(0, 0, 0, 0.1),
        0 15px 45px rgba(0, 0, 0, 0.18),
        0 0 0 0.5px rgba(255, 255, 255, 0.22);
}
body:not(.input-no-hover)[data-material="frosted"] .glass-btn:active {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1.5px 0 rgba(0, 0, 0, 0.06),
        0 5px 20px rgba(0, 0, 0, 0.1),
        0 0 0 0.5px rgba(255, 255, 255, 0.15);
}
body[data-material="frosted"] .glass-btn:disabled {
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.2),
        inset 0 -2px 0 rgba(0, 0, 0, 0.05),
        0 4px 15px rgba(0, 0, 0, 0.08),
        0 0 0 0.5px rgba(255, 255, 255, 0.1);
}
/* 磨砂噪点（::before 颗粒保留） */
body[data-material="frosted"] .glass-btn::before,
body[data-material="frosted"] .glass::before {
    opacity: 0.07;
}

/* ---------- 通用玻璃面板 ---------- */
body[data-material="frosted"] .glass {
    -webkit-backdrop-filter: blur(22px) saturate(200%);
    backdrop-filter: blur(22px) saturate(200%);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.1));
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1.5px 0 rgba(0, 0, 0, 0.08),
        0 10px 35px rgba(0, 0, 0, 0.12),
        0 0 0 0.5px rgba(255, 255, 255, 0.18);
}

/* ---------- 滑条 ---------- */
body[data-material="frosted"] .slider-thumb {
    -webkit-backdrop-filter: blur(22px) saturate(200%);
    backdrop-filter: blur(22px) saturate(200%);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.1));
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1.5px 0 rgba(0, 0, 0, 0.08),
        0 10px 35px rgba(0, 0, 0, 0.12),
        0 0 0 0.5px rgba(255, 255, 255, 0.18);
}
body[data-material="frosted"] .custom-slider {
    background: rgba(255, 255, 255, 0.2);
}

/* =========================================================================
   浅色主题（flow / aqua / mist / sweep）下：
   元素底色从「白色渐变」换成「同等强度的黑色渐变」，
   避免白色面板在浅色背景下融为一体，增强可读性。
   白边与阴影保持不变（黑底 + 白边轮廓更清晰）。
   （第五轮⑥：milk 已删除；②加固：hover/active 受 body:not(.input-no-hover) 控制，触控不粘色）
   ========================================================================= */
body[data-material="frosted"][data-theme="flow"] .glass-btn,
body[data-material="frosted"][data-theme="aqua"] .glass-btn,
body[data-material="frosted"][data-theme="mist"] .glass-btn,
body[data-material="frosted"][data-theme="sweep"] .glass-btn {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.06));
}
body:not(.input-no-hover)[data-material="frosted"][data-theme="flow"] .glass-btn:hover,
body:not(.input-no-hover)[data-material="frosted"][data-theme="aqua"] .glass-btn:hover,
body:not(.input-no-hover)[data-material="frosted"][data-theme="mist"] .glass-btn:hover,
body:not(.input-no-hover)[data-material="frosted"][data-theme="sweep"] .glass-btn:hover {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.08));
}
body:not(.input-no-hover)[data-material="frosted"][data-theme="flow"] .glass-btn:active,
body:not(.input-no-hover)[data-material="frosted"][data-theme="aqua"] .glass-btn:active,
body:not(.input-no-hover)[data-material="frosted"][data-theme="mist"] .glass-btn:active,
body:not(.input-no-hover)[data-material="frosted"][data-theme="sweep"] .glass-btn:active {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.04));
}
body[data-material="frosted"][data-theme="flow"] .glass-btn:disabled,
body[data-material="frosted"][data-theme="aqua"] .glass-btn:disabled,
body[data-material="frosted"][data-theme="mist"] .glass-btn:disabled,
body[data-material="frosted"][data-theme="sweep"] .glass-btn:disabled {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.04));
}
body[data-material="frosted"][data-theme="flow"] .glass,
body[data-material="frosted"][data-theme="aqua"] .glass,
body[data-material="frosted"][data-theme="mist"] .glass,
body[data-material="frosted"][data-theme="sweep"] .glass {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.1));
}
body[data-material="frosted"][data-theme="flow"] .slider-thumb,
body[data-material="frosted"][data-theme="aqua"] .slider-thumb,
body[data-material="frosted"][data-theme="mist"] .slider-thumb,
body[data-material="frosted"][data-theme="sweep"] .slider-thumb {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.1));
}
body[data-material="frosted"][data-theme="flow"] .custom-slider,
body[data-material="frosted"][data-theme="aqua"] .custom-slider,
body[data-material="frosted"][data-theme="mist"] .custom-slider,
body[data-material="frosted"][data-theme="sweep"] .custom-slider {
    background: rgba(0, 0, 0, 0.15);
}