/* ============================================================
 * chdsx - 通用组件样式
 * 按钮、表单、卡片、表格、对话框、徽章等
 * ============================================================ */

/* ---------- 按钮 ---------- */
.ebk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-4);
    height: 40px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    white-space: nowrap;
    user-select: none;
    border: 1px solid transparent;
}

.ebk-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.ebk-btn:disabled,
.ebk-btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.ebk-btn--block {
    width: 100%;
    display: flex;
}

.ebk-btn--primary {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    box-shadow: 0 2px 6px rgba(35, 130, 202, 0.3);
}
.ebk-btn--primary:hover {
    background-color: var(--color-primary-darken-1);
    box-shadow: 0 4px 12px rgba(35, 130, 202, 0.4);
}
.ebk-btn--primary:active {
    background-color: var(--color-primary-darken-1);
    box-shadow: 0 1px 3px rgba(35, 130, 202, 0.3);
    transform: translateY(1px);
}

.ebk-btn--secondary {
    background-color: var(--color-secondary);
    color: var(--color-on-secondary);
}
.ebk-btn--secondary:hover {
    filter: brightness(0.92);
}
.ebk-btn--secondary:active {
    transform: translateY(1px);
}

.ebk-btn--text {
    background-color: transparent;
    color: var(--color-primary);
}
.ebk-btn--text:hover {
    background-color: var(--bg-active);
}
.ebk-btn--text:active {
    background-color: rgba(35, 130, 202, 0.2);
}

.ebk-btn--outlined {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.ebk-btn--outlined:hover {
    background-color: var(--bg-active);
}
.ebk-btn--outlined:active {
    background-color: rgba(35, 130, 202, 0.2);
}

.ebk-btn--default {
    background-color: transparent;
    color: var(--text-secondary);
}
.ebk-btn--default:hover {
    background-color: var(--bg-hover);
}
.ebk-btn--default:active {
    background-color: rgba(0, 0, 0, 0.08);
}

.ebk-btn--icon {
    width: 40px;
    padding: 0;
    border-radius: 50%;
}
.ebk-btn--icon:active {
    background-color: var(--bg-active);
    transform: scale(0.92);
}

.ebk-btn--sm {
    height: 32px;
    padding: 0 var(--sp-3);
    font-size: var(--fs-xs);
}

.ebk-btn--lg {
    height: 48px;
    padding: 0 var(--sp-6);
    font-size: var(--fs-base);
}

/* ---------- 图标按钮 ---------- */
.ebk-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}
.ebk-icon-btn:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}
.ebk-icon-btn:active {
    background-color: var(--bg-active);
    transform: scale(0.9);
    color: var(--color-primary);
}

.ebk-icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    font-size: 24px;
    flex-shrink: 0;
}

.ebk-icon--sm { font-size: 18px; }
.ebk-icon--lg { font-size: 32px; }

/* ---------- 表单 ---------- */
.ebk-form-group {
    margin-bottom: var(--sp-4);
}

.ebk-label {
    display: block;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-bottom: var(--sp-1);
    padding-inline-start: var(--sp-1);
}

.ebk-input,
.ebk-textarea,
.ebk-select {
    width: 100%;
    height: 48px;
    padding: 0 var(--sp-4);
    font-size: var(--fs-base);
    color: var(--text-primary);
    background-color: transparent;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast),
        box-shadow var(--transition-fast);
    outline: none;
}

.ebk-textarea {
    height: auto;
    min-height: 96px;
    padding: var(--sp-3) var(--sp-4);
    resize: vertical;
}

.ebk-input::placeholder,
.ebk-textarea::placeholder {
    color: var(--text-disabled);
}

.ebk-input:focus,
.ebk-textarea:focus,
.ebk-select:focus {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.ebk-input:disabled,
.ebk-textarea:disabled {
    opacity: 0.5;
    background-color: var(--bg-surface-variant);
}

.ebk-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.ebk-input-group .ebk-input {
    padding-inline-end: 44px;
}

.ebk-input-group__suffix {
    position: absolute;
    inset-inline-end: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--text-secondary);
    border-radius: 50%;
    cursor: pointer;
}
.ebk-input-group__suffix:hover {
    background-color: var(--bg-hover);
}

