/* 火山人像审核盾 · 全站统一徽章 · 仅用 design token */
.review-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* 盾形:用 SVG 蒙版裁出盾,background 填当前态颜色(全色填充,无对勾/叉) */
.review-badge .rv-shield {
  width: 12px;
  height: 13px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.review-badge.rv-pass { color: var(--accent-forest); background: var(--forest-bg); border-color: var(--forest-bd); }
.review-badge.rv-fail { color: var(--accent-crimson); background: var(--crimson-bg); border-color: var(--crimson-bd); }
.review-badge.rv-proc { color: var(--heat); background: var(--heat-12); border-color: var(--heat-20); }
.review-badge.rv-idle { color: var(--black-alpha-56); background: var(--black-alpha-4); border-color: var(--border-faint); }

/* 审核中:橙盾上一道亮光从左扫到右(蒙版只让盾发亮,柔和不闪) */
.review-badge.rv-proc .rv-shield {
  background: linear-gradient(100deg, var(--heat) 38%, #ffe0c2 50%, var(--heat) 62%);
  background-size: 250% 100%;
  animation: rv-sweep 1.5s linear infinite;
}
@keyframes rv-sweep { from { background-position: 150% 0; } to { background-position: -150% 0; } }

/* 灰盾可点 → 提交审核 */
.review-badge.clickable { cursor: pointer; }
.review-badge.clickable:hover { border-color: var(--black-alpha-24); color: var(--accent-black); }

/* hover 气泡说明(全站统一气泡) */
.review-pop {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 240px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--accent-black);
  letter-spacing: 0;
  white-space: normal;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base, .15s), transform var(--t-base, .15s), visibility var(--t-base, .15s);
  pointer-events: none;
  z-index: 60;
}
.review-pop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--surface);
}
.review-badge:hover .review-pop,
.review-badge:focus-within .review-pop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}