/* ========== 按钮样式 - 大厂标准统一比例系统 ========== */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--xyx-spacing-sm);
    padding: var(--xyx-button-padding-y) var(--xyx-button-padding-x);
    min-height: var(--xyx-button-height);
    min-width: var(--xyx-button-min-width);
    border: none;
    border-radius: var(--xyx-glass-radius-sm);
    font-weight: var(--xyx-font-weight-medium);
    text-decoration: none;
    transition: background-color var(--xyx-transition-speed) ease, 
                border-color var(--xyx-transition-speed) ease, 
                color var(--xyx-transition-speed) ease, 
                box-shadow var(--xyx-transition-speed-fast) ease,
                transform var(--xyx-transition-speed-fast) ease;
    cursor: pointer;
    font-size: var(--xyx-font-size-sm);
    line-height: var(--xyx-line-height-md);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

/* 按钮点击波纹效果（Material Design风格） */
.button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.button:active::before {
    width: 300px;
    height: 300px;
}

/* ========== 主按钮 - 大厂标准配色 ========== */
.button-primary {
    background: var(--xyx-accent-color) !important;
    color: var(--xyx-text-color-inverse) !important;
    border: 1px solid var(--xyx-accent-color) !important;
    box-shadow: 0 2px 8px rgba(0, 113, 227, 0.2) !important;
}

.button-primary:hover {
    background: var(--xyx-accent-color-hover) !important;
    border-color: var(--xyx-accent-color-hover) !important;
    color: var(--xyx-text-color-inverse) !important;
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.3) !important;
    transform: translateY(-1px) !important;
}

.button-primary:active {
    background: var(--xyx-accent-color-active) !important;
    border-color: var(--xyx-accent-color-active) !important;
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px rgba(0, 113, 227, 0.2) !important;
}

/* 移除蓝色边框，使用subtle的阴影效果 */
.button-primary:focus,
.button-primary:focus-visible {
    outline: none !important;
}

/* ========== 次要按钮 - 纯白半透明毛玻璃风格（参考图片样式） ========== */
.button-secondary {
    background: var(--xyx-glass-bg, rgba(255, 255, 255, 0.72)) !important;
    backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    -webkit-backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    color: var(--xyx-text-color, #1d1d1f) !important;  /* 深色文字，参考图片 */
    border: 1px solid rgba(0, 0, 0, 0.08) !important;  /* 非常subtle的浅灰色边框，参考图片 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;  /* 更subtle的阴影 */
}

.button-secondary:focus,
.button-secondary:focus-visible {
    outline: none !important;
    border-color: rgba(0, 0, 0, 0.12) !important;  /* focus时稍微加深边框 */
}

.button-secondary:hover {
    background: var(--xyx-glass-bg-hover, rgba(255, 255, 255, 0.8)) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;  /* hover时稍微加深边框，不使用蓝色 */
    color: var(--xyx-text-color, #1d1d1f) !important;  /* hover时保持深色文字 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;  /* 更subtle的hover阴影 */
    transform: translateY(-1px) !important;
}

.button-secondary:active {
    background: var(--xyx-glass-bg-active) !important;
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px var(--xyx-glass-shadow) !important;
}

/* ========== 危险按钮 - 统一协调的红色系 ========== */
.button-danger {
    background: var(--xyx-danger-color) !important;
    color: var(--xyx-text-color-inverse) !important;
    border: 1px solid var(--xyx-danger-color) !important;
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.2) !important;
}

.button-danger:hover {
    background: var(--xyx-danger-color-hover) !important;
    border-color: var(--xyx-danger-color-hover) !important;
    color: var(--xyx-text-color-inverse) !important;
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3) !important;
    transform: translateY(-1px) !important;
}

.button-danger:active {
    background: #ff2d20 !important; /* 危险色激活状态 - 更深色变体 */
    border-color: #ff2d20 !important;
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px rgba(255, 59, 48, 0.2) !important;
}

/* ========== 成功按钮 - 统一协调的绿色系 ========== */
.button-success {
    background: var(--xyx-success-color) !important;
    color: var(--xyx-text-color-inverse) !important;
    border: 1px solid var(--xyx-success-color) !important;
    box-shadow: 0 2px 8px rgba(52, 199, 89, 0.2) !important;
}