/* ---------- 卡片 ---------- */
.ebk-card {
    background-color: var(--bg-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    transition: box-shadow var(--transition-base);
    position: relative;
}
.ebk-card.is-disabled {
    opacity: 0.6;
    pointer-events: none;
}

.ebk-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-4) 0;
    font-weight: var(--fw-medium);
    color: var(--text-primary);
}

.ebk-card__title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
}

.ebk-card__content {
    padding: var(--sp-4);
}

.ebk-card__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4) var(--sp-4);
}

.ebk-card--flat {
    box-shadow: none;
    border: 1px solid var(--border-color);
}

.ebk-card--outlined {
    border: 1px solid var(--border-color);
    box-shadow: none;
}

/* ---------- 表格 ---------- */
.ebk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.ebk-table thead th {
    text-align: start;
    padding: var(--sp-3) var(--sp-4);
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
    background-color: var(--bg-surface-variant);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.ebk-table tbody td {
    padding: var(--sp-3) var(--sp-4);
    color: var(--text-primary);
    border-bottom: 1px solid var(--divider);
    vertical-align: middle;
}

.ebk-table tbody tr {
    transition: background-color var(--transition-fast);
}

.ebk-table tbody tr:hover {
    background-color: var(--bg-hover);
}

.ebk-table tbody tr:last-child td {
    border-bottom: none;
}

/* ---------- 列表 ---------- */
.ebk-list {
    background-color: var(--bg-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.ebk-list-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    min-height: 56px;
    border-bottom: 1px solid var(--divider);
    transition: background-color var(--transition-fast);
    cursor: pointer;
}
.ebk-list-item:hover {
    background-color: var(--bg-hover);
}
.ebk-list-item:last-child {
    border-bottom: none;
}

.ebk-list-item__icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background-color: var(--bg-surface-variant);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.ebk-list-item__content {
    flex: 1;
    min-width: 0;
}

.ebk-list-item__title {
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ebk-list-item__subtitle {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-top: 2px;
}

.ebk-list-item__after {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    text-align: end;
    flex-shrink: 0;
}

/* ---------- 头像 ---------- */
.ebk-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--bg-surface-variant);
    color: var(--color-primary);
    font-weight: var(--fw-medium);
    overflow: hidden;
    flex-shrink: 0;
}
.ebk-avatar--xs { width: 24px; height: 24px; font-size: var(--fs-xs); }
.ebk-avatar--sm { width: 32px; height: 32px; font-size: var(--fs-sm); }
.ebk-avatar--md { width: 40px; height: 40px; font-size: var(--fs-base); }
.ebk-avatar--lg { width: 48px; height: 48px; font-size: var(--fs-lg); }
.ebk-avatar--xl { width: 64px; height: 64px; font-size: var(--fs-2xl); }

.ebk-avatar--rounded {
    border-radius: var(--radius-md);
}

.ebk-avatar--primary {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

/* ---------- 徽章/Chip ---------- */
.ebk-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px var(--sp-2);
    height: 24px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    border-radius: var(--radius-pill);
    background-color: var(--bg-surface-variant);
    color: var(--text-secondary);
}

.ebk-chip--primary {
    background-color: var(--bg-active);
    color: var(--color-primary);
}

.ebk-chip--income {
    background-color: rgba(0, 150, 136, 0.12);
    color: var(--color-income);
}

.ebk-chip--expense {
    background-color: rgba(212, 63, 63, 0.12);
    color: var(--color-expense);
}

/* ---------- 对话框/模态框 ---------- */
.ebk-overlay {
    position: fixed;
    inset: 0;
    background-color: var(--bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base),
        visibility var(--transition-base);
}
.ebk-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.ebk-dialog {
    background-color: var(--bg-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    max-width: 560px;
    width: calc(100% - 48px);
    max-height: calc(100vh - 96px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.92);
    transition: transform var(--transition-base);
}
.ebk-overlay.is-open .ebk-dialog {
    transform: scale(1);
}

.ebk-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-4) var(--sp-2);
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
}

.ebk-dialog__content {
    padding: var(--sp-2) var(--sp-4) var(--sp-4);
    overflow-y: auto;
    color: var(--text-primary);
    font-size: var(--fs-base);
}

.ebk-dialog__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4) var(--sp-4);
}

/* ---------- 下拉菜单 ---------- */
.ebk-menu {
    position: absolute;
    z-index: 100;
    background-color: var(--bg-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-3);
    min-width: 180px;
    padding: var(--sp-1);
    transform-origin: top right;
    transform: scale(0.92);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
}
.ebk-menu.is-open {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
}

