/* ================= 基础结构 ================= */

.glass{
    backdrop-filter: blur(10px);
    border-radius:12px;
}

.price{
    font-weight:bold;
    font-size:18px;
}

.primary-btn{
    border-radius:8px;
    padding:6px 14px;
    color:#fff;
    cursor:pointer;
    transition:all .2s ease;
}

.reward-box{
    border-radius:8px;
    padding:8px;
    font-size:12px;
}

.tab-active{
    color:#fff;
}


/* =========================================================
   1️⃣ DEFAULT 现代蓝科技风
   ========================================================= */

.theme-default{
    background:linear-gradient(135deg,#0f172a,#1e293b);
    color:#ffffff;
}

.theme-default .glass{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 0 20px rgba(59,130,246,0.15);
}

.theme-default .price{
    color:#3b82f6;
}

.theme-default .primary-btn{
    background:#3b82f6;
}

.theme-default .primary-btn:hover{
    background:#2563eb;
}

.theme-default .tab-active{
    background:#2563eb;
}


/* =========================================================
   3️⃣ TECH → 仙侠米色风（改成图2背景）
   ========================================================= */

.theme-tech{
    background:#e6d4b3;   /* 整体米黄色 */
    color:#5a2c1a;
}

/* 顶部渐变微阴影 */
.theme-tech::before{
    content:"";
    position:fixed;
    inset:0;
    background:linear-gradient(
            to bottom,
            rgba(0,0,0,0.05),
            transparent 30%
    );
    pointer-events:none;
}

/* 卡片样式 */
.theme-tech .glass{
    background:#ffffff;
    border:1px solid #d9c3a3;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

/* 价格红色 */
.theme-tech .price{
    color:#d60000;
    font-weight:bold;
}

/* 主按钮红色 */
.theme-tech .primary-btn{
    background:linear-gradient(180deg,#c81d1d,#8e0f0f);
    border:1px solid #7a0c0c;
    box-shadow:0 3px 0 #5a0707;
}

.theme-tech .primary-btn:hover{
    transform:translateY(-2px);
}

/* Tab 激活 */
.theme-tech .tab-active{
    background:#c8a25a;
    color:#fff;
}

/* 奖励区域 */
.theme-tech .reward-box{
    background:#f5efe4;
    border:1px solid #d9c3a3;
}

/* =========================================================
   4️⃣ MINIMAL 极简商务风
   ========================================================= */

.theme-minimal{
    background:#f5f5f5;
    color:#111;
}

.theme-minimal .glass{
    background:#ffffff;
    border:1px solid #e5e7eb;
    box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.theme-minimal .price{
    color:#111;
}

.theme-minimal .primary-btn{
    background:#111;
}

.theme-minimal .primary-btn:hover{
    background:#333;
}

.theme-minimal .tab-active{
    background:#111;
}