* { margin: 0; padding: 0; box-sizing: border-box; }
#notice-content p, #notice-content span { display: inline; margin: 0; }
body { font-family: 'Microsoft YaHei', 'PingFang SC', -apple-system, sans-serif; background: #f4f4f4; color: #333; }
a { text-decoration: none; color: inherit; }

/* ============== 京东风格 PC 主页 ============== */
.jd-container { max-width: 1200px; margin: 0 auto; padding: 0 12px; }

/* 促销模式提示条（9.9/高佣/秒杀过滤模式下显示） */
.jd-promo-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    margin: 0 0 14px 0;
    background: linear-gradient(135deg, #fff5f0, #ffe8e0);
    border: 1px solid #ffd5c2;
    border-radius: 10px;
    font-size: 14px;
    color: #c14000;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    position: relative;
    overflow: hidden;
    transition: box-shadow .2s;
}
.jd-promo-bar:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.jd-promo-bar::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 80px;
    background: radial-gradient(ellipse at left center, rgba(255,255,255,.5), transparent 70%);
    pointer-events: none;
}
.jd-promo-bar.mode-cheap { background: linear-gradient(135deg, #eaf4ff, #d8eaff); border-color: #b8d8f0; color: #0050a0; }
.jd-promo-bar.mode-high-cashback { background: linear-gradient(135deg, #fff6e0, #ffeac2); border-color: #f0d896; color: #92400e; }
.jd-promo-bar.mode-flash { background: linear-gradient(135deg, #ffeef5, #ffd0e1); border-color: #ffb3c8; color: #ad1457; }

.jd-promo-bar-label {
    flex: 1;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1.4;
    position: relative;
    z-index: 1;
}
.jd-promo-bar-clear {
    background: rgba(255,255,255,.9);
    border: 1.5px solid currentColor;
    color: inherit;
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    flex-shrink: 0;
    white-space: nowrap;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
}
.jd-promo-bar-clear:hover {
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
}
.jd-promo-bar-clear:active { transform: translateY(0); }

/* 限时秒杀商品卡样式 */
.product-card.flash-card { position: relative; border: 1px solid #ff6b9c; box-shadow: 0 2px 12px rgba(233,30,99,.15); }
.product-card.flash-card .img-wrap::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 32px;
    background: linear-gradient(180deg, rgba(255,90,140,.35), transparent);
    pointer-events: none;
    z-index: 1;
}
.flash-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, #ff5a8c, #e91e63);
    color: #fff;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(233,30,99,.4);
    animation: flashPulse 1.2s ease-in-out infinite;
}
@keyframes flashPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
.price.flash-price { color: #e91e63; font-weight: 700; }
.orig-price { color: #999; font-size: 12px; text-decoration: line-through; margin-left: 6px; vertical-align: middle; }
.flash-countdown {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    background: #fff0f6;
    color: #e91e63;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Consolas', monospace;
}

/* 顶部细灰条 */
.jd-top-bar { background: #f2f2f2; border-bottom: 1px solid #e8e8e8; font-size: 12px; color: #888; }
.jd-top-bar .jd-container { display: flex; justify-content: space-between; align-items: center; height: 30px; }
.jd-top-bar .left { display: flex; gap: 16px; align-items: center; }
.jd-top-bar .right { display: flex; gap: 16px; }
.jd-top-bar a { color: #888; transition: color .15s; }
.jd-top-bar a:hover { color: #e1251b; }
.jd-top-bar a.hl { color: #e1251b; }
.jd-top-bar .left a:not(:last-child),
.jd-top-bar .right a:not(:last-child) { position: relative; }
.jd-top-bar .left a:not(:last-child)::after,
.jd-top-bar .right a:not(:last-child)::after { content: ''; position: absolute; right: -9px; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: #ccc; }

/* 主导航：Logo + 搜索 + AI + 用户区 + 签到（padding-bottom 加大以容纳浮在搜索框下方的热搜行） */
.jd-header { background: #fff; padding: 14px 0 30px; }
.jd-header .jd-container { display: flex; align-items: center; gap: 18px; }
.jd-logo { cursor: pointer; flex-shrink: 0; }
.jd-logo .logo-text { font-size: 28px; font-weight: 800; color: #e1251b; letter-spacing: 1px; }
.jd-search {
    flex: 1;
    max-width: 560px;
    min-width: 360px;
    position: relative; /* 配合 .jd-search-tags 绝对定位 */
}
.jd-search-box { display: flex; align-items: stretch; border: 2px solid #e1251b; border-radius: 2px; height: 40px; background: #fff; }

/* 搜索范围下拉 */
.jd-search-cat {
    position: relative;
    display: flex; align-items: center; gap: 4px;
    padding: 0 10px 0 14px;
    font-size: 13px; color: #444;
    cursor: pointer; user-select: none;
    border-right: 1px solid #eee;
    min-width: 64px;
    outline: none;
}
.jd-search-cat:hover .jd-search-cat-text { color: #e1251b; }
.jd-search-cat-arrow { font-style: normal; font-size: 12px; color: #888; transition: transform .2s; }
.jd-search-cat.open .jd-search-cat-arrow { transform: rotate(180deg); color: #e1251b; }
.jd-search-cat-menu {
    position: absolute; top: calc(100% + 4px); left: -2px;
    list-style: none; margin: 0; padding: 4px 0;
    background: #fff;
    border: 1px solid #e1251b;
    border-radius: 2px;
    min-width: 88px;
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
    z-index: 100;
    display: none;
}
.jd-search-cat.open .jd-search-cat-menu { display: block; }
.jd-search-cat-menu li {
    padding: 8px 14px;
    font-size: 13px; color: #444;
    cursor: pointer;
    transition: background .12s;
}
.jd-search-cat-menu li:hover { background: #fff5f5; color: #e1251b; }

.jd-search-box input {
    flex: 1; min-width: 0;
    border: none; padding: 0 12px;
    font-size: 14px; outline: none;
    background: transparent;
}

/* 相机按钮 */
.jd-search-camera {
    width: 38px;
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: color .15s;
}
.jd-search-camera svg { width: 20px; height: 20px; }
.jd-search-camera:hover { color: #e1251b; }

.jd-search-btn {
    width: 96px;
    background: #e1251b; color: #fff;
    border: none;
    font-size: 15px; font-weight: 500;
    cursor: pointer;
    transition: background .15s;
    display: flex; align-items: center; justify-content: center;
}
.jd-search-btn:hover { background: #c81d10; }

/* 搜索热词（京东风格：有「热搜：」前缀的小标签行，绝对定位浮在搜索框下方不影响垂直居中） */
.jd-search-tags {
    position: absolute;
    top: 100%; left: 4px; right: 4px;
    padding: 6px 0 0;
    font-size: 12px; color: #888;
    display: flex; gap: 10px;
    min-height: 18px; flex-wrap: nowrap; align-items: center;
    overflow: hidden;
    white-space: nowrap;
}
.jd-search-tags::before {
    content: '热搜：';
    color: #bbb;
    flex-shrink: 0;
}
.jd-search-tags a {
    color: #888;
    cursor: pointer;
    transition: color .15s;
}
.jd-search-tags a:hover { color: #e1251b; font-weight: 600; }
.jd-search-tags a:first-of-type { color: #e1251b; font-weight: 600; } /* 首条高亮作为精选词 */

/* AI 助手按钮（紫粉渐变胶囊） */
.jd-header-extra { flex-shrink: 0; }
.jd-ai-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 14px;
    background: linear-gradient(135deg, #ff5f8f 0%, #b76aff 100%);
    color: #fff !important;
    border-radius: 20px;
    font-size: 13px; font-weight: 600;
    transition: all .2s;
    box-shadow: 0 3px 10px rgba(183,106,255,.25);
    white-space: nowrap;
}
.jd-ai-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(183,106,255,.4);
    color: #fff;
}
.jd-ai-emoji { font-size: 15px; }

/* 用户区按钮（未登录） */
.jd-user-area { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.jd-user-btn {
    padding: 0 14px;
    height: 32px;
    font-size: 13px; color: #666;
    border: 1px solid #ddd; border-radius: 16px;
    background: #fff;
    transition: .15s; cursor: pointer;
    display: inline-flex; align-items: center;
}
.jd-user-btn:hover { color: #e1251b; border-color: #e1251b; }
.jd-user-btn-red { background: linear-gradient(135deg, #ff7c4d, #e1251b); color: #fff; border-color: #e1251b; }
.jd-user-btn-red:hover { background: linear-gradient(135deg, #ff6a3a, #c81d10); color: #fff; }

/* 已登录态：京东风格的用户菜单按钮（头像+名字+下拉箭头， hover 弹出下拉菜单） */
.jd-user-menu {
    position: relative;
    flex-shrink: 0;
}
.jd-user-trigger {
    display: flex; align-items: center; gap: 6px;
    height: 36px;
    padding: 0 12px 0 4px;
    border-radius: 20px;
    background: #f7f7f7;
    cursor: pointer;
    transition: all .2s;
    font-size: 13px; color: #444;
    border: 1px solid transparent;
}
.jd-user-menu:hover .jd-user-trigger,
.jd-user-menu.open .jd-user-trigger {
    background: linear-gradient(135deg, #fff5f5, #ffe8e1);
    border-color: #ffd4c2;
    color: #e1251b;
}
.jd-user-mini-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: #eee;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.jd-user-mini-name {
    max-width: 70px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 500;
}
.jd-user-mini-arrow {
    font-style: normal;
    font-size: 11px;
    color: #999;
    transition: all .2s;
}
.jd-user-menu:hover .jd-user-mini-arrow,
.jd-user-menu.open .jd-user-mini-arrow {
    transform: rotate(180deg);
    color: #e1251b;
}

.jd-user-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 148px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0,0,0,.12);
    padding: 6px 0;
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all .2s;
}
.jd-user-menu:hover .jd-user-dropdown,
.jd-user-menu.open .jd-user-dropdown {
    opacity: 1; visibility: visible;
    transform: translateY(0);
}
/* 留个不可见的三角接货，防止 hover 间隙造成死区 */
.jd-user-menu::after {
    content: '';
    position: absolute;
    top: 100%; right: 0;
    width: 148px; height: 8px;
}
.jd-user-dropdown a {
    display: block;
    padding: 8px 16px;
    font-size: 13px; color: #444;
    cursor: pointer;
    transition: all .12s;
}
.jd-user-dropdown a:hover {
    background: #fff5f5;
    color: #e1251b;
}
.jd-user-dropdown a.logout:hover {
    background: #fff0ee;
    color: #c81d10;
}
.jd-user-dropdown .divider {
    height: 1px;
    background: #f0f0f0;
    margin: 4px 0;
}

/* 充期用户信息（占位样式，防止 JS 未加载前崩样） */
.jd-user-area .user-info { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #444; }
.jd-user-area .user-info img { width: 32px; height: 32px; border-radius: 50%; }

/* 签到营销组件 */
.jd-checkin {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #ff7c4d 0%, #e1251b 100%);
    color: #fff !important;
    border-radius: 20px;
    text-decoration: none;
    flex-shrink: 0;
    transition: all .2s;
    box-shadow: 0 3px 10px rgba(225,37,27,.25);
}
.jd-checkin:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(225,37,27,.4);
    color: #fff;
}
.jd-checkin-icon {
    width: 30px; height: 30px;
    background: rgba(255,255,255,.2);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.jd-checkin-icon svg { width: 18px; height: 18px; }
.jd-checkin-text { line-height: 1.2; }
.jd-checkin-text .t1 { font-size: 12px; font-weight: 600; }
.jd-checkin-text .t2 { font-size: 11px; opacity: .92; }

/* 主导航下方分类条 */
.jd-nav-bar { background: #fff; border-bottom: 2px solid #e1251b; }
.jd-nav-bar .jd-container { display: flex; align-items: center; height: 40px; gap: 4px; }
.jd-nav-bar a { padding: 0 20px; font-size: 14px; color: #444; line-height: 40px; transition: .15s; white-space: nowrap; }
.jd-nav-bar a:hover { color: #e1251b; }
.jd-nav-bar a.jd-nav-home { background: #e1251b; color: #fff; font-weight: 600; min-width: 90px; text-align: center; }
.jd-nav-bar a.jd-nav-home:hover { color: #fff; background: #c81d10; }
.jd-nav-bar .jd-top-cats { display: inline-flex; flex: 1; overflow: hidden; align-items: center; }
.jd-nav-bar .jd-top-cats a { padding: 0 14px; color: #444; }
.jd-nav-bar .jd-top-cats a:hover { color: #e1251b; }
.jd-nav-bar .jd-nav-right { margin-left: auto; }

/* ============== 频道入口栏（仓东京「配件馆/司法拍卖/企业购...」） ============== */
.jd-channels { background: #fff; border-bottom: 1px solid #f0f0f0; padding: 10px 0 8px; }
.jd-channels-list {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
}
.jd-channel-item {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 6px 4px;
    cursor: pointer;
    transition: all .2s;
    border-radius: 6px;
    text-decoration: none;
    color: #444;
}
.jd-channel-item:hover {
    background: #fff5f5;
    color: #e1251b;
    transform: translateY(-2px);
}
.jd-channel-icon {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffe8e1, #ffd4c2);
    color: #e1251b;
    transition: all .2s;
}
.jd-channel-icon svg { width: 18px; height: 18px; }
.jd-channel-item:hover .jd-channel-icon { background: linear-gradient(135deg, #e1251b, #ff7c4d); color: #fff; transform: scale(1.05); }
.jd-channel-label { font-size: 12px; font-weight: 500; white-space: nowrap; }

/* ============== 主区三栏 ============== */
.jd-home { padding: 12px 0 40px; }
.jd-home-layout { display: grid; grid-template-columns: 200px 1fr 260px; gap: 12px; align-items: flex-start; }

/* 左侧分类菜单 */
.jd-cat-menu { background: #fff; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); overflow: hidden; }
.jd-cat-menu .jd-cat-title { background: #e1251b; color: #fff; font-size: 15px; font-weight: 600; padding: 10px 16px; }
.jd-cat-menu ul { list-style: none; margin: 0; padding: 8px 0; }
.jd-cat-menu .cat-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; font-size: 13px; color: #444; cursor: pointer; transition: .15s; user-select: none; border-left: 3px solid transparent; }
.jd-cat-menu .cat-item:hover { background: #fff5f5; color: #e1251b; }
.jd-cat-menu .cat-item.active { background: #fff0ee; color: #e1251b; font-weight: 600; border-left-color: #e1251b; }
.jd-cat-menu .cat-item .cat-arrow { font-size: 16px; color: #ccc; }
.jd-cat-menu .cat-item:hover .cat-arrow,
.jd-cat-menu .cat-item.active .cat-arrow { color: #e1251b; }

/* 中间主区 */
.jd-center { min-width: 0; }
.jd-banner-slider { position: relative; height: 280px; border-radius: 4px; overflow: hidden; background: #eee; margin-bottom: 14px; }
.jd-banner-slider .slides-wrap { position: relative; width: 100%; height: 100%; }
.jd-banner-slider .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s; display: flex; align-items: center; padding: 0 50px; color: #fff; }
.jd-banner-slider .slide.active { opacity: 1; z-index: 1; }
.jd-banner-slider .slide .text { position: relative; z-index: 2; flex: 1; }
.jd-banner-slider .slide .text h2 { font-size: 30px; font-weight: 700; margin-bottom: 12px; text-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.jd-banner-slider .slide .text p { font-size: 15px; opacity: .92; line-height: 1.6; text-shadow: 0 1px 4px rgba(0,0,0,0.15); }
.jd-banner-slider .slide .bg-image { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 1; }
.jd-banner-slider .slider-dots { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; z-index: 3; }
.jd-banner-slider .slider-dots span { display: inline-block; width: 22px; height: 4px; margin: 0 4px; background: rgba(255,255,255,.5); cursor: pointer; transition: .2s; border-radius: 2px; }
.jd-banner-slider .slider-dots span.active { background: #e1251b; width: 32px; }

/* ============== 促销卡墙（8 张图标卡，仓京东顶部促销区） ============== */
.jd-promo-wall {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.jd-promo-card {
    position: relative;
    background: #fff;
    border-radius: 6px;
    padding: 12px 14px;
    display: flex; align-items: center; gap: 10px;
    cursor: pointer;
    overflow: hidden;
    transition: all .25s;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
    border: 1px solid transparent;
    min-height: 64px;
}
.jd-promo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(225,37,27,.15);
    border-color: #ffd4c2;
}
.jd-promo-card-icon {
    width: 40px; height: 40px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.jd-promo-card-icon svg { width: 22px; height: 22px; }
.jd-promo-card-text { flex: 1; min-width: 0; line-height: 1.3; }
.jd-promo-card-title { font-size: 14px; font-weight: 600; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jd-promo-card-sub { font-size: 11px; color: #e1251b; margin-top: 4px; font-weight: 500; }

/* 8 张卡不同色彩，依次调色 */
.jd-promo-card.color-1 .jd-promo-card-icon { background: linear-gradient(135deg, #ff5a5f, #c91a12); }
.jd-promo-card.color-2 .jd-promo-card-icon { background: linear-gradient(135deg, #ff9a3c, #ff5e3a); }
.jd-promo-card.color-3 .jd-promo-card-icon { background: linear-gradient(135deg, #ffc73c, #ff7c4d); }
.jd-promo-card.color-4 .jd-promo-card-icon { background: linear-gradient(135deg, #4ecdc4, #2eb5e0); }
.jd-promo-card.color-5 .jd-promo-card-icon { background: linear-gradient(135deg, #667eea, #764ba2); }
.jd-promo-card.color-6 .jd-promo-card-icon { background: linear-gradient(135deg, #f093fb, #f5576c); }
.jd-promo-card.color-7 .jd-promo-card-icon { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.jd-promo-card.color-8 .jd-promo-card-icon { background: linear-gradient(135deg, #43e97b, #38f9d7); }

/* ============== 二级多模块商品列（新品/秒杀/9.9包邮/高佣） ============== */
.jd-mod-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.jd-mod-card {
    background: #fff;
    border-radius: 6px;
    padding: 12px;
    cursor: pointer;
    transition: all .25s;
    border: 1px solid #f0f0f0;
}
.jd-mod-card:hover { border-color: #ffd4c2; box-shadow: 0 6px 18px rgba(225,37,27,.12); transform: translateY(-2px); }
.jd-mod-card-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid #f5f5f5; margin-bottom: 8px; }
.jd-mod-card-title { font-size: 14px; font-weight: 700; color: #e1251b; display: flex; align-items: center; gap: 4px; }
.jd-mod-card-tag { font-size: 10px; color: #fff; background: #e1251b; padding: 1px 6px; border-radius: 2px; }
.jd-mod-card-more { font-size: 11px; color: #999; }
.jd-mod-card-body { display: flex; gap: 6px; }
.jd-mod-card-body .mod-prod {
    flex: 1; min-width: 0;
    text-align: center;
}
.jd-mod-card-body .mod-prod-img {
    width: 100%; aspect-ratio: 1;
    background: #f9f9f9 center/cover no-repeat;
    border-radius: 4px;
    margin-bottom: 4px;
}
.jd-mod-card-body .mod-prod-price { font-size: 13px; color: #e1251b; font-weight: 700; }

.jd-section-head { display: flex; align-items: baseline; gap: 12px; padding: 8px 0 14px; border-bottom: 2px solid #e1251b; margin-bottom: 14px; }
.jd-section-head h3 { font-size: 20px; color: #333; font-weight: 700; }
.jd-section-head .jd-section-sub { font-size: 12px; color: #999; }

/* 商品网格（三栏中区为 3 列） */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.product-card { background: #fff; border-radius: 4px; overflow: hidden; transition: box-shadow .2s, transform .2s; cursor: pointer; border: 1px solid transparent; }
.product-card:hover { box-shadow: 0 6px 18px rgba(225,37,27,0.18); transform: translateY(-2px); border-color: #ffd6d2; }
.product-card .img-wrap { position: relative; padding-top: 100%; background: #f9f9f9; }
.product-card .img-wrap img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.product-card .img-wrap .tag { position: absolute; top: 8px; right: 8px; background: #e1251b; color: #fff; padding: 3px 9px; border-radius: 2px; font-size: 11px; font-weight: 600; }
.product-card .card-body { padding: 10px 12px 14px; }
.product-card .card-body .name { font-size: 13px; color: #333; margin-bottom: 8px; line-height: 1.5; height: 40px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.product-card .card-body .price-row { display: flex; align-items: baseline; justify-content: space-between; }
.product-card .card-body .price { color: #e1251b; font-size: 20px; font-weight: 700; }
.product-card .card-body .price .unit { font-size: 12px; }
.product-card .card-body .original { color: #bbb; font-size: 12px; text-decoration: line-through; }
.product-card .card-body .cashback-tag { margin-top: 8px; display: inline-block; background: #fff3f0; color: #e1251b; border: 1px solid #ffd6cc; padding: 2px 8px; border-radius: 2px; font-size: 11px; }

/* 右侧卡片栏 */
.jd-right { display: flex; flex-direction: column; gap: 12px; }
.jd-card { background: #fff; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); padding: 16px; }
.jd-card-title { font-size: 14px; font-weight: 600; color: #333; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }

/* 用户卡片（仓京东风格：头像+问候+每日好礼三连卡） */
.jd-user-card { background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%); border: 1px solid #ffe0dd; }
.jd-user-card-greet { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; }
.jd-user-avatar {
    width: 44px; height: 44px;
    background: linear-gradient(135deg, #ff7c4d, #e1251b);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(225,37,27,.25);
}
.jd-user-avatar svg { width: 26px; height: 26px; }
.jd-user-greet-text { flex: 1; min-width: 0; line-height: 1.3; }
.jd-user-greet-text .hi { display: block; font-size: 14px; color: #333; font-weight: 600; }
.jd-user-greet-text .hi #jd-greet-time { color: #e1251b; }
.jd-user-greet-text .welcome { display: block; font-size: 11px; color: #888; margin-top: 2px; }

/* 每日好礼三连卡 */
.jd-user-perks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 12px;
    padding: 10px 6px;
    background: #fff;
    border-radius: 6px;
    border: 1px dashed #ffd4c2;
}
.jd-perk-card {
    text-align: center;
    padding: 6px 2px;
    border-radius: 6px;
    cursor: pointer;
    transition: all .2s;
    color: #fff;
    line-height: 1.2;
}
.jd-perk-card:hover { transform: translateY(-2px); }
.jd-perk-coupon { background: linear-gradient(135deg, #ff5a5f, #c91a12); }
.jd-perk-gift   { background: linear-gradient(135deg, #ffc73c, #ff7c4d); }
.jd-perk-daily  { background: linear-gradient(135deg, #ff9a3c, #ff5e3a); }
.jd-perk-amount { font-size: 18px; font-weight: 700; }
.jd-perk-amount .cur { font-size: 11px; margin-right: 1px; }
.jd-perk-amount-text { font-size: 17px; }
.jd-perk-amount-icon { padding-top: 2px; }
.jd-perk-label { font-size: 11px; opacity: .95; margin-top: 2px; }

.jd-user-card-actions { display: flex; gap: 8px; margin-bottom: 12px; }
.jd-btn-primary, .jd-btn-ghost { flex: 1; padding: 8px 0; font-size: 13px; border-radius: 2px; cursor: pointer; transition: .15s; border: 1px solid; font-weight: 600; }
.jd-btn-primary { background: linear-gradient(135deg, #ff7c4d, #e1251b); color: #fff; border-color: #e1251b; }
.jd-btn-primary:hover { background: linear-gradient(135deg, #ff6a3a, #c81d10); border-color: #c81d10; }
.jd-btn-ghost { background: #fff; color: #e1251b; border-color: #e1251b; }
.jd-btn-ghost:hover { background: #fff5f5; }
.jd-user-card-tips { text-align: center; font-size: 12px; color: #e1251b; padding-top: 8px; border-top: 1px dashed #f0e0dd; font-weight: 500; }

/* 我的推广统计卡（登录后显示） */
.jd-card-more { font-size: 12px; color: #999; transition: color .15s; }
.jd-card-more:hover { color: #e1251b; }
.jd-promo-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.jd-promo-stat { text-align: center; padding: 4px; }
.jd-promo-stat .num { font-size: 17px; color: #e1251b; font-weight: 700; line-height: 1.2; }
.jd-promo-stat .lbl { font-size: 11px; color: #888; margin-top: 4px; }

/* 用户已登录态（JS 渲染） */
.jd-user-card-logged { text-align: center; }
.jd-user-card-logged .avatar { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 8px; display: block; }
.jd-user-card-logged .name { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 4px; }
.jd-user-card-logged .stats { display: flex; justify-content: space-around; padding: 12px 0; border-top: 1px solid #f0e0dd; margin-top: 12px; font-size: 12px; }
.jd-user-card-logged .stats .stat-item { text-align: center; cursor: pointer; }
.jd-user-card-logged .stats .stat-item .num { display: block; font-size: 16px; color: #e1251b; font-weight: 700; margin-bottom: 2px; }
.jd-user-card-logged .stats .stat-item .label { color: #999; }
.jd-user-card-logged .quick-links { display: flex; gap: 8px; margin-top: 10px; }
.jd-user-card-logged .quick-links button { flex: 1; padding: 6px 0; font-size: 12px; border-radius: 2px; cursor: pointer; border: 1px solid #ddd; background: #fff; color: #666; transition: .15s; }
.jd-user-card-logged .quick-links button:hover { color: #e1251b; border-color: #e1251b; }

/* 公告卡片 */
.jd-notice-card ul { list-style: none; margin: 0; padding: 0; }
.jd-notice-card li { padding: 6px 0; font-size: 13px; color: #666; line-height: 1.5; border-bottom: 1px dashed #f0f0f0; cursor: pointer; transition: color .15s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jd-notice-card li:last-child { border-bottom: none; }
.jd-notice-card li:hover { color: #e1251b; }
.jd-notice-card li::before { content: '·'; color: #e1251b; margin-right: 6px; font-weight: bold; }

/* 客服卡片 */
.jd-service-info .row { display: flex; padding: 6px 0; font-size: 13px; }
.jd-service-info .label { color: #999; min-width: 60px; }
.jd-service-info .value { color: #333; font-weight: 500; word-break: break-all; }

/* 响应式 */
@media (max-width: 1180px) {
    .jd-home-layout { grid-template-columns: 180px 1fr; }
    .jd-right { display: none; }
}
@media (max-width: 880px) {
    .jd-home-layout { grid-template-columns: 1fr; }
    .jd-cat-menu ul { display: flex; overflow-x: auto; padding: 8px; }
    .jd-cat-menu .cat-item { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; padding: 8px 16px; }
    .jd-cat-menu .cat-item .cat-arrow { display: none; }
    .jd-cat-menu .cat-item.active { border-left: none; border-bottom-color: #e1251b; }
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .jd-header .jd-container { flex-wrap: wrap; gap: 12px; }
    .jd-search { order: 3; flex: 1 1 100%; max-width: 100%; }
}

/* ============== 旧用户中心兼容 ============== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section { padding: 30px 0; }
.section-title { text-align: center; font-size: 26px; margin-bottom: 12px; }
.section-desc { text-align: center; color: #888; font-size: 14px; margin-bottom: 40px; }

/* 产品详情弹窗 */
.modal-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 200; display: none; align-items: center; justify-content: center; }
.modal-mask.show { display: flex; }
.modal-content { background: #fff; border-radius: 12px; width: 720px; max-height: 80vh; overflow-y: auto; }
.modal-content .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid #eee; }
.modal-content .modal-header h3 { font-size: 18px; }
.modal-content .modal-header .close-btn { width: 32px; height: 32px; border-radius: 50%; border: none; background: #f5f5f5; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.modal-content .modal-body { padding: 24px; }
.modal-content .product-detail-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.modal-content .product-detail-layout .left img { width: 100%; border-radius: 8px; }
.modal-content .product-detail-layout .right .name { font-size: 18px; font-weight: bold; margin-bottom: 12px; }
.modal-content .product-detail-layout .right .price { color: #e1251b; font-size: 26px; font-weight: bold; margin-bottom: 8px; }
.modal-content .product-detail-layout .right .original { color: #999; text-decoration: line-through; font-size: 14px; }
.modal-content .product-detail-layout .right .cashback-box { background: #fff8f5; border: 1px solid #ffe0d0; border-radius: 8px; padding: 14px; margin: 16px 0; }
.modal-content .product-detail-layout .right .cashback-box .label { font-size: 13px; color: #e1251b; font-weight: bold; margin-bottom: 6px; }
.modal-content .product-detail-layout .right .cashback-box .desc { font-size: 12px; color: #666; line-height: 1.6; }
.modal-content .product-detail-layout .right .actions { display: flex; gap: 12px; margin-top: 20px; }
.modal-content .product-detail-layout .right .actions .btn { flex: 1; padding: 12px; border: none; border-radius: 8px; font-size: 15px; cursor: pointer; transition: .2s; }
.modal-content .product-detail-layout .right .actions .btn-buy { background: #e1251b; color: #fff; }
.modal-content .product-detail-layout .right .actions .btn-buy:hover { background: #d32f2f; }
.modal-content .product-detail-layout .right .actions .btn-share { background: #ff976a; color: #fff; }
.modal-content .product-detail-layout .right .actions .btn-share:hover { background: #f57c00; }
.modal-content .detail-desc { margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; font-size: 14px; color: #666; line-height: 1.8; }

/* 用户中心侧边栏 */
.user-center { display: grid; grid-template-columns: 240px 1fr; gap: 20px; padding: 30px 0; }
.user-sidebar { background: #fff; border-radius: 12px; padding: 20px; height: fit-content; }
.user-sidebar .avatar-area { text-align: center; padding: 20px 0; border-bottom: 1px solid #f0f0f0; margin-bottom: 16px; }
.user-sidebar .avatar-area img { width: 64px; height: 64px; border-radius: 50%; margin-bottom: 10px; }
.user-sidebar .avatar-area .name { font-size: 16px; font-weight: bold; }
.user-sidebar .menu-list { list-style: none; }
.user-sidebar .menu-list li { padding: 12px 16px; border-radius: 8px; font-size: 14px; cursor: pointer; margin-bottom: 4px; transition: .2s; }
.user-sidebar .menu-list li:hover, .user-sidebar .menu-list li.active { background: #fff3f0; color: #e1251b; }
.user-main { background: #fff; border-radius: 12px; padding: 24px; min-height: 400px; }
.user-main h3 { font-size: 18px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; }

/* 统计卡片 */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-box { background: #f9f9f9; border-radius: 8px; padding: 18px; text-align: center; }
.stat-box .num { font-size: 24px; font-weight: bold; color: #e1251b; }
.stat-box .label { font-size: 12px; color: #888; margin-top: 6px; }

/* 表格 */
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th { background: #f9f9f9; padding: 12px; text-align: left; font-weight: 600; color: #666; }
.data-table td { padding: 12px; border-bottom: 1px solid #f0f0f0; }
.data-table tr:hover td { background: #fafafa; }
.status-tag { padding: 3px 10px; border-radius: 10px; font-size: 12px; }
.status-tag.success { background: #e8f8ef; color: #27ae60; }
.status-tag.warning { background: #fff8e6; color: #f39c12; }
.status-tag.info { background: #eef6ff; color: #2d8cf0; }

/* ================= 商品详情页（SPA section） ================= */
#sec-product { background: #f5f5f5; padding: 12px 0 40px; min-height: 70vh; }

/* 面包屑 */
.pd-breadcrumb {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: #666;
    padding: 12px 0 14px;
}
.pd-breadcrumb a { color: #666; text-decoration: none; transition: color .15s; }
.pd-breadcrumb a:hover { color: #e1251b; }
.pd-breadcrumb .sep { color: #ccc; }
.pd-breadcrumb .current { color: #333; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-breadcrumb .back-btn {
    margin-left: auto; color: #e1251b; font-weight: 500;
    padding: 4px 10px; border-radius: 4px; transition: background .15s;
}
.pd-breadcrumb .back-btn:hover { background: #ffece9; }

/* 主体卡片 */
.pd-main {
    display: flex; gap: 28px;
    background: #fff; padding: 24px; border-radius: 6px;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.pd-left { width: 420px; flex-shrink: 0; }
.pd-main-img {
    width: 100%; aspect-ratio: 1;
    border: 1px solid #f0f0f0; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    background: #fafafa; overflow: hidden;
}
.pd-main-img img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* 右侧信息区 */
.pd-right { flex: 1; min-width: 0; }
.pd-name { font-size: 20px; font-weight: 600; color: #333; line-height: 1.4; margin: 0 0 8px; }
.pd-sub { font-size: 13px; color: #e1251b; margin-bottom: 12px; }

.pd-price-block {
    background: linear-gradient(180deg, #fff8f6 0%, #fff 100%);
    border: 1px solid #ffe2db; border-radius: 4px;
    padding: 16px 20px; margin-bottom: 18px;
}
.pd-price-block .row {
    display: flex; align-items: center; gap: 12px;
    font-size: 14px; margin: 8px 0;
}
.pd-price-block .row:first-child { margin-top: 0; }
.pd-price-block .row:last-child { margin-bottom: 0; }
.pd-price-block .label { color: #999; width: 50px; flex-shrink: 0; }
.pd-price-block .price { color: #e1251b; font-size: 28px; font-weight: 700; line-height: 1; }
.pd-price-block .original {
    color: #999; font-size: 14px; text-decoration: line-through;
}
.pd-price-block .sales-text b { color: #e1251b; font-weight: 600; margin: 0 2px; }
/* 秒杀进行中：价格块整体强化为粉红渐变，主价格颜色加深 */
.pd-price-block.is-flash {
    background: linear-gradient(180deg, #fff0f3 0%, #fff5f6 100%);
    border-color: #ffb3bf;
}
.pd-price-block.is-flash .price { color: #ff1744; }
.pd-price-block.is-flash .price::before {
    content: '秒杀价 ';
    background: linear-gradient(135deg,#ff1744,#ff7a45);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 13px; font-weight: 700; margin-right: 6px;
    vertical-align: 4px;
}

.pd-cashback {
    background: linear-gradient(135deg, #fff1ec, #ffe8df);
    border: 1px solid #ffd4c2; border-radius: 6px;
    padding: 14px 18px; margin-bottom: 22px;
}
.pd-cashback .title {
    color: #e1251b; font-size: 14px; font-weight: 600;
    margin-bottom: 8px;
    padding-left: 10px;
    border-left: 3px solid #e1251b;
    line-height: 1.3;
}
.pd-cashback p {
    font-size: 13px; color: #444; line-height: 1.7; margin: 0;
}

.pd-qty {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 24px;
}
.pd-qty .label { color: #999; width: 50px; font-size: 14px; }
.qty-ctrl {
    display: inline-flex; align-items: center;
    border: 1px solid #ddd; border-radius: 4px; overflow: hidden;
}
.qty-ctrl button {
    width: 32px; height: 32px; border: none; background: #fafafa;
    cursor: pointer; font-size: 18px; color: #666; line-height: 1;
    transition: background .15s;
}
.qty-ctrl button:hover { background: #f0f0f0; color: #e1251b; }
.qty-ctrl input {
    width: 50px; height: 32px;
    border: none; border-left: 1px solid #eee; border-right: 1px solid #eee;
    text-align: center; font-size: 14px; color: #333;
    background: #fff;
}

.pd-actions {
    display: flex; gap: 12px; margin-bottom: 22px;
}
.pd-actions button {
    flex: 1; max-width: 220px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 48px; border: none; border-radius: 4px;
    font-size: 16px; font-weight: 600; cursor: pointer;
    transition: all .15s;
}
.pd-actions .btn-share { background: #ff9000; color: #fff; }
.pd-actions .btn-share:hover { background: #f5840a; box-shadow: 0 4px 10px rgba(255,144,0,.3); }
.pd-actions .btn-buy { background: #e1251b; color: #fff; }
.pd-actions .btn-buy:hover { background: #c91a12; box-shadow: 0 4px 10px rgba(225,37,27,.3); }

.pd-promise {
    display: flex; gap: 22px; font-size: 13px; color: #666;
    padding-top: 16px; border-top: 1px dashed #eee;
    flex-wrap: wrap;
}
.pd-promise span { display: inline-flex; align-items: center; }

/* 下方详情区 */
.pd-desc-wrap {
    margin-top: 16px;
    background: #fff; border-radius: 6px;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.pd-tabs {
    display: flex;
    padding: 0 24px;
    border-bottom: 2px solid #f5f5f5;
}
.pd-tabs a {
    padding: 16px 20px; font-size: 15px; font-weight: 600;
    color: #666; text-decoration: none;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: color .15s;
}
.pd-tabs a.active { color: #e1251b; border-bottom-color: #e1251b; }
.pd-desc {
    padding: 24px; font-size: 14px; color: #333; line-height: 1.8;
    min-height: 100px;
}
.pd-desc img, .pd-desc video { max-width: 100%; height: auto; }
.pd-desc p { margin: 0 0 10px; }

/* 响应式：≤900px 单列 */
@media (max-width: 900px) {
    .pd-main { flex-direction: column; padding: 16px; }
    .pd-left { width: 100%; }
    .pd-main-img { max-width: 100%; }
    .pd-name { font-size: 17px; }
    .pd-price-block .price { font-size: 24px; }
    .pd-actions button { max-width: 100%; height: 44px; font-size: 14px; }
    .pd-breadcrumb { padding: 10px 12px; }
    .pd-breadcrumb .back-btn { padding: 2px 8px; }
    .pd-desc { padding: 16px; }
}

/* ============== 商城首页系统说明区块 ============== */
.jd-sys-blocks { margin-top: 28px; padding-bottom: 20px; }
.jd-sys-blocks > div { margin-bottom: 24px; }
.jd-sys-blocks > div:last-child { margin-bottom: 0; }

/* 通用标题 */
.sys-block-title { text-align: center; margin-bottom: 28px; position: relative; }
.sys-block-title h2 {
    font-size: 24px; color: #333; margin: 0 0 8px;
    font-weight: 700; letter-spacing: .5px;
    position: relative; display: inline-block;
}
.sys-block-title h2::before,
.sys-block-title h2::after {
    content: ''; position: absolute; top: 50%;
    width: 40px; height: 2px;
    background: linear-gradient(90deg, transparent, #e1251b);
    transform: translateY(-50%);
}
.sys-block-title h2::before { right: calc(100% + 14px); transform: translateY(-50%) scaleX(-1); }
.sys-block-title h2::after { left: calc(100% + 14px); }
.sys-block-title p { font-size: 13px; color: #999; margin: 0; }

/* ① 3 步玩转 */
.sys-steps {
    background: linear-gradient(135deg, #fff5f3 0%, #fff8f5 100%);
    padding: 36px 30px; border-radius: 10px;
}
.sys-steps-grid {
    display: flex; align-items: stretch; gap: 12px;
    justify-content: center;
}
.sys-step-card {
    flex: 1; max-width: 280px;
    background: #fff; border-radius: 10px;
    padding: 32px 24px 28px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    transition: all .25s; position: relative;
    border: 1px solid #f0f0f0;
    overflow: hidden;
}
.sys-step-card::before {
    content: ''; position: absolute;
    left: 0; top: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #e1251b, #ff5733);
    transform: scaleX(0); transform-origin: left;
    transition: transform .3s;
}
.sys-step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(225,37,27,.12);
    border-color: #ffd4c2;
}
.sys-step-card:hover::before { transform: scaleX(1); }
.sys-step-num {
    display: inline-block;
    background: linear-gradient(135deg, #e1251b, #ff5733);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 56px; font-weight: 800;
    letter-spacing: -2px; line-height: 1;
    margin-bottom: 14px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}
.sys-step-card h3 {
    font-size: 17px; color: #333; margin: 0 0 10px; font-weight: 600;
}
.sys-step-card p {
    font-size: 13px; color: #888; margin: 0; line-height: 1.7;
}
.sys-step-card-hi {
    background: linear-gradient(135deg, #fff 0%, #fff5f0 100%);
    border-color: #ffd4c2;
}
.sys-step-card-hi::before { transform: scaleX(1); }
.sys-step-card-hi h3 { color: #e1251b; }
.sys-step-arrow {
    display: flex; align-items: center;
    font-size: 28px; color: #ffb091;
    font-weight: 200;
}

/* ② 6 大优势 */
.sys-feats {
    background: #fff; padding: 36px 30px; border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.sys-feats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.sys-feat-item {
    display: flex; gap: 14px; padding: 18px;
    border-radius: 10px;
    background: linear-gradient(135deg, #fafafa, #fff);
    border: 1px solid #f0f0f0;
    transition: all .25s; cursor: default;
}
.sys-feat-item:hover {
    border-color: #ffd4c2;
    background: linear-gradient(135deg, #fff8f5, #fff);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(225,37,27,.08);
}
.sys-feat-ico {
    width: 44px; height: 44px; flex-shrink: 0;
    background: linear-gradient(135deg, #ffece4, #fff1ec);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #e1251b;
    transition: all .25s;
}
.sys-feat-item:hover .sys-feat-ico {
    background: linear-gradient(135deg, #e1251b, #ff5733);
    color: #fff;
    transform: rotate(-6deg) scale(1.05);
}
.sys-feat-ico svg {
    width: 22px; height: 22px; display: block;
}
.sys-feat-text { min-width: 0; flex: 1; }
.sys-feat-text h4 {
    font-size: 15px; color: #333; margin: 0 0 6px; font-weight: 600;
}
.sys-feat-text p {
    font-size: 12px; color: #888; margin: 0; line-height: 1.7;
}

/* ③ 收益示例 — 米黄暖色底，与上方深色数据卡形成层次 */
.sys-income {
    background: linear-gradient(135deg, #fff8ed 0%, #fffdf8 50%, #fff0db 100%);
    color: #333; border-radius: 12px;
    padding: 40px 30px; position: relative; overflow: hidden;
    border: 1px solid #ffe0b2;
    box-shadow: 0 1px 6px rgba(225,37,27,.04);
}
.sys-income::before {
    content: ''; position: absolute;
    top: -80px; right: -80px;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(255,140,0,.14), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.sys-income::after {
    content: ''; position: absolute;
    bottom: -60px; left: -60px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(225,37,27,.08), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.sys-income-title { text-align: center; margin-bottom: 28px; position: relative; z-index: 2; }
.sys-income-title h2 {
    font-size: 24px; margin: 0 0 8px;
    background: linear-gradient(135deg, #e1251b, #ff7733);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
}
.sys-income-title p { font-size: 13px; color: #999; margin: 0; }
.sys-income-formula {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; flex-wrap: wrap;
    background: #fff;
    border-radius: 12px; padding: 26px 16px;
    position: relative; z-index: 2;
    border: 2px solid #ffe0b2;
    box-shadow: 0 4px 18px rgba(225,37,27,.06);
}
.sys-income-box {
    flex: 1; min-width: 140px;
    text-align: center; padding: 10px 8px;
}
.sys-income-box .label {
    font-size: 13px; color: #888; margin-bottom: 10px;
}
.sys-income-box .num {
    font-size: 30px; font-weight: 700; color: #333; line-height: 1;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}
.sys-income-box .unit {
    font-size: 14px; font-weight: 400; color: #888; margin-left: 4px;
}
.sys-income-result {
    background: linear-gradient(135deg, #fff5e6, #ffe8d0);
    border-radius: 8px;
    border: 1px dashed #ffb74d;
    padding: 8px 6px;
}
.sys-income-result .label { color: #c0392b; font-weight: 600; }
.sys-income-result .num {
    background: linear-gradient(135deg, #e1251b, #ff7733);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 36px;
}
.sys-income-result .unit { color: #e1251b; }
.sys-income-sign {
    font-size: 30px; color: #ff9800;
    font-weight: 600; padding: 0 4px;
}
.sys-income-tips {
    text-align: center;
    margin-top: 22px; padding-top: 16px;
    font-size: 13px; color: #888;
    border-top: 1px dashed #ffd4a0;
    position: relative; z-index: 2;
}

/* ④ FAQ */
.sys-faq {
    background: #fff; padding: 36px 30px; border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.sys-faq-list {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.sys-faq-item {
    border: 1px solid #f0f0f0; border-radius: 8px;
    overflow: hidden; transition: all .2s;
    background: #fafafa;
}
.sys-faq-item:hover { border-color: #ffd4c2; background: #fff; }
.sys-faq-item.open {
    border-color: #ffd4c2; background: #fff;
    box-shadow: 0 2px 12px rgba(225,37,27,.1);
}
.sys-faq-q {
    padding: 16px 20px;
    font-size: 14px; color: #333; font-weight: 600;
    cursor: pointer; user-select: none;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    transition: color .15s;
}
.sys-faq-item.open .sys-faq-q { color: #e1251b; }
.sys-faq-q .arrow {
    transition: transform .25s; color: #ccc; font-size: 12px; flex-shrink: 0;
}
.sys-faq-item.open .sys-faq-q .arrow {
    transform: rotate(180deg); color: #e1251b;
}
.sys-faq-a {
    max-height: 0; overflow: hidden;
    transition: max-height .3s ease, padding .3s ease;
    padding: 0 20px;
    font-size: 13px; color: #666; line-height: 1.8;
}
.sys-faq-item.open .sys-faq-a {
    max-height: 220px;
    padding: 14px 20px 18px;
    border-top: 1px dashed #ffd4c2;
}

/* ⑤ CTA */
.sys-cta {
    background: linear-gradient(135deg, #e1251b 0%, #ff5733 100%);
    border-radius: 12px;
    padding: 44px 30px;
    text-align: center; color: #fff;
    position: relative; overflow: hidden;
}
.sys-cta::before {
    content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(45deg, rgba(255,255,255,.05) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.05) 50%, rgba(255,255,255,.05) 75%, transparent 75%, transparent);
    background-size: 28px 28px;
    pointer-events: none;
}
.sys-cta::after {
    content: ''; position: absolute;
    right: -120px; top: 50%;
    transform: translateY(-50%);
    width: 380px; height: 380px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    box-shadow: inset 0 0 0 60px rgba(255,255,255,.03);
    pointer-events: none;
}
.sys-cta h2 {
    font-size: 26px; margin: 0 0 10px;
    font-weight: 700; position: relative; z-index: 2;
}
.sys-cta p {
    font-size: 15px; margin: 0 0 24px; opacity: .92;
    position: relative; z-index: 2;
}
.sys-cta-btns {
    display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
    position: relative; z-index: 2;
}
.sys-cta-btns button {
    padding: 13px 38px; border-radius: 30px;
    font-size: 15px; font-weight: 600;
    cursor: pointer;
    border: 2px solid #fff; transition: all .2s;
}
.sys-cta-btn-primary { background: #fff; color: #e1251b; }
.sys-cta-btn-primary:hover {
    transform: scale(1.04);
    box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
.sys-cta-btn-ghost { background: transparent; color: #fff; }
.sys-cta-btn-ghost:hover { background: rgba(255,255,255,.15); }

/* 响应式：≤900px */
@media (max-width: 900px) {
    .sys-steps, .sys-feats, .sys-faq { padding: 24px 16px; }
    .sys-income { padding: 28px 18px; }
    .sys-cta { padding: 32px 20px; }
    .sys-block-title h2 { font-size: 19px; }
    .sys-block-title h2::before,
    .sys-block-title h2::after { width: 24px; }
    .sys-steps-grid { flex-direction: column; gap: 26px; }
    .sys-step-card { max-width: 100%; }
    .sys-step-arrow { transform: rotate(90deg); justify-content: center; }
    .sys-feats-grid { grid-template-columns: 1fr; }
    .sys-faq-list { grid-template-columns: 1fr; }
    .sys-income-formula { flex-direction: column; gap: 6px; }
    .sys-income-sign { transform: rotate(90deg); padding: 4px 0; }
    .sys-income-box .num { font-size: 26px; }
    .sys-income-result .num { font-size: 30px; }
    .sys-cta h2 { font-size: 20px; }
    .sys-cta p { font-size: 13px; }
    .sys-cta-btns button { padding: 11px 30px; font-size: 14px; }
}

/* ============== 真实数据卡 ============== */
.sys-stats {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #c91a12 100%);
    color: #fff; border-radius: 12px;
    padding: 32px 24px;
    position: relative; overflow: hidden;
}
.sys-stats::before {
    content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(45deg, rgba(255,255,255,.03) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.03) 50%, rgba(255,255,255,.03) 75%, transparent 75%);
    background-size: 20px 20px;
    pointer-events: none;
}
.sys-stats::after {
    content: ''; position: absolute;
    top: -60px; right: -60px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(255,144,0,.22), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.sys-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    position: relative; z-index: 2;
}
.sys-stat-item {
    text-align: center; padding: 14px 8px;
    border-right: 1px solid rgba(255,255,255,.12);
}
.sys-stat-item:last-child { border-right: none; }
.sys-stat-item .num {
    font-size: 36px; font-weight: 800;
    background: linear-gradient(135deg, #ffd700, #ff9000);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1; margin-bottom: 10px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: -1px;
}
.sys-stat-item .lbl {
    font-size: 13px; color: rgba(255,255,255,.78);
}
.sys-stats-tip {
    text-align: center; margin-top: 22px;
    font-size: 12px; color: rgba(255,255,255,.55);
    position: relative; z-index: 2;
    letter-spacing: 1px;
}

/* ============== 用户证言滚动 ============== */
.sys-testimonials {
    background: #fff;
    padding: 36px 0 30px;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
    overflow: hidden;
}
.sys-testimonials .sys-block-title { padding: 0 30px; }
.sys-testimonials-viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.sys-testimonials-track {
    display: flex;
    gap: 16px;
    padding: 4px 0;
    width: max-content;
    animation: testi-scroll 30s linear infinite;
    will-change: transform;
}
.sys-testimonials:hover .sys-testimonials-track { animation-play-state: paused; }
@keyframes testi-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.sys-testi-card {
    flex: 0 0 300px;
    background: linear-gradient(135deg, #fafafa, #fff);
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    padding: 18px;
    transition: all .25s;
}
.sys-testi-card:hover {
    border-color: #ffd4c2;
    box-shadow: 0 4px 14px rgba(225,37,27,.1);
    transform: translateY(-2px);
}
.sys-testi-card .head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px;
}
.sys-testi-card .avatar {
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
}
.sys-testi-card .avatar img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.sys-testi-card .avatar .ph {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #e1251b, #ff5733);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 16px;
}
.sys-testi-card .info { flex: 1; min-width: 0; }
.sys-testi-card .name {
    font-size: 14px; font-weight: 600; color: #333;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sys-testi-card .role {
    font-size: 11px; color: #999; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sys-testi-card .earning {
    background: linear-gradient(135deg, #e1251b, #ff5733);
    color: #fff; font-size: 12px; font-weight: 600;
    padding: 4px 10px; border-radius: 12px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(225,37,27,.25);
}
.sys-testi-card .words {
    font-size: 13px; color: #666; line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 67px;
}

/* ============== CTA 视频按钮 ============== */
.sys-cta-btn-video {
    background: rgba(0,0,0,.22) !important;
    color: #fff !important;
    border: 2px solid rgba(255,255,255,.55) !important;
    display: inline-flex !important;
    align-items: center; gap: 8px;
}
.sys-cta-btn-video:hover {
    background: rgba(0,0,0,.4) !important;
    border-color: #fff !important;
    transform: scale(1.04);
}
.sys-cta-btn-video .play-icon {
    width: 22px; height: 22px;
    background: #fff;
    color: #e1251b;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px;
    margin-left: -4px;
}

/* ============== 视频墙（多视频卡片画廊） ============== */
.sys-videos {
    background: #fff;
    padding: 36px 30px 32px;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.sys-videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}
.sys-video-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: all .25s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.sys-video-card:hover,
.sys-video-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(225,37,27,.18);
    border-color: #ffd4c2;
    outline: none;
}
.sys-video-card:hover .sys-video-cover::after {
    opacity: 1;
}
.sys-video-card:hover .sys-video-play {
    transform: translate(-50%, -50%) scale(1.08);
    background: #e1251b;
    color: #fff;
}
.sys-video-cover {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #1a1a2e center/cover no-repeat;
    overflow: hidden;
}
.sys-video-card.no-poster .sys-video-cover {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #c91a12 100%);
}
.sys-video-cover::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.4) 100%);
    opacity: .65;
    transition: opacity .25s;
}
.sys-video-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: #e1251b;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 20px rgba(0,0,0,.4);
    z-index: 1;
    transition: all .25s ease;
}
.sys-video-play svg {
    width: 26px; height: 26px;
    margin-left: 3px; /* 视觉补偿三角形偏左 */
}
.sys-video-meta {
    padding: 14px 16px 16px;
}
.sys-video-title {
    font-size: 15px; font-weight: 600; color: #333;
    line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.sys-video-desc {
    font-size: 12px; color: #888;
    margin-top: 6px;
    line-height: 1.5;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 视频墙响应式 */
@media (max-width: 768px) {
    .sys-videos { padding: 24px 16px; }
    .sys-videos-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
    .sys-video-play { width: 46px; height: 46px; }
    .sys-video-play svg { width: 22px; height: 22px; }
    .sys-video-title { font-size: 14px; }
}

/* ============== 视频弹窗 ============== */
.video-modal { background: rgba(0,0,0,.78); padding: 20px; }
.video-modal-content {
    width: min(900px, calc(100vw - 40px));
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 12px 50px rgba(0,0,0,.6);
}
.video-modal-content video,
.video-modal-content iframe {
    width: 100%; height: 100%;
    border: 0; display: block;
    border-radius: 8px;
    background: #000;
}
.video-modal .video-close {
    position: absolute;
    top: -44px; right: 0;
    width: 36px; height: 36px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    color: #fff;
    font-size: 22px; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s;
}
.video-modal .video-close:hover {
    background: rgba(255,255,255,.3);
    transform: rotate(90deg);
}

/* ============== 新区块响应式 ============== */
@media (max-width: 900px) {
    .sys-stats { padding: 24px 14px; }
    .sys-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .sys-stat-item { border-right: none; padding: 12px 4px; }
    .sys-stat-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.12); }
    .sys-stat-item:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255,255,255,.12);
        padding-bottom: 14px; margin-bottom: 4px;
    }
    .sys-stat-item .num { font-size: 26px; }
    .sys-stat-item .lbl { font-size: 12px; }
    .sys-testimonials { padding: 24px 0 22px; }
    .sys-testimonials .sys-block-title { padding: 0 16px; }
    .sys-testi-card { flex: 0 0 250px; padding: 14px; }
    .video-modal { padding: 0; }
    .video-modal-content { width: 100vw; border-radius: 0; }
    .video-modal .video-close {
        top: 8px; right: 8px;
        background: rgba(0,0,0,.6); border-color: rgba(255,255,255,.6);
    }
}

/* 登录弹窗 */
.login-modal .modal-content { width: 400px; }
.login-modal .form-group { margin-bottom: 18px; }
.login-modal .form-group label { display: block; font-size: 14px; color: #555; margin-bottom: 6px; }
.login-modal .form-group input { width: 100%; padding: 11px 14px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; transition: .2s; }
.login-modal .form-group input:focus { border-color: #e1251b; outline: none; box-shadow: 0 0 0 3px rgba(232,62,62,0.1); }
.login-modal .btn-submit { width: 100%; padding: 12px; background: #e1251b; color: #fff; border: none; border-radius: 8px; font-size: 15px; cursor: pointer; transition: .2s; }
.login-modal .btn-submit:hover { background: #d32f2f; }
.login-modal .switch-link { text-align: center; margin-top: 14px; font-size: 13px; color: #888; }
.login-modal .switch-link a { color: #e1251b; cursor: pointer; }

/* 推广码区域 */
.referral-box { background: linear-gradient(135deg, #fff3f0, #ffe8e0); border-radius: 12px; padding: 24px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.referral-box .code { font-size: 28px; font-weight: bold; color: #e1251b; letter-spacing: 2px; }
.referral-box .btn-copy { padding: 10px 24px; background: #e1251b; color: #fff; border: none; border-radius: 8px; font-size: 14px; cursor: pointer; }

/* 页脚 */
.footer { background: #2c2c2c; color: #aaa; padding: 40px 0 20px; margin-top: 60px; }
.footer .container { display: flex; justify-content: space-between; }
.footer .col h5 { color: #fff; margin-bottom: 12px; font-size: 15px; }
.footer .col p { font-size: 13px; line-height: 2; }
.footer .copyright { text-align: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid #444; font-size: 12px; }

/* 隐藏/显示 */
.hidden { display: none !important; }