.button-success:hover {
    background: var(--xyx-success-color-hover) !important;
    border-color: var(--xyx-success-color-hover) !important;
    color: var(--xyx-text-color-inverse) !important;
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3) !important;
    transform: translateY(-1px) !important;
}

.button-success:active {
    background: #30d158 !important; /* 成功色激活状态 - 更深色变体 */
    border-color: #30d158 !important;
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px rgba(52, 199, 89, 0.2) !important;
}

/* ========== 警告按钮 - 统一协调的橙色系 ========== */
.button-warning {
    background: var(--xyx-warning-color) !important;
    color: var(--xyx-text-color-inverse) !important;
    border: 1px solid var(--xyx-warning-color) !important;
    box-shadow: 0 2px 8px rgba(255, 149, 0, 0.2) !important;
}

.button-warning:hover {
    background: var(--xyx-warning-color-hover) !important;
    border-color: var(--xyx-warning-color-hover) !important;
    color: var(--xyx-text-color-inverse) !important;
    box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3) !important;
    transform: translateY(-1px) !important;
}

.button-warning:active {
    background: #ff9f0a !important; /* 警告色激活状态 - 更深色变体 */
    border-color: #ff9f0a !important;
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px rgba(255, 149, 0, 0.2) !important;
}

/* ========== 信息按钮 - 统一协调的蓝色系 ========== */
.button-info {
    background: var(--xyx-info-color) !important;
    color: var(--xyx-text-color-inverse) !important;
    border: 1px solid var(--xyx-info-color) !important;
    box-shadow: 0 2px 8px rgba(90, 200, 250, 0.2) !important;
}

.button-info:hover {
    background: var(--xyx-info-color-hover) !important;
    border-color: var(--xyx-info-color-hover) !important;
    color: var(--xyx-text-color-inverse) !important;
    box-shadow: 0 4px 12px rgba(90, 200, 250, 0.3) !important;
    transform: translateY(-1px) !important;
}

.button-info:active {
    background: #64d2ff !important; /* 信息色激活状态 - 更深色变体 */
    border-color: #64d2ff !important;
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px rgba(90, 200, 250, 0.2) !important;
}

.button-small {
    padding: var(--xyx-button-padding-y-sm) var(--xyx-button-padding-x-sm);
    min-height: var(--xyx-button-height-sm);
    min-width: var(--xyx-button-min-width-sm);
    font-size: var(--xyx-font-size-xs);
    line-height: var(--xyx-line-height-sm);
}

.button-large {
    padding: var(--xyx-button-padding-y-lg) var(--xyx-button-padding-x-lg);
    min-height: var(--xyx-button-height-lg);
    min-width: var(--xyx-button-min-width-lg);
    font-size: var(--xyx-font-size-md);
    font-weight: var(--xyx-font-weight-semibold);
    line-height: var(--xyx-line-height-md);
}

.button-block {
    display: flex;
    width: 100%;
    text-align: center;
}

.button-circle {
    border-radius: 50%;
    width: var(--xyx-button-height);
    height: var(--xyx-button-height);
    min-width: var(--xyx-button-height);
    min-height: var(--xyx-button-height);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 所有按钮统一移除蓝色outline */
.button:focus,
.button:focus-visible,
.button:active:focus,
.button:active:focus-visible {
    outline: none !important;
}

/* 禁用状态 */
.button:disabled,
.button.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* 按钮组 */
.button-group {
    display: flex;
    gap: var(--xyx-spacing-sm);
    flex-wrap: wrap;
}

/* 配置标签样式 */
.xyx-config-badge {
    font-weight: normal !important;
    font-size: 12px !important;
    padding: 8px 15px !important;
    border-radius: 8px !important;
    margin: 0 !important;
    background: var(--xyx-glass-bg) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid var(--xyx-glass-border) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    transition: var(--xyx-glass-transition) !important;
}

.xyx-config-badge:hover {
    background: var(--xyx-glass-bg-hover) !important;
    border-color: var(--xyx-accent-color) !important;
    color: var(--xyx-accent-color) !important;
}