/* ============================================================
   可复用组件 (按钮、输入框、标签、通用卡片、弹窗等)
============================================================ */

/* --- 按钮 --- */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    background: var(--color-accent-gradient);
    color: #ffffff;
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: var(--border-radius-sm);
    transition: filter var(--transition-fast), transform var(--transition-fast);
}
.btn-primary:hover {
    filter: brightness(0.95);
}
.btn-primary:active {
    transform: translateY(1px);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    background: var(--color-card);
    color: var(--color-text);
    font-weight: 500;
    font-size: 0.95rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    transition: background var(--transition-fast);
}
.btn-secondary:hover {
    background: #e8e0f0; /* 浅紫灰 */
}

/* --- 输入框 --- */
.input-text {
    width: 100%;
    padding: 12px 16px;
    font-size: 0.95rem;
    color: var(--color-text);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input-text:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(79, 110, 247, 0.15);
}
.input-text::placeholder {
    color: var(--color-text-light);
}
.input-text.error {
    border-color: var(--color-error);
}

/* --- 标签 (Tag) --- */
.tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--color-tag-bg);
    color: var(--color-text-secondary);
    border-radius: 14px;
    white-space: nowrap;
}

/* --- Modal 模态框 --- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
}
.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.modal-content {
    width: 360px;
    max-width: 90%;
    background: var(--color-card);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-dropdown);
    padding: 24px;
    transform: scale(0.96) translateY(-20px);
    transition: transform var(--transition-fast) ease-out;
}
.modal-overlay.active .modal-content {
    transform: scale(1) translateY(0);
}
.modal-header {
    margin-bottom: 20px;
}
.modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
}
.modal-body {
    margin-bottom: 24px;
}
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* --- Toast 提示 --- */
.toast {
    position: fixed;
    bottom: 32px;
    right: 32px;
    padding: 12px 24px;
    background: var(--color-success);
    color: white;
    border-radius: var(--border-radius-sm);
    font-size: 0.95rem;
    font-weight: 500;
    box-shadow: var(--shadow-normal);
    z-index: 3000;
    opacity: 0;
    transform: translateY(20px);
    transition: all var(--transition-fast);
    pointer-events: none;
}
.toast.active {
    opacity: 1;
    transform: translateY(0);
}
.toast.error {
    background: var(--color-error);
}

/* --- 骨架屏加载动画 --- */
@keyframes shimmer {
    0% { background-position: -468px 0; }
    100% { background-position: 468px 0; }
}
.skeleton {
    background: #f6f7f8;
    background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
    background-repeat: no-repeat;
    background-size: 800px 100%;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: shimmer;
    animation-timing-function: linear;
}