/**
 * SrbillHub 统一组件库 (BEM 命名)
 * 提取重复的按钮/卡片/输入框样式,减少选择器复杂度
 */

/* ============ 按钮组件 ============ */
.srb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.srb-btn:active { transform: scale(0.96); }

.srb-btn--primary {
  background: var(--theme-solid, #6366f1);
  color: var(--theme-fg, #fff);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--theme-solid, #6366f1) 30%, transparent);
}
.srb-btn--primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.srb-btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--glass-border);
}
.srb-btn--ghost:hover {
  background: var(--glass-bg);
  color: var(--text-primary);
}

.srb-btn--icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
}

/* ============ 卡片组件 ============ */
.srb-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 1.25rem;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.srb-card--hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.1);
  border-color: var(--theme-solid, #6366f1);
}
.srb-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.srb-card__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
}
.srb-card__body {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ============ 输入框组件 ============ */
.srb-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.srb-input:focus {
  border-color: var(--theme-solid, #6366f1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-solid, #6366f1) 12%, transparent);
}

/* ============ 标签/徽章组件 ============ */
.srb-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--theme-solid, #6366f1) 12%, transparent);
  color: var(--theme-solid, #6366f1);
}

/* ============ 骨架屏组件 ============ */
.srb-skeleton {
  background: linear-gradient(90deg,
    var(--skeleton-base, rgba(120,120,140,0.1)) 0%,
    var(--skeleton-shine, rgba(120,120,140,0.18)) 50%,
    var(--skeleton-base, rgba(120,120,140,0.1)) 100%);
  background-size: 200% 100%;
  border-radius: 8px;
  animation: srb-shimmer 1.5s infinite;
}
[data-theme="dark"] {
  --skeleton-base: rgba(255,255,255,0.04);
  --skeleton-shine: rgba(255,255,255,0.09);
}
.srb-skeleton--line { height: 0.9rem; margin-bottom: 0.5rem; }
.srb-skeleton--title { height: 1.25rem; width: 70%; margin-bottom: 0.75rem; }
.srb-skeleton--avatar { width: 40px; height: 40px; border-radius: 50%; }
@keyframes srb-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============ 无障碍:减少动画 ============ */
@media (prefers-reduced-motion: reduce) {
  .srb-btn, .srb-card, .srb-skeleton {
    animation: none !important;
    transition: none !important;
  }
}