.login-decor {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.decor-slogan {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: 6px;
    font-size: 0.82rem;
}

.decor-abs {
    position: absolute;
    pointer-events: none;
}

.login-wrapper.theme-blue {
    background:
        radial-gradient(circle at 88% 12%, rgba(100, 180, 255, 0.18) 0%, transparent 42%),
        radial-gradient(circle at 12% 88%, rgba(60, 130, 220, 0.15) 0%, transparent 42%),
        #1e3c72;
}
.theme-blue .decor-ring {
    left: -80px;
    bottom: -80px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 1px solid rgba(120, 190, 255, 0.22);
}
.theme-blue .decor-ring::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 40px;
    right: 40px;
    bottom: 40px;
    border-radius: 50%;
    border: 1px solid rgba(120, 190, 255, 0.12);
}
.theme-blue .decor-dots-grid {
    top: 10%;
    right: 8%;
    width: 200px;
    height: 200px;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.18) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
}

.login-wrapper.theme-green {
    background:
        radial-gradient(circle at 88% 15%, rgba(120, 220, 150, 0.15) 0%, transparent 42%),
        radial-gradient(circle at 12% 85%, rgba(60, 180, 120, 0.12) 0%, transparent 40%),
        linear-gradient(160deg, #052e26 0%, #064e3b 50%, #065f46 100%);
}
.theme-green .leaf {
    width: 32px;
    height: 56px;
    background: linear-gradient(135deg, rgba(130, 220, 150, 0.5) 0%, rgba(50, 150, 90, 0.2) 100%);
    border-radius: 100% 0 100% 0;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}
.theme-green .leaf::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    width: 1px;
    height: calc(100% - 12px);
    background: rgba(255, 255, 255, 0.3);
    transform: translateX(-50%);
}
.theme-green .lf1 { top: 12%; left: 8%; transform: rotate(-30deg); }
.theme-green .lf2 { top: 22%; right: 10%; transform: rotate(40deg) scale(0.8); }
.theme-green .lf3 { bottom: 25%; left: 12%; transform: rotate(-50deg) scale(0.9); }
.theme-green .lf4 { bottom: 15%; right: 15%; transform: rotate(30deg); }

