/* =========================================================
   VIP 徽章组件（复刻 v3.gyks.cf，5 档：none / VIP / VIP永久 / SVIP / SVIP永久）
   使用方式：给容器加上 class="vip-badge {档}"，结构见下方说明。
   档位类：vip-none / vip-1 / vip-1-eternal / vip-2 / vip-2-eternal
   data-theme="dark|light" 适配明暗主题（light 下自动调整边框光感）。
   ========================================================= */

/* ---------- 基础徽章 ---------- */
.vip-badge {
    --vip-panel: linear-gradient(135deg,#101820,#111a22);
    --vip-border: linear-gradient(115deg,rgba(255,255,255,.18),rgba(255,255,255,.04),rgba(255,255,255,.12));
    --vip-main: #fff;
    --vip-sub: rgba(255,255,255,.72);
    --vip-accent: #2dd4c0;
    --vip-accent-2: #9ff8ec;
    --vip-glow: rgba(45,212,192,.22);
    --vip-tail-bg: rgba(255,255,255,.10);
    --vip-tail-border: rgba(255,255,255,.16);
    --vip-wing: rgba(255,255,255,.16);

    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: max-content;
    max-width: 100%;
    min-height: 46px;
    padding: 7px 12px 7px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--vip-border) border-box;
    font-family: 'Lato',sans-serif;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 10px 28px rgba(0,0,0,.28),
        0 0 34px var(--vip-glow),
        inset 0 1px 0 rgba(255,255,255,.14);
    transition: transform .32s cubic-bezier(.34,1.56,.64,1),box-shadow .32s ease,filter .28s ease;
    -webkit-user-select: none;
    user-select: none;
    -webkit-backdrop-filter: blur(16px) saturate(145%);
    backdrop-filter: blur(16px) saturate(145%);
}
.vip-badge::before {
    content: '';
    position: absolute;
    inset: 1px;
    z-index: -3;
    border-radius: inherit;
    background: var(--vip-panel);
    background-size: 240% 240%;
    animation: vipLuxuryFlow 9s ease-in-out infinite;
}
.vip-badge::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: -150%;
    left: -36%;
    width: 35%;
    height: 400%;
    transform: rotate(24deg);
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.05) 22%,rgba(255,255,255,.52) 50%,rgba(255,255,255,.08) 76%,transparent);
    mix-blend-mode: screen;
    animation: vipLuxurySweep 5.2s cubic-bezier(.4,0,.2,1) infinite;
    pointer-events: none;
}
.vip-badge:hover {
    transform: translateY(-3px) scale(1.015);
    filter: brightness(1.06) saturate(1.1);
}
.vip-badge:active { transform: scale(.97) !important; }
.vip-badge .vip-text { max-width: 132px; }

/* 描边流光 */
.vip-border-flow {
    position: absolute;
    inset: 2px;
    z-index: -2;
    border-radius: inherit;
    border: 1px solid rgba(255,255,255,.08);
    pointer-events: none;
}
.vip-border-flow::before,
.vip-border-flow::after {
    content: '';
    position: absolute;
    width: 52px;
    height: 1px;
    background: linear-gradient(90deg,transparent,var(--vip-accent-2),transparent);
    filter: drop-shadow(0 0 5px var(--vip-accent));
    animation: vipEdgeLight 4.8s ease-in-out infinite;
}
.vip-border-flow::before { left: 17%; top: -1px; }
.vip-border-flow::after { right: 14%; bottom: -1px; animation-delay: -2.4s; }

