/* ================================
   S‑A‑5：筛选按钮（Filter Button）
   - 默认：三条横线
   - 激活：漏斗形
   - 尺寸 / 皮肤 / 动效 与 layout-switcher 对齐
================================ */

.cw-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    border: none;
    background: rgba(0, 0, 0, 0.04);
    color: #222;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition:
        background 0.22s ease,
        transform 0.22s cubic-bezier(.33, 1, .68, 1),
        box-shadow 0.22s ease;
}

/* hover / active：与 layout-switcher 一致 */
.cw-filter-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.cw-filter-btn:active {
    background: rgba(0, 0, 0, 0.10);
    transform: translateY(0) scale(0.97);
}

/* 激活态（筛选面板打开时） */
.cw-filter-btn.is-active {
    background: rgba(0, 0, 0, 0.10);
}

/* 图标容器 */
.cw-filter-icon {
    position: relative;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* SVG 基础样式（与 layout-switcher 对齐） */
.cw-filter-svg {
    position: absolute;
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    opacity: 0;
    transform: scale(0.96);
    transition:
        opacity 0.26s cubic-bezier(.33, 1, .68, 1),
        transform 0.26s cubic-bezier(.33, 1, .68, 1);
}

/* 默认显示：三条横线 */
.cw-filter-svg-lines {
    opacity: 1;
    transform: scale(1);
}

/* 激活态：漏斗更强调一点 */
.cw-filter-btn.is-active .cw-filter-svg-funnel {
    opacity: 1;
    transform: scale(1.02);
    stroke-width: 2;
}

/* 激活态：三条横线淡出 */
.cw-filter-btn.is-active .cw-filter-svg-lines {
    opacity: 0;
    transform: scale(0.94);
}

/* 深色主题适配（与 layout-switcher 一致） */
@media (prefers-color-scheme: dark) {
    .cw-filter-btn {
        background: rgba(255, 255, 255, 0.06);
        color: #f5f5f5;
    }
    .cw-filter-btn:hover {
        background: rgba(255, 255, 255, 0.10);
    }
    .cw-filter-btn:active,
    .cw-filter-btn.is-active {
        background: rgba(255, 255, 255, 0.16);
    }
}