* { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            /* 品牌统一 Design Token - 暖橙陪伴色系（与小程序保持一致） */
            --primary: #FF7B42;
            --primary-dark: #E85A1E;
            --primary-light: #FFB088;
            --primary-bg: rgba(255,123,66,0.1);
            --secondary: #FFD166;
            --accent: #FFD166;
            --danger: #EF476F;
            --success: #06D6A0;
            --warning: #FFD166;
            --info: #118AB2;
            /* 文字 */
            --text-primary: #1d1d1f;
            --text-secondary: #86868b;
            --text-tertiary: #aeaeb2;
            /* 背景 */
            --bg-white: #fff;
            --bg-light: #f5f5f7;
            --bg-dark: #000;
            /* 间距 */
            --space-xs: 4px;
            --space-sm: 8px;
            --space-md: 16px;
            --space-lg: 24px;
            --space-xl: 40px;
            /* 圆角 */
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 18px;
            --radius-xl: 24px;
            --radius-full: 980px;
            /* 阴影 */
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
            --shadow-md: 0 8px 24px rgba(0,0,0,0.1);
            --shadow-lg: 0 16px 40px rgba(0,0,0,0.15);
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC', 'Helvetica Neue', sans-serif;
            color: var(--text-dark);
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
            background: var(--bg-white);
        }
        a { text-decoration: none; color: inherit; }

        /* ===== 导航栏 ===== */
        .navbar {
            position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 48px;
            display: flex; align-items: center; justify-content: center;
            background: rgba(251,251,253,0.8);
            backdrop-filter: saturate(180%) blur(20px);
            -webkit-backdrop-filter: saturate(180%) blur(20px);
            border-bottom: 1px solid rgba(0,0,0,0.08);
        }
        .navbar-inner {
            width: 100%; max-width: 1024px; padding: 0 22px;
            display: flex; align-items: center; justify-content: space-between;
        }
        .navbar .logo { font-size: 17px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 4px; }
        .navbar .nav-tabs { display: flex; gap: 20px; }
        .navbar .nav-tab {
            color: var(--text-secondary); font-size: 12px; font-weight: 400;
            cursor: pointer; padding: 8px 0; position: relative; opacity: 0.8;
            transition: all 0.3s ease;
        }
        .navbar .nav-tab:hover, .navbar .nav-tab.active { color: var(--text-dark); opacity: 1; }
        .navbar .nav-tab.active::after {
            content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
            width: 20px; height: 4px; background: linear-gradient(90deg,var(--primary),var(--primary-dark)); border-radius: 2px;
        }
        .navbar .nav-right { display: flex; align-items: center; gap: 10px; }
        .navbar .nav-btn { padding: 6px 14px; border-radius: 980px; font-size: 12px; font-weight: 500; cursor: pointer; border: none; }
        .nav-btn-primary { background: var(--primary); color: #fff; }
        .nav-btn-primary:hover { background: var(--primary-dark); }
        .nav-btn-outline { background: transparent; color: var(--primary); border: 1px solid var(--primary); }
        .user-info { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; }
        .user-info .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--bg-light); display: flex; align-items: center; justify-content: center; overflow: hidden; }
        .user-info .avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
        .default-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg,#667eea,#764ba2); display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; }
        .logout-btn { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 12px; }

        /* ===== 页面视图系统 ===== */
        .page-view {
            display: none; min-height: 100vh; padding-top: 48px;
            animation: pageIn 0.5s ease-out;
        }
        .page-view.active { display: block; }
        @keyframes pageIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ===== 页面hero ===== */
        .page-hero {
            min-height: 60vh; display: flex; flex-direction: column;
            align-items: center; justify-content: center; text-align: center;
            padding: 80px 24px 60px; position: relative; overflow: hidden;
        }
        .page-hero h1 {
            font-size: clamp(36px,7vw,56px); font-weight: 700;
            margin-bottom: 16px; letter-spacing: -0.03em; line-height: 1.1;
        }
        .page-hero h1 .hl {
            background: linear-gradient(135deg,#667eea,#764ba2);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
        }
        .page-hero p {
            font-size: clamp(16px,2.5vw,21px); color: var(--text-secondary);
            margin-bottom: 28px; font-weight: 400; line-height: 1.5; max-width: 560px;
        }
        .hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
        .btn { padding: 13px 28px; border-radius: 980px; font-size: 14px; font-weight: 500; cursor: pointer; border: none; transition: all 0.3s ease; }
        .btn-primary { background: var(--primary); color: #fff; }
        .btn-primary:hover { background: var(--primary-dark); }
        .btn-secondary { background: rgba(0,0,0,0.04); color: var(--primary); }
        .btn-secondary:hover { background: rgba(0,122,255,0.08); }

        #page-home .page-hero { background: linear-gradient(180deg,#fbfbfd 0%,#fff 40%,#f5f5f7 100%); }
        #page-shop .page-hero { background: linear-gradient(180deg,#e3f2fd 0%,#fff 60%,#f5f5f7 100%); }
        #page-community .page-hero { background: linear-gradient(180deg,#fce4ec 0%,#fff 60%,#f5f5f7 100%); }
        #page-adopt .page-hero { background: linear-gradient(180deg,#e8f5e9 0%,#fff 60%,#f5f5f7 100%); }
        #page-activities .page-hero { background: linear-gradient(180deg,#fff3e0 0%,#fff 60%,#f5f5f7 100%); }
        #page-cards .page-hero { background: linear-gradient(180deg,#1a1a2e 0%,#16213e 40%,#0f0f23 100%); }
        #page-adventure .page-hero { background: linear-gradient(180deg,#1a1a2e 0%,#16213e 40%,#0f0f23 100%); }
        #page-pet .page-hero { background: linear-gradient(180deg,#e8f5e9 0%,#fff 60%,#f5f5f7 100%); }
        #page-message .page-hero { background: linear-gradient(180deg,#e3f2fd 0%,#fff 60%,#f5f5f7 100%); }
        #page-profile .page-hero { background: linear-gradient(180deg,#ede7f6 0%,#fff 60%,#f5f5f7 100%); }
        #page-contact .page-hero { background: var(--bg-dark); color: #fff; }

        /* ===== 通用区域 ===== */
        .section-content { max-width: 980px; margin: 0 auto; padding: 0 22px; }
        .section-header { text-align: center; margin-bottom: 48px; }
        .section-header h2 { font-size: clamp(32px,5vw,48px); font-weight: 700; margin-bottom: 12px; letter-spacing: -0.03em; }
        .section-header h2 .hl { background: linear-gradient(135deg,#667eea,#764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
        .section-header p { font-size: 19px; color: var(--text-secondary); max-width: 560px; margin: 0 auto; font-weight: 300; line-height: 1.5; }
        .content-block { padding: 80px 0; }

        /* ===== 首页卡片 ===== */
        .home-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
        .home-card {
            border-radius: 24px; overflow: hidden; cursor: pointer; min-height: 380px;
            display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
            text-align: center; padding: 56px 48px 36px;
            transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.5s ease;
        }
        .home-card:hover { transform: scale(1.01); box-shadow: 0 20px 60px rgba(0,0,0,0.12); }
        .home-card:nth-child(1) { background: linear-gradient(135deg,#e3f2fd,#bbdefb); }
        .home-card:nth-child(2) { background: linear-gradient(135deg,#fff9c4,#ffe082); }
        .home-card:nth-child(3) { background: linear-gradient(135deg,#fce4ec,#f8bbd0); }
        .home-card:nth-child(4) { background: linear-gradient(135deg,#e8f5e9,#c8e6c9); }
        .home-card:nth-child(5) { background: linear-gradient(135deg,#fff3e0,#ffe0b2); }
        .home-card:nth-child(6) { background: linear-gradient(135deg,#ede7f6,#d1c4e9); }
        .home-card .hc-icon { width: 80px; height: 80px; border-radius: 22px; background: rgba(255,255,255,0.85); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; font-size: 40px; margin-bottom: 20px; box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
        .home-card .hc-title { font-size: clamp(24px,3vw,36px); font-weight: 700; margin-bottom: 10px; }
        .home-card .hc-sub { font-size: clamp(14px,1.8vw,19px); color: var(--text-secondary); margin-bottom: 24px; font-weight: 400; max-width: 320px; }

        /* ===== 商品 ===== */
        .category-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 32px; flex-wrap: wrap; }
        .category-tab { padding: 8px 18px; border-radius: 980px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.3s; background: var(--bg-light); color: var(--text-secondary); border: none; }
        .category-tab:hover { background: #e0e0e0; }
        .category-tab.active { background: var(--text-dark); color: #fff; }
        .products-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
        .product-card { background: #fff; border-radius: 18px; overflow: hidden; cursor: pointer; border: 1px solid rgba(0,0,0,0.04); transition: all 0.4s; }
        .product-card:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); }
        .product-card .img-wrap { width: 100%; height: 200px; overflow: hidden; background: var(--bg-light); position: relative; }
        .product-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
        .product-card:hover .img-wrap img { transform: scale(1.05); }
        .product-card .tag-badge { position: absolute; top: 12px; left: 12px; background: var(--primary); color: #fff; padding: 4px 12px; border-radius: 980px; font-size: 11px; font-weight: 600; }
        .product-card .info { padding: 16px 18px 20px; }
        .product-card .name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
        .product-card .desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
        .product-card .price-row { display: flex; align-items: baseline; gap: 6px; }
        .product-card .price { font-size: 17px; font-weight: 700; }
        .product-card .price .symbol { font-size: 12px; }
        .product-card .original-price { font-size: 12px; color: var(--text-secondary); text-decoration: line-through; }
        .product-card .sales { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
        .no-products, .no-data { text-align: center; padding: 80px 20px; color: var(--text-secondary); grid-column: 1/-1; font-weight: 300; }

        /* ===== 社区 ===== */
        .posts-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
        .post-card { background: #fff; border-radius: 18px; overflow: hidden; cursor: pointer; border: 1px solid rgba(0,0,0,0.04); transition: all 0.4s; }
        .post-card:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); }
        .post-card .post-img-wrap { width: 100%; height: 200px; overflow: hidden; background: var(--bg-light); }
        .post-card .post-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
        .post-card:hover .post-img-wrap img { transform: scale(1.05); }
        .post-card .post-body { padding: 16px 18px 20px; }
        .post-card .post-user { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
        .post-card .post-user img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
        .post-card .post-user .post-uname { font-size: 12px; color: var(--text-secondary); }
        .post-card .post-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
        .post-card .post-excerpt { font-size: 12px; color: var(--text-secondary); line-height: 1.5; max-height: 36px; overflow: hidden; }
        .post-card .post-stats { display: flex; gap: 16px; margin-top: 10px; font-size: 11px; color: var(--text-secondary); }
        .post-card .post-stats span { display: flex; align-items: center; gap: 3px; }
        .post-like-btn { cursor: pointer; border: none; background: none; font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; }
        .post-like-btn.liked { color: #e53935; }
        .comment-item { display: flex; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.04); }
        .comment-item .ci-avatar { width: 28px; height: 28px; border-radius: 50%; }
        .comment-item .ci-name { font-size: 12px; font-weight: 600; }
        .comment-item .ci-text { font-size: 13px; color: var(--text-dark); }
        .comment-input-row { display: flex; gap: 8px; margin-top: 12px; }
        .comment-input-row input { flex: 1; padding: 8px 12px; border-radius: 980px; border: 1px solid #e0e0e0; font-size: 13px; }
        .comment-input-row button { padding: 8px 16px; border-radius: 980px; background: var(--primary); color: #fff; border: none; font-size: 13px; cursor: pointer; }

        /* ===== 领养 ===== */
        .adopt-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
        .adopt-card { background: var(--bg-light); border-radius: 18px; overflow: hidden; cursor: pointer; transition: all 0.4s; }
        .adopt-card:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); }
        .adopt-card .adopt-img-wrap { width: 100%; height: 180px; overflow: hidden; }
        .adopt-card .adopt-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
        .adopt-card:hover .adopt-img-wrap img { transform: scale(1.05); }
        .adopt-card .adopt-badge { position: absolute; top: 12px; right: 12px; background: var(--primary); color: #fff; padding: 4px 12px; border-radius: 980px; font-size: 11px; font-weight: 600; }
        .adopt-card .adopt-info { padding: 16px 18px 20px; }
        .adopt-card .adopt-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
        .adopt-card .adopt-meta { font-size: 12px; color: var(--text-secondary); }

        /* ===== 活动 ===== */
        .activity-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
        .activity-card { background: #fff; border-radius: 18px; overflow: hidden; display: flex; border: 1px solid rgba(0,0,0,0.04); transition: all 0.4s; }
        .activity-card:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); }
        .activity-card .act-img-wrap { width: 200px; min-height: 160px; overflow: hidden; flex-shrink: 0; }
        .activity-card .act-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
        .activity-card .act-body { padding: 16px 18px; flex: 1; }
        .activity-card .act-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
        .activity-card .act-meta { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
        .activity-card .act-desc { font-size: 13px; color: var(--text-dark); line-height: 1.5; }

        /* ===== 抽奖 ===== */
        .lottery-section { max-width: 600px; margin: 0 auto; }
        .wheel-container { position: relative; width: 340px; height: 340px; margin: 0 auto; }
        .wheel-border { width: 340px; height: 340px; border-radius: 50%; overflow: hidden; position: relative; box-shadow: 0 8px 40px rgba(0,0,0,0.15); }
        .wheel-go-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg,#667eea,#764ba2); color: #fff; border: 4px solid #fff; font-size: 16px; font-weight: 700; cursor: pointer; z-index: 10; box-shadow: 0 4px 20px rgba(102,126,234,0.4); }
        .wheel-go-btn.disabled { opacity: 0.5; cursor: not-allowed; }
        .wheel-sector-text { position: absolute; font-size: 11px; font-weight: 600; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,0.3); pointer-events: none; }
        .lottery-tabs { display: flex; gap: 4px; justify-content: center; margin-bottom: 32px; }
        .lottery-tab { padding: 10px 20px; border-radius: 980px; font-size: 14px; font-weight: 500; cursor: pointer; border: none; background: var(--bg-light); color: var(--text-secondary); transition: all 0.3s; }
        .lottery-tab.active { background: var(--text-dark); color: #fff; }
        .lottery-panel { display: none; }
        .lottery-panel.active { display: block; animation: pageIn 0.4s ease-out; }

        /* ===== 卡牌游戏 ===== */
        .card-tabs { display: flex; gap: 4px; justify-content: center; margin-bottom: 40px; }
        .card-tab { padding: 10px 20px; border-radius: 980px; font-size: 14px; font-weight: 500; cursor: pointer; border: none; background: transparent; color: rgba(255,255,255,0.5); transition: all 0.3s; }
        .card-tab:hover { color: rgba(255,255,255,0.8); }
        .card-tab.active { background: rgba(255,255,255,0.1); color: #fff; }
        .card-panel { display: none; }
        .card-panel.active { display: block; animation: pageIn 0.4s ease-out; }
        .pet-cards-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
        .pet-cards-grid .no-data { grid-column: 1/-1; }
        .pet-card-unit { background: rgba(255,255,255,0.06); border-radius: 18px; overflow: hidden; cursor: pointer; position: relative; transition: all 0.4s; border: 2px solid transparent; }
        .pet-card-unit:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(0,0,0,0.3); }
        .pet-card-unit.rarity-N { border-color: rgba(176,190,197,0.3); }
        .pet-card-unit.rarity-R { border-color: rgba(66,165,245,0.4); box-shadow: 0 2px 12px rgba(66,165,245,0.15); }
        .pet-card-unit.rarity-SR { border-color: rgba(171,71,188,0.5); box-shadow: 0 2px 16px rgba(171,71,188,0.2); }
        .pet-card-unit.rarity-SSR { border-color: rgba(255,213,79,0.5); box-shadow: 0 4px 20px rgba(255,213,79,0.25); animation: ssrGlow 2.5s ease-in-out infinite; }
        .pet-card-unit.rarity-SSP { border-color: rgba(255,109,0,0.6); box-shadow: 0 4px 24px rgba(255,109,0,0.35); animation: sspGlow 2s ease-in-out infinite; }
        .pet-card-unit.rarity-UR { border-color: rgba(229,57,53,0.7); box-shadow: 0 4px 28px rgba(229,57,53,0.4); animation: urGlow 1.8s ease-in-out infinite; }
        @keyframes ssrGlow { 0%,100% { box-shadow: 0 4px 16px rgba(255,213,79,0.2); } 50% { box-shadow: 0 4px 32px rgba(255,213,79,0.45); } }
        @keyframes sspGlow { 0%,100% { box-shadow: 0 4px 20px rgba(255,109,0,0.25); } 50% { box-shadow: 0 6px 36px rgba(255,109,0,0.5), 0 0 16px rgba(255,152,0,0.3); } }
        @keyframes urGlow { 0%,100% { box-shadow: 0 4px 22px rgba(229,57,53,0.3), 0 0 8px rgba(255,215,0,0.15); } 50% { box-shadow: 0 6px 40px rgba(229,57,53,0.55), 0 0 24px rgba(255,215,0,0.4); } }
        .pet-card-unit .card-badge { position: absolute; top: 10px; right: 10px; padding: 3px 10px; border-radius: 980px; font-size: 11px; font-weight: 700; z-index: 2; }
        .pet-card-unit .card-badge.N { background: #b0bec5; color: #fff; }
        .pet-card-unit .card-badge.R { background: #42a5f5; color: #fff; }
        .pet-card-unit .card-badge.SR { background: #ab47bc; color: #fff; }
        .pet-card-unit .card-badge.SSR { background: #ffd54f; color: #333; }
        .pet-card-unit .card-badge.SSP { background: #ff6d00; color: #fff; animation: badgePulse 1.5s ease-in-out infinite; }
        .pet-card-unit .card-badge.UR { background: linear-gradient(135deg,#e53935,#ff6d00); color: #fff; animation: badgePulse 1s ease-in-out infinite; }
        @keyframes badgePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
        /* 卡牌头像 */
        .card-avatar-wrap { width:100%;height:140px;display:flex;align-items:center;justify-content:center;font-size:56px;position:relative;overflow:hidden; }
        .card-avatar-img { width:100%;height:100%;object-fit:cover; }
        .card-avatar-emoji { display:flex;align-items:center;justify-content:center;width:100%;height:100%; }
        .pet-card-unit .card-body { padding: 14px 16px 16px; }
        .pet-card-unit .card-name { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 2px; }
        .pet-card-unit .card-breed { font-size: 12px; color: rgba(255,255,255,0.4); margin-bottom: 6px; }
        .pet-card-unit .card-mbti { font-size: 11px; color: #ab47bc; font-weight: 600; margin-bottom: 8px; }
        .pet-card-unit .card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
        .pet-card-unit .stat { font-size: 11px; color: rgba(255,255,255,0.5); display: flex; align-items: center; gap: 3px; }
        .pet-card-unit .stat .bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.08); flex: 1; overflow: hidden; }
        .pet-card-unit .stat .bar-fill { height: 100%; border-radius: 2px; }
        .stat-hp .bar-fill { background: #e53935; }
        .stat-atk .bar-fill { background: #ff9800; }
        .stat-def .bar-fill { background: #42a5f5; }
        .stat-spd .bar-fill { background: #66bb6a; }
        .stat-mag .bar-fill { background: #ab47bc; }
        .pet-card-unit .card-skills { display: flex; gap: 4px; margin-top: 6px; }
        .pet-card-unit .skill-tag { padding: 2px 8px; border-radius: 980px; font-size: 10px; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); }

        /* 星宠图鉴 */
        .catalog-rarity-banner { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 24px; }
        .catalog-rarity-item { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 980px; background: rgba(255,255,255,0.08); }
        .catalog-rarity-badge { padding: 3px 10px; border-radius: 980px; color: #fff; font-size: 11px; font-weight: 700; }
        .catalog-rarity-name { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.8); }
        .catalog-rarity-desc { font-size: 11px; color: rgba(255,255,255,0.45); }
        .catalog-filter-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 32px; flex-wrap: wrap; }
        .catalog-filter-tab { padding: 8px 18px; border-radius: 24px; font-size: 13px; font-weight: 600; cursor: pointer; border: 2px solid rgba(255,255,255,0.1); background: transparent; color: rgba(255,255,255,0.5); transition: all 0.3s; }
        .catalog-filter-tab:hover { border-color: rgba(255,255,255,0.3); color: #fff; }
        .catalog-filter-tab.active { background: #fff; color: #1a1a2e; border-color: #fff; }
        .catalog-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
        .catalog-card { background: rgba(255,255,255,0.06); border-radius: 18px; overflow: hidden; position: relative; cursor: pointer; transition: all 0.4s; box-shadow: 0 0 0 2px transparent; }
        .catalog-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 0 2px transparent; }
        .catalog-card.rarity-N { box-shadow: 0 0 0 2px rgba(176,190,197,0.3); }
        .catalog-card.rarity-R { box-shadow: 0 0 0 2px rgba(66,165,245,0.4); }
        .catalog-card.rarity-SR { box-shadow: 0 0 0 2px rgba(171,71,188,0.5); }
        .catalog-card.rarity-SSR { box-shadow: 0 0 0 2px rgba(255,213,79,0.5); }
        .catalog-card.rarity-SSP { box-shadow: 0 0 0 2px rgba(255,109,0,0.6); }
        .catalog-card.rarity-UR { box-shadow: 0 0 0 2px rgba(229,57,53,0.6); }
        .catalog-card .cc-rarity-tag { position: absolute; top: 10px; right: 10px; padding: 3px 10px; border-radius: 980px; font-size: 11px; font-weight: 700; z-index: 2; }
        .catalog-card .cc-img-wrap { width: 100%; padding-top: 63.5%; position: relative; background: rgba(255,255,255,0.04); overflow: hidden; border-radius: 16px 16px 0 0; }
        .catalog-card .cc-img-wrap img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
        .catalog-card .cc-img-wrap .cc-emoji { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 64px; }
        .catalog-card .cc-body { padding: 12px 14px 14px; }
        .catalog-card .cc-name { font-size: 14px; font-weight: 700; color: #fff; }
        .catalog-card .cc-breed { font-size: 12px; color: rgba(255,255,255,0.4); }
        .catalog-card .cc-craft { font-size: 11px; color: rgba(255,255,255,0.35); }
        .catalog-card .cc-limited { font-size: 11px; color: #e53935; font-weight: 600; }

        /* 卡牌详情弹窗 */
        .card-detail-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 3000; align-items: center; justify-content: center; }
        .card-detail-overlay.active { display: flex; }
        .card-detail-card { background: #1a1a2e; border-radius: 24px; max-width: 480px; width: 90vw; overflow: hidden; animation: resultPop 0.4s ease-out; border: 1px solid rgba(255,255,255,0.1); }
        .card-detail-card .cd-body { padding: 24px 28px 28px; max-height:80vh;overflow-y:auto; }
        /* 卡牌详情头像 */
        .cd-avatar-section { width:100%;height:160px;border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;margin-bottom:16px; }
        .cd-avatar-img { width:100%;height:100%;object-fit:cover; }
        .cd-avatar-emoji { display:flex;align-items:center;justify-content:center;width:100%;height:100%; }
        /* 开包头像 */
        .prc-img-wrap { width:100%;height:120px;display:flex;align-items:center;justify-content:center;overflow:hidden; }
        .prc-img { width:100%;height:100%;object-fit:cover; }
        .prc-emoji { display:flex;align-items:center;justify-content:center;width:100%;height:100%; }
        .card-detail-card .cd-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .card-detail-card .cd-name { font-size: 22px; font-weight: 700; color: #fff; }
        .card-detail-card .cd-rarity { padding: 4px 12px; border-radius: 980px; font-size: 12px; font-weight: 700; }
        .card-detail-card .cd-breed { font-size: 14px; color: rgba(255,255,255,0.45); margin-bottom: 4px; }
        .card-detail-card .cd-mbti { font-size: 13px; color: #ab47bc; font-weight: 600; margin-bottom: 16px; }
        .card-detail-card .cd-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 16px; }
        .cd-stat-item { text-align: center; }
        .cd-stat-item .val { font-size: 20px; font-weight: 700; }
        .cd-stat-item .label { font-size: 11px; color: rgba(255,255,255,0.35); }
        .card-detail-card .cd-story { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.7; margin-bottom: 16px; }
        .card-detail-card .cd-skills-section h4 { font-size: 14px; margin-bottom: 8px; color: rgba(255,255,255,0.7); }
        .cd-skills-list { display: flex; gap: 6px; flex-wrap: wrap; }
        .cd-skill { padding: 6px 14px; border-radius: 980px; font-size: 12px; font-weight: 500; }
        .cd-skill.passive { background: rgba(46,125,50,0.2); color: #81c784; }
        .cd-skill.active { background: rgba(230,81,0,0.2); color: #ffb74d; }
        .cd-skill.ultimate { background: rgba(106,27,154,0.2); color: #ce93d8; }
        .card-detail-card .cd-actions { display: flex; gap: 8px; margin-top: 16px; }
        .card-detail-card .cd-btn { padding: 10px 20px; border-radius: 980px; font-size: 13px; font-weight: 500; border: none; cursor: pointer; }
        .cd-btn-primary { background: linear-gradient(135deg,#667eea,#764ba2); color: #fff; }
        .cd-btn-secondary { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); }

        /* 卡牌成长面板 */
        .cd-growth-panel { margin-top: 16px; padding: 16px; background: rgba(255,255,255,0.04); border-radius: 14px; border: 1px solid rgba(255,255,255,0.06); }
        .cd-growth-panel .gp-title { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.6); margin-bottom: 12px; }
        .cd-growth-panel .gp-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
        .cd-growth-panel .gp-label { font-size: 12px; color: rgba(255,255,255,0.45); white-space: nowrap; min-width: 50px; }
        .cd-growth-panel .gp-value { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.8); margin: 0 8px; text-align: right; min-width: 40px; }
        .cd-growth-panel .gp-bar-wrap { flex: 1; height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
        .cd-growth-panel .gp-bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s; }
        .gp-bar-exp { background: linear-gradient(90deg,#42a5f5,#ab47bc); }
        .gp-bar-intimacy { background: linear-gradient(90deg,#ef5350,#ff9800); }
        .gp-bar-winrate { background: linear-gradient(90deg,#66bb6a,#26a69a); }
        .gp-bar-evo { background: linear-gradient(90deg,#ffd54f,#ff6d00); }
        .cd-growth-panel .gp-evo-row { display: flex; gap: 6px; margin-top: 4px; }
        .cd-growth-panel .gp-evo-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.1); transition: all 0.3s; }
        .cd-growth-panel .gp-evo-dot.done { background: #66bb6a; box-shadow: 0 0 6px rgba(102,187,106,0.3); }
        .cd-growth-panel .gp-evo-text { font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 4px; }
        .cd-growth-panel .gp-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 10px 0; }

        /* 新手引导 */
        .guide-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 5000; background: rgba(0,0,0,0.65); }
        .guide-overlay.active { display: block; }
        .guide-highlight { position: absolute; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(0,0,0,0.65), 0 0 20px rgba(102,126,234,0.4); z-index: 5001; transition: all 0.45s cubic-bezier(0.25,0.46,0.45,0.94); pointer-events: none; }
        .guide-tooltip { position: absolute; z-index: 5002; background: #1a1a2e; border: 2px solid rgba(102,126,234,0.3); border-radius: 16px; padding: 20px 24px; max-width: 320px; animation: guideFadeIn 0.3s ease-out; }
        @keyframes guideFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
        .guide-tooltip .gt-step { font-size: 11px; color: #667eea; font-weight: 700; margin-bottom: 6px; }
        .guide-tooltip .gt-title { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 8px; }
        .guide-tooltip .gt-desc { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.6; margin-bottom: 16px; }
        .guide-tooltip .gt-actions { display: flex; gap: 8px; justify-content: space-between; align-items: center; }
        .guide-tooltip .gt-dots { display: flex; gap: 6px; }
        .guide-tooltip .gt-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.15); transition: all 0.3s; }
        .guide-tooltip .gt-dot.active { background: #667eea; }
        .guide-tooltip button { padding: 8px 18px; border-radius: 980px; font-size: 13px; font-weight: 500; cursor: pointer; border: none; }
        .guide-tooltip .gt-btn-primary { background: linear-gradient(135deg,#667eea,#764ba2); color: #fff; }
        .guide-tooltip .gt-btn-skip { background: transparent; color: rgba(255,255,255,0.3); font-size: 12px; }
        .catalog-detail-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 3000; align-items: center; justify-content: center; }
        .catalog-detail-overlay.active { display: flex; }
        .catalog-detail-card { background: #1a1a2e; border-radius: 24px; max-width: 500px; width: 92vw; max-height: 90vh; overflow-y: auto; animation: resultPop 0.4s ease-out; border: 1px solid rgba(255,255,255,0.1); }
        .catalog-detail-card .cdcat-img { width: 100%; padding-top: 63.5%; position: relative; background: rgba(255,255,255,0.04); overflow: hidden; }
        .catalog-detail-card .cdcat-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
        .catalog-detail-card .cdcat-img .cdcat-emoji { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 80px; }
        .catalog-detail-card .cdcat-body { padding: 24px 28px 28px; }
        .catalog-detail-card .cdcat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
        .catalog-detail-card .cdcat-name { font-size: 22px; font-weight: 700; color: #fff; }
        .catalog-detail-card .cdcat-rarity { padding: 4px 12px; border-radius: 980px; font-size: 12px; font-weight: 700; color: #fff; }
        .catalog-detail-card .cdcat-meta { font-size: 13px; color: rgba(255,255,255,0.45); margin-bottom: 12px; }
        .catalog-detail-card .cdcat-desc { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.7); margin-bottom: 12px; }
        .catalog-detail-card .cdcat-story { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.06); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
        .catalog-detail-card .cdcat-skills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
        .catalog-detail-card .cdcat-skill { padding: 4px 12px; border-radius: 980px; font-size: 12px; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); }
        .catalog-detail-card .cdcat-stats { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin-bottom: 16px; }
        .catalog-detail-card .cdcat-stat { text-align: center; }
        .catalog-detail-card .cdcat-stat .val { font-size: 18px; font-weight: 700; }
        .catalog-detail-card .cdcat-stat .label { font-size: 10px; color: rgba(255,255,255,0.35); }
        .catalog-detail-card .cdcat-close { width: 100%; padding: 12px; border-radius: 980px; border: none; background: rgba(255,255,255,0.12); color: #fff; font-size: 14px; cursor: pointer; }
        @keyframes resultPop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

        /* 抽卡/开包 */
        .pack-area { text-align: center; padding: 40px 0; }
        .pack-box { width: 200px; height: 280px; margin: 0 auto 24px; background: linear-gradient(135deg,#667eea,#764ba2); border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all 0.4s; box-shadow: 0 8px 32px rgba(102,126,234,0.3); position: relative; overflow: hidden; }
        .pack-box::before { content: ''; position: absolute; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%); }
        .pack-box:hover { transform: scale(1.05); box-shadow: 0 12px 40px rgba(102,126,234,0.4); }
        .pack-box .pack-icon { font-size: 64px; position: relative; }
        .pack-box .pack-label { font-size: 16px; font-weight: 700; color: #fff; position: relative; }
        .pack-box .pack-sub { font-size: 12px; color: rgba(255,255,255,0.7); position: relative; }
        /* 开包抖动动画 */
        .pack-box.shaking { animation: packShake 0.6s ease-in-out 2; }
        .pack-box.cracked { animation: packCrack 0.4s ease-out forwards; }
        @keyframes packShake { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-4deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(3deg); } }
        @keyframes packCrack { 0% { transform: scale(1); opacity: 1; } 60% { transform: scale(1.15); opacity: 0.8; } 100% { transform: scale(0.3); opacity: 0; } }
        .pack-crack-effect { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 5; }
        .pack-crack-effect .crack-particle { position: absolute; width: 12px; height: 12px; border-radius: 3px; background: #fff; opacity: 0; transition: none; }
        .pack-crack-effect .crack-particle.p1 { top: 20%; left: 30%; background: #667eea; }
        .pack-crack-effect .crack-particle.p2 { top: 40%; right: 25%; background: #764ba2; }
        .pack-crack-effect .crack-particle.p3 { top: 60%; left: 20%; background: #ffd54f; }
        .pack-crack-effect .crack-particle.p4 { top: 30%; right: 20%; background: #fff; }
        .pack-crack-effect .crack-particle.p5 { top: 70%; left: 50%; background: #667eea; }
        .pack-crack-effect .crack-particle.p6 { top: 15%; right: 35%; background: #ffd54f; }
        .pack-crack-effect.active .p1 { animation: cpBurst1 0.5s ease-out forwards; }
        .pack-crack-effect.active .p2 { animation: cpBurst2 0.5s ease-out 0.05s forwards; }
        .pack-crack-effect.active .p3 { animation: cpBurst3 0.5s ease-out 0.1s forwards; }
        .pack-crack-effect.active .p4 { animation: cpBurst4 0.5s ease-out 0.08s forwards; }
        .pack-crack-effect.active .p5 { animation: cpBurst5 0.5s ease-out 0.12s forwards; }
        .pack-crack-effect.active .p6 { animation: cpBurst6 0.5s ease-out 0.15s forwards; }
        @keyframes cpBurst1 { 0% { opacity: 1; transform: scale(0) translate(0,0); } 100% { opacity: 0; transform: scale(1.5) translate(-50px,-60px); } }
        @keyframes cpBurst2 { 0% { opacity: 1; transform: scale(0) translate(0,0); } 100% { opacity: 0; transform: scale(1.5) translate(60px,-40px); } }
        @keyframes cpBurst3 { 0% { opacity: 1; transform: scale(0) translate(0,0); } 100% { opacity: 0; transform: scale(1.5) translate(-30px,40px); } }
        @keyframes cpBurst4 { 0% { opacity: 1; transform: scale(0) translate(0,0); } 100% { opacity: 0; transform: scale(1.5) translate(45px,50px); } }
        @keyframes cpBurst5 { 0% { opacity: 1; transform: scale(0) translate(0,0); } 100% { opacity: 0; transform: scale(1.5) translate(0,-70px); } }
        @keyframes cpBurst6 { 0% { opacity: 1; transform: scale(0) translate(0,0); } 100% { opacity: 0; transform: scale(1.5) translate(-40px,20px); } }
        .pack-glow-flash { position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,213,79,0.8) 0%, rgba(255,152,0,0.4) 40%, transparent 70%); transform: translate(-50%,-50%); animation: packGlowFlash 0.4s ease-out forwards; z-index: 6; pointer-events: none; }
        @keyframes packGlowFlash { 0% { width: 0; height: 0; opacity: 1; } 100% { width: 400px; height: 400px; opacity: 0; } }
        .rarity-flash { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 2999; pointer-events: none; opacity: 1; display: none; }
        .rarity-flash.active { display: block; animation: rarityFlashIn 0.6s ease-out both; }
        @keyframes rarityFlashIn { 0% { opacity: 1; } 100% { opacity: 0; } }
        .pack-result { display: none; padding: 24px 0; }
        .pack-result.active { display: block; }
        .pack-result-cards { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
        .pack-result-card { width: 160px; background: rgba(255,255,255,0.08); border-radius: 16px; overflow: hidden; animation: cardFlip 0.6s ease-out; border: 2px solid rgba(255,255,255,0.1); }
        .pack-result-card.high-rarity { animation: cardFlipGold 0.6s ease-out; }
        @keyframes cardFlip { from { transform: rotateY(90deg) scale(0.5); opacity: 0; } to { transform: rotateY(0) scale(1); opacity: 1; } }
        @keyframes cardFlipGold { from { transform: rotateY(90deg) scale(0.3); opacity: 0; } to { transform: rotateY(0) scale(1.05); opacity: 1; } }
        .pack-result-card .prc-body { padding: 10px 12px; }
        .pack-result-card .prc-name { font-size: 13px; font-weight: 700; color: #fff; }
        .pack-result-card .prc-rarity { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.7); }
        .pack-points { font-size: 14px; color: rgba(255,255,255,0.5); margin-top: 16px; }
        .pack-points .num { font-weight: 700; color: #ffd54f; }

        /* 对战 */
        .battle-arena { max-width: 600px; margin: 0 auto; }
        .battle-team { background: rgba(255,255,255,0.06); border-radius: 18px; padding: 20px; margin-bottom: 16px; border: 1px solid rgba(255,255,255,0.08); }
        .battle-team h3 { font-size: 16px; font-weight: 600; margin-bottom: 12px; color: rgba(255,255,255,0.7); }
        .battle-team-slots { display: flex; gap: 10px; justify-content: center; }
        .battle-slot { width: 80px; height: 100px; border-radius: 12px; border: 2px dashed rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; font-size: 11px; color: rgba(255,255,255,0.4); cursor: pointer; transition: all 0.3s; overflow: hidden; }
        .battle-slot.filled { border: 2px solid rgba(102,126,234,0.5); background: rgba(102,126,234,0.08); color: rgba(255,255,255,0.8); }
        .battle-slot.filled .bs-name { font-size: 9px; text-align: center; padding: 2px; font-weight: 600; color: rgba(255,255,255,0.7); }
        .battle-slot.filled.enemy-equipped { border-color: rgba(229,57,53,0.6); }
        .bs-slot-avatar { width:100%;height:70px;display:flex;align-items:center;justify-content:center;overflow:hidden; }
        .battle-start-btn { display: block; width: 100%; padding: 14px; border-radius: 980px; font-size: 16px; font-weight: 600; background: linear-gradient(135deg,#667eea,#764ba2); color: #fff; border: none; cursor: pointer; margin-top: 20px; }
        .battle-result { margin-top: 24px; text-align: center; padding: 24px; background: rgba(255,255,255,0.06); border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); }
        .battle-result .br-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; color: #fff; }

        /* ===== 宠物管理页 ===== */
        .pet-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 32px; }
        .pet-tab-btn { padding: 10px 20px; border-radius: 980px; font-size: 14px; font-weight: 500; cursor: pointer; border: none; background: var(--bg-light); color: var(--text-secondary); transition: all 0.3s; }
        .pet-tab-btn.active { background: var(--text-dark); color: #fff; }
        .pet-tab-panel { display: none; }
        .web-pet-card { background: #fff; border-radius: 16px; padding: 20px; margin-bottom: 12px; border: 1px solid rgba(0,0,0,0.04); }
        .wpc-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
        .wpc-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
        .wpc-name { font-size: 16px; font-weight: 700; }
        .wpc-breed { font-size: 13px; color: var(--text-secondary); }
        .wpc-stats { display: flex; gap: 16px; font-size: 13px; color: var(--text-secondary); }
        .pet-tool-card { background: #fff; border-radius: 16px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.3s; border: 1px solid rgba(0,0,0,0.04); }
        .pet-tool-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
        .ptc-icon { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 12px; }
        .ptc-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
        .ptc-desc { font-size: 12px; color: var(--text-secondary); }
        .health-tools-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }

        /* ===== 消息页 ===== */
        .msg-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 32px; }
        .msg-tab { padding: 10px 20px; border-radius: 980px; font-size: 14px; font-weight: 500; cursor: pointer; border: none; background: var(--bg-light); color: var(--text-secondary); transition: all 0.3s; }
        .msg-tab.active { background: var(--text-dark); color: #fff; }
        .msg-item { display: flex; align-items: center; gap: 12px; padding: 16px; background: #fff; border-radius: 12px; margin-bottom: 8px; border: 1px solid rgba(0,0,0,0.04); }
        .mi-avatar { width: 40px; height: 40px; border-radius: 50%; }
        .mi-content { flex: 1; }
        .mi-title { font-size: 14px; font-weight: 600; }
        .mi-text { font-size: 13px; color: var(--text-secondary); }
        .mi-badge { background: #e53935; color: #fff; font-size: 10px; padding: 2px 8px; border-radius: 980px; }
        .mi-time { font-size: 11px; color: var(--text-secondary); }

        /* ===== 个人中心 ===== */
        .profile-header { display: flex; align-items: center; gap: 20px; margin-bottom: 32px; }
        .profile-avatar-lg { width: 80px; height: 80px; border-radius: 50%; background: var(--bg-light); display: flex; align-items: center; justify-content: center; font-size: 36px; overflow: hidden; }
        .profile-info { flex: 1; }
        .profile-name { font-size: 22px; font-weight: 700; }
        .profile-desc { font-size: 14px; color: var(--text-secondary); }
        .profile-stats { display: flex; gap: 24px; margin-bottom: 32px; }
        .ps-item { text-align: center; }
        .ps-num { font-size: 24px; font-weight: 700; }
        .ps-label { font-size: 12px; color: var(--text-secondary); }
        .prof-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 24px; }
        .prof-tab { padding: 8px 16px; border-radius: 980px; font-size: 13px; font-weight: 500; cursor: pointer; border: none; background: var(--bg-light); color: var(--text-secondary); transition: all 0.3s; }
        .prof-tab.active { background: var(--primary); color: #fff; }
        .prof-panel { display: none; }
        .prof-list-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border-radius: 12px; margin-bottom: 8px; border: 1px solid rgba(0,0,0,0.04); }
        .pli-img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; }
        .pli-info { flex: 1; }
        .pli-title { font-size: 14px; font-weight: 600; }
        .pli-desc { font-size: 12px; color: var(--text-secondary); }
        .pli-status { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 980px; }
        .pli-status.paid { background: #e3f2fd; color: #1976d2; }
        .pli-status.shipped { background: #fff3e0; color: #f57c00; }
        .pli-status.completed { background: #e8f5e9; color: #388e3c; }
        .pli-status.cancelled { background: #ffebee; color: #d32f2f; }
        .pli-status.pending { background: #fff8e1; color: #f9a825; }

        /* 订单卡片 */
        .order-card { background: #fff; border-radius: 14px; margin-bottom: 12px; border: 1px solid rgba(0,0,0,0.06); overflow: hidden; transition: all 0.3s; }
        .order-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
        .order-card-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: rgba(0,0,0,0.02); border-bottom: 1px solid rgba(0,0,0,0.04); }
        .order-card-no { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
        .order-card-status { font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 980px; }
        .order-card-status.paid { background: #e3f2fd; color: #1976d2; }
        .order-card-status.shipped { background: #fff3e0; color: #f57c00; }
        .order-card-status.completed { background: #e8f5e9; color: #388e3c; }
        .order-card-status.cancelled { background: #ffebee; color: #d32f2f; }
        .order-card-status.pending { background: #fff8e1; color: #f9a825; }
        .order-items-list { padding: 12px 16px; }
        .order-item-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.03); }
        .order-item-row:last-child { border-bottom: none; }
        .order-item-img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--bg-light); flex-shrink: 0; }
        .order-item-img-placeholder { width: 56px; height: 56px; border-radius: 10px; background: var(--bg-light); display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; }
        .order-item-info { flex: 1; min-width: 0; }
        .order-item-name { font-size: 14px; font-weight: 600; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .order-item-meta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
        .order-item-price { font-size: 14px; font-weight: 700; color: #e53935; white-space: nowrap; }
        .order-card-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: rgba(0,0,0,0.02); border-top: 1px solid rgba(0,0,0,0.04); }
        .order-total { font-size: 14px; color: var(--text-secondary); }
        .order-total .amount { font-size: 18px; font-weight: 800; color: #e53935; }
        .order-logistics { font-size: 12px; color: var(--text-secondary); padding: 8px 16px; background: #fafafa; display: flex; align-items: center; gap: 6px; }
        .order-logistics-icon { font-size: 14px; }
        .order-actions { display: flex; gap: 8px; }
        .order-action-btn { padding: 6px 14px; border-radius: 980px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid rgba(0,0,0,0.1); background: #fff; color: var(--text-dark); transition: all 0.3s; }
        .order-action-btn:hover { background: var(--bg-light); }
        .order-action-btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
        .order-action-btn.primary:hover { background: var(--primary-dark); }
        .order-empty { text-align: center; padding: 60px 20px; color: var(--text-secondary); }
        .order-empty .icon { font-size: 56px; margin-bottom: 12px; opacity: 0.3; }
        .order-time { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }

        /* 订单详情弹窗 */
        .order-detail-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 3500; align-items: center; justify-content: center; padding: 16px; }
        .order-detail-overlay.active { display: flex; }
        .order-detail-modal { background: #fff; border-radius: 20px; max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; animation: resultPop 0.3s ease-out; }
        .order-detail-modal .od-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid rgba(0,0,0,0.06); position: sticky; top: 0; background: #fff; z-index: 10; border-radius: 20px 20px 0 0; }
        .order-detail-modal .od-title { font-size: 17px; font-weight: 700; }
        .order-detail-modal .od-close { width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,0.05); border: none; font-size: 18px; cursor: pointer; color: var(--text-secondary); }
        .order-detail-modal .od-section { padding: 16px 20px; border-bottom: 8px solid var(--bg-light); }
        .order-detail-modal .od-section:last-child { border-bottom: none; }
        .order-detail-modal .od-section-title { font-size: 14px; font-weight: 700; margin-bottom: 12px; color: var(--text-dark); }
        .order-detail-modal .od-status-banner { padding: 20px; text-align: center; background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border-radius: 0; }
        .order-detail-modal .od-status-banner.cancelled { background: linear-gradient(135deg, #757575, #9e9e9e); }
        .order-detail-modal .od-status-banner.completed { background: linear-gradient(135deg, #43a047, #2e7d32); }
        .order-detail-modal .od-status-banner.paid { background: linear-gradient(135deg, #1976d2, #1565c0); }
        .order-detail-modal .od-status-banner.refunding { background: linear-gradient(135deg, #f57c00, #e65100); }
        .order-detail-modal .od-status-text { font-size: 20px; font-weight: 700; }
        .order-detail-modal .od-status-desc { font-size: 13px; opacity: 0.8; margin-top: 4px; }
        .order-detail-modal .od-info-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }
        .order-detail-modal .od-info-label { color: var(--text-secondary); }
        .order-detail-modal .od-info-value { color: var(--text-dark); font-weight: 500; text-align: right; max-width: 60%; word-break: break-all; }
        .order-detail-modal .od-amount { font-size: 22px; font-weight: 800; color: #e53935; }
        .order-detail-modal .od-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 16px 20px; }
        .order-detail-modal .od-btn { flex: 1; min-width: 100px; padding: 10px; border-radius: 980px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid rgba(0,0,0,0.1); background: #fff; color: var(--text-dark); text-align: center; transition: all 0.3s; }
        .order-detail-modal .od-btn:hover { background: var(--bg-light); }
        .order-detail-modal .od-btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
        .order-detail-modal .od-btn.danger { color: #e53935; border-color: #e53935; }
        .order-detail-modal .od-product-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.03); }
        .order-detail-modal .od-product-row:last-child { border-bottom: none; }
        .order-detail-modal .od-product-img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--bg-light); flex-shrink: 0; }
        .order-detail-modal .od-product-placeholder { width: 64px; height: 64px; border-radius: 10px; background: var(--bg-light); display: flex; align-items: center; justify-content: center; font-size: 32px; flex-shrink: 0; }
        .order-detail-modal .od-product-info { flex: 1; }
        .order-detail-modal .od-product-name { font-size: 14px; font-weight: 600; }
        .order-detail-modal .od-product-meta { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
        .order-detail-modal .od-product-price { font-size: 14px; font-weight: 700; color: #e53935; }
        .order-detail-modal .od-copy-btn { background: none; border: none; color: var(--primary); font-size: 12px; cursor: pointer; padding: 2px 6px; }

        /* 评价输入区 */
        .review-input-area { padding: 16px 20px; background: var(--bg-light); border-radius: 12px; margin: 12px 0; }
        .review-stars { font-size: 28px; cursor: pointer; letter-spacing: 4px; }
        .review-stars .star { color: #ddd; transition: color 0.2s; }
        .review-stars .star.active { color: #ffc107; }
        .review-textarea { width: 100%; min-height: 80px; padding: 12px; border-radius: 10px; border: 1px solid #e0e0e0; font-size: 14px; margin-top: 10px; resize: vertical; font-family: inherit; }
        .review-submit-btn { margin-top: 10px; padding: 10px 24px; border-radius: 980px; background: var(--primary); color: #fff; border: none; font-size: 14px; font-weight: 600; cursor: pointer; }

        /* ===== 弹窗 ===== */
        .modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 2000; align-items: center; justify-content: center; padding: 20px; }
        .modal-overlay.active { display: flex; }
        .product-modal { background: #fff; border-radius: 24px; max-width: 800px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; }
        .modal-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.05); border: none; font-size: 20px; cursor: pointer; z-index: 10; }
        .modal-gallery { width: 100%; height: 400px; overflow: hidden; background: var(--bg-light); border-radius: 24px 24px 0 0; display: flex; align-items: center; justify-content: center; }
        .modal-gallery img { width: 100%; height: 100%; object-fit: cover; }
        .modal-body { padding: 28px; }
        .modal-body h2 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
        .modal-price { font-size: 28px; font-weight: 700; color: #e53935; margin-bottom: 12px; }
        .modal-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 16px; }
        .modal-buy { display: flex; gap: 12px; margin-top: 20px; }
        .btn-cart { flex: 1; padding: 14px; border-radius: 980px; background: var(--bg-light); color: var(--text-dark); font-size: 15px; font-weight: 600; border: none; cursor: pointer; }
        .btn-buy { flex: 1; padding: 14px; border-radius: 980px; background: var(--primary); color: #fff; font-size: 15px; font-weight: 600; border: none; cursor: pointer; }

        .login-modal { background: #fff; border-radius: 24px; max-width: 400px; width: 100%; padding: 36px 28px; }
        .login-modal h2 { font-size: 22px; font-weight: 700; margin-bottom: 8px; text-align: center; }
        .login-modal .subtitle { font-size: 14px; color: var(--text-secondary); margin-bottom: 24px; text-align: center; }
        .form-group { margin-bottom: 16px; }
        .form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
        .form-group input { width: 100%; padding: 12px 16px; border-radius: 12px; border: 1px solid #e0e0e0; font-size: 15px; }
        .phone-row { display: flex; gap: 8px; }
        .phone-row input { flex: 1; }
        .sms-btn { padding: 12px 16px; border-radius: 12px; background: var(--primary); color: #fff; border: none; font-size: 13px; cursor: pointer; white-space: nowrap; }
        .sms-btn:disabled { opacity: 0.5; }
        .login-error { color: #e53935; font-size: 13px; margin-bottom: 12px; min-height: 18px; }
        .login-submit { width: 100%; padding: 14px; border-radius: 980px; background: var(--primary); color: #fff; font-size: 16px; font-weight: 600; border: none; cursor: pointer; }
        .divider { text-align: center; margin: 20px 0; position: relative; }
        .divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #e0e0e0; }
        .divider span { background: #fff; padding: 0 16px; position: relative; font-size: 13px; color: var(--text-secondary); }
        .admin-btn { width: 100%; padding: 12px; border-radius: 980px; background: var(--bg-light); color: var(--text-secondary); font-size: 14px; border: none; cursor: pointer; }

        /* 购物车 */
        .cart-fab { position: fixed; bottom: 80px; right: 20px; width: 48px; height: 48px; border-radius: 50%; background: var(--primary); color: #fff; border: none; cursor: pointer; font-size: 20px; z-index: 999; box-shadow: 0 4px 16px rgba(0,122,255,0.3); }
        .cart-fab .badge { position: absolute; top: -4px; right: -4px; background: #e53935; color: #fff; font-size: 10px; padding: 2px 8px; border-radius: 980px; }
        .cart-mask { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 1999; }
        .cart-mask.active { display: block; }
        .cart-sidebar { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 90vw; background: #fff; z-index: 2000; transform: translateX(100%); transition: transform 0.3s ease; display: flex; flex-direction: column; }
        .cart-sidebar.active { transform: translateX(0); }
        .cart-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(0,0,0,0.06); }
        .cart-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
        .cart-empty { text-align: center; padding: 60px 20px; color: var(--text-secondary); }
        .cart-empty .icon { font-size: 48px; margin-bottom: 12px; }
        .cart-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.04); }
        .cart-item img { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; }
        .cart-item .ci-info { flex: 1; }
        .cart-item .ci-name { font-size: 14px; font-weight: 600; }
        .cart-item .ci-price { font-size: 14px; color: #e53935; font-weight: 700; }
        .cart-footer { padding: 16px 20px; border-top: 1px solid rgba(0,0,0,0.06); }
        .cart-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .cart-total .amount { font-size: 20px; font-weight: 700; color: #e53935; }
        .cart-checkout { width: 100%; padding: 14px; border-radius: 980px; background: var(--primary); color: #fff; font-size: 16px; font-weight: 600; border: none; cursor: pointer; }

        /* Toast */
        .toast { position: fixed; top: 60px; left: 50%; transform: translateX(-50%) translateY(-20px); background: rgba(0,0,0,0.85); color: #fff; padding: 12px 24px; border-radius: 980px; font-size: 14px; z-index: 9999; opacity: 0; transition: all 0.3s ease; pointer-events: none; max-width: 90vw; text-align: center; }
        .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
        .toast.error { background: rgba(229,57,53,0.95); }
        .toast.success { background: rgba(38,166,154,0.95); }
        .toast.info { background: rgba(25,118,210,0.95); }

        /* 骨架屏 */
        .skeleton-card { background: #fff; border-radius: 18px; overflow: hidden; border: 1px solid rgba(0,0,0,0.04); }
        .skeleton-img { width: 100%; height: 200px; background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%); background-size: 200% 100%; animation: skeletonShimmer 1.5s ease-in-out infinite; }
        .skeleton-line { height: 14px; border-radius: 7px; background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%); background-size: 200% 100%; animation: skeletonShimmer 1.5s ease-in-out infinite; margin: 8px 16px; }
        .skeleton-line.short { width: 60%; }
        .skeleton-line.title { height: 18px; width: 80%; }
        @keyframes skeletonShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

        /* PWA离线提示 */
        .offline-banner { display: none; position: fixed; top: 48px; left: 0; right: 0; background: #ff9800; color: #fff; padding: 8px 20px; font-size: 13px; text-align: center; z-index: 1001; }
        .offline-banner.show { display: block; }

        /* 页脚 */
        .footer { background: var(--bg-light); padding: 60px 22px 24px; }
        .footer-content { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
        .footer-brand .logo { font-size: 19px; font-weight: 600; margin-bottom: 8px; }
        .footer-brand p { font-size: 14px; color: var(--text-secondary); }
        .footer-col h4 { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
        .footer-col a { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; cursor: pointer; }
        .footer-col a:hover { color: var(--primary); }
        .footer-bottom { max-width: 980px; margin: 0 auto; padding-top: 24px; border-top: 1px solid rgba(0,0,0,0.06); display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary); }

        /* ===== 战斗场景 ===== */
        .battle-scene {
            position: relative; width: 100%; max-width: 600px; margin: 0 auto 20px;
            height: 420px; border-radius: 16px; overflow: hidden;
            border: 2px solid rgba(102,126,234,0.2);
        }
        .bs-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; }
        .bs-sky { position: absolute; top: 0; left: 0; right: 0; height: 60%; background: linear-gradient(180deg, #0a0a1e 0%, #1a1a3e 40%, #2a2a5e 70%, #3a3a7e 100%); }
        /* 天空动态效果 - 星星闪烁 */
        .bs-sky::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(1.5px 1.5px at 15% 20%, #fff, transparent), radial-gradient(1px 1px at 35% 15%, rgba(255,255,255,0.7), transparent), radial-gradient(2px 2px at 55% 25%, #fff, transparent), radial-gradient(1px 1px at 75% 12%, rgba(255,255,255,0.5), transparent), radial-gradient(1.5px 1.5px at 85% 22%, rgba(255,213,79,0.8), transparent), radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.6), transparent), radial-gradient(2px 2px at 65% 30%, rgba(102,126,234,0.7), transparent), radial-gradient(1px 1px at 45% 18%, rgba(255,255,255,0.4), transparent), radial-gradient(1.5px 1.5px at 92% 28%, rgba(255,255,255,0.5), transparent); background-size: 100% 100%; animation: starsTwinkle 3s ease-in-out infinite; }
        @keyframes starsTwinkle { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
        /* 天空极光效果 */
        .bs-sky::after { content: ''; position: absolute; bottom: 10%; left: -20%; width: 140%; height: 30%; background: radial-gradient(ellipse at 50% 100%, rgba(102,126,234,0.08) 0%, rgba(118,75,162,0.04) 40%, transparent 70%); animation: skyAurora 4s ease-in-out infinite; pointer-events: none; }
        @keyframes skyAurora { 0%,100% { transform: translateX(-5%); } 50% { transform: translateX(5%); } }
        .bs-mountains { position: absolute; bottom: 40%; left: 0; right: 0; height: 100px; background: linear-gradient(180deg, transparent 0%, rgba(20,20,50,0.6) 50%, rgba(15,15,35,0.9) 100%); clip-path: polygon(0 100%, 10% 40%, 20% 70%, 35% 20%, 50% 60%, 65% 30%, 80% 55%, 90% 25%, 100% 50%, 100% 100%); }
        /* 远山微动 */
        .bs-mountains::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, transparent 0%, rgba(15,15,35,0.5) 60%, rgba(10,10,25,0.8) 100%); clip-path: polygon(0 100%, 5% 50%, 18% 65%, 28% 35%, 42% 55%, 58% 40%, 72% 60%, 82% 35%, 92% 50%, 100% 45%, 100% 100%); animation: mountainShift 6s ease-in-out infinite; }
        @keyframes mountainShift { 0%,100% { opacity: 0.4; } 50% { opacity: 0.7; } }
        .bs-ground { position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background: linear-gradient(180deg, #1a1a2e 0%, #0f0f23 100%); }
        .bs-grid { position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background-image: linear-gradient(rgba(102,126,234,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(102,126,234,0.08) 1px, transparent 1px); background-size: 40px 40px; transform: perspective(300px) rotateX(60deg); transform-origin: bottom; animation: gridPulse 3s ease-in-out infinite; }
        @keyframes gridPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }

        /* 战斗角色 */
        .bs-enemy-area { position: absolute; top: 30px; left: 0; right: 0; display: flex; justify-content: center; gap: 40px; z-index: 10; }
        .bs-my-area { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: center; gap: 40px; z-index: 10; }
        .bs-char { position: relative; width: 120px; height: 160px; display: flex; flex-direction: column; align-items: center; transition: opacity 0.3s, filter 0.3s; }
        .bs-char.dead { opacity: 0.2; filter: grayscale(1); }
        /* 我方攻击：蓄力后撤 → 冲刺向敌方 → 命中停留 → 归位 */
        .bs-char.attacking { z-index: 20; animation: bsAttackMy 0.6s cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
        .bs-char.attacking::before { content: ''; position: absolute; inset: 5%; background: radial-gradient(circle, rgba(255,235,59,0.55) 0%, rgba(255,152,0,0.25) 40%, transparent 70%); border-radius: 50%; animation: bsDashTrail 0.6s ease forwards; pointer-events: none; z-index: -1; }
        @keyframes bsAttackMy {
            0% { transform: translateY(0) scale(1) rotate(0deg); }
            15% { transform: translateY(10px) scale(0.88) rotate(-6deg); }
            40% { transform: translateY(-115px) scale(1.35) rotate(10deg); }
            55% { transform: translateY(-135px) scale(1.5) rotate(0deg); }
            72% { transform: translateY(-128px) scale(1.4) rotate(0deg); }
            100% { transform: translateY(0) scale(1) rotate(0deg); }
        }
        /* 敌方攻击：冲向我方 */
        .bs-char.enemy.attacking { z-index: 20; animation: bsAttackEnemy 0.6s cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
        .bs-char.enemy.attacking::before { content: ''; position: absolute; inset: 5%; background: radial-gradient(circle, rgba(244,67,54,0.55) 0%, rgba(244,67,54,0.25) 40%, transparent 70%); border-radius: 50%; animation: bsDashTrail 0.6s ease forwards; pointer-events: none; z-index: -1; }
        @keyframes bsAttackEnemy {
            0% { transform: translateY(0) scale(1) rotate(0deg); }
            15% { transform: translateY(-10px) scale(0.88) rotate(6deg); }
            40% { transform: translateY(115px) scale(1.35) rotate(-10deg); }
            55% { transform: translateY(135px) scale(1.5) rotate(0deg); }
            72% { transform: translateY(128px) scale(1.4) rotate(0deg); }
            100% { transform: translateY(0) scale(1) rotate(0deg); }
        }
        @keyframes bsDashTrail { 0% { opacity: 0; transform: scale(0.4); } 40% { opacity: 0.85; transform: scale(2.2); } 100% { opacity: 0; transform: scale(3.5); } }
        /* 受击：剧烈抖动 + 红色闪光 */
        .bs-char.hit { animation: bsHit 0.4s ease; }
        .bs-char.hit::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,20,20,0.65) 0%, rgba(255,60,60,0.3) 40%, transparent 70%); border-radius: 50%; animation: bsHitFlash 0.4s ease forwards; pointer-events: none; }
        @keyframes bsHit {
            0%,100% { transform: translateX(0) rotate(0deg); }
            12% { transform: translateX(-14px) rotate(-5deg); }
            28% { transform: translateX(14px) rotate(5deg); }
            44% { transform: translateX(-10px) rotate(-3deg); }
            60% { transform: translateX(10px) rotate(3deg); }
            80% { transform: translateX(-5px) rotate(0deg); }
        }
        @keyframes bsHitFlash { 0% { opacity: 0; transform: scale(0.4); } 25% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0; transform: scale(1.8); } }
        .bs-char-sprite { font-size: 48px; filter: drop-shadow(0 4px 12px rgba(102,126,234,0.4)); animation: bsIdle 2s ease-in-out infinite; width: 100px; height: 110px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
        /* 视频人物：mix-blend-mode:screen 去除黑色背景，需要亮底才能生效 */
        .bs-char-video { mix-blend-mode: screen; border-radius: 8px; }
        .bs-char-sprite.has-video { background: linear-gradient(135deg, #c8d6e5 0%, #dde4ed 100%); border-radius: 10px; animation: none; }
        .bs-char.enemy .bs-char-sprite { animation: bsIdleEnemy 2s ease-in-out infinite; }
        @keyframes bsIdle { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
        @keyframes bsIdleEnemy { 0%,100% { transform: translateY(0) scaleX(-1); } 50% { transform: translateY(-4px) scaleX(-1); } }
        .bs-char-name { font-size: 11px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.8); margin-top: 2px; white-space: nowrap; }
        .bs-hp-bar { width: 60px; height: 6px; background: rgba(0,0,0,0.5); border-radius: 3px; overflow: hidden; margin-top: 4px; }
        .bs-hp-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
        .bs-hp-fill.my { background: linear-gradient(90deg, #43a047, #66bb6a); }
        .bs-hp-fill.enemy { background: linear-gradient(90deg, #e53935, #ef5350); }
        .bs-hp-text { font-size: 9px; color: rgba(255,255,255,0.7); margin-top: 2px; }
        .bs-shield-badge { position: absolute; top: -5px; right: -5px; background: #42a5f5; color: #fff; font-size: 9px; padding: 1px 6px; border-radius: 8px; }
        .bs-element-badge { position: absolute; top: -5px; left: -5px; font-size: 14px; }

        /* 特效层 */
        .bs-effects { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 15; pointer-events: none; }
        .fx-slash { position: absolute; font-size: 40px; animation: fxSlash 0.5s ease-out forwards; }
        @keyframes fxSlash { 0% { opacity: 0; transform: scale(0.3) rotate(-45deg); } 50% { opacity: 1; transform: scale(1.5) rotate(0deg); } 100% { opacity: 0; transform: scale(2) rotate(45deg); } }
        .fx-damage { position: absolute; font-size: 20px; font-weight: 800; color: #e53935; text-shadow: 0 2px 4px rgba(0,0,0,0.8); animation: fxDamage 1s ease-out forwards; pointer-events: none; }
        @keyframes fxDamage { 0% { opacity: 0; transform: translateY(0) scale(0.5); } 20% { opacity: 1; transform: translateY(-10px) scale(1.2); } 100% { opacity: 0; transform: translateY(-50px) scale(1); } }
        .fx-crit { color: #ffd54f; font-size: 28px; }
        .fx-heal { color: #66bb6a; }
        .fx-element { position: absolute; font-size: 36px; animation: fxElement 0.6s ease-out forwards; }
        @keyframes fxElement { 0% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1.5); } 100% { opacity: 0; transform: scale(2.5); } }
        .fx-shield { position: absolute; font-size: 36px; animation: fxShield 0.8s ease-out forwards; }
        @keyframes fxShield { 0% { opacity: 0; transform: scale(0); } 50% { opacity: 0.8; transform: scale(1.2); } 100% { opacity: 0; transform: scale(1.5); } }
        .fx-aura { position: absolute; width: 80px; height: 80px; border-radius: 50%; animation: fxAura 0.8s ease-out forwards; }
        @keyframes fxAura { 0% { opacity: 0.8; transform: scale(0.3); } 100% { opacity: 0; transform: scale(2); } }
        .fx-summon-sparkle { position: absolute; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 32px; animation: fxSummonSparkle 0.8s ease-out forwards; }
        @keyframes fxSummonSparkle { 0% { opacity: 0; transform: scale(0) rotate(0deg); } 30% { opacity: 1; transform: scale(1.8) rotate(90deg); } 100% { opacity: 0; transform: scale(2.5) rotate(180deg); } }
        .fx-summon-aura { position: absolute; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, rgba(102,126,234,0.3) 0%, rgba(118,75,162,0.1) 40%, transparent 70%); animation: fxAura 0.8s ease-out forwards; }

        /* 攻击动画视频覆盖层 */
        .fx-attack-video { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 50; background: radial-gradient(circle, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 50%, transparent 100%); display: flex; align-items: center; justify-content: center; pointer-events: none; animation: fxAtkVideoFade 0.3s ease-out; }
        @keyframes fxAtkVideoFade { 0% { opacity: 0; } 100% { opacity: 1; } }

        /* HUD */
        .bs-hud { position: absolute; top: 8px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 16px; z-index: 20; }
        .bs-round { background: rgba(0,0,0,0.5); color: #ffd54f; font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 8px; }
        .bs-mana { background: rgba(0,0,0,0.5); color: #42a5f5; font-size: 12px; padding: 4px 12px; border-radius: 8px; }

        /* 队伍选择区 */
        .battle-setup { max-width: 600px; margin: 0 auto; }
        /* 卡组管理 */
        .deck-manager { background: rgba(255,255,255,0.04); border-radius: 14px; padding: 16px; margin-bottom: 16px; border: 1px solid rgba(255,255,255,0.06); }
        .deck-btn { padding: 8px 16px; border-radius: 10px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; transition: all 0.3s; }
        .deck-btn.save { background: rgba(102,126,234,0.2); color: #667eea; }
        .deck-btn.save:hover { background: rgba(102,126,234,0.35); }
        .deck-btn.delete { background: rgba(229,57,53,0.15); color: #ef5350; padding: 6px 10px; }
        .deck-btn.delete:hover { background: rgba(229,57,53,0.3); }
        .deck-select-wrap { position: relative; }
        #deckSelect option { background: #1a1a2e; color: #fff; }

        /* 无障碍：焦点样式 */
        *:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
        .home-card:focus-visible, .nav-tab:focus-visible, .btn:focus-visible { outline: 2px solid var(--primary-dark); }
        /* 可访问性辅助类 */
        .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

        /* 移动端汉堡菜单 */
        .nav-hamburger { display: none; width: 32px; height: 32px; border: none; background: none; cursor: pointer; font-size: 22px; color: var(--text-dark); }
        .mobile-nav-drawer { display: none; position: fixed; top: 48px; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.98); backdrop-filter: blur(20px); z-index: 999; flex-direction: column; padding: 20px 24px; gap: 4px; }
        .mobile-nav-drawer.active { display: flex; animation: slideDown 0.3s ease-out; }
        @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
        .mobile-nav-drawer .mnav-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; font-size: 16px; font-weight: 500; color: var(--text-dark); cursor: pointer; transition: background 0.2s; }
        .mobile-nav-drawer .mnav-item:hover, .mobile-nav-drawer .mnav-item.active { background: var(--bg-light); color: var(--primary); }
        .mobile-nav-drawer .mnav-icon { font-size: 20px; }
        .mobile-nav-mask { display: none; position: fixed; top: 48px; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); z-index: 998; }
        .mobile-nav-mask.active { display: block; }

        /* 响应式 */
        @media (max-width: 1024px) {
            .products-grid { grid-template-columns: repeat(3,1fr); }
            .posts-grid { grid-template-columns: repeat(2,1fr); }
            .adopt-grid { grid-template-columns: repeat(3,1fr); }
        }
        @media (max-width: 768px) {
            .navbar .nav-tabs { display: none; }
            .nav-hamburger { display: flex; align-items: center; justify-content: center; }
            .home-cards { grid-template-columns: 1fr; }
            .home-card { min-height: 280px; padding: 36px 24px 24px; }
            .page-hero h1 { font-size: 32px; }
            .page-hero p { font-size: 16px; }
            .products-grid { grid-template-columns: repeat(2,1fr); gap: 12px; }
            .product-card .img-wrap { height: 140px; }
            .posts-grid { grid-template-columns: 1fr; }
            .adopt-grid { grid-template-columns: repeat(2,1fr); }
            .activity-grid { grid-template-columns: 1fr; }
            .activity-card { flex-direction: column; }
            .activity-card .act-img-wrap { width: 100%; min-height: 160px; }
            .pet-cards-grid { grid-template-columns: repeat(2,1fr); }
            .catalog-grid { grid-template-columns: repeat(2,1fr); }
            .health-tools-grid { grid-template-columns: 1fr 1fr; }
            .footer-content { grid-template-columns: 1fr; }
            .modal-gallery { height: 240px; }
            .cart-sidebar { width: 100vw; }
            .battle-scene { height: 360px; }
            .bs-my-area, .bs-enemy-area { gap: 16px; }
            .bs-char { width: 90px; height: 120px; }
            .bs-char-sprite { font-size: 36px; width: 70px; height: 80px; }
            .pack-result-card { width: 140px; }
            .order-actions { flex-wrap: wrap; gap: 4px; }
            .order-action-btn { font-size: 11px; padding: 5px 10px; }
            .cd-stats { grid-template-columns: repeat(3,1fr); }
        }
        @media (max-width: 480px) {
            .products-grid { grid-template-columns: 1fr; }
            .adopt-grid { grid-template-columns: 1fr; }
            .pet-cards-grid { grid-template-columns: 1fr; }
            .catalog-grid { grid-template-columns: repeat(2,1fr); }
            .health-tools-grid { grid-template-columns: 1fr; }
            .home-card { min-height: 200px; padding: 28px 20px 20px; }
            .home-card .hc-icon { width: 56px; height: 56px; font-size: 28px; }
            .page-hero { padding: 60px 16px 40px; }
            .page-hero h1 { font-size: 26px; }
            .pack-result-cards { flex-direction: column; align-items: center; }
            .pack-result-card { width: 100%; max-width: 200px; }
            .deck-manager { padding: 12px; }
            .guide-tooltip { max-width: 280px; padding: 16px; }
        }
    </style>