/* ============================================================
 * hub3.css · 官方工具 / 下载中心 / 会员中心 v3
 * 目标：降低卡片密度、拉开层级、统一节奏；移动端全部单列模块化
 * 前缀：tl-（工具页） dc-（下载中心） vip-（会员页） 其余为局部覆盖
 * 最后引入，允许覆盖 hub.css / foot.css 的既有规则
 * ============================================================ */

/* ---------- 通用：区块标题 ---------- */
.sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin: 26px 0 14px;
}
.sec-head h2 {
    margin: 0;
    font-size: 17px;
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    gap: 9px;
}
.sec-head h2::before {
    content: '';
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--xh-primary), var(--xh-primary-2));
}
.sec-head p { margin: 0; font-size: 12.5px; color: var(--xh-muted, #8fa2c2); }

/* ---------- 通用：hero 收窄版 ---------- */
.hero-mini {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px 22px;
    border-radius: 16px;
    border: 1px solid rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .08);
    background:
        radial-gradient(90% 130% at 0% 0%, rgba(var(--xh-primary-rgb, 79, 140, 255), .2), transparent 60%),
        rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .03);
}
.hero-mini h1 { margin: 0 0 5px; font-size: 21px; letter-spacing: -.01em; }
.hero-mini p { margin: 0; font-size: 12.8px; line-height: 1.6; color: var(--xh-muted, #8fa2c2); max-width: 640px; }
.hero-mini .hero-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.hero-mini .hero-tags span {
    font-size: 11.5px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .12);
    color: var(--xh-text-2, #c7d6f2);
}
.hero-mini .hero-form { display: flex; gap: 8px; width: 100%; max-width: 380px; }
.hero-mini .hero-form input {
    flex: 1;
    height: 40px;
    padding: 0 13px;
    border-radius: 10px;
    border: 1px solid rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .12);
    background: rgba(9, 13, 24, .55);
    color: var(--xh-text, #eaf1ff);
    font-size: 13px;
    outline: none;
}
.hero-mini .hero-form input:focus { border-color: rgba(var(--xh-primary-rgb, 79, 140, 255), .6); }
.hero-mini .hero-form button {
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #06122a;
    background: linear-gradient(135deg, var(--xh-primary, #4f8cff), var(--xh-primary-2, #7a5cff));
}

/* ---------- 通用：横向统计条 ---------- */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.stat-strip > div {
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .08);
    background: rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .03);
}
.stat-strip b { display: block; font-size: 18px; line-height: 1.2; }
.stat-strip span { font-size: 11.5px; color: var(--xh-muted, #8fa2c2); }

/* ============================================================
 * 官方工具页 v3
 * ============================================================ */
.tl-wrap { padding: 18px 0 34px; }

/* 分类条：桌面直接横向铺开，不再用左侧栏 */
.tl-catbar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0 2px;
    margin-top: 16px;
    scrollbar-width: none;
}
.tl-catbar::-webkit-scrollbar { display: none; }
.tl-catbar a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .1);
    background: rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .035);
    color: var(--xh-text-2, #c7d6f2);
    font-size: 12.5px;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .18s, background .18s, color .18s;
}
.tl-catbar a em {
    font-style: normal;
    font-size: 11px;
    color: var(--xh-faint, #6c7d99);
    padding-left: 2px;
}
.tl-catbar a:hover { border-color: rgba(var(--xh-primary-rgb, 79, 140, 255), .45); }
.tl-catbar a.on {
    border-color: transparent;
    background: linear-gradient(120deg, var(--xh-primary, #4f8cff), var(--xh-primary-2, #7a5cff));
    color: #06122a;
    font-weight: 600;
}
.tl-catbar a.on em { color: rgba(6, 18, 42, .6); }

/* 工具卡网格：更宽的列距，避免拥挤 */
.tl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
    gap: 16px;
}
.tl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 18px 15px;
    border-radius: 16px;
    border: 1px solid rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .08);
    background: rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .035);
    color: var(--xh-text, #eaf1ff);
    text-decoration: none;
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.tl-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--xh-primary, #4f8cff), var(--xh-primary-2, #7a5cff));
    opacity: 0;
    transition: opacity .2s;
}
.tl-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--xh-primary-rgb, 79, 140, 255), .4);
    background: rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .065);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .3);
}
.tl-card:hover::before { opacity: 1; }
.tl-head { display: flex; align-items: center; gap: 12px; }
.tl-ico {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 16px;
    font-weight: 700;
    color: #06122a;
    background: linear-gradient(135deg, var(--xh-primary, #4f8cff), var(--xh-primary-2, #7a5cff));
    box-shadow: 0 8px 18px rgba(var(--xh-primary-rgb, 79, 140, 255), .26);
}
.tl-ico.g2 { background: linear-gradient(135deg, #7cf5c8, #46b8ff); }
.tl-ico.g3 { background: linear-gradient(135deg, #ffd480, #ff8fa3); }
.tl-ico.g4 { background: linear-gradient(135deg, #b39cff, #6fb3ff); }
.tl-title { min-width: 0; }
.tl-title b {
    display: block;
    font-size: 14.5px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tl-title i {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-size: 11.5px;
    color: var(--xh-muted, #8fa2c2);
}
.tl-desc {
    margin: 0;
    font-size: 12.8px;
    line-height: 1.65;
    color: var(--xh-muted, #8fa2c2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 42px;
}
.tl-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .06);
}
.tl-tag {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .1);
    color: var(--xh-muted, #8fa2c2);
}
.tl-tag.on { color: var(--xh-primary, #4f8cff); border-color: rgba(var(--xh-primary-rgb, 79, 140, 255), .4); }
.tl-go {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--xh-primary, #4f8cff);
}
.tl-go svg { transition: transform .2s; }
.tl-card:hover .tl-go svg { transform: translateX(2px); }

/* ============================================================
 * 下载中心 v3：横向条目列表（信息密度高、不空旷）
 * ============================================================ */
.dc-wrap { padding: 18px 0 34px; }
.dc-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 16px 0 12px;
}
.dc-tools .dc-tabs { display: flex; gap: 6px; }
.dc-tools .dc-tabs a {
    padding: 7px 13px;
    border-radius: 9px;
    border: 1px solid rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .1);
    font-size: 12.5px;
    color: var(--xh-muted, #8fa2c2);
    text-decoration: none;
}
.dc-tools .dc-tabs a.on {
    color: #fff;
    border-color: rgba(var(--xh-primary-rgb, 79, 140, 255), .55);
    background: rgba(var(--xh-primary-rgb, 79, 140, 255), .16);
}
.dc-tools .dc-sum { font-size: 12.5px; color: var(--xh-muted, #8fa2c2); }

.dc-list { display: flex; flex-direction: column; gap: 10px; }
.dc-row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .08);
    background: rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .03);
    color: var(--xh-text, #eaf1ff);
    text-decoration: none;
    transition: border-color .18s, background .18s, transform .18s;
}
.dc-row:hover {
    border-color: rgba(var(--xh-primary-rgb, 79, 140, 255), .4);
    background: rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .055);
    transform: translateX(2px);
}
.dc-ext {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #06122a;
    background: linear-gradient(135deg, var(--xh-primary, #4f8cff), var(--xh-primary-2, #7a5cff));
}
.dc-ext.g2 { background: linear-gradient(135deg, #7cf5c8, #46b8ff); }
.dc-ext.g3 { background: linear-gradient(135deg, #ffd480, #ff8fa3); }
.dc-ext.g4 { background: linear-gradient(135deg, #b39cff, #6fb3ff); }
.dc-main { min-width: 0; }
.dc-main b {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dc-main p {
    margin: 3px 0 0;
    font-size: 12.3px;
    color: var(--xh-muted, #8fa2c2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dc-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--xh-faint, #6c7d99);
}
.dc-meta span { display: inline-flex; align-items: center; gap: 4px; }
.dc-side { display: flex; align-items: center; gap: 8px; }
.dc-badge {
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .12);
    color: var(--xh-muted, #8fa2c2);
    white-space: nowrap;
}
.dc-badge.vip { color: #ff9fb0; border-color: rgba(255, 143, 163, .38); }
.dc-badge.pts { color: #ffd480; border-color: rgba(255, 212, 128, .38); }
.dc-badge.free { color: #7cf5c8; border-color: rgba(124, 245, 200, .38); }
.dc-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: #06122a;
    background: linear-gradient(135deg, var(--xh-primary, #4f8cff), var(--xh-primary-2, #7a5cff));
    white-space: nowrap;
}
.dc-row:hover .dc-btn { box-shadow: 0 8px 18px rgba(var(--xh-primary-rgb, 79, 140, 255), .3); }
.dc-empty {
    padding: 54px 20px;
    text-align: center;
    border: 1px dashed rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .12);
    border-radius: 16px;
    color: var(--xh-muted, #8fa2c2);
    font-size: 13.5px;
}

/* ============================================================
 * 会员中心 /vip.php
 * ============================================================ */
.vip-wrap { padding: 18px 0 40px; }

.vip-hero {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 26px 26px 24px;
    border: 1px solid rgba(255, 212, 128, .16);
    background:
        radial-gradient(120% 150% at 0% 0%, rgba(255, 212, 128, .16), transparent 58%),
        radial-gradient(110% 140% at 100% 0%, rgba(var(--xh-primary-rgb, 79, 140, 255), .22), transparent 62%),
        rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .035);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.vip-hero-txt { flex: 1 1 360px; min-width: 260px; }
.vip-crown {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid rgba(255, 212, 128, .38);
    color: #ffd480;
    font-size: 11.5px;
    letter-spacing: .04em;
    margin-bottom: 12px;
}
.vip-hero h1 { margin: 0 0 8px; font-size: 25px; line-height: 1.25; letter-spacing: -.01em; }
.vip-hero p { margin: 0; font-size: 13.2px; line-height: 1.7; color: var(--xh-muted, #8fa2c2); max-width: 620px; }

.vip-state {
    flex: 0 0 auto;
    min-width: 232px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .12);
    background: rgba(9, 13, 24, .45);
}
.vip-state .vs-label { font-size: 11.5px; color: var(--xh-muted, #8fa2c2); }
.vip-state .vs-main { font-size: 19px; font-weight: 700; margin: 6px 0 4px; }
.vip-state .vs-main.gold { background: linear-gradient(120deg, #ffd480, #ff9fb0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vip-state .vs-sub { font-size: 12px; color: var(--xh-muted, #8fa2c2); }
.vip-bar { height: 6px; border-radius: 999px; background: rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .1); overflow: hidden; margin: 10px 0 8px; }
.vip-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffd480, #ff9fb0); }

/* 套餐卡 */
.vip-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 4px;
}
.vip-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 20px 18px;
    border-radius: 18px;
    border: 1px solid rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .09);
    background: rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .035);
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.vip-plan:hover { transform: translateY(-3px); border-color: rgba(var(--xh-primary-rgb, 79, 140, 255), .4); }
.vip-plan.best {
    border-color: rgba(255, 212, 128, .45);
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(255, 212, 128, .12), transparent 60%),
        rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .05);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
}
.vip-flag {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 10.5px;
    padding: 3px 9px;
    border-radius: 999px;
    color: #3a2500;
    background: linear-gradient(120deg, #ffd480, #ffb347);
    font-weight: 700;
}
.vip-plan .vp-name { font-size: 15px; font-weight: 700; }
.vip-plan .vp-price { display: flex; align-items: baseline; gap: 5px; }
.vip-plan .vp-price b { font-size: 27px; line-height: 1; letter-spacing: -.02em; }
.vip-plan .vp-price span { font-size: 12px; color: var(--xh-muted, #8fa2c2); }
.vip-plan .vp-day { font-size: 11.5px; color: var(--xh-faint, #6c7d99); }
.vip-plan ul { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.vip-plan li { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: var(--xh-text-2, #c7d6f2); line-height: 1.5; }
.vip-plan li svg { flex: 0 0 auto; margin-top: 2px; fill: #7cf5c8; }
.vip-plan form { margin-top: auto; }
.vip-way { display: flex; gap: 12px; margin: 2px 0 10px; font-size: 12.5px; color: var(--xh-text-2, #c7d6f2); }
.vip-way label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.vip-btn {
    width: 100%;
    height: 42px;
    border: 0;
    border-radius: 11px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 700;
    color: #06122a;
    background: linear-gradient(135deg, var(--xh-primary, #4f8cff), var(--xh-primary-2, #7a5cff));
    transition: filter .18s;
}
.vip-btn:hover { filter: brightness(1.08); }
.vip-btn.gold { background: linear-gradient(135deg, #ffd480, #ffb347); }
.vip-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* 权益对比表 */
.vip-table-wrap {
    border: 1px solid rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .09);
    border-radius: 16px;
    overflow-x: auto;
    background: rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .025);
}
.vip-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.vip-table th, .vip-table td { padding: 13px 16px; text-align: center; font-size: 13px; border-bottom: 1px solid rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .06); }
.vip-table th { font-size: 12px; font-weight: 600; color: var(--xh-muted, #8fa2c2); background: rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .03); }
.vip-table th.hl { color: #ffd480; }
.vip-table td:first-child, .vip-table th:first-child { text-align: left; color: var(--xh-text-2, #c7d6f2); }
.vip-table tbody tr:last-child td { border-bottom: 0; }
.vip-table tbody tr:hover td { background: rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .025); }
.vip-table .yes { color: #7cf5c8; font-weight: 700; }
.vip-table .no { color: var(--xh-faint, #6c7d99); }

/* 常见问题 */
.vip-faq { display: flex; flex-direction: column; gap: 8px; }
.vip-faq details {
    border: 1px solid rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .09);
    border-radius: 12px;
    padding: 13px 16px;
    background: rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .03);
}
.vip-faq summary { cursor: pointer; font-size: 13.2px; font-weight: 600; color: var(--xh-text, #eaf1ff); }
.vip-faq details p { margin: 9px 0 0; font-size: 12.6px; line-height: 1.75; color: var(--xh-muted, #8fa2c2); }

/* 底部 CTA */
.vip-cta {
    margin-top: 24px;
    padding: 22px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border: 1px solid rgba(var(--xh-primary-rgb, 79, 140, 255), .28);
    background: linear-gradient(120deg, rgba(var(--xh-primary-rgb, 79, 140, 255), .16), rgba(var(--xh-primary-2-rgb, 122, 92, 255), .1));
}
.vip-cta h3 { margin: 0 0 5px; font-size: 16px; }
.vip-cta p { margin: 0; font-size: 12.6px; color: var(--xh-muted, #8fa2c2); }
.vip-cta a {
    padding: 11px 22px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 700;
    color: #06122a;
    text-decoration: none;
    background: linear-gradient(135deg, var(--xh-primary, #4f8cff), var(--xh-primary-2, #7a5cff));
}

/* ---------- 个人中心：会员卡 ---------- */
.mc-vipcard {
    position: relative;
    overflow: hidden;
    margin-bottom: 14px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(255, 212, 128, .22);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(255, 212, 128, .14), transparent 60%),
        rgba(var(--xh-w, 255), var(--xh-w, 255), var(--xh-w, 255), .04);
}
.mc-vipcard .mvc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mc-vipcard .mvc-name { font-size: 14.5px; font-weight: 700; }
.mc-vipcard .mvc-badge {
    font-size: 10.5px;
    padding: 3px 9px;
    border-radius: 999px;
    color: #3a2500;
    background: linear-gradient(120deg, #ffd480, #ffb347);
    font-weight: 700;
}
.mc-vipcard .mvc-sub { margin: 7px 0 10px; font-size: 12.2px; color: var(--xh-muted, #8fa2c2); line-height: 1.6; }
.mc-vipcard .mvc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    height: 38px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #06122a;
    text-decoration: none;
    background: linear-gradient(135deg, #ffd480, #ffb347);
}

/* ============================================================
 * 移动端：全部单列、缩短留白
 * ============================================================ */
@media (max-width: 820px) {
    .tl-wrap, .dc-wrap, .vip-wrap { padding: 12px 0 26px; }
    .hero-mini { padding: 16px; border-radius: 14px; }
    .hero-mini h1 { font-size: 19px; }
    .hero-mini .hero-form { max-width: none; }
    .stat-strip { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .stat-strip > div { padding: 10px 12px; }
    .stat-strip b { font-size: 16px; }
    .sec-head { margin: 20px 0 12px; }
    .sec-head h2 { font-size: 15.5px; }

    .tl-grid { grid-template-columns: 1fr; gap: 10px; }
    .tl-card { padding: 14px; border-radius: 14px; }
    .tl-desc { min-height: 0; }

    /* 下载条目：手机端两行布局 */
    .dc-row {
        grid-template-columns: 42px minmax(0, 1fr);
        grid-template-areas: "ext main" ". side";
        gap: 10px 12px;
        padding: 13px 14px;
    }
    .dc-ext { grid-area: ext; width: 42px; height: 42px; }
    .dc-main { grid-area: main; }
    .dc-side { grid-area: side; justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
    .dc-meta { margin-top: 5px; gap: 8px; }
    .dc-btn { padding: 6px 12px; font-size: 12px; }

    /* 会员页 */
    .vip-hero { padding: 18px 16px; border-radius: 16px; }
    .vip-hero h1 { font-size: 20px; }
    .vip-state { min-width: 0; width: 100%; }
    .vip-plans { grid-template-columns: 1fr; gap: 12px; }
    .vip-plan { padding: 17px 16px; }
    .vip-cta { padding: 18px 16px; }
    .vip-cta a { width: 100%; text-align: center; }
    .vip-table th, .vip-table td { padding: 11px 12px; font-size: 12.5px; }
}

/* ============================================================
 * 手机端页脚：去掉导航栏目（只保留品牌 + 版权条）
 * ============================================================ */
@media (max-width: 820px) {
    .xh-foot-nav,
    .xh-foot .xh-foot-grid > nav,
    .xh-foot .xh-foot-col,
    .xh-foot-grid > nav { display: none !important; }
    .xh-foot-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
    .xh-foot-brandcol { padding-bottom: 14px; }
    .xh-foot-tags { display: none !important; }
    .xh-foot-slogan { margin-bottom: 0 !important; }
}

/* ================= v4：购买/收银台（pv-） ================= */
.pv-order {
    margin: 6px 0 30px; padding: 22px;
    border: 1px solid var(--xh-line, rgba(var(--xh-w,255),var(--xh-w,255),var(--xh-w,255),.1));
    border-radius: var(--xh-radius-lg, 18px);
    background: var(--xh-panel, rgba(18,26,44,.72));
}
.pv-order-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.pv-order-label { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--xh-faint, #6c7d99); }
.pv-order-head h1 { margin: 6px 0 8px; font-size: 20px; }
.pv-order-no { margin: 0; font-size: 12.5px; color: var(--xh-muted, #8fa2c2); word-break: break-all; }
.pv-order-right { text-align: right; }
.pv-amt { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
    background: linear-gradient(120deg, #ffd480, #ff9fb0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pv-badge { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px;
    background: rgba(var(--xh-primary-rgb,79,140,255),.14); color: var(--xh-primary, #4f8cff); }
.pv-badge.st-paid { background: rgba(61,220,151,.14); color: #5ee2ac; }
.pv-badge.st-claimed { background: rgba(255,180,84,.14); color: #ffc477; }
.pv-badge.st-closed, .pv-badge.st-refunded { background: rgba(var(--xh-w,255),var(--xh-w,255),var(--xh-w,255),.07); color: var(--xh-muted, #8fa2c2); }
.pv-done { margin-top: 18px; padding: 18px; border-radius: 14px; border: 1px solid rgba(61,220,151,.3); background: rgba(61,220,151,.08); }
.pv-done b { display: block; font-size: 14.5px; margin-bottom: 6px; }
.pv-done p { margin: 0; font-size: 12.8px; line-height: 1.7; color: var(--xh-text-2, #c7d6f2); }
.pv-gateway { margin-top: 18px; }
.pv-gateway p { margin: 0 0 12px; font-size: 13px; color: var(--xh-text-2, #c7d6f2); }
.pv-qr-wrap { display: flex; gap: 22px; align-items: flex-start; margin-top: 18px; flex-wrap: wrap; }
.pv-qr { text-align: center; padding: 14px; border-radius: 14px; border: 1px solid var(--xh-line, rgba(var(--xh-w,255),var(--xh-w,255),var(--xh-w,255),.1)); background: #fff; }
.pv-qr img { display: block; border-radius: 8px; }
.pv-qr .pv-hint { margin: 10px 0 0; font-size: 12px; color: #33415c; }
.pv-qr-side { flex: 1 1 260px; min-width: 240px; }
.pv-note { margin: 0 0 10px; font-size: 12.5px; line-height: 1.7; color: var(--xh-muted, #8fa2c2); }
.pv-tip { margin: 0 0 12px; font-size: 13px; color: var(--xh-text-2, #c7d6f2); }
.pv-tip b { letter-spacing: .12em; color: #ffd480; }
.pv-claim { display: flex; gap: 8px; flex-wrap: wrap; }
.pv-claim input[type="text"] {
    flex: 1 1 180px; min-width: 0; height: 42px; padding: 0 12px; border-radius: 11px;
    border: 1px solid var(--xh-line, rgba(var(--xh-w,255),var(--xh-w,255),var(--xh-w,255),.14));
    background: rgba(var(--xh-w,255),var(--xh-w,255),var(--xh-w,255),.04); color: var(--xh-text, #e8f0ff); font-size: 13px;
}
.pv-claim input[type="text"]:focus { outline: none; border-color: rgba(var(--xh-primary-rgb,79,140,255),.6); }
.pv-hint { font-size: 12px; color: var(--xh-faint, #6c7d99); }
.pv-foot-link { display: flex; gap: 16px; margin: 18px 0 0; font-size: 12.5px; }
.pv-foot-link a { color: var(--xh-primary, #4f8cff); text-decoration: none; }

/* 积分包 */
.pv-pkgs { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.pv-pkg {
    display: flex; flex-direction: column; gap: 6px; padding: 16px;
    border: 1px solid var(--xh-line, rgba(var(--xh-w,255),var(--xh-w,255),var(--xh-w,255),.1));
    border-radius: 15px; background: var(--xh-panel, rgba(18,26,44,.72));
    transition: transform .18s ease, border-color .18s ease;
}
.pv-pkg:hover { transform: translateY(-2px); border-color: rgba(var(--xh-primary-rgb,79,140,255),.4); }
.pv-pkg-name { font-size: 13px; font-weight: 650; }
.pv-pkg-price { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.pv-pkg-pts { font-size: 11.5px; color: var(--xh-muted, #8fa2c2); }
.pv-pkg form { margin-top: auto; }
.pv-pkg .vip-way { margin: 4px 0 8px; font-size: 12px; }
.pv-pkg .vip-btn { width: 100%; height: 36px; font-size: 12.5px; }
.pv-login-tip { margin: 18px 0 0; font-size: 12.8px; color: var(--xh-muted, #8fa2c2); }
.pv-login-tip a { color: var(--xh-primary, #4f8cff); }

@media (max-width: 900px) { .pv-pkgs { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 760px) {
    .pv-order { padding: 16px; border-radius: 16px; }
    .pv-order-head h1 { font-size: 17px; }
    .pv-amt { font-size: 25px; }
    .pv-order-right { text-align: left; }
    .pv-qr-wrap { gap: 14px; }
    .pv-qr { width: 100%; }
    .pv-qr img { width: 200px; height: 200px; margin: 0 auto; }
    .pv-pkgs { grid-template-columns: 1fr; }
    .pv-claim input[type="text"] { flex: 1 1 100%; }
    .pv-claim .vip-btn { width: 100%; }
}


/* ===== 下载中心 v4：首屏精选 + 资源卡网格 ===== */
.dc-feature{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:18px;align-items:center;
  margin:6px 0 20px;padding:20px 22px;text-decoration:none;color:inherit;position:relative;overflow:hidden;
  border:1px solid rgba(var(--xh-primary-rgb),.32);border-radius:var(--xh-radius-lg);
  background:linear-gradient(135deg,rgba(var(--xh-primary-rgb),.16),rgba(var(--xh-w),.03));transition:.18s}
.dc-feature:hover{transform:translateY(-2px);border-color:rgba(var(--xh-primary-rgb),.55);
  box-shadow:0 14px 34px rgba(0,0,0,.24)}
.dcf-tag{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;
  letter-spacing:.4px;color:#fff;background:var(--xh-primary-grad);margin-bottom:9px}
.dcf-left b{display:block;font-size:18px;letter-spacing:-.3px;margin-bottom:6px}
.dcf-left p{margin:0 0 10px;font-size:13px;line-height:1.6;color:var(--xh-muted)}
.dcf-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.dcf-meta span{font-size:11.5px;padding:3px 8px;border-radius:7px;color:var(--xh-muted);
  background:rgba(var(--xh-w),var(--xh-w),var(--xh-w),.06);border:1px solid var(--xh-line)}
.dcf-btn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:650;color:var(--xh-primary)}
.dcf-right{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  padding:16px;border-radius:var(--xh-radius-lg);background:rgba(var(--xh-w),var(--xh-w),var(--xh-w),.05);
  border:1px dashed rgba(var(--xh-w),var(--xh-w),var(--xh-w),.16)}
.dcf-ext{font-family:var(--xh-mono);font-size:24px;font-weight:800;letter-spacing:.5px;color:var(--xh-primary)}
.dcf-note{font-size:11px;color:var(--xh-faint);text-align:center;line-height:1.5}
@media(max-width:760px){
  .dc-feature{grid-template-columns:1fr;padding:16px}
  .dcf-right{flex-direction:row;justify-content:space-between;padding:11px 14px}
  .dcf-ext{font-size:19px}
  .dcf-left b{font-size:16px}
}

.dlc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:900px){.dlc-grid{grid-template-columns:1fr;gap:11px}}
.dlc-card{display:flex;flex-direction:column;gap:9px;padding:15px 16px;text-decoration:none;color:inherit;
  border:1px solid var(--xh-line);border-radius:var(--xh-radius-lg);background:var(--xh-panel);transition:.18s}
.dlc-card:hover{transform:translateY(-2px);border-color:rgba(var(--xh-primary-rgb),.45);
  box-shadow:0 14px 30px rgba(0,0,0,.22)}
.dlc-top{display:flex;align-items:center;gap:11px}
.dlc-ext{width:44px;height:44px;flex:none;border-radius:13px;display:flex;align-items:center;justify-content:center;
  font-family:var(--xh-mono);font-size:11.5px;font-weight:800;letter-spacing:.2px;color:#fff;
  background:linear-gradient(140deg,var(--xh-primary),#7d5bff)}
.dlc-ext.g2{background:linear-gradient(140deg,#2ecc8f,#14b866)}
.dlc-ext.g3{background:linear-gradient(140deg,#ff9f43,#ff6b3d)}
.dlc-ext.g4{background:linear-gradient(140deg,#4aa8ff,#2d7dff)}
.dlc-titlewrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.dlc-titlewrap b{font-size:14.5px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dlc-titlewrap i{font-style:normal;font-size:11.5px;color:var(--xh-faint)}
.dlc-desc{margin:0;font-size:12.5px;line-height:1.65;color:var(--xh-muted);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dlc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;
  border-top:1px solid var(--xh-line)}
.dlc-meta{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.dlc-meta span{font-size:11px;padding:2px 7px;border-radius:6px;color:var(--xh-faint);
  background:rgba(var(--xh-w),var(--xh-w),var(--xh-w),.05)}
.dlc-go{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:650;color:var(--xh-primary)}
.dlc-card .dc-badge{flex:none;align-self:flex-start}
@media(max-width:760px){
  .dlc-card{padding:13px 14px}
  .dlc-ext{width:40px;height:40px;border-radius:11px;font-size:10.5px}
  .dlc-titlewrap b{font-size:13.5px}
}

/* ===== 工具页 v4：经典小工具分组 ===== */
.lg-head{margin-top:26px}
.lg-group{margin-bottom:16px}
.lg-gt{display:flex;align-items:center;gap:9px;margin:0 0 10px}
.lg-gt h3{margin:0;font-size:13.5px;letter-spacing:.2px}
.lg-gt em{font-style:normal;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;
  color:var(--xh-primary);background:rgba(var(--xh-primary-rgb),.14)}
.lg-grid{gap:12px}
.lg-grid .tl-card{padding:14px 15px}
.lg-grid .tl-title b{font-size:13.8px}
@media(max-width:760px){
  .lg-group{margin-bottom:12px}
  .lg-grid{gap:10px}
  .lg-grid .tl-card{padding:12px 13px}
}


/* ===================================================================
   v5 视觉统一升级：工具页 / 下载中心 / 会员页 卡片光效与层级
   （追加式覆盖，不改动既有结构）
   =================================================================== */

/* ---- 首屏 hero ---- */
.dc-wrap .hero-mini,
.tl-wrap .hero-mini{
  position:relative;overflow:hidden;border-radius:18px;
  border:1px solid rgba(var(--xh-w),var(--xh-w),var(--xh-w),.08);
  background:
    radial-gradient(680px 220px at 8% -40%, rgba(var(--xh-primary-rgb),.20), transparent 70%),
    radial-gradient(520px 200px at 96% 120%, rgba(120,200,255,.10), transparent 72%),
    linear-gradient(180deg, rgba(var(--xh-w),var(--xh-w),var(--xh-w),.045), rgba(var(--xh-w),var(--xh-w),var(--xh-w),.012));
  box-shadow:0 18px 40px -28px rgba(0,0,0,.7);
}
.dc-wrap .hero-mini::after,
.tl-wrap .hero-mini::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg, rgba(var(--xh-primary-rgb),.16), transparent 42%);
  mix-blend-mode:screen;opacity:.5;
}
.dc-wrap .hero-mini > *,
.tl-wrap .hero-mini > *{position:relative;z-index:1}
.dc-wrap .hero-mini h1,
.tl-wrap .hero-mini h1{letter-spacing:-.4px}

/* ---- 统计条：卡片化 + 悬停 ---- */
.dc-wrap .stat-strip,
.tl-wrap .stat-strip{
  border-radius:14px;padding:2px;
  border:1px solid rgba(var(--xh-w),var(--xh-w),var(--xh-w),.07);
  background:rgba(var(--xh-w),var(--xh-w),var(--xh-w),.03);
}
.dc-wrap .stat-strip > div,
.tl-wrap .stat-strip > div{
  border-radius:12px;padding:12px 14px;transition:background .18s ease,transform .18s ease;
}
.dc-wrap .stat-strip > div:hover,
.tl-wrap .stat-strip > div:hover{
  background:rgba(var(--xh-primary-rgb),.08);transform:translateY(-1px);
}
.dc-wrap .stat-strip b,
.tl-wrap .stat-strip b{
  background:linear-gradient(180deg,#fff,rgba(var(--xh-w),var(--xh-w),var(--xh-w),.72));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---- 区块标题：左侧色条 ---- */
.dc-wrap .sec-head h2,
.tl-wrap .sec-head h2{
  position:relative;padding-left:12px;
}
.dc-wrap .sec-head h2::before,
.tl-wrap .sec-head h2::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:15px;border-radius:2px;
  background:linear-gradient(180deg,var(--xh-primary),rgba(var(--xh-primary-rgb),.25));
}

/* ---- 分类 / 排序切换：由胶囊改为圆角矩形 ---- */
.dc-wrap .dc-tabs{border-radius:11px;padding:3px;gap:2px;
  background:rgba(var(--xh-w),var(--xh-w),var(--xh-w),.035);
  border:1px solid rgba(var(--xh-w),var(--xh-w),var(--xh-w),.06)}
.dc-wrap .dc-tabs a{border-radius:8px;padding:6px 11px;font-size:12px;transition:all .16s ease}
.dc-wrap .dc-tabs a:hover{background:rgba(var(--xh-w),var(--xh-w),var(--xh-w),.06);color:var(--xh-text)}
.dc-wrap .dc-tabs a.on{background:rgba(var(--xh-primary-rgb),.16);color:var(--xh-primary);
  box-shadow:inset 0 0 0 1px rgba(var(--xh-primary-rgb),.28)}

/* ---- 工具卡 ---- */
.tl-wrap .tl-card{
  position:relative;overflow:hidden;
  transition:transform .2s cubic-bezier(.2,.7,.3,1),border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.tl-wrap .tl-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(320px 120px at 12% 0%, rgba(var(--xh-primary-rgb),.14), transparent 70%);
  opacity:0;transition:opacity .2s ease;
}
.tl-wrap .tl-card:hover{
  transform:translateY(-3px);
  border-color:rgba(var(--xh-primary-rgb),.34);
  box-shadow:0 16px 30px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(var(--xh-primary-rgb),.06);
}
.tl-wrap .tl-card:hover::after{opacity:1}
.tl-wrap .tl-card:hover .tl-ico{transform:scale(1.06) rotate(-2deg)}
.tl-wrap .tl-ico{transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.tl-wrap .tl-card .tl-go{opacity:.72;transition:opacity .18s ease,transform .18s ease}
.tl-wrap .tl-card:hover .tl-go{opacity:1;transform:translateX(2px)}

/* ---- 资源卡 ---- */
.dc-wrap .dc-feature{
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s ease,border-color .2s ease;
  box-shadow:0 20px 44px -32px rgba(0,0,0,.85);
}
.dc-wrap .dc-feature:hover{
  transform:translateY(-3px);
  border-color:rgba(var(--xh-primary-rgb),.36);
  box-shadow:0 26px 50px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(var(--xh-primary-rgb),.08);
}
.dc-wrap .dlc-card{
  position:relative;overflow:hidden;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.dc-wrap .dlc-card::before{
  content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,rgba(var(--xh-primary-rgb),.85),transparent);
  opacity:0;transition:opacity .18s ease;
}
.dc-wrap .dlc-card:hover{
  transform:translateY(-2px);background:rgba(var(--xh-w),var(--xh-w),var(--xh-w),.055);
  border-color:rgba(var(--xh-primary-rgb),.3);
  box-shadow:0 14px 28px -22px rgba(0,0,0,.9);
}
.dc-wrap .dlc-card:hover::before{opacity:1}
.dc-wrap .dlc-ext,.dc-wrap .dcf-ext{transition:transform .2s ease}
.dc-wrap .dlc-card:hover .dlc-ext{transform:scale(1.05)}

/* ---- 空态 ---- */
.dc-wrap .dc-empty{
  border-radius:14px;border:1px dashed rgba(var(--xh-w),var(--xh-w),var(--xh-w),.14);
  padding:38px 18px;text-align:center;color:var(--xh-faint);font-size:13px;
}

/* ---- 会员页 / 购买页卡片统一光效 ---- */
.vip-plan-card,.vp-card,.pay-card{
  transition:transform .2s cubic-bezier(.2,.7,.3,1),border-color .2s ease,box-shadow .2s ease;
}
.vip-plan-card:hover,.vp-card:hover,.pay-card:hover{
  transform:translateY(-3px);border-color:rgba(var(--xh-primary-rgb),.34);
  box-shadow:0 18px 34px -24px rgba(0,0,0,.85);
}

/* ---- 手机端密度与留白修正 ---- */
@media(max-width:820px){
  .dc-wrap .hero-mini,.tl-wrap .hero-mini{padding:18px 16px;border-radius:16px}
  .dc-wrap .hero-mini h1,.tl-wrap .hero-mini h1{font-size:23px;line-height:1.25}
  .dc-wrap .hero-mini p,.tl-wrap .hero-mini p{font-size:12.5px;line-height:1.6;margin-top:6px}
  .dc-wrap .stat-strip > div,.tl-wrap .stat-strip > div{padding:10px 12px}
  .dc-wrap .stat-strip b,.tl-wrap .stat-strip b{font-size:17px}
  .dc-wrap .sec-head h2,.tl-wrap .sec-head h2{font-size:15px}
  .dc-wrap .dlc-grid{gap:10px}
  .dc-wrap .dc-feature{border-radius:16px}
  .dc-wrap .hero-form input{height:42px;font-size:13.5px}
}


/* ===================================================================
   v5 个人中心：补全 mc-cover / mc-side-body / mc-vipbar / mc-quick 等
   （此前这些类在 HTML 中存在但无样式定义，追加完整实现）
   =================================================================== */
.mc-grid{
  grid-template-columns:262px minmax(0,1fr);
  gap:20px;
}
.mc-side{
  padding:0;overflow:hidden;border-radius:18px;
  border:1px solid rgba(var(--xh-w),var(--xh-w),var(--xh-w),.08);
  background:linear-gradient(180deg,rgba(var(--xh-w),var(--xh-w),var(--xh-w),.05),rgba(var(--xh-w),var(--xh-w),var(--xh-w),.018));
  box-shadow:0 20px 44px -34px rgba(0,0,0,.9);
  top:92px;
}
.mc-cover{
  height:82px;position:relative;
  background:
    radial-gradient(220px 120px at 18% -30%, rgba(var(--xh-primary-rgb),.55), transparent 70%),
    radial-gradient(200px 120px at 88% 130%, rgba(120,200,255,.22), transparent 72%),
    linear-gradient(135deg, rgba(var(--xh-primary-rgb),.32), rgba(var(--xh-w),var(--xh-w),var(--xh-w),.02));
}
.mc-cover::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.18));
}
.mc-side-body{padding:0 16px 16px;position:relative}
.mc-side .mc-avatar{
  width:62px;height:62px;margin:-31px auto 10px;border-radius:20px;
  font-size:23px;position:relative;z-index:1;
  box-shadow:0 12px 26px rgba(var(--xh-primary-rgb),.34), 0 0 0 3px rgba(var(--xh-panel-rgb, 12,16,26),.9);
  box-shadow:0 12px 26px rgba(var(--xh-primary-rgb),.34), 0 0 0 3px rgba(10,14,24,.92);
}
.mc-side-body h3{
  margin:0;text-align:center;font-size:14.6px;line-height:1.4;color:var(--xh-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mc-side-body .mail{
  display:block;margin-top:3px;text-align:center;font-size:11.6px;color:var(--xh-faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mc-side-body > div[style*="flex"]{justify-content:center}

/* 会员进度条 */
.mc-vipbar{
  margin-top:14px;padding:11px 12px;border-radius:13px;
  border:1px solid rgba(var(--xh-primary-rgb),.20);
  background:linear-gradient(180deg,rgba(var(--xh-primary-rgb),.12),rgba(var(--xh-primary-rgb),.05));
}
.mc-vipbar .vb-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.8px}
.mc-vipbar .vb-top span{color:var(--xh-primary);font-weight:650}
.mc-vipbar .vb-top b{color:var(--xh-muted);font-weight:600;font-size:11.4px}
.mc-vipbar .vb-bar{
  height:6px;margin-top:9px;border-radius:999px;overflow:hidden;
  background:rgba(var(--xh-w),var(--xh-w),var(--xh-w),.10);
}
.mc-vipbar .vb-bar i{
  display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,rgba(var(--xh-primary-rgb),.85),rgba(140,200,255,.9));
  box-shadow:0 0 10px rgba(var(--xh-primary-rgb),.45);
}
.mc-vipbar .vb-link{
  display:block;margin-top:9px;font-size:11.6px;font-weight:650;color:var(--xh-primary);
  transition:opacity .15s ease,transform .15s ease;
}
.mc-vipbar .vb-link:hover{opacity:.85;transform:translateX(2px)}

/* 侧栏导航 */
.mc-side .mc-nav{margin-top:14px;gap:2px}
.mc-side .mc-nav a{
  position:relative;padding:9px 12px;border-radius:9px;font-size:12.8px;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.mc-side .mc-nav a:hover{background:rgba(var(--xh-w),var(--xh-w),var(--xh-w),.055);color:var(--xh-text);transform:translateX(2px)}
.mc-side .mc-nav a.active{
  background:rgba(var(--xh-primary-rgb),.14);color:var(--xh-primary);font-weight:650;
  box-shadow:inset 0 0 0 1px rgba(var(--xh-primary-rgb),.22);
}
.mc-side .mc-nav a.active::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:2px;height:14px;border-radius:2px;background:var(--xh-primary);
}
.mc-side .mc-nav a[href$="/logout.php"]{margin-top:6px;color:var(--xh-faint)}
.mc-side .mc-nav a[href$="/logout.php"]:hover{color:#ff7b7b;background:rgba(255,90,90,.10)}

/* 快捷入口宫格 */
.mc-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mc-quick a{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:12px 6px;border-radius:13px;text-align:center;
  border:1px solid rgba(var(--xh-w),var(--xh-w),var(--xh-w),.07);
  background:rgba(var(--xh-w),var(--xh-w),var(--xh-w),.028);
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.mc-quick a:hover{
  border-color:rgba(var(--xh-primary-rgb),.32);
  background:rgba(var(--xh-primary-rgb),.08);transform:translateY(-2px);
}
.mc-quick .qi{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:10px;color:var(--xh-primary);
  background:rgba(var(--xh-primary-rgb),.14);
}
.mc-quick i{font-style:normal;font-size:11.6px;color:var(--xh-muted)}
.mc-quick a:hover i{color:var(--xh-text)}

/* 概览统计卡数字 */
.mc-stat > div{border-radius:14px;background:rgba(var(--xh-w),var(--xh-w),var(--xh-w),.03)}
.mc-stat b{font-size:18px;letter-spacing:-.2px}

/* 面板统一 */
.mc-panel{border-radius:16px;padding:18px 20px}
.mc-panel h2{font-size:14px;margin-bottom:12px}
.mc-panel .mc-row{font-size:12.8px}

@media(max-width:820px){
  .mc-grid{grid-template-columns:1fr;gap:14px}
  .mc-side{position:static;top:auto}
  .mc-cover{height:68px}
  .mc-side .mc-nav{
    flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:2px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .mc-side .mc-nav::-webkit-scrollbar{display:none}
  .mc-side .mc-nav a{flex:none;padding:7px 13px;border-radius:999px;
    border:1px solid rgba(var(--xh-w),var(--xh-w),var(--xh-w),.09)}
  .mc-side .mc-nav a.active::before{display:none}
  .mc-side .mc-nav a[href$="/logout.php"]{margin-top:0}
  .mc-quick{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .mc-quick a{padding:10px 4px;border-radius:12px}
  .mc-quick .qi{width:29px;height:29px;border-radius:9px}
  .mc-stat{gap:10px}
  .mc-stat b{font-size:16px}
  .mc-panel{padding:15px 15px;border-radius:14px}
}


/* 会员页：积分充值入口条 */
.vip-buymini{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:-4px 0 16px;padding:12px 16px;border-radius:14px;
  border:1px solid rgba(var(--xh-w),var(--xh-w),var(--xh-w),.08);
  background:rgba(var(--xh-w),var(--xh-w),var(--xh-w),.03);
}
.vip-buymini span{color:var(--xh-muted);font-size:12.6px;line-height:1.6}
.vip-buymini a{
  flex:none;display:inline-flex;align-items:center;gap:4px;
  padding:7px 13px;border-radius:999px;font-size:12.4px;font-weight:650;
  color:var(--xh-primary);background:rgba(var(--xh-primary-rgb),.13);
  border:1px solid rgba(var(--xh-primary-rgb),.22);
  transition:background .16s ease,transform .16s ease;
}
.vip-buymini a:hover{background:rgba(var(--xh-primary-rgb),.2);transform:translateX(2px)}
@media(max-width:720px){
  .vip-buymini{flex-direction:column;align-items:flex-start;gap:9px;padding:11px 13px}
  .vip-buymini a{width:100%;justify-content:center}
}


/* 会员套餐：顶角「推荐」角标不再压住套餐标题 */
.vip-plan .vp-name{padding-right:74px}
.vip-plan .vp-price{padding-right:0}
@media(max-width:560px){
  .vip-flag{top:10px;right:10px;font-size:10px;padding:2px 8px}
  .vip-plan .vp-name{padding-right:64px;font-size:14px}
}


/* ============ v6 下载中心 · 特色卡片右侧类型面板重做 ============ */
.dc-feature{position:relative;overflow:hidden}
.dc-feature::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 100% 0%,rgba(var(--xh-primary-rgb),.14),transparent 62%);
}
.dc-feature .dcf-right{
  position:relative;z-index:1;
  flex:0 0 190px;min-width:170px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:20px 16px;border-radius:16px;
  border:1px solid rgba(var(--xh-primary-rgb),.22);
  background:
    linear-gradient(160deg,rgba(var(--xh-primary-rgb),.16),rgba(var(--xh-primary-rgb),.05)),
    rgba(var(--xh-w),var(--xh-w),var(--xh-w),.04);
  box-shadow:inset 0 1px 0 rgba(var(--xh-w),var(--xh-w),var(--xh-w),.06);
}
.dc-feature .dcf-ext{
  display:flex;align-items:center;justify-content:center;
  width:78px;height:78px;border-radius:20px;
  font-family:var(--xh-mono);font-size:23px;font-weight:800;letter-spacing:.5px;
  color:#fff;background:var(--xh-primary-grad);
  box-shadow:0 10px 26px rgba(var(--xh-primary-rgb),.32);
}
.dc-feature .dcf-note{
  font-size:11px;line-height:1.55;text-align:center;color:var(--xh-muted);
  padding:3px 10px;border-radius:999px;border:1px solid var(--xh-line);
  background:rgba(var(--xh-w),var(--xh-w),var(--xh-w),.05);
}
.dc-feature:hover .dcf-ext{transform:translateY(-2px) scale(1.03)}

/* 列表卡片：悬停强调 + 左侧色条 */
.dlc-card{position:relative;overflow:hidden;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.dlc-card::before{
  content:"";position:absolute;left:0;top:12%;bottom:12%;width:3px;border-radius:0 3px 3px 0;
  background:var(--xh-primary-grad);opacity:0;transition:opacity .18s ease;
}
.dlc-card:hover::before{opacity:1}

@media(max-width:760px){
  .dc-feature .dcf-right{
    flex:0 0 auto;width:100%;min-width:0;flex-direction:row;justify-content:flex-start;gap:12px;
    padding:12px 14px;
  }
  .dc-feature .dcf-ext{width:52px;height:52px;border-radius:14px;font-size:16px;box-shadow:0 6px 16px rgba(var(--xh-primary-rgb),.28)}
  .dc-feature .dcf-note{text-align:left}
}


/* ============ v6 官方工具 · 经典小工具卡片收紧、提升信息密度 ============ */
.tl-card.legacy{padding:14px 16px}
.tl-card.legacy .tl-head{gap:10px;margin-bottom:9px}
.tl-card.legacy .tl-ico{width:38px;height:38px;border-radius:11px;font-size:15px}
.tl-card.legacy .tl-title b{font-size:13.6px}
.tl-card.legacy .tl-title i{font-size:11px;opacity:.85}
.tl-card.legacy .tl-desc{
  font-size:11.8px;line-height:1.5;margin:0 0 10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tl-grid.lg-grid{gap:12px}
.lg-group{margin-bottom:22px}
.lg-gt h3{font-size:14px}
/* 工具卡整体：悬停轻微抬升 + 边框高亮，减少“平铺白板”感 */
.tl-card{transition:transform .18s ease,border-color .18s ease,background .18s ease}
.tl-card:hover{transform:translateY(-2px)}
@media(max-width:760px){
  .tl-grid.lg-grid{grid-template-columns:1fr 1fr;gap:10px}
  .tl-card.legacy{padding:12px 13px}
  .tl-card.legacy .tl-ico{width:34px;height:34px;border-radius:10px;font-size:13.5px}
  .tl-card.legacy .tl-title b{font-size:12.8px}
  .tl-card.legacy .tl-desc{-webkit-line-clamp:2;font-size:11.2px;margin-bottom:8px}
}