/* 徽记（SVG 所在圆形底） */
.vip-emblem {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    position: relative;
    z-index: 2;
    color: var(--vip-main);
    background:
        radial-gradient(circle at 30% 24%,rgba(255,255,255,.32),transparent 26%),
        radial-gradient(circle at 70% 78%,var(--vip-glow),transparent 42%),
        rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        inset 0 -6px 14px rgba(0,0,0,.16),
        0 5px 18px rgba(0,0,0,.25),
        0 0 20px var(--vip-glow);
    animation: vipEmblemFloat 4s ease-in-out infinite;
}
.vip-emblem::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px dashed var(--vip-accent-2);
    opacity: var(--vb-halo,.52);
    animation: vipHaloSpin 12s linear infinite;
}
.vip-emblem::after {
    content: '';
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,transparent 0 16%,var(--vip-accent) 18% 21%,transparent 23% 47%,var(--vip-accent-2) 49% 52%,transparent 54% 78%,var(--vip-accent) 80% 83%,transparent 85%);
    -webkit-mask: radial-gradient(circle,transparent 0 70%,#000 72% 76%,transparent 78%);
    mask: radial-gradient(circle,transparent 0 70%,#000 72% 76%,transparent 78%);
    opacity: var(--vb-ring,.7);
    animation: vipHaloSpin 8s linear infinite reverse;
}
.vip-emblem svg {
    width: 20px;
    height: 20px;
    display: block;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.32)) drop-shadow(0 0 6px var(--vip-glow));
}

