:root {
    --gold: #ffd266;
    --gold-soft: #ffe4a0;
    --pink: #ff5078;
    --pink-soft: #ff8fa3;
    --bg-deep: #141622;
    --bg-dark: #1a1d35;
    --card-bg-1: #201c2e;
    --card-bg-2: #2b243f;
    --text-primary: #fff;
    --text-secondary: #ddd;
    --text-muted: #888;
    --n-color: #b0b0b0;
    --r-color: #5b9bd5;
    --sr-color: #9b59b6;
    --ssr-color: #ff5078;
    --ur-color: #ffd266;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --shadow-card: 0 8px 32px rgba(0,0,0,0.4);
    --shadow-hover: 0 12px 48px rgba(0,0,0,0.5);
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    background: var(--bg-deep);
    color: var(--text-primary);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-font-smoothing: antialiased;
}

#app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main { flex: 1 0 auto; }

/* ============ 顶部导航 ============ */
.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    height: 100px;
    background: rgba(20, 22, 34, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 210, 102, 0.08);
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 36px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.logo-icon {
    height: 50px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    border-radius: 6px;
}

.logo-text {
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--gold), var(--pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-menu {
    display: flex;
    gap: 4px;
}

.nav-item {
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}

.nav-item:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    transform: scale(1.02);
}

.nav-item.active {
    color: var(--gold);
    background: rgba(255, 210, 102, 0.1);
    font-weight: 600;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.mode-switch {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    user-select: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.mode-label {
    font-size: 12px;
    color: var(--text-muted);
    padding: 2px 6px;
    border-radius: 4px;
    transition: var(--transition);
}

.mode-label.active {
    color: var(--gold);
    background: rgba(255, 210, 102, 0.12);
    font-weight: 600;
}

.mode-sep {
    color: var(--text-muted);
    font-size: 12px;
}

.user-area {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
}

/* ===== 登录状态驱动：一套类控制显隐，避免两套 DOM 同时露出 ===== */
.user-area.is-logged-out .user-avatar,
.user-area.is-logged-out .avatar-dropdown,
.user-area.is-logged-out #navSettings { display: none !important; }
.user-area.is-logged-out .auth-btns { display: flex !important; }
.user-area.is-logged-in .auth-btns { display: none !important; }
.user-area.is-logged-in .user-avatar { display: flex !important; }
.user-area.is-logged-in #navSettings { display: inline-block !important; }

.beans-display {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(255, 210, 102, 0.15), rgba(255, 80, 120, 0.1));
    border: 1px solid rgba(255, 210, 102, 0.25);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--gold);
}

.bean-icon {
    font-size: 16px;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--pink));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition);
}

.user-avatar:hover {
    transform: scale(1.06);
}
.avatar-dropdown {
    display: none;
    position: absolute;
    top: 46px;
    right: 0;
    min-width: 140px;
    background: #1a1d35;
    border: 1px solid rgba(255, 210, 102, 0.15);
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
    padding: 6px 0;
    z-index: 200;
}
.user-area.avatar-open .avatar-dropdown { display: block; }
.avatar-dd-item {
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 16px;
    font-size: 14px;
    color: var(--text-secondary, #c5c5d6);
    cursor: pointer;
    text-decoration: none;
    transition: .15s;
}
.avatar-dd-item:hover { background: rgba(255, 210, 102, 0.1); color: var(--gold, #ffd266); }

/* ============ 主内容 ============ */
.main-content {
    flex: 1;
    padding: 120px 32px 40px;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
}

.page {
    display: none;
    animation: fadeInUp 0.5s ease;
}

.page.active {
    display: block;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    gap: 16px;
    flex-wrap: wrap;
}

.page-title {
    font-size: 28px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--text-primary), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============ 按钮 ============ */
.btn {
    padding: 10px 24px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: var(--transition);
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn:hover {
    transform: scale(1.02);
    filter: brightness(1.1);
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background: linear-gradient(135deg, var(--gold), #ffb84d);
    color: #1a1d35;
    box-shadow: 0 4px 20px rgba(255, 210, 102, 0.35);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.btn-gold-outline {
    background: transparent;
    color: var(--gold, #ffd266);
    border: 1.5px solid var(--gold, #ffd266);
    box-shadow: 0 2px 12px rgba(255, 210, 102, 0.15);
    position: relative;
}
.btn-gold-outline:hover:not(:disabled) {
    background: rgba(255, 210, 102, 0.1);
    box-shadow: 0 4px 18px rgba(255, 210, 102, 0.3);
}

/* 按钮角标（×1 / ×10） */
.gacha-buttons .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.gacha-buttons .btn .btn-label { font-weight: 600; }
.gacha-buttons .btn .btn-badge {
    position: absolute;
    top: -8px; right: -8px;
    font-size: 10px;
    font-weight: 700;
    color: #3d2a08;
    background: linear-gradient(135deg, #ffe08a, #ffd266);
    padding: 2px 7px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    letter-spacing: 0.5px;
}
.gacha-buttons .btn-gold-outline .btn-badge {
    background: linear-gradient(135deg, #fff, #f0e6c8);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-danger {
    background: linear-gradient(135deg, var(--pink), #e04868);
    color: #fff;
}

.btn-sm {
    padding: 6px 14px;
    font-size: 12px;
}

.btn-lg {
    padding: 14px 36px;
    font-size: 16px;
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    filter: none;
}

/* ============ 卡牌样式 ============ */
.card-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.card-item .card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(160deg, var(--card-bg-1), var(--card-bg-2));
    box-shadow: var(--shadow-card);
    transition: var(--transition);
    user-select: none;
    aspect-ratio: 4 / 3;
}

.card-item .card-name-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.3;
    padding: 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
}

.card-rarity-n {
    border: 2px solid rgba(176, 176, 176, 0.4);
}

.card-rarity-r {
    border: 2px solid rgba(91, 155, 213, 0.5);
}

.card-rarity-sr {
    border: 2px solid rgba(155, 89, 182, 0.55);
}

.card-rarity-ssr {
    border: 2px solid rgba(255, 80, 120, 0.6);
    box-shadow: 0 8px 32px rgba(255, 80, 120, 0.2);
}

.card-rarity-ur {
    border: 2px solid var(--gold);
    box-shadow: 0 8px 40px rgba(255, 210, 102, 0.55), 0 0 30px rgba(255, 210, 102, 0.25);
}

/* 套装详情页：去掉稀有度彩色边框和发光阴影 */
.collection-grid.set-detail-mode .card-rarity-n,
.collection-grid.set-detail-mode .card-rarity-r,
.collection-grid.set-detail-mode .card-rarity-sr,
.collection-grid.set-detail-mode .card-rarity-ssr,
.collection-grid.set-detail-mode .card-rarity-ur {
    border: none !important;
    box-shadow: var(--shadow-card) !important;
}
/* 套装详情页：去掉 SSR/UR shimmer/glow 伪元素 */
.collection-grid.set-detail-mode .card-rarity-ssr .card-face-front::before,
.collection-grid.set-detail-mode .card-rarity-ssr .card-face-front::after,
.collection-grid.set-detail-mode .card-rarity-ur .card-face-front::before,
.collection-grid.set-detail-mode .card-rarity-ur .card-face-front::after {
    background: transparent !important;
    animation: none !important;
}

.card-rarity-ur .card-face-front::before,
.card-rarity-ssr .card-face-front::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 210, 102, 0.22), rgba(255, 210, 102, 0.03) 55%, transparent 70%);
    pointer-events: none;
    z-index: 1;
    animation: shimmer 5s ease-in-out infinite;
}

.card-rarity-ur .card-face-front::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 25%,
        rgba(255, 210, 102, 0.14) 45%,
        rgba(255, 240, 180, 0.32) 50%,
        rgba(255, 210, 102, 0.14) 55%,
        transparent 75%
    );
    background-size: 250% 100%;
    pointer-events: none;
    z-index: 1;
    animation: sweep 5s linear infinite;
}

.card-inner {
    position: relative;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.card-rarity {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.rarity-n {
    background: rgba(176, 176, 176, 0.2);
    color: #ccc;
}

.rarity-r {
    background: rgba(91, 155, 213, 0.2);
    color: #7cb3e5;
}

.rarity-sr {
    background: rgba(155, 89, 182, 0.22);
    color: #b983d6;
}

.rarity-ssr {
    background: rgba(255, 80, 120, 0.2);
    color: var(--pink-soft);
}

.rarity-ur {
    background: linear-gradient(135deg, rgba(255, 210, 102, 0.3), rgba(255, 184, 77, 0.2));
    color: var(--gold);
    box-shadow: 0 0 12px rgba(255, 210, 102, 0.4);
}

.card-num {
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'SF Mono', Consolas, monospace;
}

.card-count-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 6;
    padding: 3px 9px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.card.flipped .card-count-badge,
.card.flipped .card-notowned-badge,
.card.flipped .card-gifting-badge,
.card.flipped .card-gifted-badge,
.card.flipped .card-received-badge,
.card.flipped .card-wishing-badge {
    display: none;
}

.card-gifting-badge,
.card-gifted-badge,
.card-received-badge,
.card-wishing-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 8;
    padding: 4px 11px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

.card-gifting-badge {
    background: linear-gradient(135deg, #ff8fb1, #ff6b9d);
    animation: giftPulse 1.5s ease-in-out infinite;
}

.card-gifted-badge {
    background: linear-gradient(135deg, #888, #555);
}

.card-received-badge {
    background: linear-gradient(135deg, #7dd87d, #5cb85c);
}

.card-wishing-badge {
    background: linear-gradient(135deg, #74b9ff, #0984e3);
    animation: wishPulse 2s ease-in-out infinite;
}

@keyframes wishPulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(9, 132, 227, 0.4); }
    50% { box-shadow: 0 2px 16px rgba(9, 132, 227, 0.7); }
}

@keyframes giftPulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(255, 107, 157, 0.4); }
    50% { box-shadow: 0 2px 16px rgba(255, 107, 157, 0.7); }
}

.card-float-labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 7;
}

.card-float-rarity {
    position: absolute;
    top: 10px;
    left: 10px;
    pointer-events: auto;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    backdrop-filter: blur(4px);
}

.card-image-full {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, var(--card-bg-1), var(--card-bg-2));
}

.card-image-full img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    border-radius: inherit;
    transform: none;
}

.card-image {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--card-bg-2), #1a1d35);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    background: linear-gradient(135deg, var(--card-bg-2), #1a1d35);
    transform: none;
}

/* 未获得卡片：底层原图变浅（opacity）+ 上层灰白蒙版 + 顶层紫色标签 */
.card.card-notowned .card-face-front .card-image {
    opacity: 0.45;
}
.card-notowned-mask {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(240, 240, 245, 0.5);
    pointer-events: none;
}

.card-notowned-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 8;
    padding: 4px 11px;
    border-radius: 10px;
    background: linear-gradient(135deg, #9771e0, #6c4bb8);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(108, 75, 184, 0.45);
}

.card-goto-gacha {
    position: absolute;
    bottom: 10px;
    left: 6px;
    z-index: 8;
    padding: 5px 10px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff9a56, #ff6b35);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(255, 107, 53, 0.45);
    transition: transform 0.15s, box-shadow 0.15s;
    pointer-events: auto;
}

.card-goto-gacha:hover {
    transform: scale(1.06);
    box-shadow: 0 3px 14px rgba(255, 107, 53, 0.6);
}

.card-goto-gacha:active {
    transform: scale(0.96);
}

.card-goto-wish {
    position: absolute;
    bottom: 10px;
    right: 6px;
    z-index: 8;
    padding: 5px 10px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff7eb3, #ff5470);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(255, 84, 112, 0.45);
    transition: transform 0.15s, box-shadow 0.15s;
    pointer-events: auto;
}

.card-goto-wish:hover {
    transform: scale(1.06);
}

.card-goto-wish:active {
    transform: scale(0.96);
}

.card-goto-wish.card-wishing-disabled {
    background: linear-gradient(135deg, #8899aa, #556677);
    color: rgba(255,255,255,0.75);
    cursor: default;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    animation: wishBtnPulse 2.5s ease-in-out infinite;
}

@keyframes wishBtnPulse {
    0%, 100% { box-shadow: 0 2px 6px rgba(9, 132, 227, 0.25); }
    50% { box-shadow: 0 2px 14px rgba(9, 132, 227, 0.5); }
}

.card.flipped .card-goto-gacha,
.card.flipped .card-goto-wish {
    display: none;
}

.card-image-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.card-image-glow {
    position: absolute;
    inset: 0;
    opacity: 0.5;
}

.card-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-story {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.card-date {
    font-size: 11px;
    color: var(--text-muted);
}

.card-lock-icon {
    font-size: 14px;
}

.card-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 10px;
    background: rgba(255, 210, 102, 0.12);
    color: var(--gold);
}

.card-tag-gift {
    background: rgba(255, 80, 120, 0.15);
    color: var(--pink-soft);
}

/* ============ 卡册卡牌翻转 ============ */
.collection-grid .card,
.showcase-display .card {
    position: relative;
    cursor: pointer;
    height: 320px;
}

.collection-grid .card.flipped:hover,
.showcase-display .card.flipped:hover {
    transform: none;
}

.collection-grid .card-flip-wrap,
.showcase-display .card-flip-wrap {
    position: absolute;
    inset: 0;
    perspective: 1200px;
}

.collection-grid .card-flip-inner,
.showcase-display .card-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-style: preserve-3d;
}

.collection-grid .card.flipped .card-flip-inner,
.showcase-display .card.flipped .card-flip-inner {
    transform: rotateY(180deg);
}

.collection-grid .card-face,
.showcase-display .card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: inherit;
    overflow: hidden;
}

.collection-grid .card-face-front,
.showcase-display .card-face-front {
    transform: rotateY(0deg);
}

.collection-grid .card-face-back,
.showcase-display .card-face-back {
    transform: rotateY(180deg);
}

.card-back-face {
    position: relative;
    background-image: var(--card-back-img, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid rgba(255, 210, 102, 0.4);
    padding: 10px 41px 20px 41px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    overflow: hidden;
}
/* 小卡翻牌背面：按稀有度分图（fallback，JS 注入 inline style 时覆盖） */
.card-rarity-n  .card-back-face { background-image: url('/images/back/n_back.jpg'); }
.card-rarity-r  .card-back-face { background-image: url('/images/back/r_back.jpg'); }
.card-rarity-sr .card-back-face { background-image: url('/images/back/sr_back.jpg'); }
.card-rarity-ssr .card-back-face { background-image: url('/images/back/ssr_back.jpg'); }
.card-rarity-ur .card-back-face { background-image: url('/images/back/ur_back.jpg'); }

.card-back-face::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(27, 24, 39, 0.75), rgba(32, 28, 46, 0.85));
    z-index: 0;
    pointer-events: none;
}
.card-back-face::after {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(255, 210, 102, 0.2);
    border-radius: 8px;
    z-index: 0;
    pointer-events: none;
}

.card-back-face > * {
    position: relative;
    z-index: 1;
}

.card-back-header {
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 210, 102, 0.25);
}

.card-back-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 1px;
}

.card-back-subtitle {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

.card-back-meta {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: flex-end;
    margin-top: -30px;
    padding-bottom: 4px;
}

.card-back-meta-item {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    line-height: 1.54;
    padding: 2px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.card-back-meta-item .label {
    color: var(--text-muted);
}

.card-back-meta-item .value {
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
    max-width: 60%;
}

.card-back-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 210, 102, 0.3), transparent);
    margin: 2px 0;
}

.card-back-actions {
    display: flex;
    gap: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 210, 102, 0.15);
}

.card-back-actions button {
    flex: 1;
    padding: 5px 4px;
    font-size: 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 210, 102, 0.3);
    background: rgba(255, 210, 102, 0.08);
    color: var(--gold);
    cursor: pointer;
    transition: all 0.2s;
}

.card-back-actions button:hover {
    background: rgba(255, 210, 102, 0.15);
    border-color: var(--gold);
}

.card-back-actions .btn-lock {
    border-color: rgba(155, 89, 182, 0.4);
    color: #b983d6;
    background: rgba(155, 89, 182, 0.08);
}

.card-back-actions .btn-gift {
    border-color: rgba(255, 80, 120, 0.4);
    color: var(--pink-soft);
    background: rgba(255, 80, 120, 0.08);
}

