/* IdeaTrace 创世徽章样式 · 2026-08-28 */
/* 在 demo/css/badges.css 引入 */

:root {
  --badge-genesis: #d4af37;
  --badge-pioneer: #1e88e5;
  --badge-evangelist: #a855f7;
  --badge-guardian: #176b4d;
  --badge-distiller: #fb923c;
  --badge-quotekeeper: #ef4444;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 14px rgba(23, 32, 28, 0.12), 0 0 0 2px rgba(255, 255, 255, 0.6);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  position: relative;
}
.badge:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 22px rgba(23, 32, 28, 0.18), 0 0 0 2px rgba(255, 255, 255, 0.8);
}
.badge img,
.badge svg {
  width: 100%;
  height: 100%;
  display: block;
}
.badge--lg { width: 80px; height: 80px; }
.badge--xl { width: 120px; height: 120px; }
.badge--sm { width: 36px; height: 36px; }

.badge[data-locked="true"] {
  filter: grayscale(0.7) opacity(0.45);
  cursor: not-allowed;
}
.badge[data-locked="true"]:hover {
  transform: none;
  box-shadow: 0 4px 14px rgba(23, 32, 28, 0.12);
}
.badge[data-locked="true"]::after {
  content: "🔒";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 18px;
  opacity: 0.8;
}

/* 徽章墙 */
.badge-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, #f5f7f6, #e6f2ec);
  border-radius: 12px;
  border: 1px solid var(--agent-line, #dbe1de);
}
.badge-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.badge-cell .badge-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--agent-text, #17201c);
}
.badge-cell .badge-desc {
  font-size: 9px;
  color: var(--agent-muted, #63706a);
  line-height: 1.4;
}

/* 账户菜单小徽章 */
.plan-chip,
.badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.plan-chip.month,
.badge-chip.month {
  background: #fff7e6;
  color: #a87f1a;
  border: 1px solid #f5b833;
}
.plan-chip.year,
.badge-chip.year {
  background: linear-gradient(135deg, #1a3d2c, #176b4d);
  color: #fde68a;
  border: 1px solid #d4af37;
}
.badge-chip img,
.badge-chip svg {
  width: 14px;
  height: 14px;
  vertical-align: -3px;
}