.login-wrapper.theme-purple {
    background:
        radial-gradient(circle at 75% 20%, rgba(200, 130, 255, 0.22) 0%, transparent 45%),
        radial-gradient(circle at 25% 80%, rgba(140, 90, 220, 0.15) 0%, transparent 45%),
        linear-gradient(160deg, #2e1065 0%, #4c1d95 50%, #5b21b6 100%);
}
.theme-purple .petal {
    width: 22px;
    height: 30px;
    background: radial-gradient(ellipse at 30% 30%, rgba(220, 170, 255, 0.55) 0%, rgba(150, 90, 220, 0.2) 100%);
    border-radius: 50% 0 50% 50%;
    filter: drop-shadow(0 3px 6px rgba(80, 0, 150, 0.3));
}
.theme-purple .pt1 { top: 15%; right: 12%; transform: rotate(45deg); }
.theme-purple .pt2 { top: 28%; right: 22%; transform: rotate(-30deg) scale(0.8); }
.theme-purple .pt3 { bottom: 25%; left: 12%; transform: rotate(120deg) scale(0.9); }
.theme-purple .sparkle {
    width: 6px;
    height: 6px;
    background: #f0d5ff;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(233, 213, 255, 0.9);
}
.theme-purple .sp1 { top: 22%; left: 15%; }
.theme-purple .sp2 { top: 42%; right: 18%; transform: scale(0.7); }
.theme-purple .sp3 { bottom: 35%; left: 25%; transform: scale(0.85); }

.login-wrapper.theme-dark {
    background:
        radial-gradient(circle at 78% 15%, rgba(140, 160, 220, 0.15) 0%, transparent 45%),
        radial-gradient(circle at 20% 80%, rgba(80, 100, 180, 0.1) 0%, transparent 45%),
        linear-gradient(160deg, #0f172a 0%, #1e293b 50%, #020617 100%);
}
.theme-dark .dark-moon {
    top: 10%;
    right: 12%;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #f5f7ff 0%, #d5dbf0 60%, #a8b0d4 100%);
    box-shadow: 0 0 30px rgba(220, 230, 255, 0.5), 0 0 60px rgba(200, 210, 255, 0.25);
}
.theme-dark .dark-stars {
    top: 20%;
    left: 10%;
    width: 3px;
    height: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow:
        40px -20px 0 #fff,
        120px 40px 0 #dbeafe,
        200px -60px 0 #fff,
        300px 80px 0 #dbeafe,
        80px 200px 0 #fff,
        180px 160px 0 #dbeafe,
        280px 220px 0 #fff;
}
.theme-dark .shooting-star {
    top: 25%;
    right: 20%;
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #fff 80%, transparent 100%);
    transform: rotate(-30deg);
    box-shadow: 0 0 6px #fff;
}

.login-wrapper.theme-orange {
    background:
        radial-gradient(circle at 82% 22%, rgba(255, 220, 130, 0.28) 0%, transparent 45%),
        radial-gradient(circle at 15% 85%, rgba(120, 40, 20, 0.2) 0%, transparent 45%),
        linear-gradient(160deg, #7c2d12 0%, #c2410c 50%, #ea580c 100%);
}
.theme-orange .sun-glow {
    top: 8%;
    right: 10%;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 235, 170, 0.4) 0%, rgba(255, 200, 100, 0.15) 40%, transparent 70%);
}
.theme-orange .bird {
    width: 20px;
    height: 20px;
    border-top: 2px solid rgba(255, 245, 220, 0.65);
    border-right: 2px solid rgba(255, 245, 220, 0.65);
    border-radius: 0 3px 0 0;
    transform: rotate(-45deg);
}
.theme-orange .b1 { top: 30%; right: 25%; }
.theme-orange .b2 { top: 38%; right: 18%; transform: rotate(-45deg) scale(0.7); }
.theme-orange .b3 { top: 25%; right: 35%; transform: rotate(-45deg) scale(0.85); }

.login-wrapper.theme-sky {
    background:
        radial-gradient(circle at 80% 15%, rgba(140, 200, 255, 0.25) 0%, transparent 45%),
        radial-gradient(circle at 15% 80%, rgba(40, 120, 200, 0.2) 0%, transparent 45%),
        linear-gradient(180deg, #075985 0%, #0369a1 50%, #0284c7 100%);
}
.theme-sky .cloud {
    width: 60px;
    height: 20px;
    background: rgba(255, 255, 255, 0.68);
    border-radius: 20px;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.1));
}
.theme-sky .cloud::before {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.68);
    border-radius: 50%;
    top: -15px;
    left: 8px;
}
.theme-sky .cloud::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    background: rgba(255, 255, 255, 0.68);
    border-radius: 50%;
    top: -10px;
    right: 8px;
}
.theme-sky .cl1 { top: 12%; left: 10%; }
.theme-sky .cl2 { top: 22%; right: 15%; transform: scale(0.75); }
.theme-sky .cl3 { bottom: 20%; left: 15%; transform: scale(0.9); }
.theme-sky .bird-sky {
    width: 16px;
    height: 16px;
    border-top: 2px solid rgba(255, 255, 255, 0.75);
    border-right: 2px solid rgba(255, 255, 255, 0.75);
    border-radius: 0 3px 0 0;
    transform: rotate(-45deg);
}
.theme-sky .bs1 { top: 35%; right: 25%; }
.theme-sky .bs2 { top: 42%; right: 18%; transform: rotate(-45deg) scale(0.7); }