/* 文本（等级 + 副标题） */
.vip-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    position: relative;
    z-index: 2;
    line-height: 1;
}
.vip-title {
    color: var(--vip-main);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,.3),0 0 12px var(--vip-glow);
}
.vip-sub {
    color: var(--vip-sub);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* 尾部（永久/会员标识） */
.vip-tail {
    min-width: 36px;
    height: 22px;
    margin-left: 0;
    padding: 0 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
    color: var(--vip-main);
    background: var(--vip-tail-bg);
    border: 1px solid var(--vip-tail-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16),0 3px 10px rgba(0,0,0,.12);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.vip-tail svg { width: 10px;height:10px;stroke:currentColor;filter:drop-shadow(0 0 4px var(--vip-glow)); }

/* 左右羽翼 */
.vip-wing {
    position: absolute;
    z-index: -1;
    top: 50%;
    width: 28px;
    height: 25px;
    opacity: .38;
    transform: translateY(-50%);
    filter: drop-shadow(0 0 7px var(--vip-glow));
    pointer-events: none;
}
.vip-wing-left { left: 6px; }
.vip-wing-right { right: 6px; transform: translateY(-50%) scaleX(-1); }
.vip-wing::before,
.vip-wing::after {
    content: '';
    position: absolute;
    left: 0;
    width: 22px;
    height: 6px;
    border-radius: 100% 0 100% 0;
    border-top: 1px solid var(--vip-wing);
    transform-origin: left center;
}
.vip-wing::before { top: 6px; transform: rotate(-18deg); }
.vip-wing::after { top: 17px; transform: rotate(18deg) scale(.82); }

/* 星光点缀 */
.vip-stars { position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;border-radius:inherit; }
.vip-stars i {
    position:absolute;
    width:3px;height:3px;
    border-radius:50%;
    background:var(--vip-accent-2);
    box-shadow:0 0 9px var(--vip-accent-2);
    opacity:var(--vb-spark,.25);
    animation:vipStarTwinkle 3s ease-in-out infinite;
}
.vip-stars i:nth-child(1){left:28%;top:14%;animation-delay:-.4s}
.vip-stars i:nth-child(2){left:48%;top:76%;width:2px;height:2px;animation-delay:-1.2s}
.vip-stars i:nth-child(3){right:12%;top:18%;width:4px;height:4px;animation-delay:-2s}
.vip-stars i:nth-child(4){right:25%;bottom:12%;width:2px;height:2px;animation-delay:-2.6s}
.vip-stars i:nth-child(5){left:18%;bottom:16%;width:2px;height:2px;animation-delay:-1.7s}

/* ---------- 关键帧 ---------- */
@keyframes vipLuxuryFlow {
    0%,100%{background-position:0% 50%}
    50%{background-position:100% 50%}
}
@keyframes vipLuxurySweep {
    0%{transform:translateX(-220%) rotate(24deg);opacity:0}
    12%{opacity:.18}
    35%{opacity:.82}
    52%{opacity:.1}
    100%{transform:translateX(560%) rotate(24deg);opacity:0}
}
@keyframes vipHaloSpin { to{transform:rotate(360deg)} }
@keyframes vipEmblemFloat {
    0%,100%{transform:translateY(0) scale(1)}
    50%{transform:translateY(-1.5px) scale(1.035)}
}
@keyframes vipEdgeLight {
    0%,100%{transform:translateX(-25px);opacity:.15}
    50%{transform:translateX(25px);opacity:1}
}
@keyframes vipStarTwinkle {
    0%,100%{transform:scale(.55);opacity:.18}
    50%{transform:scale(1.45);opacity:1}
}
@keyframes vipRoyalPulse {
    0%,100%{filter:brightness(1) saturate(1)}
    50%{filter:brightness(1.08) saturate(1.14)}
}
@keyframes vipBasicBreath {
    0%,100% { filter:brightness(1) saturate(1); }
    50%     { filter:brightness(1.035) saturate(1.08); }
}

/* ---------- 档位配色 ---------- */

/* 普通用户（灰色 · 劣质感） */
.vip-none {
    --vip-panel:
        radial-gradient(circle at 18% 22%,rgba(160,166,174,.10),transparent 28%),
        linear-gradient(135deg,#1f242a 0%,#262c33 38%,#2a3038 62%,#1d2228 100%);
    --vip-border:linear-gradient(115deg,rgba(154,161,171,.5) 0%,rgba(107,114,128,.22) 28%,rgba(255,255,255,.04) 52%,rgba(107,114,128,.18) 72%,rgba(154,161,171,.36) 100%);
    --vip-main:#b9bfc7;
    --vip-sub:rgba(160,166,174,.60);
    --vip-accent:#6b7280;
    --vip-accent-2:#9aa1ab;
    --vip-glow:rgba(120,126,135,.14);
    --vip-tail-bg:linear-gradient(135deg,rgba(160,166,174,.10),rgba(107,114,128,.07));
    --vip-tail-border:rgba(160,166,174,.20);
    --vip-wing:rgba(160,166,174,.20);
    min-height:44px;
    box-shadow:0 9px 26px rgba(0,0,0,.24),0 0 34px rgba(120,126,135,.08),inset 0 1px 0 rgba(255,255,255,.09);
    animation:vipBasicBreath 5.4s ease-in-out infinite;
    filter:saturate(.45) brightness(.92);
}
.vip-none::after { width:28%;opacity:.55;animation-duration:8.5s;background:linear-gradient(90deg,transparent,rgba(160,166,174,.04) 22%,rgba(160,166,174,.28) 50%,rgba(107,114,128,.05) 76%,transparent); }
.vip-none .vip-emblem { color:#b9bfc7;background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.18),transparent 25%),radial-gradient(circle at 70% 78%,rgba(120,126,135,.16),transparent 43%),linear-gradient(145deg,#3a4049,#2a3038);border-color:rgba(154,161,171,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -6px 14px rgba(0,0,0,.14),0 5px 18px rgba(0,0,0,.22),0 0 20px rgba(120,126,135,.08); }
.vip-none .vip-emblem::before { opacity:.18;animation-duration:20s; }
.vip-none .vip-emblem::after { opacity:.10;animation-duration:18s; }
.vip-none .vip-wing { opacity:.14; }
.vip-none .vip-stars { opacity:.4; }
.vip-none .vip-stars i { animation-duration:4.6s; }
.vip-none .vip-tail { color:#aab0b8; }
.vip-none:hover { box-shadow:0 14px 32px rgba(0,0,0,.28),0 0 42px rgba(120,126,135,.12),inset 0 1px 0 rgba(255,255,255,.12); }

/* VIP（翡翠绿） */
.vip-1 {
    --vip-panel: linear-gradient(135deg,#021b16 0%,#043d2d 24%,#07664c 52%,#0b8f68 72%,#064e3b 100%);
    --vip-border: linear-gradient(115deg,#a7f3d0 0%,#10b981 25%,#064e3b 52%,#6ee7b7 76%,#ecfdf5 100%);
    --vip-main:#ecfdf5;
    --vip-sub:rgba(209,250,229,.82);
    --vip-accent:#10b981;
    --vip-accent-2:#a7f3d0;
    --vip-glow:rgba(16,185,129,.28);
    --vip-tail-bg:rgba(236,253,245,.11);
    --vip-tail-border:rgba(167,243,208,.22);
    --vip-wing:rgba(167,243,208,.38);
    animation:vipRoyalPulse 4.8s ease-in-out infinite;
}
.vip-1:hover { box-shadow:0 17px 38px rgba(0,0,0,.3),0 0 46px rgba(16,185,129,.35),inset 0 1px 0 rgba(255,255,255,.18); }

/* VIP 永久 */
.vip-1-eternal {
    --vip-panel: linear-gradient(130deg,#011a14 0%,#064e3b 20%,#0f8f68 42%,#34d399 58%,#b58b35 72%,#0a5d46 88%,#022c22 100%);
    --vip-border: linear-gradient(115deg,#fef3c7 0%,#34d399 18%,#a7f3d0 38%,#fbbf24 56%,#6ee7b7 78%,#fff7d6 100%);
    --vip-main:#fffbe8;
    --vip-sub:rgba(220,252,231,.9);
    --vip-accent:#34d399;
    --vip-accent-2:#fde68a;
    --vip-glow:rgba(52,211,153,.32);
    --vip-tail-bg:linear-gradient(135deg,rgba(255,255,255,.15),rgba(251,191,36,.12));
    --vip-tail-border:rgba(253,230,138,.28);
    --vip-wing:rgba(253,230,138,.44);
    animation:vipRoyalPulse 4.2s ease-in-out infinite;
}
.vip-1-eternal::before { animation-duration:6.5s; }
.vip-1-eternal .vip-emblem { box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -7px 16px rgba(2,44,34,.32),0 6px 22px rgba(0,0,0,.25),0 0 26px rgba(52,211,153,.36),0 0 38px rgba(251,191,36,.12); }
.vip-1-eternal:hover { box-shadow:0 18px 42px rgba(0,0,0,.32),0 0 54px rgba(52,211,153,.38),0 0 76px rgba(251,191,36,.14); }

/* SVIP（皇家金） */
.vip-2 {
    --vip-panel: linear-gradient(132deg,#211506 0%,#5b2d08 20%,#9a4d0a 42%,#e89a15 59%,#f6c453 70%,#7c3f0a 88%,#2d1907 100%);
    --vip-border: linear-gradient(115deg,#fff7d6 0%,#fbbf24 18%,#b45309 40%,#fde68a 59%,#f59e0b 78%,#fffaf0 100%);
    --vip-main:#fff9df;
    --vip-sub:rgba(254,243,199,.9);
    --vip-accent:#f59e0b;
    --vip-accent-2:#fde68a;
    --vip-glow:rgba(245,158,11,.34);
    --vip-tail-bg:linear-gradient(135deg,rgba(255,255,255,.16),rgba(251,191,36,.12));
    --vip-tail-border:rgba(253,230,138,.3);
    --vip-wing:rgba(253,230,138,.5);
    animation:vipRoyalPulse 3.7s ease-in-out infinite;
}
.vip-2 .vip-emblem { box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -8px 17px rgba(120,53,15,.34),0 7px 24px rgba(0,0,0,.27),0 0 30px rgba(251,191,36,.38); }
.vip-2:hover { box-shadow:0 20px 44px rgba(0,0,0,.34),0 0 62px rgba(245,158,11,.42),0 0 88px rgba(251,191,36,.16); }

/* SVIP 永久（尊贵紫 · 你复制的档位） */
.vip-2-eternal {
    --vip-panel: linear-gradient(128deg,#1d0838 0%,#4c1d95 17%,#7c3aed 32%,#b63fd5 46%,#e9a51b 59%,#f9d96c 68%,#9a49e6 81%,#4c1d95 92%,#21083e 100%);
    --vip-border: linear-gradient(115deg,#fff7d6 0%,#fbbf24 14%,#d8b4fe 30%,#a855f7 45%,#fef3c7 60%,#c084fc 76%,#f59e0b 89%,#fffaf0 100%);
    --vip-main:#fffaf0;
    --vip-sub:rgba(254,249,195,.92);
    --vip-accent:#a855f7;
    --vip-accent-2:#fde68a;
    --vip-glow:rgba(168,85,247,.40);
    --vip-tail-bg:linear-gradient(135deg,rgba(255,255,255,.17),rgba(168,85,247,.13));
    --vip-tail-border:rgba(253,230,138,.32);
    --vip-wing:rgba(253,230,138,.56);
    min-height:49px;
    animation:vipRoyalPulse 3.2s ease-in-out infinite;
    box-shadow:0 13px 38px rgba(0,0,0,.34),0 0 66px rgba(168,85,247,.40),0 0 94px rgba(245,158,11,.18),inset 0 1px 0 rgba(255,255,255,.2);
}
.vip-2-eternal::before { animation-duration:5.2s; }
.vip-2-eternal::after { width:42%;animation-duration:4.1s;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06) 20%,rgba(255,249,195,.72) 50%,rgba(216,180,254,.12) 78%,transparent); }
.vip-2-eternal .vip-emblem { width:34px;height:34px;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -9px 20px rgba(76,29,149,.35),0 7px 26px rgba(0,0,0,.3),0 0 34px rgba(168,85,247,.52),0 0 48px rgba(251,191,36,.20); }
.vip-2-eternal .vip-emblem::before { animation-duration:8s;border-style:dashed;opacity:.85; }
.vip-2-eternal .vip-emblem::after { animation-duration:5.5s;opacity:.9; }
.vip-2-eternal .vip-title { font-size:11px;text-shadow:0 1px 2px rgba(0,0,0,.34),0 0 14px rgba(255,249,195,.36),0 0 22px rgba(168,85,247,.32); }
.vip-2-eternal:hover { box-shadow:0 22px 48px rgba(0,0,0,.38),0 0 82px rgba(168,85,247,.52),0 0 118px rgba(245,158,11,.24),inset 0 1px 0 rgba(255,255,255,.24); }

/* ---------- 日间主题微调 ---------- */
[data-theme="light"] .vip-badge { box-shadow:0 10px 28px rgba(16,24,32,.14),0 0 30px var(--vip-glow),inset 0 1px 0 rgba(255,255,255,.2); }
[data-theme="light"] .vip-none { --vip-panel:radial-gradient(circle at 18% 22%,rgba(120,126,135,.12),transparent 28%),linear-gradient(135deg,#f2f4f6,#e6e8eb 52%,#eef0f2);--vip-main:#6b7280;--vip-sub:#9aa1ab;--vip-glow:rgba(107,114,128,.10);filter:saturate(.5); }
[data-theme="light"] .vip-none .vip-tail { color:#5f6670;background:linear-gradient(135deg,rgba(107,114,128,.18),rgba(120,126,135,.10));border-color:rgba(120,126,135,.40);box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 2px 8px rgba(107,114,128,.10);text-shadow:none;font-weight:800; }

/* ---------- 小屏 ---------- */
@media (max-width:480px) {
    .vip-badge { gap:7px;min-height:42px;padding:6px 9px 6px 7px; }
    .vip-emblem { width:28px;height:28px; }
    .vip-emblem svg { width:18px;height:18px; }
    .vip-title { font-size:10px;letter-spacing:.13em; }
    .vip-sub { font-size:6px;letter-spacing:.10em; }
    .vip-tail { min-width:32px;height:20px;padding:0 6px;font-size:6px; }
    .vip-tail svg { width:9px;height:9px; }
    .vip-wing { width:22px;opacity:.22; }
    .vip-2-eternal { min-height:44px; }
    .vip-2-eternal .vip-emblem { width:30px;height:30px; }
    .vip-2-eternal .vip-title { font-size:10px; }
}

@media (prefers-reduced-motion:reduce) {
    .vip-badge,.vip-badge::before,.vip-badge::after,.vip-emblem,.vip-emblem::before,.vip-emblem::after,.vip-stars i,.vip-border-flow::before,.vip-border-flow::after { animation:none !important; }
}
/* 普通用户无尾部文字：保留等宽占位，使整体尺寸与其他徽章一致 */
.vip-tail-empty { background: transparent !important; border: 1px solid transparent !important; box-shadow: none !important; color: transparent !important; }