.card-back-actions .btn-gift:hover:not(:disabled) {
    background: rgba(255, 80, 120, 0.15);
    border-color: var(--pink-soft);
}

.card-back-actions button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.card-back-actions .btn-close {
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-muted);
    background: transparent;
}

.card-back-actions .btn-close:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* 以下 CSS 属于已废弃的 page-home（今日心卡，home.js），2026-09-14 整页移除：
   .home-grid .home-featured-card .card-3d-wrap .card-3d-inner(.flipped)
   .card-face .card-front .card-back .card-back-inner
   .card-back-header .card-back-title（home 版本，collection 版本见 L773/L779）
   .card-back-message .card-back-from .card-back-history(.h4)
   保留 .history-item/.history-time/.history-text（collection.js 详情弹层也用）
   保留 .card-face 全局定义 —— collection-grid 作用域有自己的 L741 版本 */

/* 信息面板（home 专属，因 info-row/section-title 等被全局共用故保留） */

.card-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.card-actions .btn {
    min-width: 100px;
}

/* 以下已废弃：.home-info-panel .info-section（含 h3） .home-recommend .recommend-list —— 均只被 page-home 使用，2026-09-14 随 home.js 一起移除
   保留 .info-row / .info-label / .info-value / .section-title —— 被 collection/social/tasks 等 10+ 页面共用 */

/* ============ 卡册页 ============ */
.collection-stats {
    display: flex;
    gap: 24px;
    font-size: 13px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--gold);
}

.stat-label {
    font-size: 11px;
    color: var(--text-muted);
}

.filter-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    align-items: center;
}

.filter-group {
    display: flex;
    gap: 6px;
}

.filter-btn {
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition);
}

.filter-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.filter-btn.active {
    background: linear-gradient(135deg, var(--gold), #ffb84d);
    color: #1a1d35;
    font-weight: 600;
    border-color: transparent;
}

.collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 240px);
    gap: 20px;
    justify-content: center;
}

