/* vip-skin.css — 派单卡 VIP 皮肤层(P2;设计=design_handoff_svip_prestige 02 屏,wiki 17)
   铁律:皮肤只动 边框/光效/角标/按钮主色;需求文字、计费、报名列表四区版式在所有档位保持一致。
   挂法:.ocard2 追加 dp-skin-* 类(order-center.render.js skinCls(boss_vip_level));
   映射:v10=VIP10 金框 / flux=SVIP1-3 流光 / energy=SVIP4-5 能量+置顶 / sov=SVIP6+SSVIP 至尊。
   渐变边框技法:border 透明 + 双层 background(padding-box 卡底 / border-box 渐变),动画只推 border 层位移。 */

@keyframes dpsFlow { 0% { background-position: 0 0, 0 0, 0% 50%; } 100% { background-position: 0 0, 0 0, 300% 50%; } }
@keyframes dpsBreathE { 0%,100% { box-shadow: 0 10px 30px -14px rgba(0,0,0,.5), 0 0 14px -2px rgba(157,107,255,.28); } 50% { box-shadow: 0 10px 30px -14px rgba(0,0,0,.5), 0 0 26px -2px rgba(157,107,255,.55); } }
@keyframes dpsBreathG { 0%,100% { box-shadow: 0 10px 30px -14px rgba(0,0,0,.5), 0 0 14px -2px rgba(246,215,123,.25); } 50% { box-shadow: 0 10px 30px -14px rgba(0,0,0,.5), 0 0 26px -2px rgba(246,215,123,.5); } }

/* 通用:皮肤卡边框交给 border-box 渐变层;悬停不再改描边色(否则盖掉渐变) */
.ocard2[class*="dp-skin-"] { border: 1.5px solid transparent; }
.ocard2[class*="dp-skin-"]:hover { border-color: transparent; }

/* VIP10 · 鎏金框 */
/* ⚠️三层结构:--card-grad 是半透明玻璃层(暗色主题白5%),必须在中间垫一层不透明 --bg-2,
   否则 border-box 的亮渐变整卡透出来,正文全被淹(2026-07-14 用户报"SVIP背景太闪看不清") */
.ocard2.dp-skin-v10 {
  background: var(--card-grad) padding-box, linear-gradient(var(--bg-2,#120e1e),var(--bg-2,#120e1e)) padding-box, linear-gradient(165deg,#8a621f,#f0cf80 45%,#a3762a) border-box;
  box-shadow: 0 10px 30px -14px rgba(0,0,0,.5), 0 0 16px -4px rgba(236,200,120,.4);
}
.ocard2.dp-skin-v10 .btn-coral, .ocard2.dp-skin-v10 .btn-primary {
  background: linear-gradient(135deg,#f0cf80,#c89b3c) !important; border-color: transparent !important; color: #241a06 !important;
}

/* SVIP1-3 · 流光框 */
.ocard2.dp-skin-flux {
  background: var(--card-grad) padding-box, linear-gradient(var(--bg-2,#120e1e),var(--bg-2,#120e1e)) padding-box, linear-gradient(90deg,#9d6bff,#58d5f2,#ff6bd3,#9d6bff) border-box;
  background-size: auto, auto, 300% 100%;
  animation: dpsFlow 6s linear infinite;
  box-shadow: 0 10px 30px -14px rgba(0,0,0,.5), 0 0 18px -4px rgba(157,107,255,.4);
}
.ocard2.dp-skin-flux .btn-coral, .ocard2.dp-skin-flux .btn-primary {
  background: linear-gradient(135deg,#9d6bff,#58d5f2) !important; border-color: transparent !important; color: #fff !important;
}

/* SVIP4-5 · 能量框(锁冷色)+呼吸光 */
.ocard2.dp-skin-energy {
  background: var(--card-grad) padding-box, linear-gradient(var(--bg-2,#120e1e),var(--bg-2,#120e1e)) padding-box, linear-gradient(90deg,#58d5f2,#9d6bff,#58d5f2) border-box;
  background-size: auto, auto, 300% 100%;
  animation: dpsFlow 5s linear infinite, dpsBreathE 2.6s ease-in-out infinite;
}
.ocard2.dp-skin-energy .btn-coral, .ocard2.dp-skin-energy .btn-primary {
  background: linear-gradient(135deg,#58d5f2,#9d6bff) !important; border-color: transparent !important; color: #fff !important;
}

/* SVIP6/SSVIP · 至尊(金紫全谱框+金粉按钮;将来逐位手工定制的骨架) */
.ocard2.dp-skin-sov {
  background: var(--card-grad) padding-box, linear-gradient(var(--bg-2,#120e1e),var(--bg-2,#120e1e)) padding-box, linear-gradient(90deg,#f6d77b,#9d6bff,#ff6bd3,#f6d77b) border-box;
  background-size: auto, auto, 300% 100%;
  animation: dpsFlow 5.5s linear infinite, dpsBreathG 2.8s ease-in-out infinite;
}
.ocard2.dp-skin-sov .btn-coral, .ocard2.dp-skin-sov .btn-primary {
  background: linear-gradient(135deg,#f6d77b,#ff6bd3) !important; border-color: transparent !important; color: #241a06 !important;
}

/* 置顶单角标(SVIP5+,渲染层按档位输出) */
.dp-skin-toppill {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 9px; margin-left: 7px;
  border-radius: 999px; font: 800 10px var(--hud, ui-monospace, monospace); letter-spacing: .04em;
  color: #fff; background: linear-gradient(135deg,#9d6bff,#58d5f2); vertical-align: 2px; white-space: nowrap;
}

/* 降级 */
@media (prefers-reduced-motion: reduce) {
  .ocard2[class*="dp-skin-"] { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
body[data-motion="off"] .ocard2[class*="dp-skin-"] { animation-play-state: paused !important; }

/* VIP10 角标(handoff 皮肤阶梯:金框 + 右上角标;2026-07-19 补) */
.ocard2.dp-skin-v10 { position: relative; }
.ocard2.dp-skin-v10::after {
  content: 'VIP 10'; position: absolute; top: 0; right: 18px; z-index: 2;
  padding: 3px 10px 4px; border-radius: 0 0 9px 9px;
  font: 800 10px var(--hud, ui-monospace, monospace); letter-spacing: .08em; color: #241a06;
  background: linear-gradient(165deg,#f0cf80,#c89b3c); box-shadow: 0 3px 8px rgba(0,0,0,.35);
}