:root {
            --brand-color: #e53935;
            --brand-dark: #c62828;
            --bg-main: #f8f9fb;
            --bg-card: #ffffff;
            --text-main: #1a1a1a;
            --text-secondary: #5f6b7a;
            --btn-yellow: #f6b100;
            --border-light: #e3e8ef;
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
            --shadow-md: 0 4px 14px rgba(0,0,0,0.06);
            /* 与首页共用：统一横向边距 / 卡片圆角 / 安全区 */
            --gutter: 10px;
            --radius-card: 14px;
            --radius-inner: 8px;
            --safe-bottom: env(safe-area-inset-bottom);
        }

        * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, sans-serif;
            background-color: #f0f2f5;
            color: var(--text-main);
            line-height: 1.5;
            padding-bottom: calc(78px + env(safe-area-inset-bottom));
        }
        a { text-decoration: none; color: inherit; }
        ul, li { list-style: none; }
        img { display: block; max-width: 100%; }

        .app-wrapper {
            max-width: 480px; width: 100%; margin: 0 auto;
            background-color: var(--bg-main); min-height: 100vh;
            position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.06);
        }

        .detail-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px var(--gutter); background: #fff; border-bottom: 1px solid var(--border-light);
        }
        .header-left { display: flex; align-items: center; gap: 10px; font-size: 18px; color: var(--text-secondary); cursor: pointer; }
        .header-title { font-size: 16px; font-weight: 600; color: var(--text-main); }
                .announcement-bar {
            margin: 8px var(--gutter) 6px;
            padding: 7px 10px;
            background: #ffffff;
            border: 1px solid var(--border-light);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 2px 8px;
            font-size: 11.5px;
            color: var(--text-secondary);
            box-shadow: var(--shadow-sm);
        }
        .announcement-bar .text-highlight-green {
            color: #4a8c5c;
            font-weight: bold;
        }
        .announcement-bar .text-highlight-yellow {
            color: var(--btn-yellow);
            font-weight: bold;
        }
        .detail-image-wrapper { padding: 10px var(--gutter); }
        .detail-image {
            width: 100%;
            height: auto;
            background: transparent;
            border-radius: var(--radius-card);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            border: 1px solid var(--border-light);
            box-shadow: var(--shadow-sm);
        }
        .detail-image img {
            width: 90%;
            height: auto;
            display: block;
        }

        .info-card {
            background: var(--bg-card); border-radius: 14px; padding: 15px;
            margin: 0 var(--gutter) 10px; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm);
        }
        .info-title { font-size: 18px; font-weight: 700; margin-bottom: 10px; color: #111; }

        /* 双价格并排布局 */
        .info-price-dual {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
        }
        .price-col {
            flex: 1;
            background: #fafbfd;
            border-radius: var(--radius-inner);
            padding: 10px 8px;
            text-align: center;
            border: 1px solid #eaeef4;
            position: relative;
        }
        .price-col .price-tag {
            display: inline-block;
            font-size: 11px;
            font-weight: 700;
            color: #fff;
            background: var(--brand-color);
            padding: 2px 9px;
            border-radius: var(--radius-inner);
            margin-bottom: 6px;
            letter-spacing: 0.5px;
        }
        .price-col .price-tag.pc-tag {
            background: #3a3a3a;
        }
        .price-col .price-value {
            font-size: 22px;
            font-weight: 800;
            color: var(--brand-color);
            line-height: 1.1;
        }
        .price-col .price-value .symbol {
            font-size: 14px;
        }
        .price-col .price-original {
            font-size: 12px;
            color: #98a1af;
            text-decoration: line-through;
            margin-top: 2px;
        }

        .info-desc {
            font-size: 13px; color: var(--text-secondary); line-height: 1.5;
            background: #f5f6fa; padding: 10px; border-radius: 8px;
        }

        .tags-card {
            background: var(--bg-card); padding: 10px 12px; margin: 0 var(--gutter) 10px;
            border-radius: var(--radius-card); display: flex; justify-content: space-between;
            border: 1px solid var(--border-light); box-shadow: var(--shadow-sm);
        }
        .tag-item { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-secondary); }
        .tag-item .dot { color: var(--brand-color); font-weight: bold; }

        .details-card {
            background: var(--bg-card); border-radius: 14px; padding: 15px;
            margin: 0 var(--gutter) 16px; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm);
        }
        .details-header {
            display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: bold;
            padding-bottom: 12px; border-bottom: 1px solid var(--border-light); color: var(--text-main);
        }
        .details-content {
            font-size: 13px; color: var(--text-secondary); margin-top: 12px;
            line-height: 1.8;
        }
        .details-content .notice-warning {
            display: block;
            background: #fff5f5;
            border-left: 3px solid var(--brand-color);
            padding: 10px 12px;
            border-radius: var(--radius-inner);
            margin-bottom: 16px;
            color: #c62828;
            font-weight: 500;
            line-height: 1.6;
        }
        .details-content .service-promise {
            display: block;
            background: #fdf8f0;
            border-left: 3px solid var(--btn-yellow);
            padding: 10px 12px;
            border-radius: var(--radius-inner);
            margin-bottom: 16px;
            color: #5f4a1a;
            font-weight: 500;
            line-height: 1.6;
        }
        .details-content .section-title {
            font-size: 14px;
            font-weight: 700;
            color: #111;
            margin: 16px 0 10px 0;
            padding-bottom: 6px;
            border-bottom: 1px dashed #e8e8e8;
        }
        .details-content .rule-list {
            list-style: none;
            padding: 0;
            counter-reset: rule-counter;
        }
        .details-content .rule-list li {
            counter-increment: rule-counter;
            position: relative;
            padding-left: 28px;
            margin-bottom: 10px;
            line-height: 1.7;
        }
        .details-content .rule-list li::before {
            content: counter(rule-counter) ".";
            position: absolute;
            left: 0;
            top: 0;
            font-weight: 700;
            color: var(--brand-color);
            min-width: 22px;
        }
        .details-content .rule-list li .sub-rule {
            display: block;
            margin-top: 4px;
            padding-left: 12px;
            border-left: 2px solid #eee;
            color: #777;
            font-size: 12px;
            line-height: 1.6;
        }
        .details-content .highlight-warning { color: var(--brand-color); font-weight: bold; }
        .details-content strong { color: var(--text-main); }

        .bottom-action-bar {
            position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
            width: 100%; max-width: 480px; height: calc(70px + env(safe-area-inset-bottom));
            background: rgba(255,255,255,0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            border-top: 1px solid var(--border-light);
            display: flex; align-items: center; justify-content: center;
            gap: 10px; padding: 0 var(--gutter) calc(10px + env(safe-area-inset-bottom));
            z-index: 1000; box-shadow: 0 -2px 12px rgba(0,0,0,0.04);
        }
        .btn-customer-service {
            flex: 0 0 30%; height: 44px; border-radius: 22px;
            border: 1px solid var(--brand-color); background: #fff;
            color: var(--brand-color); font-size: 14px; font-weight: bold;
            cursor: pointer; transition: transform 0.2s, background 0.2s;
            display: flex; align-items: center; justify-content: center;
        }
        .btn-customer-service:active { transform: scale(0.96); background: #fff5f5; }
        .buy-btn {
            flex: 1; height: 44px; border-radius: 22px; border: none;
            background: var(--btn-yellow); color: #000; font-size: 16px; font-weight: bold;
            cursor: pointer; transition: transform 0.2s;
            box-shadow: 0 2px 6px rgba(0,0,0,0.05);
            display: flex; align-items: center; justify-content: center;
        }
        .buy-btn:active { transform: scale(0.96); background: #e5a800; }

        .toast {
            position: fixed; top: 25%; left: 50%; transform: translateX(-50%) scale(0.9);
            background: rgba(30, 30, 30, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
            color: #fff; padding: 11px 20px; border-radius: 30px; font-size: 13.5px;
            z-index: 99999; opacity: 0; pointer-events: none;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 8px 20px rgba(0,0,0,0.2);
            text-align: center; max-width: 80%; font-weight: 500;
        }
        .toast.show { opacity: 1; transform: translateX(-50%) scale(1); }

/* ============================================================
   品牌主题：深蓝底 + 电光蓝霓虹（与 logo、首页统一）
   仅覆盖配色与质感，布局沿用上面的模板规则
   ============================================================ */
:root {
            /* ---- 电光蓝主题变量（取色自品牌 logo） ---- */
            --brand-color: #4fd3ff;
            --brand-dark: #2f7bff;
            --bg-page: #030a16;
            --bg-main: #061125;
            --bg-card: #0b1e3d;
            --text-main: #e8f4ff;
            --text-secondary: #8fa9c9;
            --btn-yellow: #4fd3ff;
            --border-light: rgba(79, 211, 255, 0.18);
            --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
            --shadow-md: 0 6px 22px rgba(0, 0, 0, 0.45);
            --neon: #8ce8ff;
            --neon-grad: linear-gradient(135deg, #8ce8ff 0%, #4fd3ff 55%, #2f7bff 100%);
            --card-grad: linear-gradient(160deg, #0c2144 0%, #071528 100%);
}
body {
    background-color: var(--bg-page);
    background-image: radial-gradient(120% 70% at 50% -10%, #102f5e 0%, #061125 45%, #030a16 100%);
    background-attachment: fixed;
    color: var(--text-main);
}
.app-wrapper {
    background: linear-gradient(180deg, #071528 0%, #040c18 100%);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.70);
}
.app-wrapper::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(140,232,255,0) 0%, rgba(140,232,255,0.9) 45%, rgba(79,211,255,0.20) 75%, rgba(140,232,255,0) 100%);
    z-index: 20;
    pointer-events: none;
}
/* 顶栏 */
.detail-header {
    background: linear-gradient(180deg, #08182e, #061125);
    border-bottom-color: rgba(79, 211, 255, 0.18);
}
.header-left { color: #a9c4e6; }
.header-title { color: var(--neon); letter-spacing: 1.5px; text-shadow: 0 0 12px rgba(79, 211, 255, 0.35); }
/* 公告条 */
.announcement-bar {
    background: linear-gradient(135deg, rgba(79,211,255,0.12), rgba(79,211,255,0.03));
    border-color: var(--border-light);
    color: #b6d2ee;
}
.announcement-bar .text-highlight-green { color: #7fd6a5; }
.announcement-bar .text-highlight-yellow { color: var(--neon); }
/* 主图 */
.detail-image {
    background: #050f1f;
    border-color: rgba(79, 211, 255, 0.28);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55), 0 0 22px rgba(79, 211, 255, 0.08);
}
/* 卡片 */
.info-card, .tags-card, .details-card {
    background: var(--card-grad);
    border-color: rgba(79, 211, 255, 0.18);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.40);
}
.info-title { color: #d3edff; position: relative; padding-left: 12px; }
.info-title::before {
    content: "";
    position: absolute;
    left: 0; top: 4px; bottom: 4px;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, #8ce8ff, #2f7bff);
}
/* 价格面板 */
.price-col {
    background: linear-gradient(165deg, rgba(79,211,255,0.10), rgba(79,211,255,0.03));
    border-color: rgba(79, 211, 255, 0.20);
}
.price-col .price-tag { background: var(--neon-grad); color: #04121f; font-weight: 800; }
.price-col .price-tag.pc-tag { background: linear-gradient(135deg, #2a5a9e, #1b3350); color: #dce9f8; }
.price-col .price-value { color: #7fe3ff; }
.price-col .price-value .symbol { opacity: 0.85; }
.price-col .price-original { color: #6a88ab; }
.info-desc {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(79, 211, 255, 0.10);
    color: #9dbbdd;
}
/* 服务标签 */
.tag-item { color: #a4c0e0; }
.tag-item .dot { color: var(--brand-color); }
/* 详情正文 */
.details-header { color: var(--neon); border-bottom-color: rgba(79, 211, 255, 0.20); }
.details-content { color: #b0cbe8; }
.details-content strong { color: #f0f6ff; }
.details-content img { border-radius: 10px; border: 1px solid rgba(79,211,255,0.25); box-shadow: 0 6px 20px rgba(0,0,0,0.45); }
.details-content .notice-warning {
    background: rgba(224, 83, 63, 0.12);
    border-left-color: #e0533f;
    color: #ff9d8a;
}
.details-content .service-promise {
    background: rgba(79, 211, 255, 0.10);
    border-left-color: var(--brand-color);
    color: #bfe6ff;
}
.details-content .section-title {
    color: #d3edff;
    border-bottom-color: rgba(79, 211, 255, 0.20);
}
.details-content .rule-list li { color: #a6c2e2; }
.details-content .rule-list li::before { color: var(--brand-color); }
.details-content .rule-list li .sub-rule {
    border-left-color: rgba(79, 211, 255, 0.20);
    color: #8aa6c8;
}
.details-content .highlight-warning { color: #7fe3ff; }
/* 底部操作栏 */
.bottom-action-bar {
    background: rgba(5, 14, 28, 0.94);
    border-top-color: rgba(79, 211, 255, 0.22);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.55);
}
.btn-customer-service {
    border-color: rgba(79, 211, 255, 0.55);
    background: rgba(79, 211, 255, 0.08);
    color: #7fe3ff;
}
.btn-customer-service:active { background: rgba(79, 211, 255, 0.18); }
.buy-btn {
    background: var(--neon-grad);
    color: #04121f;
    box-shadow: 0 6px 20px rgba(79, 211, 255, 0.30);
}
.buy-btn:active { background: linear-gradient(135deg, #a5edff, #2f7bff); }
/* Toast */
.toast {
    background: rgba(6, 15, 30, 0.94);
    color: #d8f2ff;
    border: 1px solid rgba(79, 211, 255, 0.35);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}