.ebk-menu__item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}
.ebk-menu__item:hover {
    background-color: var(--bg-hover);
}

.ebk-menu__divider {
    height: 1px;
    background-color: var(--divider);
    margin: var(--sp-1) 0;
}

/* ---------- 进度环 ---------- */
.ebk-progress-circular {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: ebk-spin 0.8s linear infinite;
}

@keyframes ebk-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Switch 开关 ---------- */
.ebk-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 40px;
    height: 24px;
    border-radius: var(--radius-pill);
    background-color: var(--text-disabled);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    flex-shrink: 0;
}
.ebk-switch::after {
    content: "";
    position: absolute;
    inset-inline-start: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: var(--shadow-1);
    transition: transform var(--transition-fast);
}
.ebk-switch.is-checked {
    background-color: var(--color-primary);
}
.ebk-switch.is-checked::after {
    transform: translateX(16px);
}
[dir="rtl"] .ebk-switch.is-checked::after {
    transform: translateX(-16px);
}

/* ---------- 分割线 ---------- */
.ebk-divider {
    height: 1px;
    background-color: var(--divider);
    width: 100%;
    margin: var(--sp-2) 0;
}

/* ---------- 工具提示 ---------- */
.ebk-tooltip {
    position: relative;
    display: inline-flex;
}
.ebk-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 4px 8px;
    font-size: var(--fs-xs);
    color: #fff;
    background-color: rgba(0, 0, 0, 0.85);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    pointer-events: none;
    z-index: 10;
}
.ebk-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ---------- 标签页 Tabs ---------- */
.ebk-tabs {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    border-bottom: 1px solid var(--divider);
    padding-inline: var(--sp-4);
}

.ebk-tab {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-bottom: -1px;
}
.ebk-tab:hover {
    color: var(--text-primary);
}
.ebk-tab.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* ---------- 空状态 ---------- */
.ebk-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-12) var(--sp-4);
    text-align: center;
    color: var(--text-secondary);
}
.ebk-empty-state__icon {
    font-size: 64px;
    margin-bottom: var(--sp-3);
    opacity: 0.4;
}
.ebk-empty-state__title {
    font-size: var(--fs-lg);
    color: var(--text-primary);
    margin-bottom: var(--sp-2);
}
.ebk-empty-state__desc {
    font-size: var(--fs-sm);
}

/* ============================================================
 * UI 反馈机制（与参考设计对齐）
 * Snackbar 通知 / 按钮加载态 / 涟漪效果 / 骨架屏 / 加载遮罩
 * ============================================================ */

/* ---------- 按钮加载态 ---------- */
.ebk-btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.ebk-btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: ebk-spin 0.7s linear infinite;
    opacity: 1;
}
.ebk-btn--primary.is-loading {
    color: var(--color-on-primary) !important;
}
.ebk-btn--text.is-loading,
.ebk-btn--outlined.is-loading,
.ebk-btn--default.is-loading {
    color: var(--color-primary) !important;
}
.ebk-btn.is-loading .ebk-icon,
.ebk-btn.is-loading [data-icon] {
    opacity: 0;
}

/* ---------- 涟漪效果 ---------- */
.ebk-ripple {
    position: relative;
    overflow: hidden;
}
.ebk-ripple__wave {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255, 255, 255, 0.35);
    animation: ebk-ripple 0.6s ease-out;
    pointer-events: none;
}
.ebk-btn--text .ebk-ripple__wave,
.ebk-btn--outlined .ebk-ripple__wave,
.ebk-btn--default .ebk-ripple__wave,
.ebk-icon-btn .ebk-ripple__wave {
    background: rgba(35, 130, 202, 0.18);
}
.ebk-ripple__wave--dark {
    background: rgba(0, 0, 0, 0.12);
}
@keyframes ebk-ripple {
    to {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* ---------- Snackbar 通知（顶部居中，对齐参考设计 v-snackbar） ---------- */
.ebk-snackbar-container {
    position: fixed;
    top: var(--sp-4);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    align-items: center;
    pointer-events: none;
    max-width: calc(100vw - 32px);
}
.ebk-snackbar {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 44px;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-md);
    background-color: #323233;
    color: #fff;
    font-size: var(--fs-sm);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-24px) scale(0.96);
    transition: opacity var(--transition-base),
        transform var(--transition-base);
    max-width: 560px;
}
.ebk-snackbar.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.ebk-snackbar__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 14px;
}
.ebk-snackbar__content {
    flex: 1;
    line-height: 1.4;
    white-space: pre-line;
}
.ebk-snackbar__close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ebk-snackbar__close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

