/* =========================================================================
   材质② 清透玻璃 material-clear.css
   用 body[data-material="clear"] 覆盖所有玻璃控件，取向「薄、透、轻」：
   借鉴玻璃_2 参考的白边做法（不照抄形状），模糊更轻、底色更透、
   1px 细亮白边、去掉厚重噪点与重外影 —— 像一片薄薄的透明玻璃。
   ========================================================================= */

/* ---------- 通用玻璃按钮 ---------- */
body[data-material="clear"] .glass-btn {
    -webkit-backdrop-filter: blur(5px) saturate(160%);
    backdrop-filter: blur(5px) saturate(160%);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    /* 细亮白边用 inset shadow 实现，不改布局尺寸 */
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.2),
        0px 8px 20px 0px rgba(0, 0, 0, 0.3);
}
body:not(.input-no-hover)[data-material="clear"] .glass-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.35),
        0px 12px 26px 2px rgba(0, 0, 0, 0.32);
}
body:not(.input-no-hover)[data-material="clear"] .glass-btn:active {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.15),
        0px 4px 12px 0px rgba(0, 0, 0, 0.26);
}
body[data-material="clear"] .glass-btn:disabled {
    -webkit-backdrop-filter: blur(4px) saturate(120%);
    backdrop-filter: blur(4px) saturate(120%);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        0px 2px 10px 0px rgba(0, 0, 0, 0.2);
}
/* 清透档去掉颗粒噪点，纯净薄玻璃 */
body[data-material="clear"] .glass-btn::before,
body[data-material="clear"] .glass::before {
    opacity: 0;
}

/* ---------- 通用玻璃面板 ---------- */
body[data-material="clear"] .glass {
    -webkit-backdrop-filter: blur(5px) saturate(160%);
    backdrop-filter: blur(5px) saturate(160%);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.2),
        0px 8px 20px 0px rgba(0, 0, 0, 0.3);
}

/* ---------- 滑条 ---------- */
body[data-material="clear"] .slider-thumb {
    -webkit-backdrop-filter: blur(5px) saturate(160%);
    backdrop-filter: blur(5px) saturate(160%);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.2),
        0px 8px 20px 0px rgba(0, 0, 0, 0.3);
}
body[data-material="clear"] .custom-slider {
    background: rgba(255, 255, 255, 0.15);
}

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