/* ===== SVIP 等级徽章（全站共用） =====
   等级越高，颜色越亮、光晕越强、动画越炫。 */
.svip {
  position: relative;
  display: inline-block;
  padding: 1px 5px;
  margin-left: 4px;
  border-radius: 6px;
  font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .3px;
  line-height: 1.45;
  color: #041018;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
}

/* 1~3 级：低调，纯色 */
.svip-1 { background: linear-gradient(135deg, #aebbd6, #d6dff0); }
.svip-2 { background: linear-gradient(135deg, #4dc9ff, #8fe3ff); box-shadow: 0 0 5px rgba(77,201,255,.45); }
.svip-3 { background: linear-gradient(135deg, #2bffab, #8affd0); box-shadow: 0 0 6px rgba(43,255,171,.5); }

/* 4~6 级：开始有光晕 */
.svip-4 { background: linear-gradient(135deg, #7c4dff, #b388ff); box-shadow: 0 0 7px rgba(124,77,255,.6); }
.svip-5 { background: linear-gradient(135deg, #ff2bd6, #ff8ae6); box-shadow: 0 0 8px rgba(255,43,214,.65); }
.svip-6 { background: linear-gradient(135deg, #ff8a4d, #ffc078); box-shadow: 0 0 9px rgba(255,138,77,.7); }

/* 7~8 级：金色 + 呼吸发光 */
.svip-7 {
  background: linear-gradient(135deg, #ffd54a, #ffe88a);
  box-shadow: 0 0 10px rgba(255,213,74,.8);
  animation: svipPulse 2.4s ease-in-out infinite;
}
.svip-8 {
  background: linear-gradient(135deg, #ffb300, #ffe066, #ffd54a);
  box-shadow: 0 0 13px rgba(255,193,7,.9);
  animation: svipPulse 1.8s ease-in-out infinite;
}

/* 9 级：流光扫过 */
.svip-9 {
  background: linear-gradient(135deg, #ff2bd6, #ffd54a, #fff3b0);
  background-size: 200% 200%;
  box-shadow: 0 0 15px rgba(255,43,214,.65), 0 0 8px rgba(255,213,74,.6);
  animation: svipShift 2.2s linear infinite;
}
.svip-9::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.9) 50%, transparent 80%);
  transform: translateX(-130%);
  animation: svipSweep 2.6s ease-in-out infinite;
}

/* 10 级：彩虹流动 + 流光 + 呼吸，最强 */
.svip-10 {
  background: linear-gradient(90deg, #ff2bd6, #ffd54a, #2bffab, #00e5ff, #7c4dff, #ff2bd6);
  background-size: 300% 100%;
  box-shadow: 0 0 17px rgba(0,229,255,.8), 0 0 11px rgba(255,43,214,.65);
  animation: svipShift 1.7s linear infinite, svipPulse 1.7s ease-in-out infinite;
  padding-right: 13px; /* 给右上角星标留位，避免压住末尾数字 */
}
.svip-10::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.95) 50%, transparent 80%);
  transform: translateX(-130%);
  animation: svipSweep 1.9s ease-in-out infinite;
}
.svip-10::before {
  content: '★'; /* 用兼容性更好的实心星，避免部分设备缺字显示成方框 */
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  font-size: 8px; line-height: 1; color: #fff;
  text-shadow: 0 0 4px #fff;
  animation: svipPulse 1.1s ease-in-out infinite;
}

@keyframes svipPulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.3); } }
@keyframes svipShift { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
@keyframes svipSweep { 0% { transform: translateX(-130%); } 65%,100% { transform: translateX(130%); } }

/* SVIP 等级卡片（个人中心） */
.svip-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.svip-card .svip-hd { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; }
.svip-card .svip-exp { color: var(--text-dim); font-size: 12.5px; }
.svip-bar { flex: 1; min-width: 160px; height: 8px; border-radius: 99px; background: rgba(139,152,184,.18); overflow: hidden; }
.svip-bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #00e5ff, #7c4dff, #ff2bd6); box-shadow: 0 0 8px rgba(124,77,255,.6); transition: width .4s ease; }