/* ===============================
   TLBB Theme
   天龙八部 · 宣纸武侠风
=============================== */

/* ===== 页面背景 ===== */
body {
    background:
            radial-gradient(circle at 20% 10%, rgba(255,215,160,.35), transparent 45%),
            radial-gradient(circle at 80% 15%, rgba(255,200,140,.25), transparent 40%),
            linear-gradient(180deg, #f6ecd7 0%, #efe1c4 45%, #e4cfa3 100%);
}

/* ===== 标题 ===== */
.title-shadow {
    text-shadow: 0 3px 8px rgba(120,40,20,.45);
    letter-spacing: .15em;
    color: #7a1e12;
}

/* 副标题 */
.title-ribbon {
    display: inline-block;
    padding: .3rem 1.2rem;
    border-radius: 9999px;
    background: linear-gradient(180deg, #f9f0da, #ead2a5);
    border: 1px solid #b98b3c;
    color: #7a1e12;
    font-weight: 700;
    font-size: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

/* ===== 卡片 ===== */
.paper-card,
.product-card {
    background: linear-gradient(
            180deg,
            rgba(255,255,255,.95),
            rgba(248,242,228,.9)
    );
    border: 1px solid rgba(185,140,60,.55);
    box-shadow:
            0 10px 22px rgba(120,70,20,.28),
            inset 0 1px 0 rgba(255,255,255,.85);
}

.product-card:hover {
    box-shadow: 0 14px 30px rgba(120,70,20,.35);
}

/* ===== 徽章 ===== */
.chip {
    background: #fff4dc;
    border: 1px solid #c19a55;
    color: #7a3a12;
}

/* ===== Tab ===== */
.tab-button {
    background: linear-gradient(180deg, #fff5df, #efd7a9);
    border: 1px solid #b88a3c;
    color: #7a1e12;
}

.tab-button:hover {
    background: linear-gradient(180deg, #c8923a, #a05f1d);
    color: #fff;
}

/* 选中 Tab */
.tab-button.bg-blue-600,
.tab-button.text-white {
    background: linear-gradient(180deg, #b51f1f, #8d1313);
    border-color: #6f0d0d;
    color: #ffe7b5;
}

/* ===== 价格 ===== */
.product-price,
.text-red-500 {
    color: #9c1414;
    text-shadow: 0 1px 2px rgba(120,40,20,.25);
}

/* ===== 主按钮 ===== */
.bg-blue-600,
.btn-main {
    background: linear-gradient(180deg, #b51f1f, #8d1313);
    border: 1px solid #6f0d0d;
    color: #ffe7b5;
}

.bg-blue-600:hover,
.btn-main:hover {
    background: linear-gradient(180deg, #c82a2a, #9e1a1a);
}

/* ===== 成功按钮 ===== */
.bg-green-600 {
    background: linear-gradient(180deg, #a32121, #7f1414);
    border: 1px solid #6f0d0d;
    color: #ffe7b5;
}

.bg-green-600:hover {
    background: linear-gradient(180deg, #b72828, #8e1717);
}

/* ===== 禁用 ===== */
.bg-gray-300,
.bg-gray-400 {
    background: linear-gradient(180deg, #9e9e9e, #7b7b7b);
    color: #eee;
}

/* ===== 奖励展开区 ===== */
.reward-box {
    background: rgba(255,245,220,.85);
    border-top: 1px solid rgba(185,140,60,.45);
}

.reward-box .text-blue-600 {
    color: #a32020;
    font-weight: 700;
}

/* ===== 滚动条 ===== */
.scroll-box {
    scrollbar-color: rgba(185,140,60,.55) transparent;
}

.scroll-box::-webkit-scrollbar-thumb {
    background: rgba(185,140,60,.55);
}