/* ===========================================================================
 * V9-APP 全局组件库 · 统一设计规范
 * =========================================================================== */

/* ---------- 按钮系统 ---------- */
.hd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 200ms var(--v9-ease-out);
    border: none;
    min-height: var(--v9-touch-min);
    text-decoration: none;
}
.hd-btn-primary { background: var(--color-primary); color: #fff; }
.hd-btn-primary:active { background: var(--color-primary-dark); transform: scale(0.98); }
.hd-btn-secondary { background: var(--bg-page); color: var(--gray-700); border: 1px solid var(--border-line); }
.hd-btn-text { background: transparent; color: var(--color-primary); padding: 8px 16px; }
.hd-btn-disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Tag 标签系统 ---------- */
.hd-tag { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; line-height: 1.5; }
.hd-tag--primary { background: var(--color-primary-light); color: var(--color-primary); }
.hd-tag--success { background: var(--color-health-light); color: var(--color-health); }
.hd-tag--warning { background: #FEF3C7; color: var(--color-gold); }
.hd-tag--danger { background: var(--color-charity-light); color: var(--color-charity); }
.hd-tag--info { background: var(--blue-50); color: var(--blue-600); }

/* ---------- 内容卡片 ---------- */
.hd-card { background: var(--bg-card); border-radius: var(--v9-card-radius); box-shadow: var(--v9-card-shadow); overflow: hidden; transition: box-shadow var(--v9-duration-base); }
.hd-card:active { box-shadow: var(--v9-card-shadow-hover); }
.hd-card-body { padding: var(--v9-card-padding); }
.hd-card-image { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }

/* ---------- 分割线 ---------- */
.hd-divider { height: 1px; background: var(--border-line); margin: 16px 0; }

/* ---------- 空状态 ---------- */
.hd-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; gap: 12px; }
.hd-empty-icon { width: 64px; height: 64px; color: var(--gray-400); font-size: 32px; }
.hd-empty-text { font-size: 14px; color: var(--gray-400); text-align: center; }
.hd-empty-sub { font-size: 12px; color: var(--gray-400); }

/* ---------- Loading 状态 ---------- */
.hd-loading { display: flex; align-items: center; justify-content: center; padding: 48px; }
.hd-loading-spinner { width: 32px; height: 32px; border: 3px solid var(--border-line); border-top-color: var(--color-primary); border-radius: 50%; animation: hd-spin 0.8s linear infinite; }
@keyframes hd-spin { to { transform: rotate(360deg); } }

/* ---------- 错误状态 ---------- */
.hd-error { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; gap: 12px; text-align: center; }
.hd-error-icon { font-size: 48px; color: var(--v9-status-error); }
.hd-error-text { font-size: 14px; color: var(--gray-600); }
.hd-error-action { margin-top: 8px; }

/* ---------- 无网络状态 ---------- */
.hd-no-network { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 24px; gap: 16px; text-align: center; }
.hd-no-network-icon { font-size: 64px; color: var(--gray-400); }
.hd-no-network-text { font-size: 16px; color: var(--gray-600); font-weight: 500; }
.hd-no-network-sub { font-size: 14px; color: var(--gray-400); }

/* ---------- 过渡动效 ---------- */
.hd-fade-in { animation: hd-fade-in var(--v9-duration-slow) var(--v9-ease-out); }
@keyframes hd-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.hd-slide-up { animation: hd-slide-up var(--v9-duration-slow) var(--v9-ease-out); }
@keyframes hd-slide-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }