/* 哑光磨砂拟态组件 — 低反光 */

.neu,
.neu-hover,
.neu-flat {
    border: 1px solid var(--border-soft);
    outline: 0;
    border-radius: var(--radius-sm);
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--card-bg) 96%, #fff 4%),
            var(--surface-matte));
    box-shadow: var(--elev-out);
    color: var(--font-color);
    font-weight: 600;
    transition: box-shadow 0.2s ease, transform 0.15s ease, background 0.2s ease;
    /* 磨砂感：极轻噪点 + 无强高光 */
    backdrop-filter: var(--frost);
    -webkit-backdrop-filter: var(--frost);
}

.neu:hover,
.neu-hover:hover {
    box-shadow: var(--elev-out-hover);
}

.neu:active,
.neu-hover:active {
    box-shadow: var(--elev-in);
}

.neu-flat {
    border-radius: var(--radius);
}

.neu-inset {
    border: 1px solid var(--border-soft);
    outline: 0;
    border-radius: 10px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--surface-matte) 70%, var(--body-bg));
    color: var(--font-color);
    box-shadow: var(--elev-in);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    width: 100%;
    font: inherit;
}

.neu-inset:focus {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border-soft));
    box-shadow: var(--elev-in-sm), 0 0 0 3px var(--accent-soft);
}

.neu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.9rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background:
        linear-gradient(160deg,
            color-mix(in srgb, var(--card-bg) 94%, #fff 6%),
            var(--surface-matte));
    color: var(--font-color);
    font-weight: 600;
    box-shadow: var(--elev-out-sm);
    transition: box-shadow 0.2s ease, transform 0.12s ease, background 0.2s ease;
    text-shadow: none;
}

.neu-btn:hover {
    box-shadow: var(--elev-out-hover);
    text-decoration: none;
}

.neu-btn:active {
    box-shadow: var(--elev-in);
    transform: translateY(0.5px);
}

.neu-btn-sm {
    padding: 6px 12px;
    font-size: 0.8rem;
}

.neu-btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
}

.neu-btn-icon.sm {
    width: 32px;
    height: 32px;
}

.tag {
    display: inline-block;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 700;
    line-height: 1.4;
    border: 1px solid transparent;
}

.tag-success {
    background: color-mix(in srgb, var(--success) 18%, var(--card-bg));
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 25%, transparent);
}
.tag-danger {
    background: color-mix(in srgb, var(--danger) 16%, var(--card-bg));
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 25%, transparent);
}
.tag-muted {
    background: color-mix(in srgb, var(--font-muted) 16%, var(--card-bg));
    color: var(--font-muted);
}
.tag-warning {
    background: color-mix(in srgb, var(--warning) 18%, var(--card-bg));
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 25%, transparent);
}

/* 通用哑光卡片 */
.matte-card {
    background:
        linear-gradient(155deg,
            color-mix(in srgb, var(--card-bg) 96%, #fff 4%),
            var(--surface-matte));
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--elev-out);
    backdrop-filter: var(--frost);
    -webkit-backdrop-filter: var(--frost);
}