.login-wrapper.theme-newyear {
    background:
        radial-gradient(circle at 82% 18%, rgba(255, 200, 120, 0.2) 0%, transparent 25%),
        radial-gradient(circle at 18% 75%, rgba(180, 120, 255, 0.15) 0%, transparent 30%),
        linear-gradient(160deg, #2e1065 0%, #6d28d9 45%, #4c1d95 100%);
}
.theme-newyear .decor-slogan {
    color: rgba(255, 220, 180, 0.55);
}
.theme-newyear .fw {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ffe066;
    box-shadow:
        0 -20px 0 #ffe066, 14px -14px 0 #ffb84d, 20px 0 0 #ff8c1a,
        14px 14px 0 #ffb84d, 0 20px 0 #ffe066, -14px 14px 0 #ffb84d,
        -20px 0 0 #ff8c1a, -14px -14px 0 #ffb84d,
        0 -40px 0 rgba(255, 224, 102, 0.6), 28px -28px 0 rgba(255, 184, 77, 0.6),
        40px 0 0 rgba(255, 140, 26, 0.6), 28px 28px 0 rgba(255, 184, 77, 0.6),
        0 40px 0 rgba(255, 224, 102, 0.6), -28px 28px 0 rgba(255, 184, 77, 0.6),
        -40px 0 0 rgba(255, 140, 26, 0.6), -28px -28px 0 rgba(255, 184, 77, 0.6);
}
.theme-newyear .fw.f1 { top: 20%; left: 12%; }
.theme-newyear .fw.f2 { top: 35%; right: 15%; }
.theme-newyear .fw.f3 { top: 12%; right: 30%; }
.theme-newyear .fw.f4 { bottom: 30%; left: 20%; }

.login-wrapper.theme-spring {
    background:
        radial-gradient(circle at 88% 15%, rgba(255, 220, 130, 0.2) 0%, transparent 25%),
        linear-gradient(160deg, #7f1d1d 0%, #b91c1c 45%, #991b1b 100%);
}
.theme-spring .decor-slogan {
    color: rgba(255, 220, 130, 0.55);
}
.theme-spring .lantern {
    width: 44px;
    height: 56px;
    border-radius: 50% 50% 45% 45% / 55% 55% 45% 45%;
    background: radial-gradient(ellipse at 30% 30%, #ff6b6b 0%, #dc2626 55%, #7f1d1d 100%);
    position: absolute;
    box-shadow:
        inset 0 0 8px rgba(255, 220, 130, 0.4),
        0 4px 12px rgba(220, 38, 38, 0.4);
}
.theme-spring .lantern::before,
.theme-spring .lantern::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    background: #fbbf24;
}
.theme-spring .lantern::before {
    top: -14px;
    height: 10px;
    border-radius: 3px;
}
.theme-spring .lantern::after {
    bottom: -10px;
    height: 12px;
    width: 4px;
    background: linear-gradient(180deg, #fbbf24 0%, #fbbf24 60%, #ef4444 60%, #ef4444 100%);
    border-radius: 2px;
}
.theme-spring .lantern.l1 { top: 15%; left: 10%; }
.theme-spring .lantern.l2 { top: 22%; right: 12%; transform: scale(0.85); }
.theme-spring .lantern.l3 { top: 42%; left: 8%; transform: scale(0.7); }

.login-wrapper.theme-dragonboat {
    background:
        radial-gradient(circle at 80% 20%, rgba(180, 230, 130, 0.15) 0%, transparent 30%),
        linear-gradient(160deg, #064e3b 0%, #047857 50%, #065f46 100%);
}
.theme-dragonboat .decor-slogan {
    color: rgba(200, 240, 180, 0.5);
}
.theme-dragonboat .zongzi {
    width: 0;
    height: 0;
    border-left: 24px solid transparent;
    border-right: 24px solid transparent;
    border-bottom: 42px solid #16a34a;
    position: absolute;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}
.theme-dragonboat .zongzi::after {
    content: '';
    position: absolute;
    top: 14px;
    left: -14px;
    width: 28px;
    height: 3px;
    background: #fde68a;
    border-radius: 2px;
    transform: rotate(-20deg);
    box-shadow: 0 6px 0 #fde68a;
}
.theme-dragonboat .zongzi.z1 { top: 18%; right: 12%; }
.theme-dragonboat .zongzi.z2 { top: 32%; right: 22%; transform: scale(0.7) rotate(15deg); }
.theme-dragonboat .zongzi.z3 { top: 45%; left: 12%; transform: scale(0.8) rotate(-15deg); }

.login-wrapper.theme-qixi {
    background:
        radial-gradient(circle at 70% 25%, rgba(255, 200, 230, 0.2) 0%, transparent 30%),
        radial-gradient(circle at 25% 80%, rgba(180, 140, 255, 0.15) 0%, transparent 35%),
        linear-gradient(160deg, #4a1d5c 0%, #7c2d8e 45%, #5b2166 100%);
}
.theme-qixi .decor-slogan {
    color: rgba(255, 220, 240, 0.55);
}
.theme-qixi .heart {
    width: 28px;
    height: 24px;
    position: absolute;
    transform: rotate(-45deg);
    background: #ff5c8d;
    box-shadow: 0 4px 10px rgba(255, 92, 141, 0.4);
}
.theme-qixi .heart::before,
.theme-qixi .heart::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 24px;
    border-radius: 50%;
    background: #ff5c8d;
}
.theme-qixi .heart::before { top: -12px; left: 0; }
.theme-qixi .heart::after { left: 14px; top: 0; }
.theme-qixi .heart.h1 { top: 20%; right: 15%; }
.theme-qixi .heart.h2 { top: 40%; left: 12%; transform: rotate(-45deg) scale(0.6); }
.theme-qixi .heart.h3 { top: 12%; left: 25%; transform: rotate(-45deg) scale(0.75); }

.login-wrapper.theme-teacher {
    background:
        radial-gradient(circle at 85% 20%, rgba(255, 200, 100, 0.2) 0%, transparent 28%),
        linear-gradient(160deg, #78350f 0%, #b45309 50%, #92400e 100%);
}
.theme-teacher .decor-slogan {
    color: rgba(255, 230, 180, 0.55);
}
.theme-teacher .flower {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fbbf24;
    position: absolute;
    box-shadow:
        -14px 0 0 #fbbf24,
        14px 0 0 #fbbf24,
        0 -14px 0 #fbbf24,
        0 14px 0 #fbbf24,
        -10px -10px 0 #fcd34d,
        10px -10px 0 #fcd34d,
        -10px 10px 0 #fcd34d,
        10px 10px 0 #fcd34d;
}
.theme-teacher .flower::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dc2626;
    z-index: 1;
}
.theme-teacher .flower.fl1 { top: 22%; right: 14%; }
.theme-teacher .flower.fl2 { top: 40%; right: 24%; transform: scale(0.65); }
.theme-teacher .flower.fl3 { top: 12%; left: 12%; transform: scale(0.75); }

.login-wrapper.theme-midautumn {
    background:
        radial-gradient(circle at 78% 18%, rgba(255, 230, 150, 0.15) 0%, transparent 30%),
        radial-gradient(circle at 20% 85%, rgba(100, 150, 255, 0.08) 0%, transparent 40%),
        linear-gradient(180deg, #08142e 0%, #142b5a 60%, #1e3a72 100%);
}
.theme-midautumn .decor-slogan {
    color: rgba(255, 230, 180, 0.4);
}
.theme-midautumn .decor-moon {
    position: absolute;
    top: 10%;
    right: 12%;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fffbe6 0%, #ffe9a8 55%, #f5cf6b 100%);
    box-shadow: 0 0 30px rgba(255, 230, 150, 0.55), 0 0 60px rgba(255, 220, 130, 0.3);
}
.theme-midautumn .decor-dots {
    position: absolute;
    top: 18%;
    left: 8%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow:
        50px 30px 0 #ffffff,
        110px -5px 0 #ffe9a8,
        30px 130px 0 #ffffff,
        170px 70px 0 #ffffff,
        240px 10px 0 #ffe9a8,
        300px 100px 0 #ffffff,
        70px 210px 0 #ffffff,
        190px 180px 0 #ffe9a8;
}

.login-wrapper.theme-national {
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 220, 130, 0.18) 0%, transparent 22%),
        radial-gradient(ellipse at 50% 105%, rgba(255, 200, 80, 0.28) 0%, transparent 60%),
        linear-gradient(160deg, #7f1d1d 0%, #c8102e 45%, #8b1a1a 100%);
}
.theme-national .decor-slogan {
    color: rgba(255, 220, 130, 0.5);
}
.theme-national .decor-flag-stars {
    position: absolute;
    top: 8%;
    right: 10%;
    width: 150px;
    height: 115px;
}
.theme-national .dstar {
    position: absolute;
    background: linear-gradient(135deg, #ffe066 0%, #f0b429 100%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.theme-national .dstar.big {
    width: 58px;
    height: 58px;
    top: 0;
    left: 0;
}
.theme-national .dstar.small {
    width: 20px;
    height: 20px;
}
.theme-national .dstar.s1 { top: 4px; left: 76px; }
.theme-national .dstar.s2 { top: 28px; left: 96px; }
.theme-national .dstar.s3 { top: 54px; left: 96px; }
.theme-national .dstar.s4 { top: 78px; left: 76px; }

.login-wrapper.theme-christmas {
    background:
        radial-gradient(circle at 80% 20%, rgba(255, 100, 100, 0.18) 0%, transparent 28%),
        linear-gradient(160deg, #14532d 0%, #166534 45%, #064e3b 100%);
}
.theme-christmas .decor-slogan {
    color: rgba(255, 220, 200, 0.55);
}
.theme-christmas .snow {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow:
        -14px 0 0 -4px #ffffff,
        14px 0 0 -4px #ffffff,
        0 -14px 0 -4px #ffffff,
        0 14px 0 -4px #ffffff,
        -10px -10px 0 -4px #ffffff,
        10px -10px 0 -4px #ffffff,
        -10px 10px 0 -4px #ffffff,
        10px 10px 0 -4px #ffffff;
}
.theme-christmas .snow.s1 { top: 15%; left: 12%; }
.theme-christmas .snow.s2 { top: 28%; right: 18%; transform: scale(0.7); }
.theme-christmas .snow.s3 { top: 45%; left: 20%; transform: scale(0.85); }
.theme-christmas .snow.s4 { top: 20%; right: 35%; transform: scale(0.6); }
.theme-christmas .tree {
    position: absolute;
    top: 10%;
    right: 12%;
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 90px solid #16a34a;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}
.theme-christmas .tree::after {
    content: '★';
    position: absolute;
    top: -78px;
    left: -10px;
    color: #fbbf24;
    font-size: 20px;
}

@media (max-width: 400px) {
    .theme-midautumn .decor-moon {
        width: 68px;
        height: 68px;
        top: 8%;
        right: 8%;
    }
    .theme-national .decor-flag-stars {
        width: 120px;
        height: 92px;
        top: 6%;
        right: 8%;
    }
    .theme-national .dstar.big {
        width: 46px;
        height: 46px;
    }
    .theme-national .dstar.small {
        width: 16px;
        height: 16px;
    }
    .theme-national .dstar.s1 { top: 3px; left: 60px; }
    .theme-national .dstar.s2 { top: 22px; left: 78px; }
    .theme-national .dstar.s3 { top: 43px; left: 78px; }
    .theme-national .dstar.s4 { top: 62px; left: 60px; }
    .theme-spring .lantern { transform: scale(0.75); }
    .theme-spring .lantern.l2 { transform: scale(0.6); }
    .theme-spring .lantern.l3 { transform: scale(0.55); }
    .theme-christmas .tree { transform: scale(0.7); transform-origin: top right; }
}

@media (min-width: 577px) {
    .decor-slogan {
        bottom: 24px;
    }
}

.skin-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.skin-panel-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: #f8fafc;
    border-radius: 14px;
    border: 1px solid #e9eef5;
}
.skin-preview-box {
    width: 76px;
    height: 76px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: background 0.2s;
}
.skin-preview-emoji {
    font-size: 2rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.skin-preview-info {
    flex: 1;
    min-width: 0;
}
.skin-preview-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a2b4a;
    margin-bottom: 4px;
}
.skin-preview-tip {
    font-size: 0.75rem;
    color: #94a3b8;
    letter-spacing: 0.5px;
}
.skin-panel-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
}
.skin-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.skin-group-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #212529;
    display: flex;
    align-items: center;
    gap: 6px;
}
.skin-group-title i {
    color: #0d6efd;
}
.skin-group-badge {
    font-size: 0.65rem;
    background: #dbeafe;
    color: #1e40af;
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: 500;
    margin-left: 4px;
}
.skin-group-tip {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: -4px;
}
.skin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 8px;
}
.skin-card-v2 {
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
    border: 2px solid transparent;
    transition: all 0.15s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    position: relative;
}
.skin-card-v2:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.skin-card-v2.active {
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15), 0 4px 12px rgba(13, 110, 253, 0.25);
}
.skin-card-v2-preview {
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.skin-card-v2-emoji {
    font-size: 1.6rem;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
}
.skin-card-v2-check {
    position: absolute;
    top: 4px;
    right: 4px;
    color: #fff;
    font-size: 1.1rem;
    display: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.skin-card-v2.active .skin-card-v2-check {
    display: block;
}
.skin-card-v2-name {
    padding: 6px 4px;
    font-size: 0.72rem;
    text-align: center;
    color: #64748b;
    font-weight: 500;
    background: #fff;
}
.skin-card-v2.active .skin-card-v2-name {
    color: #0d6efd;
    font-weight: 700;
}
@media (max-width: 576px) {
    .skin-panel-preview {
        padding: 10px;
        gap: 10px;
    }
    .skin-preview-box {
        width: 60px;
        height: 60px;
        border-radius: 12px;
    }
    .skin-preview-emoji {
        font-size: 1.6rem;
    }
    .skin-preview-name {
        font-size: 1rem;
    }
    .skin-panel-body {
        max-height: 55vh;
    }
    .skin-grid {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
        gap: 6px;
    }
    .skin-card-v2-preview {
        height: 54px;
    }
    .skin-card-v2-emoji {
        font-size: 1.4rem;
    }
    .skin-card-v2-name {
        font-size: 0.68rem;
        padding: 5px 2px;
    }
}