/* 语义变体 */
.ebk-snackbar--success {
    background-color: var(--color-success);
}
.ebk-snackbar--success .ebk-snackbar__icon {
    background: rgba(255, 255, 255, 0.25);
}
.ebk-snackbar--error {
    background-color: var(--color-error);
}
.ebk-snackbar--error .ebk-snackbar__icon {
    background: rgba(255, 255, 255, 0.25);
}
.ebk-snackbar--warning {
    background-color: var(--color-warning);
}
.ebk-snackbar--warning .ebk-snackbar__icon {
    color: rgba(0, 0, 0, 0.7);
    background: rgba(255, 255, 255, 0.3);
}
.ebk-snackbar--info {
    background-color: var(--color-info);
}
.ebk-snackbar--info .ebk-snackbar__icon {
    background: rgba(255, 255, 255, 0.25);
}

/* 移动端 Snackbar（顶部贴边） */
@media (max-width: 599.98px) {
    .ebk-snackbar-container {
        top: 0;
        left: 0;
        right: 0;
        transform: none;
        align-items: stretch;
        padding: 0;
    }
    .ebk-snackbar {
        max-width: 100%;
        width: 100%;
        border-radius: 0;
        transform: translateY(-100%);
    }
    .ebk-snackbar.is-visible {
        transform: translateY(0);
    }
}

/* ---------- 加载遮罩（容器级加载） ---------- */
.ebk-loading-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast),
        visibility var(--transition-fast);
    border-radius: inherit;
}
.ebk-loading-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}
[data-theme="dark"] .ebk-loading-overlay {
    background-color: rgba(30, 30, 30, 0.7);
}
.ebk-loading-overlay__spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-primary);
    border-top-color: transparent;
    border-radius: 50%;
    animation: ebk-spin 0.8s linear infinite;
}

/* ---------- 骨架屏 ---------- */
.ebk-skeleton {
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.06) 25%,
        rgba(0, 0, 0, 0.1) 37%,
        rgba(0, 0, 0, 0.06) 63%
    );
    background-size: 400% 100%;
    animation: ebk-skeleton 1.4s ease infinite;
    border-radius: var(--radius-sm);
}
[data-theme="dark"] .ebk-skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.06) 25%,
        rgba(255, 255, 255, 0.1) 37%,
        rgba(255, 255, 255, 0.06) 63%
    );
    background-size: 400% 100%;
}
@keyframes ebk-skeleton {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
.ebk-skeleton--text {
    height: 12px;
    margin-bottom: 8px;
}
.ebk-skeleton--text-sm { height: 10px; width: 60%; }
.ebk-skeleton--text-lg { height: 16px; width: 80%; }
.ebk-skeleton--title { height: 20px; width: 40%; margin-bottom: 16px; }
.ebk-skeleton--avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ebk-skeleton--card {
    height: 120px;
    border-radius: var(--radius-md);
}
/* 骨架屏行禁用交互 */
.transactions-skeleton .transaction-row,
[data-skeleton] .mobile-list-item {
    cursor: default;
    pointer-events: none;
}

/* ---------- 列表项 / 卡片按压反馈 ---------- */
.mobile-overview-item:active,
.mobile-list-item:active,
.account-card:active,
.settings-item:active {
    background-color: var(--bg-hover);
}
.sidebar__link:active,
.tabbar__item:active {
    background-color: var(--bg-active);
}

/* ---------- 图标按钮加载态 ---------- */
.ebk-icon-btn.is-loading {
    color: transparent !important;
    pointer-events: none;
    position: relative;
}
.ebk-icon-btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid var(--color-primary);
    border-top-color: transparent;
    border-radius: 50%;
    animation: ebk-spin 0.7s linear infinite;
}

/* ---------- 成功勾选动画 ---------- */
@keyframes ebk-check-pop {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.ebk-check-pop {
    animation: ebk-check-pop 0.35s ease-out;
}

/* ---------- 抖动动画（表单校验失败） ---------- */
@keyframes ebk-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}
.ebk-shake {
    animation: ebk-shake 0.4s ease;
}