/* ============ 盲盒页 ============ */
.page.active#page-gacha {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 抽卡页套装选择器 */
/* ============ 盲盒抽卡页 整体 ============ */
.page-gacha{max-width:1180px;margin:0 auto;padding-top:8px}
.gacha-hero{text-align:left;margin-bottom:15px}
.gacha-hero .page-title{margin-bottom:6px;background:linear-gradient(135deg,#ffd97a,#ffb84d);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.gacha-subtitle{font-size:13px;color:var(--text-muted);line-height:1.6}

/* 卡池选择器：默认 3 列自适应，宽屏自动 4 列 */
.gacha-set-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:15px}
.gacha-set-empty{width:100%;text-align:center;color:var(--text-muted);padding:32px;font-size:14px;background:rgba(255,255,255,.03);border-radius:14px;border:1px dashed rgba(255,255,255,.08)}
.gacha-set-selector .set-card{width:100%;height:auto!important;position:relative;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px 14px 14px;cursor:pointer;transition:all .25s ease;user-select:none;display:flex;flex-direction:column;gap:10px;box-sizing:border-box}
.gacha-set-selector .set-card:hover{border-color:rgba(255,255,255,.18);transform:translateY(-2px)}
.gacha-set-selector .set-card.active{border-color:var(--gold);background:linear-gradient(180deg,rgba(255,210,102,.08),rgba(255,210,102,.02));box-shadow:0 0 28px rgba(255,210,102,.16)}
.gacha-set-selector .set-cover{width:225px;height:auto;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,var(--card-bg-1,#2a1f3d),var(--card-bg-2,#1a1428));box-shadow:0 4px 18px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;font-size:44px;border:1px solid rgba(255,255,255,.08);transition:all .25s;position:relative;margin:0 auto 4px}
.gacha-set-selector .set-card.active .set-cover{border-color:var(--gold);box-shadow:0 6px 36px rgba(255,210,102,.45),0 0 20px rgba(255,210,102,.2)}
.gacha-set-selector .set-cover-img{width:100%;height:auto;display:block}
.gacha-set-selector .set-info{text-align:center}
.gacha-set-selector .set-name{display:none}
.gacha-set-selector .set-code{display:none}
.gacha-set-selector .set-desc{display:none}
.gacha-set-selector .set-remaining{display:block;font-size:12px;color:var(--gold);padding:0;border-radius:0;text-align:center;font-weight:500}
.gacha-set-selector .set-remaining b{color:#fff;font-weight:700}
/* hover 切卡提示 */
.gacha-set-selector .set-switch-hint{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:12px;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0));padding:14px 0 8px;opacity:0;transform:translateY(4px);transition:all .2s;pointer-events:none;border-radius:0 0 12px 12px}
.gacha-set-selector .set-card:hover .set-switch-hint{opacity:1;transform:translateY(0)}
/* 选中角标 */
.gacha-set-selector .set-active-badge{position:absolute;top:8px;right:8px;background:linear-gradient(135deg,#ffd266,#ff9f40);color:#3a2708;font-size:11px;font-weight:800;padding:3px 10px;border-radius:10px;box-shadow:0 2px 10px rgba(255,210,102,.55);z-index:2}
.gacha-set-selector .set-card.active .set-switch-hint{display:none}

/* 概率条 + 幸运豆显示 同一行 */
.gacha-rates-bar{display:flex;align-items:center;justify-content:center;gap:48px;flex-wrap:wrap;margin-bottom:24px}
.gacha-bean-area{display:flex;align-items:center;gap:14px;flex-shrink:0;font-size:12px;color:var(--gold);font-weight:600;background:transparent;padding:3px 10px;border-radius:8px}
.gacha-pity-hint{flex-shrink:0;font-size:12px;font-weight:600;color:rgba(255,140,80,.95);background:rgba(255,140,80,.12);border:1px solid rgba(255,140,80,.35);padding:3px 10px;border-radius:8px}
.gacha-pity-hint b{color:#ff9955;font-size:14px;margin:0 2px;font-weight:800}
.gacha-pity-hint.is-urgent{color:#ff5e6e;background:rgba(255,94,110,.12);border-color:rgba(255,94,110,.4)}
.gacha-pity-hint.is-urgent b{color:#ff5e6e}
.gacha-pity-hint.is-ready{color:#fff;background:linear-gradient(90deg,#ff5e6e,#ff8a3d);border-color:transparent}
.gacha-pity-hint.is-ready b{color:#fff}

/* 概率条 —— 左对齐 */
.gacha-rates{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:18px;margin-bottom:0;font-size:13px;color:var(--text-muted)}
.gacha-rates::before{content:'卡池概率';color:var(--text);font-weight:600;margin-right:4px;letter-spacing:1px}
.rate-item{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-secondary)}
.rate-color{width:10px;height:10px;border-radius:2px;display:inline-block}
.rate-color.n{background:var(--n-color)}
.rate-color.r{background:var(--r-color)}
.rate-color.sr{background:var(--sr-color)}
.rate-color.ssr{background:var(--ssr-color)}
.rate-color.ur{background:var(--ur-color);box-shadow:0 0 8px var(--ur-color)}
.rate-item b{color:var(--text);font-weight:600;margin-left:2px}

/* 抽卡操作区 —— 卡片化分区 */
.gacha-actions{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px;margin-bottom:5px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gacha-actions .btn{height:48px;border-radius:14px;font-size:16px;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.gacha-actions .btn .btn-label{font-size:17px;font-weight:700}
.gacha-actions .btn .btn-cost{font-size:11px;font-weight:500;opacity:.85}
.gacha-actions .btn-ten{position:relative;width:100%}
.gacha-actions .btn-with-badge{position:relative}
.gacha-actions .btn-with-badge .btn-ten{width:100%}
.gacha-actions .btn-badge{position:absolute;top:-8px;right:12px;background:linear-gradient(90deg,#ff5e6e,#ff8a3d);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:10px;white-space:nowrap;z-index:3;box-shadow:0 2px 8px rgba(255,94,110,.5);letter-spacing:.5px}
.gacha-set-stats{display:flex;flex-direction:column;gap:6px;padding:8px 12px;background:rgba(255,210,102,.06);border:1px solid rgba(255,210,102,.18);border-radius:10px}
.set-stats-summary{font-size:13px;color:var(--text-primary,#eaeaf0)}
.set-stats-summary b{color:var(--gold,#ffd266);font-size:15px}
.set-stats-rarities{display:flex;flex-wrap:wrap;gap:8px}
.rarity-stat{font-size:11px;padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-family:'Courier New',monospace;letter-spacing:.5px}
.rarity-stat-n{color:#bbb}
.rarity-stat-r{color:#6db3ff;border-color:rgba(109,179,255,.3)}
.rarity-stat-sr{color:#b784ff;border-color:rgba(183,132,255,.3)}
.rarity-stat-ssr{color:#ff7eb9;border-color:rgba(255,126,185,.3)}
.rarity-stat-ur{color:#ffd266;border-color:rgba(255,210,102,.3);box-shadow:0 0 6px rgba(255,210,102,.2)}
.gacha-notice-inline{font-size:13px;color:var(--text);margin:-12px 0 18px;text-align:center}
.gacha-notice{font-size:12px;font-weight:bold;color:var(--text-muted,#8a8a9a);text-align:left;line-height:1.7;padding:8px 12px;background:rgba(255,255,255,.03);border-radius:8px;border:1px dashed rgba(255,255,255,.08)}

/* gacha 响应式 */
@media (min-width:1400px){
  .gacha-set-selector{grid-template-columns:repeat(4,1fr)}
  .gacha-set-selector .set-cover{width:100%;max-width:240px}
}
@media (min-width:1700px){
  .gacha-set-selector .set-cover{max-width:270px}
}
@media (max-width:1100px){
  .gacha-set-selector .set-cover{width:100%;max-width:210px}
}
@media (max-width:900px){
  .gacha-set-selector{grid-template-columns:repeat(2,1fr)}
  .gacha-set-selector .set-cover{width:100%;max-width:225px}
  .gacha-set-selector .set-card{height:auto}
}
@media (max-width:600px){
  .gacha-set-selector{grid-template-columns:1fr}
  .gacha-set-selector .set-cover{width:270px;max-width:none}
  .gacha-set-selector .set-card{height:auto}
  .gacha-actions{grid-template-columns:1fr}
  .gacha-rates-bar{flex-direction:column;align-items:flex-start;gap:10px}
  .gacha-rates{flex:1;width:100%;justify-content:flex-start;gap:12px;font-size:12px}
  .gacha-hero .page-title{font-size:24px}
}

.gacha-result {
    margin-top: 0;
    min-height: 200px;
}

.gacha-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 240px);
    gap: 20px;
    justify-content: center;
}

.gacha-result-grid .card {
    background: linear-gradient(160deg, var(--card-bg-1), var(--card-bg-2));
    box-shadow: var(--shadow-card);
}

/* 本次会话抽卡历史 */
.gacha-session-history {
    margin-top: 28px;
    padding: 18px 20px;
    background: rgba(255,255,255,0.03);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
}

/* ====== 抽卡揭示卡面：新的/重复 角标 + 换豆按钮 ====== */
.reveal-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    border-radius: 999px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.reveal-badge-new {
    background: linear-gradient(135deg, #2fbf71, #27a35f);
    color: #fff;
}
.reveal-badge-dup {
    background: linear-gradient(135deg, #ff9a3d, #f07818);
    color: #fff;
}
.reveal-badge.is-btn {
    pointer-events: auto;
    border: 1px solid rgba(255,255,255,.55);
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 3px 14px rgba(240,120,24,.55);
    transition: transform .12s ease, box-shadow .12s ease;
}
.reveal-badge.is-btn:hover {
    box-shadow: 0 4px 18px rgba(255,160,40,.75);
}
.reveal-badge.is-btn:active {
    transform: scale(.92);
}

/* ====== 抽卡揭示完成后：重复卡汇总提示框（一键换豆） ====== */
.blind-box-recycle-tip {
    position: fixed;
    left: 50%;
    bottom: 90px;
    transform: translateX(-50%);
    z-index: 3600;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255,154,61,.92), rgba(240,120,24,.92));
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 6px 24px rgba(240,120,24,.45);
    backdrop-filter: blur(6px);
    animation: brtSlideUp .35s ease both;
    white-space: nowrap;
}
@keyframes brtSlideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.brt-text b { font-size: 16px; font-weight: 700; }
.brt-btn {
    border: none;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #ffd266, #f0a832);
    box-shadow: 0 2px 10px rgba(240,120,24,.5);
    cursor: pointer;
    font-family: inherit;
    transition: transform .12s ease, box-shadow .12s ease;
}
.brt-btn:hover { box-shadow: 0 4px 16px rgba(240,120,24,.7); }
.brt-btn:active { transform: scale(.93); }
.brt-btn:disabled { opacity: .7; cursor: default; }

/* ====== 本次抽卡记录：套装收集进度条 ====== */
.gacha-progress-card {
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(168,85,247,.14), rgba(255,210,102,.08));
    border: 1px solid rgba(168,85,247,.3);
}
.gp-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #e0e0e0);
    margin-bottom: 10px;
}
.gp-hl {
    color: #ffd266;
    font-size: 16px;
}
.gp-sub {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary, #9ca3af);
    margin-left: 8px;
}
.gp-sub.gp-done {
    color: #22c55e;
}
.gp-bar-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.gp-bar {
    flex: 1;
    height: 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    overflow: hidden;
}
.gp-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #a855f7, #ffd266);
    transition: width 1.2s ease;
}
.gp-num {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #e0e0e0);
    min-width: 52px;
    text-align: right;
    letter-spacing: .5px;
}
.gacha-session-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #e0e0e0);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.gacha-session-count {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted, #888);
    padding: 2px 10px;
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
}
.gacha-session-scroll {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}
.gacha-session-card {
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gacha-session-card:hover {
    transform: translateY(-3px);
}
.gacha-session-card-inner {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    background: #1a1a22;
}
.gacha-session-card-inner img {
    width: 100%;
    height: auto;
    transform: none;
}
.gacha-session-rarity {
    position: absolute;
    bottom: 6px;
    right: 6px;
    font-size: 14px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    color: #000;
    z-index: 2;
}
.gacha-session-count-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 13px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 12px;
    background: #ff4757;
    color: #fff;
    z-index: 3;
    box-shadow: 0 2px 6px rgba(255,71,87,0.5);
    line-height: 1.2;
}
.gacha-session-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary, #e0e0e0);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.gsn-rarity {
    font-size: 11px;
    font-weight: 700;
    color: #000;
    padding: 1px 7px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* ============ 抽卡后卡册：紧凑版（1行9列） ============ */
.gacha-checklist-compact {
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
    gap: 6px !important;
}
.gacha-checklist-compact .card-item { width: 100%; }
.gacha-checklist-compact .card {
    height: auto !important;
    aspect-ratio: 3 / 4;
}
.gacha-checklist-compact .card-face { position: absolute; inset: 0; }
.gacha-checklist-compact .card-float-labels { transform: scale(0.8); transform-origin: top right; }
.gacha-checklist-compact .card-notowned-badge { font-size: 10px; padding: 2px 6px; }
.gacha-checklist-compact .card-count-badge { font-size: 10px; }

/* 抽卡结果卡册：顶部中间的"新/重复"标签 */
.card-top-badge {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 900;
    padding: 2px 10px;
    border-radius: 10px;
    z-index: 3;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    line-height: 1.2;
}
.card-top-new {
    background: linear-gradient(135deg, #23d5ab, #11998e);
    color: #fff;
    animation: topBadgePop 0.5s cubic-bezier(.34,1.56,.64,1) both,
               topBadgePulse 1.4s ease-in-out .5s infinite;
}
.card-top-dup {
    background: linear-gradient(135deg, #f7971e, #ffd200);
    color: #fff;
    animation: topBadgePop 0.5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes topBadgePop {
    0%   { transform: translateX(-50%) scale(0); opacity: 0; }
    60%  { transform: translateX(-50%) scale(1.2); opacity: 1; }
    100% { transform: translateX(-50%) scale(1); }
}
@keyframes topBadgePulse {
    0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,.4), 0 0 8px rgba(255,78,80,.6); }
    50%      { box-shadow: 0 2px 6px rgba(0,0,0,.4), 0 0 18px rgba(255,78,80,1); }
}

/* ============ 抽卡后卡册：抽到的卡高亮发光 ============ */
/* 优先级 hack：set-detail-mode 里有 border:none !important，这里用更高 specificity 覆盖 */
.collection-grid.set-detail-mode .card.card-just-drawn.card-glow-pulse,
.collection-grid.set-detail-mode .card.card-just-drawn {
    border: 3px solid #ffd266 !important;
    box-shadow: 0 0 0 2px rgba(255,210,102,.8), 0 0 20px 6px rgba(255,149,61,.7) !important;
    animation: none !important;  /* 先清掉，后面 rarity 专属规则重新赋 */
}
.card-just-drawn {
    position: relative;
    z-index: 5;
    transform-origin: center center;
    animation: drawnPop .5s cubic-bezier(.34,1.56,.64,1) both;
    border: 3px solid #ffd266 !important;
}
@keyframes drawnPop {
    0%   { transform: scale(0.5); opacity: 0; }
    50%  { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); }
}

/* ====== 新卡翻牌动画：初始背面+灰色，翻后正面+发光 ====== */
.collection-grid.set-detail-mode .card.flipped .card-flip-inner {
    transform: rotateY(180deg);
}
.collection-grid.set-detail-mode .card-face-back {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.collection-grid.set-detail-mode .card-face-back .card-back-face {
    border-radius: inherit;
    border: 2px solid rgba(255,210,102,0.5);
}
.collection-grid.set-detail-mode .card.card-dim {
    filter: grayscale(1) brightness(0.3);
    transition: filter 0.35s ease-out;
}
.collection-grid.set-detail-mode .card.card-dim.flipped {
    filter: none;
}
.collection-grid.set-detail-mode .card.card-dim.flipped .card-face-front {
    filter: grayscale(1) brightness(0.3);
}
.collection-grid.set-detail-mode .card.flipped .card-back-face::before {
    opacity: 0.15;
}
/* 基础发光 + 边框闪烁 */
.card-just-drawn.card-glow-pulse {
    animation: drawnPop .5s cubic-bezier(.34,1.56,.64,1) both,
               drawnGlowBase 1.2s ease-in-out .5s infinite,
               drawnBorderBlink 0.6s linear .5s infinite;
}
@keyframes drawnGlowBase {
    0%, 100% { box-shadow: 0 0 0 2px rgba(255, 210, 102, 0.8),
                          0 0 20px 6px rgba(255, 149, 61, 0.7),
                          0 0 40px 12px rgba(255, 149, 61, 0.4); }
    50%      { box-shadow: 0 0 0 5px rgba(255, 210, 102, 0.4),
                          0 0 40px 14px rgba(255, 149, 61, 1),
                          0 0 80px 24px rgba(255, 149, 61, 0.6); }
}
@keyframes drawnBorderBlink {
    0%, 100% { border-color: #ffd266 !important; }
    50%      { border-color: #ffffff !important; }
}
/* 不同稀有度发光配色 — 用完整选择器覆盖 set-detail-mode 的 !important */
/* 发光放大 + 呼吸缩放（scale 1 → 1.12 → 1） */
.collection-grid.set-detail-mode .card.card-just-drawn.card-rarity-ur.card-glow-pulse  { border-color:#ffd266 !important; animation: drawnGlowUr  1s ease-in-out 0s infinite, drawnBorderBlinkUr  .5s linear 0s infinite, drawnBreath 1.6s ease-in-out 0s infinite !important; }
.collection-grid.set-detail-mode .card.card-just-drawn.card-rarity-ssr.card-glow-pulse { border-color:#ff5078 !important; animation: drawnGlowSsr 1s ease-in-out 0s infinite, drawnBorderBlinkSsr .5s linear 0s infinite, drawnBreath 1.6s ease-in-out 0s infinite !important; }
.collection-grid.set-detail-mode .card.card-just-drawn.card-rarity-sr.card-glow-pulse  { border-color:#9b59b6 !important; animation: drawnGlowSr  1s ease-in-out 0s infinite, drawnBorderBlinkSr  .5s linear 0s infinite, drawnBreath 1.6s ease-in-out 0s infinite !important; }
.collection-grid.set-detail-mode .card.card-just-drawn.card-rarity-r.card-glow-pulse   { border-color:#5b9bd5 !important; animation: drawnGlowR   1s ease-in-out 0s infinite, drawnBorderBlinkR   .5s linear 0s infinite, drawnBreath 1.6s ease-in-out 0s infinite !important; }
.collection-grid.set-detail-mode .card.card-just-drawn.card-rarity-n.card-glow-pulse   { border-color:#b0b0b0 !important; animation: drawnGlowN   1s ease-in-out 0s infinite, drawnBorderBlinkN   .5s linear 0s infinite, drawnBreath 1.6s ease-in-out 0s infinite !important; }

@keyframes drawnBreath {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

@keyframes drawnGlowUr  { 0%,100%{box-shadow:0 0 0 3px rgba(255,210,102,.95),0 0 40px 14px rgba(255,180,40,.8),0 0 80px 28px rgba(255,180,40,.5);} 50%{box-shadow:0 0 0 8px rgba(255,210,102,.4),0 0 80px 30px rgba(255,180,40,1),0 0 160px 56px rgba(255,180,40,.75);} }
@keyframes drawnGlowSsr { 0%,100%{box-shadow:0 0 0 3px rgba(255,80,120,.95),0 0 34px 12px rgba(255,80,120,.75),0 0 64px 22px rgba(255,80,120,.4);} 50%{box-shadow:0 0 0 7px rgba(255,80,120,.35),0 0 70px 26px rgba(255,80,120,1),0 0 140px 48px rgba(255,80,120,.65);} }
@keyframes drawnGlowSr  { 0%,100%{box-shadow:0 0 0 3px rgba(155,89,182,.95),0 0 30px 10px rgba(155,89,182,.7),0 0 56px 18px rgba(155,89,182,.35);} 50%{box-shadow:0 0 0 7px rgba(155,89,182,.35),0 0 62px 22px rgba(155,89,182,.98),0 0 124px 42px rgba(155,89,182,.6);} }
@keyframes drawnGlowR   { 0%,100%{box-shadow:0 0 0 3px rgba(91,155,213,.95),0 0 26px 8px rgba(91,155,213,.65),0 0 48px 14px rgba(91,155,213,.3);} 50%{box-shadow:0 0 0 6px rgba(91,155,213,.35),0 0 52px 18px rgba(91,155,213,.95),0 0 100px 36px rgba(91,155,213,.55);} }
@keyframes drawnGlowN   { 0%,100%{box-shadow:0 0 0 3px rgba(220,220,220,.9),0 0 18px 6px rgba(180,180,180,.6);} 50%{box-shadow:0 0 0 5px rgba(220,220,220,.35),0 0 36px 12px rgba(180,180,180,.9);} }

@keyframes drawnBorderBlinkUr  { 0%,100%{border-color:#ffd266 !important;} 50%{border-color:#ffffff !important;} }
@keyframes drawnBorderBlinkSsr { 0%,100%{border-color:#ff5078 !important;} 50%{border-color:#ffffff !important;} }
@keyframes drawnBorderBlinkSr  { 0%,100%{border-color:#9b59b6 !important;} 50%{border-color:#ffffff !important;} }
@keyframes drawnBorderBlinkR   { 0%,100%{border-color:#5b9bd5 !important;} 50%{border-color:#ffffff !important;} }
@keyframes drawnBorderBlinkN   { 0%,100%{border-color:#b0b0b0 !important;} 50%{border-color:#ffffff !important;} }

/* ============ 社交广场 ============ */
.social-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    width: fit-content;
}

.tab-btn {
    padding: 8px 20px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.tab-btn:hover {
    color: var(--text-secondary);
}

.tab-btn.active {
    background: linear-gradient(135deg, var(--gold), #ffb84d);
    color: #1a1d35;
    font-weight: 700;
}

.tab-btn.hidden {
    display: none;
}

.social-content {
    min-height: 400px;
}

.rank-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.rank-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: var(--transition);
}

.rank-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(4px);
}

.rank-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.rank-item.top-1 .rank-number { background: linear-gradient(135deg, #ffd266, #ffb84d); color: #1a1d35; }
.rank-item.top-2 .rank-number { background: linear-gradient(135deg, #e8e8e8, #bbb); color: #1a1d35; }
.rank-item.top-3 .rank-number { background: linear-gradient(135deg, #cd7f32, #b87333); color: #1a1d35; }

.rank-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pink), var(--gold));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
}

.rank-info {
    flex: 1;
    min-width: 0;
}

.rank-name {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank-meta {
    font-size: 12px;
    color: var(--text-muted);
}

.paza-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.plaza-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    padding: 20px;
    transition: var(--transition);
}

.plaza-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 210, 102, 0.2);
}

.plaza-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}

.plaza-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pink), var(--gold));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

.plaza-user {
    font-size: 13px;
    font-weight: 600;
}

.plaza-time {
    font-size: 11px;
    color: var(--text-muted);
}

/* 求卡广场：卡牌与卡册同款同尺寸，文字在卡牌下方 */
.plaza-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 240px);
    gap: 30px;
    justify-content: center;
}

.plaza-wish-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.plaza-wish-card .card-item {
    display: flex;
    flex-direction: column;
    cursor: default;
}

.plaza-wish-card .card-item .card {
    cursor: default;
    height: 320px;
    position: relative;
    border: none !important;
    box-shadow: none !important;
}

.plaza-wish-card .card-flip-wrap {
    position: absolute;
    inset: 0;
    perspective: 1200px;
}

.plaza-wish-card .card-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.plaza-wish-card .card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: inherit;
    overflow: hidden;
}

.plaza-wish-card .card-face-front {
    transform: rotateY(0deg);
}

.plaza-wish-card .card-image-full {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background: #1a1a2e;
}

.plaza-wish-card .card-image-full img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: inherit;
    transform: none;
    display: block;
}

.plaza-card-info {
    text-align: center;
}

.plaza-card-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plaza-set-name {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plaza-wish {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ============ 邀请好友卡片 ============ */
.invite-card {
    background: linear-gradient(135deg, rgba(255,180,60,0.15), rgba(255,120,80,0.08));
    border: 1px solid rgba(255, 180, 60, 0.35);
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 22px;
    box-shadow: 0 2px 12px rgba(255, 160, 60, 0.08);
}
.invite-card.invite-guest { opacity: 0.9; }
.invite-head {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.invite-emoji {
    font-size: 32px; line-height: 1;
    flex-shrink: 0;
}
.invite-title-wrap { flex: 1; min-width: 200px; }
.invite-title {
    font-size: 18px; font-weight: 800; margin: 0 0 4px; letter-spacing: 1px;
    background: linear-gradient(180deg, #ffd27a, #ff9f3f);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.invite-sub { font-size: 13px; color: #bbb; margin: 0; }
.invite-sub b { color: #ffc266; font-weight: 700; }
.invite-stats {
    display: flex; gap: 18px;
    padding: 6px 14px;
    background: rgba(0,0,0,0.25);
    border-radius: 10px;
}
.invite-stat-item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.invite-stat-item b {
    font-size: 20px; font-weight: 800; color: #ffc266; line-height: 1;
}
.invite-stat-item span { font-size: 11px; color: #999; }
.invite-login-btn {
    padding: 8px 20px; border: none; border-radius: 22px;
    background: linear-gradient(180deg, #ffb44a, #ff7a2f);
    color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
    box-shadow: 0 2px 8px rgba(255, 140, 40, 0.3);
    transition: transform 0.15s;
}
.invite-login-btn:hover { transform: translateY(-1px); }
.invite-body { margin-top: 14px; }
.invite-link-row {
    display: flex; gap: 10px; align-items: stretch;
    flex-wrap: wrap;
}
.invite-link {
    flex: 1; min-width: 240px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255, 180, 60, 0.25);
    border-radius: 8px;
    padding: 10px 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    display: flex; flex-direction: column; gap: 2px;
    overflow: hidden;
}
.invite-link-label {
    font-size: 10px; color: #888; letter-spacing: 1px;
    font-family: inherit;
}
.invite-link-url {
    color: #ffd27a; word-break: break-all;
}
.invite-copy-btn {
    padding: 0 22px;
    background: linear-gradient(180deg, #ffb44a, #ff7a2f);
    color: #fff; border: none; border-radius: 8px;
    font-size: 13px; font-weight: 700; cursor: pointer;
    box-shadow: 0 2px 6px rgba(255, 140, 40, 0.3);
    transition: transform 0.15s;
    white-space: nowrap;
}
.invite-copy-btn:hover { transform: translateY(-1px); }
.invite-recent {
    margin-top: 10px;
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.invite-recent-label {
    font-size: 12px; color: #888;
}
.invite-recent-tag {
    font-size: 11px; color: #ddd;
    background: rgba(255, 180, 60, 0.12);
    border: 1px solid rgba(255, 180, 60, 0.25);
    padding: 3px 10px; border-radius: 12px;
}

/* ============ 今日赠卡统计摘要 ============ */
.gift-summary {
    display: flex;
    gap: 12px;
    margin-bottom: 22px;
}
.gift-summary-item {
    flex: 1;
    background: linear-gradient(135deg, rgba(180,120,255,0.12), rgba(255,120,180,0.08));
    border: 1px solid rgba(180, 120, 255, 0.3);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.gift-summary-emoji { font-size: 28px; }
.lucky-bean-icon {
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.lucky-bean-icon    { width: 18px; height: 18px; margin-right: 4px; }
.lucky-bean-icon-sm { width: 16px; height: 16px; }
.lucky-bean-icon-md { width: 24px; height: 24px; }
.lucky-bean-icon-lg { width: 28px; height: 28px; }
.lucky-bean-icon-xl { width: 48px; height: 48px; }
.gift-summary-num { font-size: 22px; font-weight: 800; color: var(--gold, #ffd266); line-height: 1.1; }
.gift-summary-label { font-size: 12px; color: var(--text-muted, #888); margin-top: 2px; }

/* ============ 任务中心 三栏（v2） ============ */
.task-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px 40px; }
.task-pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:22px; padding-top:10px; }
.task-title { font-size:26px; font-weight:800; letter-spacing:2px; background:linear-gradient(180deg,#fff2d2,var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; margin:0; }
.task-headright { display:flex; align-items:center; gap:14px; }
.task-countdown { font-size:13px; color:var(--text-muted); }
.task-countdown b { color:var(--text-secondary); font-variant-numeric:tabular-nums; }
.task-btn-claimall { background:linear-gradient(180deg,#ffe4a0,var(--gold)); color:#3a2708; border:none; font-weight:800; font-size:14px; padding:10px 22px; border-radius:10px; cursor:pointer; box-shadow:0 0 18px rgba(255,210,102,.35); transition:transform .12s, box-shadow .12s; }
.task-btn-claimall:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 0 26px rgba(255,210,102,.55); }
.task-btn-claimall:disabled { background:var(--card-bg-2); color:var(--text-muted); cursor:not-allowed; box-shadow:none; border:1px solid var(--border); }

.task-cols { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.task-col { background:linear-gradient(180deg,var(--card-bg-2),var(--bg-primary)); border:1px solid var(--border); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
.task-colhead { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.02); }
.task-dot { width:8px; height:8px; border-radius:50%; background:var(--gold); }
.task-dot.dot-daily { background:var(--gold); }
.task-dot.dot-weekly { background:#5d8f72; }
.task-dot.dot-ach { background:#c0492f; }
.task-colhead h2 { font-size:16px; font-weight:700; letter-spacing:1px; margin:0; white-space:nowrap; }
.task-coltag { margin-left:auto; font-size:11px; color:var(--text-muted); border:1px solid var(--border); padding:3px 9px; border-radius:6px; }
.task-colbody { padding:14px; display:flex; flex-direction:column; gap:10px; flex:1; }

.task-row { background:var(--card-bg-2); border:1px solid transparent; border-radius:12px; padding:14px 16px; display:flex; align-items:center; gap:14px; transition:border-color .15s,background .15s; }
.task-row:hover { border-color:#33454f; background:#212c33; }
.task-row.ach { background:transparent; }
.task-info { flex:1; min-width:0; }
.task-name { font-size:14px; font-weight:600; margin-bottom:4px; }
.task-cur { color:var(--gold); font-size:12px; margin-left:4px; }
.task-desc { font-size:12px; color:var(--text-muted); line-height:1.5; }

.task-reward { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.task-reward .bean-icon { width:16px; height:16px; border-radius:50%; background:url('/images/luckybean.png') center/contain no-repeat; }
.bean-num { font-size:14px; font-weight:700; color:var(--gold); font-variant-numeric:tabular-nums; }

.task-btn { flex-shrink:0; min-width:76px; padding:8px 14px; border-radius:9px; font-size:13px; font-weight:700; cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--text-secondary); transition:.15s; }
.task-btn:hover { color:var(--text-primary); border-color:#465a65; }
.task-btn.claim { background:linear-gradient(180deg,#ffe4a0,var(--gold)); color:#3a2708; border-color:transparent; border-radius:20px; padding:9px 22px; animation:task-breathe 2s ease-in-out infinite; }
.task-btn.claim:hover { box-shadow:0 0 20px rgba(255,210,102,.6); transform:translateY(-1px); }
@keyframes task-breathe { 0%,100%{box-shadow:0 0 8px rgba(255,210,102,.35)} 50%{box-shadow:0 0 18px rgba(255,210,102,.65)} }
.task-btn.done { background:transparent; color:var(--text-muted); border-color:transparent; cursor:default; }
.task-btn.done:hover { color:var(--text-muted); border-color:transparent; }

.task-badge { flex-shrink:0; display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:#ffd9a0; background:rgba(255,210,102,.12); border:1px solid rgba(255,210,102,.35); padding:7px 12px; border-radius:9px; }
.task-badge.locked { color:var(--text-muted); background:transparent; border-color:var(--border); font-weight:600; }

.task-login-prompt { text-align:center; padding:80px 20px; }

/* 通用未登录引导卡（卡册 / 奖励中心 / 个人中心 等页面复用） */
.guest-card {
    max-width: 480px;
    margin: 60px auto;
    padding: 48px 32px;
    text-align: center;
    background: linear-gradient(180deg, rgba(255, 210, 102, 0.06), transparent);
    border: 1px solid rgba(255, 210, 102, 0.15);
    border-radius: 16px;
}
.guest-emoji { font-size: 56px; margin-bottom: 16px; }
.guest-title { font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.guest-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; line-height: 1.6; }
.guest-btn { padding: 10px 32px; }

/* ============ 橱窗 ============ */
.showcase-display {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
    padding: 32px;
    background: linear-gradient(180deg, rgba(255, 210, 102, 0.03), transparent);
    border: 1px solid rgba(255, 210, 102, 0.1);
    border-radius: var(--radius-xl);
    margin-bottom: 32px;
}

.showcase-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.showcase-stat {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
}

.showcase-stat-value {
    font-size: 28px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--gold), var(--pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.showcase-stat-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ============ 弹窗 ============ */
.modal-container {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 20px;
}

.modal-container.show {
    display: flex;
}

/* ============ 等级升级庆祝弹窗 ============ */
.lvl-modal {
    position: relative;
    width: 100%;
    max-width: 380px;
    padding: 48px 30px 30px;
    border-radius: 24px;
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(255,210,102,.28), transparent 60%),
        radial-gradient(100% 70% at 50% 110%, rgba(155,89,182,.22), transparent 60%),
        linear-gradient(165deg, #2b2150 0%, #1a1430 55%, #140f26 100%);
    border: 1px solid rgba(255,210,102,.35);
    box-shadow: 0 30px 90px rgba(0,0,0,.65), inset 0 0 60px rgba(255,190,80,.1);
    animation: lvl-pop .6s cubic-bezier(.2,1.3,.4,1) both;
}
.lvl-modal::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 60px; left: -60px;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent);
    animation: lvl-sheen 3.2s .6s ease-in-out infinite;
}
@keyframes lvl-pop {
    0% { opacity: 0; transform: scale(.7) translateY(30px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes lvl-sheen {
    0% { left: -60px; }
    55%, 100% { left: 110%; }
}

/* 旋转光芒 */
.lvl-rays {
    position: absolute;
    top: -150px; left: 50%;
    width: 420px; height: 420px;
    transform: translateX(-50%);
    border-radius: 50%;
    pointer-events: none;
    background: conic-gradient(
        rgba(255,210,102,.2) 0deg, transparent 16deg,
        rgba(255,210,102,.2) 30deg, transparent 46deg,
        rgba(255,210,102,.16) 60deg, transparent 76deg,
        rgba(255,210,102,.16) 90deg, transparent 106deg,
        rgba(255,210,102,.2) 120deg, transparent 136deg,
        rgba(255,210,102,.2) 150deg, transparent 166deg,
        rgba(255,210,102,.16) 180deg, transparent 196deg,
        rgba(255,210,102,.16) 210deg, transparent 226deg,
        rgba(255,210,102,.2) 240deg, transparent 256deg,
        rgba(255,210,102,.2) 270deg, transparent 286deg,
        rgba(255,210,102,.16) 300deg, transparent 316deg,
        rgba(255,210,102,.16) 330deg, transparent 346deg);
    -webkit-mask-image: radial-gradient(circle, #000 28%, transparent 70%);
    mask-image: radial-gradient(circle, #000 28%, transparent 70%);
    animation: lvl-spin 14s linear infinite;
}
@keyframes lvl-spin {
    to { transform: translateX(-50%) rotate(360deg); }
}

/* 闪烁星点 */
.lvl-sparks { position: absolute; inset: 0; pointer-events: none; }
.lvl-spark {
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #ffe9a0;
    box-shadow: 0 0 10px 2px rgba(255,210,102,.8);
    opacity: 0;
    animation: lvl-twinkle 2.2s ease-in-out infinite;
}
@keyframes lvl-twinkle {
    0%, 100% { opacity: 0; transform: scale(.4); }
    50% { opacity: 1; transform: scale(1); }
}

/* 等级徽章 */
.lvl-emblem {
    position: relative;
    width: 108px; height: 108px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 32% 28%, #ffe9a8, #f5b73d 55%, #b97313 100%);
    border: 3px solid rgba(255,240,190,.85);
    box-shadow: 0 0 0 6px rgba(255,210,102,.15), 0 0 34px rgba(255,190,80,.75), 0 10px 26px rgba(0,0,0,.5);
    animation: lvl-emblem-in .7s .12s both, lvl-float 3s 1s ease-in-out infinite;
}
@keyframes lvl-emblem-in {
    from { transform: scale(0) rotate(-30deg); }
    to { transform: scale(1) rotate(0); }
}
@keyframes lvl-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.lvl-emblem-l { font-size: 24px; font-weight: 800; color: #7a4a08; align-self: flex-start; margin-top: 16px; }
.lvl-emblem-num { font-size: 52px; font-weight: 900; color: #5a3506; line-height: 1; text-shadow: 0 1px 0 rgba(255,255,255,.4); }

.lvl-kicker {
    position: relative;
    font-size: 13px;
    letter-spacing: 3px;
    color: #ffd266;
    font-weight: 700;
    margin-bottom: 12px;
}
.lvl-transition {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 6px;
}
.lvl-from { font-size: 22px; font-weight: 800; color: rgba(255,255,255,.35); text-decoration: line-through; }
.lvl-arrow { color: #ffd266; font-size: 18px; animation: lvl-nudge 1.2s ease-in-out infinite; }
@keyframes lvl-nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}
.lvl-to {
    font-size: 34px; font-weight: 900;
    background: linear-gradient(180deg, #fff3c4, #ffc94d 60%, #e88f1a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 8px rgba(255,180,60,.5));
}
.lvl-name {
    position: relative;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin: 4px 0 18px;
    text-shadow: 0 2px 12px rgba(255,190,80,.35);
}

/* 奖励清单 */
.lvl-rewards {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
}
.lvl-reward {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.09);
    animation: lvl-reward-in .5s both;
}
.lvl-reward:nth-child(1) { animation-delay: .35s; }
.lvl-reward:nth-child(2) { animation-delay: .5s; }
@keyframes lvl-reward-in {
    from { opacity: 0; transform: translateX(-14px); }
    to { opacity: 1; transform: none; }
}
.lvl-reward-ico { font-size: 22px; }
.lvl-reward-text { font-size: 14px; color: rgba(255,255,255,.75); }
.lvl-reward-text b { color: #ffd266; font-size: 15px; margin-left: 6px; }

/* 确认按钮 */
.lvl-btn {
    position: relative;
    width: 100%;
    padding: 13px 0;
    border: none;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 800;
    color: #4a2c05;
    cursor: pointer;
    background: linear-gradient(180deg, #ffe28a, #ffb93e 55%, #f0931c);
    box-shadow: 0 8px 22px rgba(255,170,50,.4), inset 0 1px 0 rgba(255,255,255,.6);
    transition: transform .15s, box-shadow .15s;
}
.lvl-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255,170,50,.5), inset 0 1px 0 rgba(255,255,255,.6);
}
.lvl-btn:active { transform: translateY(0); }

.modal {
    background: linear-gradient(160deg, var(--bg-dark), var(--card-bg-1));
    border: 1px solid rgba(255, 210, 102, 0.2);
    border-radius: var(--radius-xl);
    padding: 32px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
}

/* ============ 卡牌回收（多选模式） ============ */
.coll-recycle-btn {
    background: linear-gradient(135deg, #ff6f4b, #ff3366);
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .2s;
}
.coll-recycle-btn:hover { transform: scale(1.05); }
.coll-recycle-btn.cancel {
    background: linear-gradient(135deg, #6c7a92, #4a5568);
}

/* 过滤按钮 */
.coll-filter-btn {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    padding: 6px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.coll-filter-btn:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.35);
}
.coll-filter-btn.active {
    background: linear-gradient(135deg, #ff6f4b, #ff3366);
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(255,51,102,0.4);
}

.coll-recycle-hint {
    background: rgba(255, 210, 102, 0.08);
    border: 1px solid rgba(255, 210, 102, 0.25);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--text-secondary, #d0d0d8);
    margin-bottom: 8px;
}
.coll-rarity-group {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 4px;
    grid-column: 1 / -1;
}
.coll-rarity-title {
    font-size: 14px;
    font-weight: 700;
}
.coll-rarity-title.rarity-ur { color: var(--gold, #ffd266); }
.coll-rarity-title.rarity-ssr { color: var(--pink-soft, #ff7fa0); }
.coll-rarity-title.rarity-sr { color: #b983d6; }
.coll-rarity-title.rarity-r { color: #4fc3f7; }
.coll-rarity-title.rarity-n { color: #aaaaaa; }
.coll-rarity-tip {
    font-size: 11px;
    color: var(--text-muted, #888);
    font-style: italic;
}

/* 回收：按套装分组 */
.coll-recycle-set-section {
    margin-top: 8px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 10px 12px 12px;
}
.coll-recycle-set-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 4px 10px;
    border-bottom: 1px dashed rgba(255,255,255,0.08);
    margin-bottom: 10px;
}
.coll-recycle-set-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.coll-recycle-set-sub {
    font-size: 11px;
    color: var(--text-muted);
}
.coll-recycle-set-toggle {
    margin-left: auto;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.03);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
    transition: .12s;
}
.coll-recycle-set-toggle:hover { border-color: var(--gold); color: var(--gold); }
.coll-recycle-set-toggle.cancel {
    margin-left: 4px;
    border-color: rgba(255,255,255,0.08);
    color: var(--text-muted);
}
.coll-recycle-set-toggle.cancel:hover { border-color: rgba(255,255,255,0.2); color: var(--text-secondary); }

/* 回收专用卡片：和最近抽中风格一致 */
.coll-recycle-set-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}
.coll-recycle-item {
    text-align: center;
    cursor: pointer;
    transition: transform .15s;
    position: relative;
}
.coll-recycle-item:hover { transform: translateY(-2px); }
.coll-recycle-item.selected .crc-img {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}
.coll-recycle-item .crc-img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin-bottom: 5px;
}
.coll-recycle-item .crc-img img {
    width: 100%;
    height: auto;
    display: block;
}
.coll-recycle-item .crc-rarity {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 4px;
    color: #1a1206;
    letter-spacing: .5px;
}
.coll-recycle-item .crc-rarity.rarity-n { background: #aaa; color: #222; }
.coll-recycle-item .crc-rarity.rarity-r { background: #4fc3f7; color: #033; }
.coll-recycle-item .crc-name {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.coll-recycle-check {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffd266;
    color: #222;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
.coll-recycle-blocked-tip {
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    font-size: 10px;
    color: #ff6b6b;
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    padding: 2px 0;
    border-radius: 0 0 4px 4px;
    z-index: 4;
}

/* 底部固定操作栏 */
.coll-recycle-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(20, 22, 34, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    z-index: 1000;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}
.coll-recycle-bar-left { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.coll-recycle-bar-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary, #d0d0d8);
}
.coll-recycle-bar-stats b { color: #fff; font-size: 15px; }
.coll-recycle-bar-stats .badge-n {
    background: rgba(170, 170, 170, 0.2);
    color: #aaa;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}
.coll-recycle-bar-stats .badge-r {
    background: rgba(79, 195, 247, 0.15);
    color: #4fc3f7;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}
.coll-recycle-bar-stats .badge-recycle {
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}
.badge-rarity-n   { background: rgba(170,170,170,.2);  color: #bbb; }
.badge-rarity-r   { background: rgba(79,195,247,.15);  color: #4fc3f7; }
.badge-rarity-sr  { background: rgba(155,89,182,.2);   color: #c77dff; }
.badge-rarity-ssr { background: rgba(255,80,120,.18);  color: #ff6b8f; }
.badge-rarity-ur  { background: rgba(255,210,102,.18); color: #ffd266; }
.coll-recycle-bar-plan {
    font-size: 14px;
    color: var(--text-primary, #fff);
}
.coll-recycle-bar-plan b { color: var(--gold, #ffd266); font-weight: 700; }
.coll-recycle-bar-remain {
    font-size: 12px;
    color: var(--text-muted, #888);
    font-style: italic;
}
.coll-recycle-bar-right { display: flex; gap: 10px; flex-shrink: 0; }

/* 给页面底部留点空间不被 bar 挡住 */
body.selection-mode { padding-bottom: 80px; }

.modal-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    text-align: center;
    background: linear-gradient(135deg, var(--gold), var(--pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.modal-body {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 24px;
}

.modal-actions {
    display: flex !important;
    gap: 12px;
    justify-content: center !important;
    align-items: center;
    width: 100% !important;
    flex: 0 0 auto;
}
.modal-actions > .btn,
.modal-actions > button {
    margin: 0 auto !important;
    float: none !important;
}

.modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    border: none;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    margin-left: auto;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
}

/* 协议弹窗（宽版、白纸黑字清晰可读） */
.modal.modal-policy {
    max-width: 760px;
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 32px 36px;
    color: #1f2937;
    border-radius: 16px;
}
.modal.modal-policy .modal-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
    background: none;
    -webkit-text-fill-color: inherit;
    background-clip: initial;
    color: #111827;
}
.modal.modal-policy .modal-body {
    font-size: 14px;
    color: #374151;
    line-height: 1.9;
    margin-bottom: 20px;
    padding-right: 4px;
}
.modal.modal-policy .modal-body h3 {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin: 24px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f0f0f0;
}
.modal.modal-policy .modal-body p {
    margin: 6px 0;
}
.modal.modal-policy .modal-body strong {
    color: #111827;
    font-weight: 600;
}
.modal.modal-policy .modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #f3f4f6;
    color: #6b7280;
}
.modal.modal-policy .modal-close:hover {
    background: #e5e7eb;
    color: #111827;
}

/* 赠送弹窗 */
.gift-friend-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    max-height: 200px;
    overflow-y: auto;
}

.gift-friend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    border: 2px solid transparent;
}

.gift-friend-item:hover {
    background: rgba(255, 255, 255, 0.07);
}

.gift-friend-item.selected {
    border-color: var(--gold);
    background: rgba(255, 210, 102, 0.1);
}

.gift-friend-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pink), var(--gold));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

.gift-friend-name {
    font-size: 14px;
    font-weight: 500;
}

.gift-message-input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
    transition: var(--transition);
}

.gift-message-input:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(255, 210, 102, 0.05);
}

.gift-message-input::placeholder {
    color: var(--text-muted);
}

/* ============ Toast ============ */
.toast-container {
    position: fixed;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast {
    padding: 10px 14px 10px 20px;
    background: rgba(26, 29, 53, 0.97);
    border: 1px solid rgba(255, 210, 102, 0.3);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    animation: toastIn 0.4s ease;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
    max-width: 420px;
    cursor: default;
}
.toast .toast-msg { flex: 1; }
.toast .toast-close {
    flex-shrink: 0;
    width: 24px; height: 24px;
    border: none;
    background: rgba(255,255,255,0.08);
    color: var(--text-muted, #aaa);
    font-size: 11px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.toast .toast-close:hover {
    background: rgba(255,80,120,0.25);
    color: var(--pink-soft, #ff8fb1);
}

.toast.success {
    border-color: rgba(255, 210, 102, 0.5);
    color: var(--gold);
}

.toast.error {
    border-color: rgba(255, 80, 120, 0.5);
    color: var(--pink-soft);
}

/* ============ 屏幕中央大提示 ============ */
.toast-center {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 48px;
    background: linear-gradient(135deg, rgba(26, 29, 53, 0.98), rgba(42, 47, 80, 0.98));
    border: 2px solid rgba(255, 210, 102, 0.55);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 210, 102, 0.15);
    z-index: 10001;
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-width: 260px;
    text-align: center;
}
.toast-center-show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}
.toast-center-bean {
    font-size: 56px;
    line-height: 1;
    animation: beanSpin 1s ease;
}
.toast-center-msg {
    font-size: 20px;
    font-weight: 700;
    color: var(--gold);
    white-space: nowrap;
}
@keyframes beanSpin {
    0% { transform: scale(0) rotate(-30deg); opacity: 0; }
    50% { transform: scale(1.3) rotate(10deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ============ 加豆提示 BeanToast（仿小程序 bean-toast 组件） ============ */
.bean-toast-mask {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: none;
}
.bean-toast-mask .btoast-row {
    display: flex;
    align-items: center;
    padding: 18px 32px;
    border-radius: 32px;
    background: linear-gradient(135deg, #2a1f3d 0%, #1a1424 100%);
    box-shadow:
        0 0 0 2px #ffd266 inset,
        0 0 24px rgba(255,210,102,0.45),
        0 8px 28px rgba(0,0,0,0.55);
    transform: translateY(20px) scale(0.75);
    opacity: 0;
}
.bean-toast-mask.btoast-in .btoast-row {
    animation: btoast-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.bean-toast-mask:not(.btoast-in) .btoast-row {
    animation: btoast-out 0.5s ease forwards;
}
@keyframes btoast-in {
    0%   { transform: translateY(30px) scale(0.5); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes btoast-out {
    0%   { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-15px) scale(0.9); opacity: 0; }
}
.bean-toast-mask .btoast-bean {
    width: 38px;
    height: 38px;
    margin-right: 12px;
    filter: drop-shadow(0 0 6px rgba(255,210,102,0.7));
    flex-shrink: 0;
}
.bean-toast-mask .btoast-text {
    display: flex;
    align-items: baseline;
}
.bean-toast-mask .btoast-plus {
    font-size: 34px;
    font-weight: 900;
    background: linear-gradient(180deg, #fff3c4, #ffd266 60%, #e8952e);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-right: 4px;
    line-height: 1;
}
.bean-toast-mask .btoast-label {
    font-size: 20px;
    color: #ffd266;
    font-weight: 800;
    letter-spacing: 1px;
}

/* ============ 光效覆盖层 ============ */
.fx-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    pointer-events: none;
    display: none;
    align-items: center;
    justify-content: center;
}

.fx-overlay.show {
    display: flex;
}

.fx-flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 210, 102, 0.5), transparent 70%);
    animation: flashOut 0.8s ease-out forwards;
}

.fx-card-fly {
    animation: cardFly 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ============ 响应式 ============ */
/* @media (max-width: 1024px) 原 .home-grid 已随 page-home 废弃 */

@media (max-width: 768px) {
    .top-nav {
        padding: 0 16px;
        height: 56px;
    }
    .nav-menu {
        display: none;
        position: absolute;
        top: 56px;
        left: 0; right: 0;
        flex-direction: column;
        background: rgba(18, 14, 36, 0.97);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(255,210,102,.15);
        padding: 12px 20px;
        gap: 0;
        z-index: 999;
    }
    .nav-menu.open { display: flex; }
    .nav-menu .nav-item {
        padding: 14px 0;
        border-bottom: 1px solid rgba(255,255,255,.06);
        font-size: 15px;
    }
    .nav-menu .nav-item:last-child { border-bottom: none; }
    .nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 36px; height: 36px;
        background: transparent; border: none; cursor: pointer;
        gap: 5px;
        padding: 0;
    }
    .nav-toggle span {
        display: block;
        width: 22px; height: 2px;
        background: var(--gold, #ffd266);
        border-radius: 2px;
        transition: transform .25s, opacity .25s;
    }
    .nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle.active span:nth-child(2) { opacity: 0; }
    .nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .main-content {
        padding: 80px 16px 24px;
    }
    /* 原 .home-grid / .card-3d-wrap 已随 page-home 废弃 */
    .collection-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    .gacha-buttons {
        flex-direction: column;
    }
    .filter-bar {
        gap: 6px;
    }
    /* 卡册封面图片淡入：从空白期的体验改为逐步显现 */
    .collection-set-card img,
    .collection-template-card img,
    .template-card img {
        opacity: 0;
        transition: opacity .35s ease-in;
    }
    .collection-set-card img.loaded,
    .collection-template-card img.loaded,
    .template-card img.loaded { opacity: 1; }
}
.nav-toggle { display: none; }

/* 滚动条美化 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 210, 102, 0.3);
}

/* 文本选中颜色 */
::selection {
    background: rgba(255, 210, 102, 0.3);
    color: var(--text-primary);
}

/* 空状态（统一插画风格） */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.empty-state-icon {
    font-size: 56px;
    margin-bottom: 16px;
    opacity: 0.85;
    filter: drop-shadow(0 4px 16px rgba(255,210,102,0.2));
    animation: emptyFloat 3s ease-in-out infinite;
}

@keyframes emptyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.empty-state-text {
    font-size: 14px;
    color: var(--text-muted);
}

/* 加载状态 */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-muted);
    font-size: 14px;
    gap: 10px;
}
.loading::before {
    content: '';
    width: 14px; height: 14px;
    border: 2px solid rgba(255,210,102,0.25);
    border-top-color: var(--gold, #ffd266);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==================== 个人主页 ==================== */
#page-homepage { padding-bottom: 40px; }
#profileBackBtn {
    border: none; background: transparent; color: var(--text-muted);
    font-size: 14px; cursor: pointer; padding: 0 8px;
}
#profileBackBtn:hover { color: var(--primary); }
#profileBackBtn.hidden { display: none; }

/* ============ 个人中心 (from 参考图) ============ */
.pf-banner {
    background: #1e1e26;
    border-radius: 14px 14px 0 0;
    padding: 22px 24px;
    margin-bottom: 0;
}
.pf-banner-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}
.pf-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.pf-avatar-tag {
    position: absolute;
    top: -8px;
    left: -6px;
    font-size: 9px;
    padding: 2px 5px;
    background: #3a3a48;
    color: #ccc;
    border-radius: 3px;
    letter-spacing: 0.5px;
    z-index: 2;
    border: 1px solid #2a2a36;
}
.pf-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #4a4a5a;
    background: #2a2a36;
}
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pf-avatar .avatar-fallback {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #3a3a48, #50506a);
    color: #fff; font-size: 28px; font-weight: 600;
}
.pf-banner-info {
    flex: 1;
    min-width: 0;
}
.pf-nick-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.pf-nickname {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}
.pf-level-tag {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(255,210,102,0.15);
    color: #ffd266;
    border: 1px solid rgba(255,210,102,0.3);
    font-weight: 600;
    white-space: nowrap;
}
.pf-badge-entry {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(255,80,120,0.12);
    color: #ff9fb5;
    border: 1px solid rgba(255,80,120,0.3);
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s, transform 0.15s;
}
.pf-badge-entry:hover {
    background: rgba(255,80,120,0.25);
    transform: translateY(-1px);
}
.pf-badge-count {
    font-weight: 400;
    opacity: 0.8;
    margin-left: 2px;
}
.pf-banner-right {
    flex-shrink: 0;
}

.pf-bio-row {
    font-size: 13px; color: #a0a0b0; margin-top: 6px; max-width: 420px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-follow-row {
    display: flex; gap: 18px; margin-top: 10px; font-size: 13px; color: #b0b0c0;
}
.pf-follow-stat b { color: var(--gold, #ffd266); font-weight: 700; font-size: 15px; margin-right: 3px; }
.pf-follow-btn {
    background: linear-gradient(180deg, #ffd266, #e0a830);
    color: #3a2708; border: none; font-weight: 700; font-size: 14px;
    padding: 9px 22px; border-radius: 20px; cursor: pointer;
    box-shadow: 0 0 14px rgba(255,210,102,.35);
    transition: transform .12s, box-shadow .12s;
    white-space: nowrap;
}
.pf-follow-btn:hover { transform: translateY(-1px); box-shadow: 0 0 22px rgba(255,210,102,.55); }
.pf-follow-btn.pf-followed {
    background: transparent; color: #a0a0b0;
    border: 1px solid #4a4a5a; box-shadow: none;
}

/* 粉丝/关注统计可点击 */
.pf-stat-link { cursor: pointer; transition: color .12s; }
.pf-stat-link:hover b { color: #ffe29a; text-decoration: underline; }

/* ====== 粉丝 / 关注列表弹窗 ====== */
.fl-tabs { display: flex; gap: 22px; justify-content: center; margin-bottom: 10px; }
.fl-tab {
    background: none; border: none; cursor: pointer;
    font-size: 16px; font-weight: 700; color: #7a7a8a; padding: 6px 2px;
    border-bottom: 2px solid transparent; transition: color .12s, border-color .12s;
}
.fl-tab.on { color: var(--gold, #ffd266); border-bottom-color: var(--gold, #ffd266); }
.fl-tab:hover { color: var(--gold, #ffd266); }
.fl-count { font-size: 13px; color: #a0a0b0; margin-bottom: 12px; }
.fl-list { max-height: 55vh; overflow-y: auto; }
.fl-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 4px; border-bottom: 1px solid #26263a;
}
.fl-row:last-child { border-bottom: none; }
.fl-av {
    width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex: none;
    background: #2a2a3a; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.fl-av img { width: 100%; height: 100%; object-fit: cover; }
.fl-av-fb {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; color: #ffd266; background: #2a2a3a;
}
.fl-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; cursor: pointer; overflow: hidden; }
.fl-name { font-size: 14px; color: #e8e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-lv {
    flex: none; font-size: 11px; font-weight: 800; font-style: italic;
    color: #3a2708; background: linear-gradient(180deg, #ffd266, #e0a830);
    padding: 1px 6px; border-radius: 4px;
}
.fl-title { font-size: 12px; color: #a0a0b0; white-space: nowrap; }
.fl-btn {
    flex: none; background: linear-gradient(180deg, #ffd266, #e0a830);
    color: #3a2708; border: none; font-weight: 700; font-size: 13px;
    padding: 7px 18px; border-radius: 18px; cursor: pointer;
    box-shadow: 0 0 10px rgba(255,210,102,.3); transition: transform .12s, box-shadow .12s;
}
.fl-btn:hover { transform: translateY(-1px); box-shadow: 0 0 16px rgba(255,210,102,.5); }
.fl-btn.followed {
    background: transparent; color: #a0a0b0; border: 1px solid #4a4a5a; box-shadow: none;
}
.fl-btn.followed:hover { transform: none; box-shadow: none; color: #e8e8f0; border-color: #6a6a7a; }
.fl-empty { text-align: center; padding: 40px 10px; color: #7a7a8a; font-size: 13px; }
.pf-divider {
    height: 44px;
    background: #232330;
    margin-bottom: 16px;
}
.pf-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 14px;
}
.pf-stat-card {
    background: #2a2a36;
    border-radius: 12px;
    padding: 16px 18px;
    border: 1px solid #3a3a48;
}
.pf-stat-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.pf-stat-icon {
    font-size: 14px;
}
.pf-stat-title {
    font-size: 13px;
    color: #b0b0c0;
    font-weight: 500;
}
.pf-stat-sub {
    font-size: 11px;
    color: #8888a0;
    margin-bottom: 10px;
}
.pf-stat-big {
    display: flex;
    align-items: baseline;
}
.pf-num {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.pf-num-sep {
    font-size: 20px;
    font-weight: 600;
    color: #6a6a80;
    margin: 0 2px;
}
.pf-num-total {
    font-size: 20px;
    font-weight: 600;
    color: #8888a0;
    font-variant-numeric: tabular-nums;
}
.pf-progress-row {
    background: #2a2a36;
    border-radius: 12px;
    padding: 14px 18px;
    border: 1px solid #3a3a48;
    margin-bottom: 20px;
}
.pf-progress-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}
.pf-progress-title {
    font-size: 13px;
    color: #b0b0c0;
    font-weight: 500;
}
.pf-progress-sub {
    font-size: 11px;
    color: #8888a0;
}
.pf-progress-bar {
    height: 6px;
    background: #3a3a48;
    border-radius: 3px;
    overflow: hidden;
}
.pf-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffd266, #ffa030);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.pf-sections {
    /* 下方 section 容器 */
}
.pf-section {
    background: #0a0a0f;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: none;
}
.pf-set-block {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.pf-set-head {
    font-size: 14px;
    font-weight: 700;
    color: #e8e8f0;
    margin-bottom: 10px;
    padding-left: 4px;
    letter-spacing: .5px;
}
.pf-set-count {
    font-size: 11px;
    font-weight: 500;
    color: #8b93a7;
    margin-left: 8px;
}
.pf-dup-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #ffd266;
    color: #1a1206;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    line-height: 1;
    letter-spacing: .5px;
    z-index: 5;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* ============ 个人中心 Settings (page-settings) ============ */
.settings-wrap {
    background: #1e1e26;
    border-radius: 14px;
    border: 1px solid #2a2a36;
    overflow: hidden;
}
.settings-top {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    position: relative;
}
.s-avatar-box {
    position: relative;
    flex-shrink: 0;
}
.s-avatar-tip {
    position: absolute;
    top: -8px;
    left: -6px;
    font-size: 9px;
    padding: 2px 5px;
    background: #3a3a48;
    color: #ccc;
    border-radius: 3px;
    letter-spacing: 0.5px;
    z-index: 2;
    border: 1px solid #2a2a36;
    white-space: nowrap;
}
.s-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #4a4a5a;
    background: #2a2a36;
    object-fit: cover;
    display: block;
}
.s-avatar-fallback {
    display: flex; align-items: center; justify-content: center;
    width: 72px; height: 72px; border-radius: 50%;
    background: linear-gradient(135deg, #3a3a48, #50506a);
    color: #fff; font-size: 28px; font-weight: 600;
    border: 2px solid #4a4a5a;
}
.s-name-row {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.s-nickname {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}
.s-level-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(255,210,102,0.15);
    color: #ffd266;
    border: 1px solid rgba(255,210,102,0.3);
    font-weight: 600;
    white-space: nowrap;
}
.s-btn-homepage {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #4a4a5a;
    background: rgba(255,255,255,0.05);
    color: #d0d0d8;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.s-btn-homepage:hover {
    background: rgba(255,255,255,0.1);
    border-color: #6a6a7a;
    color: #fff;
}
.settings-divider {
    height: 44px;
    background: #232330;
}
.settings-resource-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 16px 18px;
}
.s-resource-item {
    background: #2a2a36;
    border-radius: 12px;
    padding: 16px 18px;
    border: 1px solid #3a3a48;
}
.s-resource-clickable {
    cursor: pointer;
    transition: all 0.2s;
}
.s-resource-clickable:hover {
    background: #333344;
    border-color: #50506a;
    transform: translateY(-2px);
}
.s-resource-title {
    font-size: 13px;
    color: #b0b0c0;
    font-weight: 500;
    margin-bottom: 8px;
    line-height: 1.6;
}
.s-icon {
    font-size: 14px;
    margin-right: 2px;
}
.s-resource-sub {
    font-size: 11px;
    color: #8888a0;
}
.s-resource-num {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.s-resource-num-sub {
    font-size: 18px;
    font-weight: 600;
    color: #8888a0;
    margin-left: 2px;
}
.settings-progress-wrap {
    padding: 14px 18px 20px;
    border-top: 1px solid #2a2a36;
}
.s-progress-label {
    font-size: 13px;
    color: #b0b0c0;
    margin-bottom: 10px;
}
.s-progress-bar {
    height: 6px;
    background: #3a3a48;
    border-radius: 3px;
    overflow: hidden;
}
.s-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffd266, #ffa030);
    border-radius: 3px;
    transition: width 0.3s ease;
}
.s-logout-btn {
    width: 100%;
    padding: 14px;
    border: none;
    background: #2a2a36;
    border: 1px solid #3a3a48;
    color: #e08080;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 14px;
    transition: all 0.2s;
}
.s-logout-btn:hover {
    background: #3a2a36;
    border-color: #5a3a48;
}

/* 徽章墙弹窗 */
.bw-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    padding: 12px 4px 8px;
}
.bw-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}
.bw-item {
    background: #2a2a36;
    border-radius: 10px;
    padding: 12px 6px;
    text-align: center;
    border: 1px solid #3a3a48;
}
.bw-item.bw-locked { opacity: 0.45; }
.bw-img {
    width: 44px; height: 44px; border-radius: 8px;
    object-fit: cover; margin-bottom: 6px;
    background: #3a3a48;
}
.bw-emoji {
    width: 44px; height: 44px; border-radius: 8px;
    font-size: 26px; display: flex; align-items: center;
    justify-content: center; background: #3a3a48; margin: 0 auto 6px;
}
.bw-lv {
    font-size: 11px;
    font-weight: 700;
    color: #ffd266;
}
.bw-name {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    margin-top: 2px;
}
.bw-state {
    font-size: 10px;
    color: #7fe3b4;
    margin-top: 4px;
}
.bw-lock-state { color: #888; }
.bw-desc {
    font-size: 9px;
    color: #888;
    margin-top: 3px;
    line-height: 1.4;
}

.profile-section {
    background: #fff; border-radius: 12px; padding: 20px;
    margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.section-title {
    font-size: 15px; font-weight: 600; margin: 0 0 16px; color: #000;
}
.pf-section .section-title { color: #e8e8f0; }
.section-sub { font-size: 12px; font-weight: 400; color: var(--text-muted); }

/* 统计标签（卡册统计 .stat-item 等共用） */
.stat-label { font-size: 11px; color: #888; margin-top: 4px; }

/* 徽章 */
.badge-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
}
.badge-item {
    text-align: center; padding: 16px 8px; border-radius: 10px;
    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
    border: 1px solid #eee;
}
.badge-icon { font-size: 32px; margin-bottom: 6px; }
.badge-name { font-size: 12px; font-weight: 600; color: #333; margin-bottom: 2px; }
.badge-time { font-size: 10px; color: #999; }

/* 卡牌网格 */
.profile-cards {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 14px;
}
.profile-card-item { text-align: center; }
.profile-card-item .card-img-wrap {
    position: relative; width: 100%; height: auto;
    border-radius: 8px; overflow: hidden;
    background: #0a0a0f;
    border: none;
}
.profile-card-item .card-img-wrap img {
    width: 100%; height: auto;
    transform: none;
}
.profile-card-item .rarity-tag {
    position: absolute; top: 4px; left: 4px;
    font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px;
    color: #fff;
}
.profile-card-item .card-name {
    font-size: 12px; font-weight: 600; margin-top: 6px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: #e8e8f0;
}
.profile-card-item .card-time { font-size: 10px; color: #6b7280; margin-top: 2px; }

.empty-hint { text-align: center; color: #aaa; font-size: 13px; padding: 16px; }
#profileContent .loading, #profileContent .empty-state {
    text-align: center; padding: 40px; color: #999;
}

@media (max-width: 480px) {
    .pf-banner-inner { flex-wrap: wrap; gap: 12px; }
    .pf-avatar { width: 56px; height: 56px; }
    .pf-stats-row { grid-template-columns: 1fr; }
    .pf-num { font-size: 26px; }
    .profile-cards { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}

/* ===== 全屏卡牌详情页 ===== */
/* ====== 求赠弹窗 ====== */
.wish-body {
    position: relative;
    z-index: 2;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
    padding: 10px 20px 20px;
    gap: 12px;
    overflow-y: auto;
}
.wish-card-preview {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
}
.wish-card-img {
    max-width: 280px;
    width: min(70vw, 280px);
    max-height: 55vh;
    aspect-ratio: 1024 / 1430;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.wish-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: none;
    display: block;
}
.wish-card-info { flex-shrink: 0; text-align: center; padding: 0 8px; }
.wish-card-name { color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wish-card-meta { display: flex; align-items: center; justify-content: center; gap: 8px; }
.wish-card-meta .rarity-ur { color: #fff; background: rgba(255,210,102,0.4); }
.wish-card-meta .rarity-ssr { color: #fff; background: rgba(255,126,179,0.4); }
.wish-card-meta .rarity-sr { color: #fff; background: rgba(185,131,214,0.4); }
.wish-card-meta .rarity-r { color: #fff; background: rgba(91,192,235,0.4); }
.wish-card-meta .rarity-n { color: #fff; background: rgba(160,160,160,0.4); }

.wish-form {
    flex-shrink: 0;
    margin-top: auto;
}
.wish-label { color: rgba(255,255,255,0.8); font-size: 13px; display: block; margin-bottom: 10px; }
.wish-tag-group {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}
.wish-tag {
    flex: 1;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    color: rgba(255,255,255,0.85);
    padding: 8px 10px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.wish-tag:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,210,102,0.5);
}
.wish-tag.active {
    background: linear-gradient(135deg, #ff6f4b, #ff3366);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(255, 51, 102, 0.4);
}
#wishMsgInput {
    width: 100%;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 10px;
    color: #fff;
    padding: 10px 12px;
    font-size: 14px;
    resize: none;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
}
#wishMsgInput::placeholder { color: rgba(255,255,255,0.45); }
#wishMsgInput:focus { border-color: rgba(255,255,255,0.5); }
.wish-count { text-align: right; font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 4px; }
.wish-submit-btn {
    width: 100%;
    margin-top: 14px;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff7eb3, #ff5470);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(255,84,112,0.5);
    transition: transform 0.15s;
}
.wish-submit-btn:hover:not(:disabled) { transform: scale(1.02); }
.wish-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.card-detail-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 10001;
    background: linear-gradient(180deg, #5b9bd5 0%, #3a7bc8 35%, #2b63b0 70%, #1e4a8a 100%);
    overflow: hidden; perspective: 1400px;
    animation: cdFadeIn 0.3s ease;
    display: flex; flex-direction: column;
}
@keyframes cdFadeIn { from { opacity: 0; } to { opacity: 1; } }
.card-detail-overlay::before {
    content: ""; position: absolute; top: -10%; left: 50%;
    transform: translateX(-50%);
    width: 60%; height: 60%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
    z-index: 0;
}
.card-detail-overlay::after {
    content: ""; position: absolute; bottom: 0; left: 0;
    width: 100%; height: 35%;
    background:
        linear-gradient(transparent 0%, rgba(30,74,138,0.6) 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0px, rgba(255,255,255,0.08) 1px, transparent 1px, transparent 80px),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 1px, transparent 1px, transparent 60px);
    transform: perspective(400px) rotateX(55deg);
    transform-origin: bottom center; pointer-events: none;
    z-index: 0;
}

/* ===== 隐藏所有页面卡牌左上角的稀有度角标 ===== */
.card-rarity,
.card-float-rarity,
.gacha-session-rarity {
    display: none !important;
}

/* ===== 隐藏首页幸运豆显示 💛 ===== */
.beans-display {
    display: none !important;
}

/* ===== 右上角登录/注册按钮 ===== */
.auth-btns {
    display: flex;
    align-items: center;
    gap: 8px;
}
.auth-btn {
    padding: 7px 18px;
    font-size: 13px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 500;
    transition: var(--transition);
    border: none;
    white-space: nowrap;
    user-select: none;
}
.auth-btn-login {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.auth-btn-login:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
    border-color: rgba(255, 210, 102, 0.3);
    transform: scale(1.02);
}
.auth-btn-register {
    background: linear-gradient(135deg, var(--gold), var(--pink));
    color: #1a1d35;
    border: none;
    font-weight: 600;
}
.auth-btn-register:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 4px 16px rgba(255, 210, 102, 0.4);
}
.auth-btn-logout {
    background: transparent;
    color: var(--pink);
    border: 1px solid rgba(255, 80, 120, 0.35);
}
.auth-btn-logout:hover {
    background: rgba(255, 80, 120, 0.1);
    border-color: var(--pink);
    color: var(--pink);
}

.cd-topbar {
    flex: 0 0 auto;
    padding: 18px 20px;
    display: flex; align-items: center; justify-content: center; z-index: 10;
    position: relative;
    transform: translateZ(0);
}
.cd-topbar .cd-back {
    position: absolute; left: 20px;
    color: #fff; font-size: 22px; cursor: pointer; opacity: 0.9;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.cd-topbar .cd-back:hover { background: rgba(255,255,255,0.3); }
.cd-topbar .cd-title { color: #fff; font-size: 20px; font-weight: 600; letter-spacing: 2px; }
.cd-topbar .cd-close {
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25);
    color: #fff; font-size: 16px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s; user-select: none;
}
.cd-topbar .cd-close:hover { background: rgba(255,84,112,0.85); border-color: rgba(255,255,255,0.5); }

.wish-close-btn {
    position: absolute; right: 20px;
    top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255, 84, 112, 0.85);
    border: 2px solid rgba(255,255,255,0.5);
    color: #fff; font-size: 16px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.wish-close-btn:hover {
    background: rgba(255, 84, 112, 1);
    transform: translateY(-50%) scale(1.1);
}

.cd-stage {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    z-index: 5;
    position: relative;
}
.cd-stage .cd-rotator-wrapper {
    width: 364px; aspect-ratio: 1024/1430; position: relative;
}
@media (min-width: 768px) { .cd-stage .cd-rotator-wrapper { width: 442px; aspect-ratio: 1024/1430; } }
@media (max-width: 480px) { .cd-stage .cd-rotator-wrapper { width: 286px; aspect-ratio: 1024/1430; } }

.cd-rotator {
    position: absolute; width: 100%; height: 100%;
    transform-style: preserve-3d;
    animation: cdSpin 12s linear infinite;
}
@keyframes cdSpin {
    0%   { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

.cd-face {
    position: absolute; width: 100%; height: 100%;
    border-radius: 14px; backface-visibility: hidden;
    overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.4);
    background: linear-gradient(160deg, var(--card-bg-1), var(--card-bg-2));
}
.cd-face img { width: 100%; height: 100%; object-fit: contain; object-position: center center; display: block; border-radius: 14px; transform: none; }
.cd-face-front { transform: translateZ(8px); }
.cd-face-back  { transform: rotateY(180deg) translateZ(8px); background: #1a1a2e; border-radius: 14px; overflow: hidden; }

/* ==================== 全局 Footer ==================== */
.site-footer {
    background: #0c0e1a;
    border-top: 1px solid rgba(255, 210, 102, 0.12);
    margin-top: 60px;
    padding: 64px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}
.footer-wrap {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 32px;
    width: 100%;
    display: flex;
    gap: 48px;
}
.footer-brand {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 180px;
}
.footer-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}
.footer-logo .logo-icon {
    height: 48px;
    width: auto;
    max-width: 180px;
}
.footer-logo .logo-text {
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--gold), var(--pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.footer-slogan {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.footer-cols {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
.footer-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.footer-col h4 {
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 4px;
    letter-spacing: 0.3px;
}
.footer-col a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 12.5px;
    transition: color .2s;
    line-height: 1.6;
}
.footer-col a:hover {
    color: var(--gold);
}
.footer-col span {
    color: var(--text-muted);
    font-size: 12px;
    opacity: 0.7;
    margin-top: 2px;
}
.footer-wx-qr {
    width: 110px;
    height: 110px;
    object-fit: contain;
    margin: 6px 0 2px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.12);
    background: #fff;
}
.footer-contact {
    display: none;
}
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 64px;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 32px;
    width: 100%;
    color: var(--text-muted);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.footer-dot {
    opacity: 0.5;
}
/* 平板 */
@media (max-width: 1200px) {
    .footer-cols { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
/* 移动端 */
@media (max-width: 768px) {
    .site-footer {
        padding-top: 32px;
        margin-top: 40px;
    }
    .footer-wrap {
        flex-direction: column;
        gap: 24px;
        padding: 0 16px;
    }
    .footer-brand { width: auto; }
    .footer-cols {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .footer-bottom {
        padding: 12px 16px;
        margin-top: 28px;
    }
}

/* 中间厚度层：承担卡牌厚度 + 圆角侧面 */
.cd-thickness {
    position: absolute;
    width: 100%; height: 100%;
    border-radius: 14px;
    background: linear-gradient(180deg, #ede3cc 0%, #d9c9a0 100%);
    transform: translateZ(0);
    box-shadow: inset 0 0 8px rgba(0,0,0,0.2);
}

.cd-edge { position: absolute; background: linear-gradient(180deg, #f0e4cc 0%, #d4c4a0 50%, #b8a680 100%); }
.cd-edge-right  { width: 12px; height: calc(100% - 28px); right: -6px; top: 14px; transform: rotateY(90deg); transform-origin: left center; }
.cd-edge-left   { width: 12px; height: calc(100% - 28px); left: -6px; top: 14px; transform: rotateY(-90deg); transform-origin: right center; }
.cd-edge-top    { width: calc(100% - 28px); height: 12px; top: -6px; left: 14px; transform: rotateX(90deg); transform-origin: center bottom; }
.cd-edge-bottom { width: calc(100% - 28px); height: 12px; bottom: -6px; left: 14px; transform: rotateX(-90deg); transform-origin: center top; }

.cd-back-content {
    width: 100%; height: 100%;
    box-sizing: border-box;
    background-image: var(--cd-back-img, url('/images/back/n_back.jpg'));
    background-size: cover;
    background-position: center;
    color: #fff; display: flex; flex-direction: column;
    padding: 30px 58px; position: relative;
    border-radius: 12px;
    justify-content: center;
}
/* 按稀有度分不同背面图（fallback，若 JS 没注入 CSS var 时生效） */
.cd-face.cd-rarity-bg-n   .cd-back-content { background-image: url('/images/back/n_back.jpg'); }
.cd-face.cd-rarity-bg-r   .cd-back-content { background-image: url('/images/back/r_back.jpg'); }
.cd-face.cd-rarity-bg-sr  .cd-back-content { background-image: url('/images/back/sr_back.jpg'); }
.cd-face.cd-rarity-bg-ssr .cd-back-content { background-image: url('/images/back/ssr_back.jpg'); }
.cd-face.cd-rarity-bg-ur  .cd-back-content { background-image: url('/images/back/ur_back.jpg'); }
.cd-back-content::before {
    content: ""; position: absolute;
    top: 16px; left: 16px; right: 16px; bottom: 16px;
    border: 1px solid rgba(255,215,0,0.25); border-radius: 8px; pointer-events: none;
}
.cd-back-logo { text-align: center; font-size: 22px; font-weight: 700; color: #ffd266; letter-spacing: 3px; margin-bottom: 4px; }
.cd-back-sub { text-align: center; font-size: 12px; color: rgba(255,255,255,0.6); letter-spacing: 1px; margin-bottom: 16px; }
.cd-back-name { text-align: center; font-size: 18px; font-weight: 700; margin-bottom: 12px; text-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.cd-back-meta { flex: 1; display: flex; flex-direction: column; gap: 10px; font-size: 12px; justify-content: center; }
.cd-back-meta-row { display: flex; align-items: center; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.cd-back-meta-row .lb { color: rgba(255,255,255,0.6); }
.cd-back-meta-row .vl { color: #ffd266; font-family: 'Courier New', monospace; margin-left: auto; text-align: right; }
.cd-back-meta-row .vl.id-mono { font-family: ui-monospace, 'SF Mono', Consolas, Menlo, monospace; letter-spacing: 0.5px; }
.cd-id-copy { background: none; border: none; color: var(--gold); cursor: pointer; font-size: 13px; padding: 0 4px; margin-left: 4px; opacity: 0.6; transition: opacity 0.15s; }
.cd-id-copy:hover { opacity: 1; }
.cd-back-rarity { text-align: center; padding: 8px; background: rgba(255,215,0,0.15); border-radius: 6px; font-size: 16px; font-weight: 700; color: #ffd266; margin-top: auto; }

.cd-edge { position: absolute; background: linear-gradient(180deg, #f5efe0 0%, #e8dcc4 50%, #d9c9a8 100%); }
.cd-edge-right  { width: 8px; height: 100%; right: -4px; top: 0; transform: rotateY(90deg); transform-origin: left center; border-radius: 0 4px 4px 0; }
.cd-edge-left   { width: 8px; height: 100%; left: -4px; top: 0; transform: rotateY(-90deg); transform-origin: right center; border-radius: 4px 0 0 4px; }
.cd-edge-top    { width: 100%; height: 8px; top: -4px; left: 0; transform: rotateX(90deg); transform-origin: center bottom; border-radius: 4px 4px 0 0; }
.cd-edge-bottom { width: 100%; height: 8px; bottom: -4px; left: 0; transform: rotateX(-90deg); transform-origin: center top; border-radius: 0 0 4px 4px; }

.cd-shadow {
    position: absolute; bottom: -30px; left: 50%;
    transform: translateX(-50%);
    width: 220px; height: 30px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 70%);
    filter: blur(6px); z-index: 1;
}

.cd-actions {
    position: absolute; top: 50%; right: 20px; transform: translateY(-50%);
    z-index: 20; display: flex; flex-direction: column; gap: 14px;}
.cd-action-btn {
    width: 48px; height: 48px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.35); color: #fff;
    border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; transition: all 0.25s; position: relative;
}
.cd-action-btn:hover { background: rgba(255,255,255,0.4); transform: scale(1.08); }

.cd-infopanel {
    flex: 0 0 auto;
    padding: 16px 20px calc(env(safe-area-inset-bottom, 0px) + 16px);
    z-index: 10; box-sizing: border-box;
}
.cd-infocard {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-radius: 16px; padding: 16px 20px; margin-bottom: 10px;
    display: flex; align-items: center; justify-content: space-between;
    border: 1px solid rgba(255,255,255,0.2);
}
.cd-infocard .cd-name { color: #fff; font-size: 22px; font-weight: 700; letter-spacing: 1px; }
.cd-infocard .cd-rarity {
    background: rgba(255,255,255,0.25); color: #fff;
    font-size: 16px; font-weight: 700;
    padding: 4px 16px; border-radius: 8px;
}
.cd-setinfo {
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-radius: 16px; padding: 14px 18px;
    display: flex; align-items: center; gap: 14px;
    border: 1px solid rgba(255,255,255,0.15); color: #fff;
}
.cd-setinfo .cd-set-icon { font-size: 28px; }
.cd-setinfo .cd-set-name { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-setinfo .cd-set-meta { font-size: 12px; opacity: 0.7; margin-top: 2px; }

@media (max-width: 480px) {
    .cd-actions { right: 10px; gap: 10px; }
    .cd-action-btn { width: 42px; height: 42px; font-size: 16px; }
    .cd-infocard .cd-name { font-size: 18px; }
    .cd-topbar .cd-title { font-size: 17px; }
}

/* ============ 排行榜 (from D:\card\top\ui.html) ============ */
:root{
  --rk-bg0:#040b16; --rk-bg1:#071528;
  --rk-panel:rgba(255,255,255,.045); --rk-panel2:rgba(255,255,255,.075);
  --rk-line:rgba(255,255,255,.085); --rk-line2:rgba(255,255,255,.18);
  --rk-txt:#eaf2ff; --rk-sub:#8ba5c9; --rk-dim:#61789b;
  --rk-gold:#ffd76e; --rk-purple:#b06cff; --rk-blue:#4a9eff; --rk-green:#4ecb8f; --rk-pink:#ff7ba8; --rk-orange:#ffb86b;
  --rk-lv:#a8b6c9; --rk-gray:#8fa3bd; --rk-cyan:#22d3ee; --rk-silver:#cbd5e1;
}

.rank-topbar{position:sticky;top:0;z-index:60;height:60px;display:flex;align-items:center;gap:20px;
  padding:0;background:rgba(6,18,36,.82);backdrop-filter:blur(18px);border-bottom:1px solid var(--rk-line)}
.rank-logo{display:flex;align-items:center;gap:9px;flex:none}
.rank-logo .lg{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:18px;background:linear-gradient(140deg,#3b82f6,#8b5cf6)}
.rank-logo b{font-size:15px;letter-spacing:.4px}
.rank-periods{display:flex;gap:2px;background:rgba(0,0,0,.26);padding:3px;border-radius:12px}
.rank-periods button{border:0;background:transparent;color:var(--rk-sub);font-size:12.5px;font-weight:600;
  padding:7px 14px;border-radius:9px;cursor:pointer;font-family:inherit;transition:.2s}
.rank-periods button:hover{color:var(--rk-txt)}
.rank-periods button.on{background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff}

.rank-app{max-width:1320px;margin:0 auto;padding:22px 0 56px;
  display:grid;grid-template-columns:214px minmax(0,1fr) 296px;gap:18px;align-items:start}
.rank-panel{background:var(--rk-panel);border:1px solid var(--rk-line);border-radius:16px}
.rank-ph{padding:13px 16px 11px;border-bottom:1px solid var(--rk-line);
  font-size:12.5px;font-weight:800;letter-spacing:.4px;display:flex;align-items:center;gap:7px}

.rank-mlist{padding:8px;display:flex;flex-direction:column;gap:2px}
.rank-mi{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:11px;cursor:pointer;
  transition:.18s;border:1px solid transparent}
.rank-mi:hover{background:var(--rk-panel2)}
.rank-mi.on{background:linear-gradient(100deg,rgba(59,130,246,.2),rgba(139,92,246,.09));
  border-color:rgba(120,180,255,.36)}
.rank-mi .ico{width:32px;height:32px;border-radius:9px;flex:none;display:flex;align-items:center;
  justify-content:center;background:rgba(255,255,255,.06)}
.rank-mi b{flex:1;font-size:12.5px;font-weight:700;color:var(--rk-txt)}
.rank-mi b small{font-size:9.5px;color:var(--rk-dim);font-weight:600;margin-left:4px}
.rank-mi .mr{font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--rk-dim)}
.rank-mi .mr.in{color:var(--rk-gold)}

.rank-bhero{padding:18px 20px}
.rank-bh-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.rank-bh-l{display:flex;align-items:center;gap:13px}
.rank-bh-ico{width:46px;height:46px;border-radius:14px;flex:none;display:flex;align-items:center;
  justify-content:center;background:rgba(255,255,255,.06);border:1px solid var(--rk-line)}
.rank-bh-ico svg{width:28px;height:28px}
/* 统一 SVG 图标颜色 */
.rank-ico.pink{color:#ff7eb3}
.rank-ico.blue{color:#5ba3ff}
.rank-ico.gold{color:#f5c74a}
.rank-ico.purple{color:#b87bff}
.rank-ico.cyan{color:#3ed4c6}
.rank-ico.silver{color:#c0c4cc}
.rank-ico.gray{color:#8b93a7}
.rank-ico svg{width:20px;height:20px}
.rank-bh-l h1{font-size:19px;font-weight:900;letter-spacing:.4px;color:var(--rk-txt)}
.rank-bh-l p{font-size:11.5px;color:var(--rk-sub);margin-top:4px;max-width:470px;line-height:1.6}
.rank-cd-box{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:11px;
  background:rgba(0,0,0,.26);border:1px solid var(--rk-line);flex:none}
.rank-dot{width:6px;height:6px;border-radius:50%;background:var(--rk-gold);animation:rk-ps 1.4s infinite}
@keyframes rk-ps{0%,100%{opacity:1}50%{opacity:.28}}
.rank-cd-box span{font-size:10.5px;color:var(--rk-dim)}
.rank-cd-box b{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--rk-gold)}

.rank-tt{display:inline-block;font-size:9.5px;padding:2px 7px;border-radius:7px;font-weight:700;white-space:nowrap}
.rank-tt-lv{background:rgba(168,182,201,.15);color:var(--rk-lv);border:1px solid rgba(168,182,201,.3)}
.rank-tt-1{background:rgba(154,168,187,.18);color:#c3cedd;border:1px solid rgba(154,168,187,.36)}
.rank-tt-2{background:rgba(78,203,143,.18);color:#7fe3b4;border:1px solid rgba(78,203,143,.45)}
.rank-tt-3{background:rgba(74,158,255,.18);color:#8cc4ff;border:1px solid rgba(74,158,255,.45)}
.rank-tt-4{background:rgba(176,108,255,.2);color:#cda6ff;border:1px solid rgba(176,108,255,.5)}
.rank-tt-5{background:linear-gradient(96deg,rgba(255,215,110,.28),rgba(255,154,60,.2));color:#ffd98a;
  border:1px solid rgba(255,215,110,.6)}

.rank-mybar{display:flex;align-items:center;gap:18px;margin-top:14px;padding:10px 14px;
  border-radius:12px;background:rgba(0,0,0,.22);border:1px solid var(--rk-line);flex-wrap:wrap}
.rank-mybar .mi{display:flex;align-items:baseline;gap:6px}
.rank-mybar .mi i{font-style:normal;font-size:10px;color:var(--rk-dim)}
.rank-mybar .mi b{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--rk-txt)}
.rank-mybar .mi b.rk{font-size:17px;color:var(--rk-gold)}
.rank-mybar .sp{flex:1}
.rank-mybar .tip{font-size:10.5px;color:var(--rk-dim)}

#page-rank table{width:100%;border-collapse:collapse;font-size:12px;color:var(--rk-txt)}
#page-rank thead th{font-size:10px;font-weight:700;color:var(--rk-dim);text-align:left;padding:10px 14px;
  background:rgba(0,0,0,.18);border-bottom:1px solid var(--rk-line);white-space:nowrap;letter-spacing:.4px}
#page-rank thead th.r{text-align:right}
#page-rank tbody td{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.045);vertical-align:middle}
#page-rank tbody tr{transition:.15s;cursor:pointer}
#page-rank tbody tr:hover{background:rgba(255,255,255,.045)}
.rank-rkn{font-size:13.5px;font-weight:900;color:var(--rk-dim);font-variant-numeric:tabular-nums;
  display:inline-block;min-width:22px;text-align:center}
.rank-rkn.t1{color:var(--rk-gold)}.rank-rkn.t2{color:#cfe0f5}.rank-rkn.t3{color:#e0a878}
.rank-usr{display:flex;align-items:center;gap:12px}
.rank-usr-info{flex:1;min-width:0}
.rank-usr .av{width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-size:15px;background:rgba(255,255,255,.07);border:1px solid var(--rk-line);color:var(--rk-txt)}
.rank-usr .nm{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:5px;color:var(--rk-txt);white-space:normal;max-width:160px;line-height:1.3}
.rank-usr .lv{font-size:12px;font-weight:800;color:var(--rk-txt);margin-left:2px}
.rank-num{text-align:right;font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.rank-num.gold{color:var(--rk-gold)}.rank-num.purple{color:var(--rk-purple)}.rank-num.green{color:var(--rk-green)}
.rank-num.pink{color:var(--rk-pink)}.rank-num.blue{color:var(--rk-blue)}.rank-num.gray{color:var(--rk-gray)}
.rank-num.cyan{color:var(--rk-cyan)}.rank-num.silver{color:var(--rk-silver)}
.rank-num small{font-size:9.5px;color:var(--rk-dim);font-weight:600;margin-left:2px}
.rank-tb-foot{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;
  font-size:10px;color:var(--rk-dim);border-top:1px solid var(--rk-line)}
.rank-pager{display:flex;gap:5px}
.rank-pager button{min-width:28px;height:28px;border-radius:8px;border:1px solid var(--rk-line);
  background:transparent;color:var(--rk-sub);font-size:11.5px;cursor:pointer;font-family:inherit;transition:.18s}
.rank-pager button:hover{background:var(--rk-panel2);color:var(--rk-txt)}
.rank-pager button.on{background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;border-color:transparent}
.rank-pager button:disabled{opacity:.3;cursor:not-allowed}

.rank-mecard{padding:17px;text-align:center}
.rank-me-head{display:flex;align-items:center;gap:10px;text-align:left;margin-bottom:6px}
.rank-me-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:20px;background:rgba(255,255,255,.07);
  border:2px solid rgba(120,180,255,.45);color:var(--rk-txt);overflow:hidden;flex-shrink:0}
.rank-me-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.rank-usr .av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.rank-av-fb{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;background:rgba(255,255,255,.1);color:var(--rk-txt);
  border-radius:50%}
.rank-me-info{flex:1;min-width:0}
.rank-mecard h4{font-size:13px;margin:0;font-weight:800;display:flex;align-items:center;
  gap:6px;color:var(--rk-txt);flex-wrap:wrap}
.rank-mecard .mrank{font-size:30px;font-weight:900;line-height:1.15;margin-top:6px;
  background:linear-gradient(180deg,#fff,var(--rk-gold));-webkit-background-clip:text;background-clip:text;
  color:transparent;font-variant-numeric:tabular-nums}
.rank-mecard .mrank small{font-size:12px;-webkit-text-fill-color:var(--rk-gold)}
.rank-mecard .mdesc{font-size:10.5px;color:var(--rk-sub);margin-top:3px;line-height:1.7}
.rank-mecard .mdesc b{color:var(--rk-orange)}
.rank-me-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:13px}
.rank-me-grid div{background:rgba(0,0,0,.22);border-radius:10px;padding:8px 3px}
.rank-me-grid i{font-style:normal;display:block;font-size:9.5px;color:var(--rk-dim);margin-bottom:2px}
.rank-me-grid b{font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--rk-txt)}
.rank-btn{width:100%;height:36px;border:0;border-radius:11px;margin-top:12px;cursor:pointer;
  font-size:12.5px;font-weight:800;font-family:inherit;transition:.2s;
  background:linear-gradient(135deg,#ffd76e,#ff9a3c);color:#4a2c00}
.rank-btn:hover{filter:brightness(1.07)}

.rank-honor{padding:13px 14px}
.rank-hgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rank-hb{aspect-ratio:1;border-radius:11px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;background:rgba(0,0,0,.22);border:1px solid var(--rk-line);
  cursor:pointer;transition:.2s;position:relative}
.rank-hb:hover{transform:translateY(-2px);background:rgba(255,255,255,.06)}
.rank-hb .he{font-size:18px}
.rank-hb .hn{font-size:8px;color:var(--rk-dim);text-align:center;line-height:1.2;padding:0 2px}
.rank-hb.lock{opacity:.38}
.rank-hb.lock .he{filter:grayscale(1)}

.rank-feed{padding:4px 14px 12px}
.rank-fi{display:flex;gap:9px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.045);align-items:flex-start}
.rank-fi:last-child{border-bottom:0}
.rank-fi .fe{font-size:14px;flex:none;width:20px;text-align:center}
.rank-fi div{flex:1;font-size:11px;line-height:1.7;color:var(--rk-sub);overflow-wrap:break-word}
.rank-fi div b{color:var(--rk-txt);font-weight:700}
.rank-fi div .t{font-size:9.5px;color:var(--rk-dim);display:block;margin-top:2px}

.rank-honor-panel{padding:12px}

.rank-mask{position:fixed;inset:0;background:rgba(2,8,18,.8);backdrop-filter:blur(8px);z-index:200;
  display:flex;align-items:center;justify-content:center}
.rank-mask.on{opacity:1;pointer-events:auto}
.rank-share{width:322px;border-radius:20px;overflow:hidden;
  background:linear-gradient(165deg,#123a70,#0a1b36);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 34px 80px rgba(0,0,0,.6)}
.rank-sh-head{padding:22px 20px 15px;text-align:center;
  background:radial-gradient(80% 100% at 50% 0%,rgba(255,215,110,.24),transparent 70%)}
.rank-sh-cap{font-size:9px;letter-spacing:4px;color:var(--rk-sub)}
.rank-sh-rank{font-size:48px;font-weight:900;line-height:1;margin-top:6px;
  background:linear-gradient(180deg,#fff,var(--rk-gold));-webkit-background-clip:text;background-clip:text;
  color:transparent;font-variant-numeric:tabular-nums}
.rank-sh-rank small{font-size:16px;font-weight:800;-webkit-text-fill-color:var(--rk-gold)}
.rank-sh-slogan{font-size:12px;color:#ffe3ad;margin-top:7px;font-weight:700}
.rank-sh-body{padding:0 17px 17px}
.rank-sh-btitle{font-size:14px;font-weight:800;color:var(--rk-txt);text-align:center;margin-bottom:10px}
.rank-sh-stats{display:flex;background:rgba(0,0,0,.24);border-radius:13px;padding:11px 0;border:1px solid var(--rk-line)}
.rank-sh-st{flex:1;text-align:center}
.rank-sh-st i{font-style:normal;display:block;font-size:9.5px;color:var(--rk-dim);margin-bottom:3px}
.rank-sh-st b{font-size:16px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--rk-txt)}
.rank-sh-foot{display:flex;align-items:center;gap:11px;margin-top:13px;padding-top:12px;border-top:1px solid var(--rk-line)}
.rank-sh-foot-box{width:72px;height:72px;border-radius:8px;flex:none;
  background:repeating-conic-gradient(#fff 0 25%,#000 0 50%) 0 0/10px 10px;opacity:.9;
  display:flex;align-items:center;justify-content:center;font-size:8px;color:#555;text-align:center;padding:4px;line-height:1.3}
.rank-sh-foot-right{flex:1;font-size:10px;color:var(--rk-sub);line-height:1.6}
.rank-sh-foot-right b{color:var(--rk-txt);font-size:12px;display:block;margin-bottom:1px}
.rank-sh-btns{display:flex;gap:8px;padding:0 17px 17px}
.rank-sh-btns button{flex:1;height:40px;border-radius:12px;border:0;font-size:12.5px;font-weight:800;
  cursor:pointer;font-family:inherit;transition:.2s}
.rank-b-ghost{background:rgba(255,255,255,.08);color:var(--rk-sub);border:1px solid var(--rk-line)}
.rank-b-ghost:hover{color:var(--rk-txt)}
.rank-b-main{background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff}
.rank-b-main:hover{filter:brightness(1.08)}

/* 排行榜适配深色背景（page-rank 使用深色） */
#page-rank{
  background:
    radial-gradient(900px 460px at 12% -10%, rgba(60,130,255,.15), transparent 60%),
    radial-gradient(760px 400px at 88% -4%, rgba(176,108,255,.11), transparent 58%),
    linear-gradient(180deg,#08203c 0%,var(--rk-bg1) 34%,var(--rk-bg0) 100%);
  min-height:calc(100vh - 120px);
}

/* ============ 排行榜响应式 ============ */
/* 1200px 以下：三栏 → 两栏（左榜+中榜+右栏堆叠到下方） */
@media (max-width:1200px){
  .rank-app{grid-template-columns:190px 1fr}
  .rank-app .rank-rside{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
  .rank-mecard{height:100%}
}
/* 900px 以下：完全堆叠为单栏 */
@media (max-width:900px){
  .rank-app{grid-template-columns:1fr}
  .rank-app .rank-rside{grid-template-columns:1fr}
  /* 重新排序：英雄面板→我的卡→榜单列表→表格→战报 */
  .rank-app .rank-mid{order:1}
  .rank-app .rank-rside{order:2}
  .rank-app .rank-lside{order:3}
  /* 英雄面板顶部改为纵向 */
  .rank-bh-top{flex-direction:column;align-items:stretch;gap:10px}
  .rank-cd-box{align-self:flex-start}
  /* 英雄面板标题防竖排 */
  .rankBhName{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  /* 顶栏 period buttons 横滑 */
  .rank-topbar{flex-wrap:wrap;gap:8px}
  .rank-periods{overflow-x:auto;flex:1;min-width:0;scrollbar-width:thin}
  .rank-periods::-webkit-scrollbar{height:3px}
  .rank-periods button{flex-shrink:0}
  /* 左栏榜单列表防竖排 */
  .rank-mi b{white-space:nowrap}
  .rank-mi b small{white-space:nowrap}
  /* 我的卡昵称防挤压 */
  .rank-mecard h4{flex-wrap:wrap;gap:2px;min-width:0}
  .rank-mecard h4 .lv,.rank-mecard h4 .rank-tt{flex-shrink:0}
  /* 表格昵称允许换行 + 截断 */
  .rank-usr .nm{white-space:normal;max-width:140px;line-height:1.3}
  /* 战报容器防溢出 */
  .rank-fi div{max-width:100%;overflow-wrap:break-word;word-break:break-word;line-height:1.7}
}
/* 600px 以下极致窄屏 */
@media (max-width:600px){
  .rank-mybar{flex-direction:column;align-items:stretch;gap:8px}
  .rank-mybar .sp{display:none}
  .rank-usr .nm{max-width:100px}
  #page-rank tbody td,#page-rank thead th{padding:8px 8px}
}

/* ============ 卡册：最近抽中 ============ */
.collection-recent{margin-bottom:20px}
.collection-recent-title{font-size:14px;font-weight:800;color:var(--text);letter-spacing:1.5px;margin:10px 0 14px;display:flex;align-items:center;gap:10px}
.collection-recent-title::before{content:'';width:3px;height:16px;background:var(--gold);border-radius:2px}
.collection-recent-list{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:thin}
.collection-recent-list::-webkit-scrollbar{height:5px}
.collection-recent-list::-webkit-scrollbar-thumb{background:rgba(255,210,102,.25);border-radius:4px}
.collection-recent-card{flex:0 0 120px;text-align:center;cursor:pointer;transition:transform .18s;position:relative}
.collection-recent-card:hover{transform:translateY(-3px)}
.collection-recent-card .crc-img{width:120px;height:auto;border-radius:10px;overflow:hidden;position:relative;margin-bottom:6px}
.collection-recent-card .crc-img img{width:100%;height:auto}
.collection-recent-card .crc-rarity{position:absolute;top:4px;left:4px;font-size:11px;font-weight:800;padding:2px 5px;border-radius:4px;color:#1a1206;letter-spacing:.5px}
.collection-recent-card .crc-name{font-size:13px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.collection-recent-card .crc-count{position:absolute;top:4px;right:4px;font-size:12px;font-weight:800;padding:2px 7px;border-radius:10px;background:#ff4757;color:#fff;z-index:3;box-shadow:0 1px 4px rgba(255,71,87,0.5);line-height:1.2}
.collection-recent-empty{padding:24px;text-align:center;color:var(--text-muted);font-size:12px}

/* ============ 卡册：套装网格 ============ */
.collection-grid.album-mode{display:block}  /* album 模式下外层不做 grid，让内层 .collection-set-grid 撑满 */
.collection-set-section-title{font-size:14px;font-weight:800;color:var(--text);letter-spacing:1.5px;margin:10px 0 14px;display:flex;align-items:center;gap:10px}
.collection-set-section-title::before{content:'';width:3px;height:16px;background:var(--gold);border-radius:2px}
.collection-set-section-title .cs-count{font-size:11px;font-weight:500;color:var(--text-muted);letter-spacing:1px}
.collection-set-grid,.collection-filter-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.collection-set-card{background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px;cursor:pointer;transition:.2s;position:relative}
.collection-set-card:hover{transform:translateY(-3px);border-color:rgba(255,210,102,.35);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.collection-set-card.done{border-color:rgba(93,143,114,.4)}
.collection-set-card .csc-head{text-align:center;margin-top:8px;margin-bottom:4px}
.collection-set-card .csc-name{font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}
.collection-set-card .csc-done{display:inline-block;margin-top:5px;font-size:10px;color:#7fc39c;background:rgba(93,143,114,.14);border:1px solid rgba(93,143,114,.4);padding:2px 8px;border-radius:5px}
.collection-set-card .csc-cover{width:120px;height:auto;margin:0 auto;border-radius:10px;overflow:hidden;position:relative;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center}
.collection-set-card .csc-cover img{width:100%;height:auto}
.collection-set-card .csc-cover .placeholder{font-size:40px}
.collection-set-card .csc-cover.csc-locked img{filter:grayscale(1) brightness(.3)}
.collection-set-card .csc-cover.csc-locked::after{content:'?';position:absolute;font-size:36px;font-weight:800;color:rgba(255,255,255,.2)}
.collection-set-card .csc-rarity{position:absolute;top:4px;left:4px;font-size:11px;font-weight:800;padding:2px 6px;border-radius:5px;color:#1a1206;letter-spacing:.5px;z-index:2}
.collection-set-card .csc-foot{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap}
.collection-set-card .csc-prog-text{font-size:11px;color:var(--text-muted)}
.collection-set-card .csc-done-text{color:#7fc39c;font-weight:700}
.collection-set-card .csc-tag.obsolete{color:#e8a15a;font-size:11px;border:1px solid rgba(232,161,90,.4);padding:1px 6px;border-radius:4px}

/* ============ 卡册：套装详情页头部 ============ */
.collection-set-back{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:var(--text-muted);font-size:12px;cursor:pointer;font-family:inherit;transition:.15s}
.collection-set-back:hover{border-color:rgba(255,255,255,.2);color:var(--text)}
.collection-set-detail-header{display:flex;flex-direction:column;gap:14px;background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:18px 20px;margin-bottom:14px}
.collection-set-detail-header .csdh-row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:12px}
.collection-set-detail-header .csdh-left{display:flex;align-items:center;gap:14px}
.collection-set-detail-header .csdh-ico{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);flex-shrink:0}
.collection-set-detail-header .csdh-name{font-size:18px;font-weight:800;letter-spacing:1px;color:var(--text)}
.collection-set-detail-header .csdh-desc{font-size:12.5px;color:var(--text-muted);margin-top:3px}
.collection-set-detail-header .csdh-pct{font-size:32px;font-weight:800;color:var(--gold);line-height:1;font-variant-numeric:tabular-nums}
.collection-set-detail-header .csdh-bar{height:8px;background:rgba(0,0,0,.35);border-radius:4px;overflow:hidden}
.collection-set-detail-header .csdh-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#f7d488);border-radius:4px;transition:width .8s ease}
.collection-set-detail-header .csdh-foot{text-align:center;font-size:12px;color:var(--text-muted)}

/* ============ 卡册：空态 ============ */
.collection-empty{text-align:center;padding:60px 20px;color:var(--text-muted);font-size:13px;grid-column:1/-1}
.collection-empty .e{font-size:40px;margin-bottom:10px;opacity:.45}

@media(max-width:720px){
  .collection-set-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .collection-set-card{padding:12px}
  .collection-set-card .csc-cover{width:96px;height:auto}
  .collection-set-detail-header .csdh-pct{font-size:26px}
}

/* ===== 游戏化任务弹窗 ===== */
.gq-wrap { padding: 8px 0; }
.gq-card { display: block; margin: 0 auto 14px; max-width: 180px; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.gq-q { text-align: center; margin-bottom: 14px; font-weight: 600; color: #fff; }
.gq-opts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; }
.gq-opt { position: relative; padding: 10px 16px; border-radius: 20px; background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.12); color: #e0e0e0; cursor: pointer; transition: all .15s; font-size: 14px; }
.gq-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.gq-opt:hover { background: rgba(255,255,255,.1); }
.gq-opt-sel { border-color: #ffd700; background: rgba(255,215,0,.15); color: #ffd700; }
.gq-opt-correct { border-color: #4caf50; background: rgba(76,175,80,.2); color: #81c784; box-shadow: 0 0 12px rgba(76,175,80,.5); }
.gq-opt-wrong { border-color: #f44336; background: rgba(244,67,54,.2); color: #e57373; }
.gq-result { padding: 10px 12px; border-radius: 8px; text-align: center; margin-bottom: 12px; font-weight: 600; }
.gq-ok { background: rgba(76,175,80,.2); color: #81c784; }
.gq-ng { background: rgba(244,67,54,.2); color: #e57373; }
.gq-btn { display: block; width: 100%; padding: 12px; background: linear-gradient(90deg, #ff6b6b, #ff8e53); color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity .15s; }
.gq-btn:hover { opacity: .9; }
.scale-card { width: 100%; max-width: 130px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.2); }

/* ===== 游戏化任务：卡牌遮罩（从 miniapp task-guess-rarity/task-guess-set wxss 照搬） ===== */
.gq-card-box { position: relative; margin: 0 auto 14px; width: 180px; height: 250px; border-radius: 10px; overflow: hidden; background: #15101f; border: 1px solid rgba(90, 200, 255, .55); box-shadow: 0 0 10px rgba(60,170,255,.5), 0 0 24px rgba(40,110,220,.3); }
.gq-card { width: 100%; height: 100%; object-fit: cover; display: block; box-shadow: none !important; border-radius: 0; }
.gq-mask { position: absolute; background: #171225; }
.gq-mask-top    { top: 0; left: 0; right: 0; height: 4.2%; }
.gq-mask-bottom { bottom: 0; left: 0; right: 0; height: 4.2%; }
.gq-mask-left   { top: 0; bottom: 0; left: 0; width: 5.86%; }
.gq-mask-right  { top: 0; bottom: 0; right: 0; width: 5.86%; }
.gq-mask-letter { top: 0.6%; left: 6.4%; width: 30.5%; height: 15.2%; }
.gq-inner-frame { position: absolute; top: 4.2%; left: 5.86%; right: 5.86%; bottom: 4.2%; border: 1px solid rgba(90,210,255,.75); border-radius: 3px; box-shadow: 0 0 6px rgba(60,180,255,.5), inset 0 0 6px rgba(60,180,255,.3); pointer-events: none; }

.gq-select { width: 100%; padding: 10px 12px; font-size: 14px; color: #f3efff; background: rgba(30,22,50,.85); border: 1px solid rgba(140,110,220,.55); border-radius: 8px; outline: none; cursor: pointer; }
.gq-select:focus { border-color: rgba(140,110,220,.9); box-shadow: 0 0 0 2px rgba(140,110,220,.25); }
.gq-select option { background: #1a1530; color: #f3efff; }

/* ========== 徽章墙 ========== */
.badge-current-info { display: flex; align-items: center; gap: 14px; }
.bh-emblem { width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg,#ffd700,#ff8c00); color:#1a1030;
  font-weight: 900; font-size: 22px; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 14px rgba(255,180,40,.35); }
.bh-info { flex: 1; }
.bh-title { font-size: 18px; font-weight: 700; color: #ffd96a; }
.bh-sub { font-size: 13px; color: #b8a9d9; margin-top: 2px; }
.bh-sub b { color: #fff; }

.badge-body { padding: 10px 0 40px; }
.bh-section { margin-top: 28px; }
.bh-section-title { font-size: 16px; font-weight: 700; color: #e7ddff; margin-bottom: 14px; padding-left: 2px; }

.bh-level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.bh-level-item { padding: 16px 14px; border-radius: 12px; text-align: center; transition: transform .2s; }
.bh-level-item.earned { background: linear-gradient(135deg, rgba(255,200,80,.18), rgba(255,140,40,.08)); border: 1px solid rgba(255,200,100,.4); box-shadow: 0 4px 14px rgba(255,180,60,.15); }
.bh-level-item.locked { background: rgba(30,24,50,.5); border: 1px solid rgba(120,100,160,.25); opacity: .65; }
.bh-level-num { font-size: 28px; font-weight: 900; letter-spacing: 1px; }
.bh-level-item.earned .bh-level-num { color: #ffd700; text-shadow: 0 2px 10px rgba(255,180,40,.4); }
.bh-level-item.locked .bh-level-num { color: #5a5376; }
.bh-level-title { font-size: 14px; font-weight: 700; margin-top: 4px; color: #e0d6ff; }
.bh-level-item.locked .bh-level-title { color: #7d7698; }
.bh-level-desc { font-size: 12px; color: #a89cc8; margin-top: 6px; }
.bh-level-reward { font-size: 12px; margin-top: 6px; padding: 3px 10px; border-radius: 10px; display: inline-block; }
.bh-level-item.earned .bh-level-reward { background: rgba(255,200,80,.18); color: #ffd96a; }
.bh-level-item.locked .bh-level-reward { background: rgba(120,100,160,.15); color: #8a82a5; }
.bh-level-status { font-size: 11px; margin-top: 8px; color: #a89cc8; }

.bh-honor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.bh-honor-item { padding: 14px 12px; border-radius: 10px; text-align: center; transition: transform .2s; }
.bh-honor-item.earned { background: linear-gradient(135deg, rgba(120,200,255,.15), rgba(160,120,255,.1)); border: 1px solid rgba(140,180,255,.4); }
.bh-honor-item.locked { background: rgba(30,24,50,.5); border: 1px solid rgba(120,100,160,.25); opacity: .65; }
.bh-honor-icon { font-size: 32px; line-height: 1; }
.bh-honor-name { font-size: 13px; font-weight: 700; margin-top: 8px; color: #e0d6ff; }
.bh-honor-item.locked .bh-honor-name { color: #7d7698; }
.bh-honor-desc { font-size: 11px; color: #a89cc8; margin-top: 4px; line-height: 1.4; }
.bh-honor-status { font-size: 11px; margin-top: 8px; color: #a89cc8; }