/*
 * 系统名称：超神电竞系统
 * 著作权所有：超神电竞 © 2026
 * 超神科技官网：www.hncs.top
 * 禁止二次分发、转售、转租、对外授权，违者追究法律责任
 */
/* =============================================================
 *  护航陪玩平台 · 移动端(用户端/打手端) 全局样式
 *  设计还原：参考截图（紫色渐变 + 白色卡片 + 橙色价格）
 *  适配：375~480px 移动端为主，PC 居中显示手机视窗
 * ============================================================= */

:root {
    --primary: #6a5cff;
    --primary-2: #9a6bff;
    --primary-grad: linear-gradient(135deg, #6a5cff 0%, #9a6bff 100%);
    --header-grad: linear-gradient(160deg, #5b6ef5 0%, #7d5cff 100%);
    --price: #ff4d2d;
    --text: #23263a;
    --text-2: #666b85;
    --text-3: #9aa0b8;
    --line: #eef0f7;
    --bg: #f5f6fa;
    --ok: #12b886;
    --warn: #ff9f43;
    --danger: #ff5b5b;
    --radius: 14px;
    --shadow: 0 4px 16px rgba(70, 60, 140, .08);
    --tabbar-h: 54px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    margin: 0;
    padding: 0;
    background: #eceef5;
    color: var(--text);
    font: 14px/1.55 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

/* PC 上居中显示手机视窗，方便调试 */
body { display: flex; justify-content: center; }
#page {
    width: 100%;
    max-width: 480px;
    min-height: 100vh;
    background: var(--bg);
    position: relative;
    overflow-x: hidden;
    box-shadow: 0 0 30px rgba(0, 0, 0, .06);
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
input, textarea, button, select { font-family: inherit; font-size: 14px; outline: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* -------------------- 顶部导航 -------------------- */
.hd {
    background: var(--header-grad);
    color: #fff;
    padding: 14px 16px 12px;
    position: relative;
    overflow: hidden;
}
.hd.plain { background: #fff; color: var(--text); border-bottom: 1px solid var(--line); }
.hd-row { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.hd-title { font-size: 18px; font-weight: 700; }
.hd-back { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; }
.hd-tabs { display: flex; gap: 22px; align-items: center; }
.hd-tab { font-size: 16px; opacity: .72; cursor: pointer; padding: 4px 0; position: relative; white-space: nowrap; }
.hd-tab.on { opacity: 1; font-size: 19px; font-weight: 700; }
.hd-tab.on::after {
    content: ''; position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%);
    width: 20px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .9);
}
.hd-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.round-btn {
    width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .22);
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.hd.plain .round-btn { background: #f0f1f8; color: var(--text-2); }

/* 胶囊：白色圆角容器承载下方内容（还原截图首页） */
.sheet {
    background: #fff;
    border-radius: 18px 18px 0 0;
    margin-top: -10px;
    padding: 14px 0 0;
    position: relative;
}

/* -------------------- 游戏分类 -------------------- */
.game-nav {
    display: flex; gap: 8px; overflow-x: auto; padding: 2px 12px 12px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.game-nav::-webkit-scrollbar { display: none; }
.game-item { flex: 1 1 auto; min-width: 80px; text-align: center; cursor: pointer; }
/* 分类少于 5 个时不要留一块空白：用 flex:1 均分；超过 5 个仍可横向滚动 */
.game-nav { justify-content: flex-start; }
/* 缩略图 64px（含 2px 描边 → 图片实际显示 60px）
 * 之前是 58px（实际 54px），在 430px 屏上四个分类均分时
 * 图标只占单元宽度的 54%，两侧留白发虚；改成 64px 后更饱满。
 * 上传建议：正方形 PNG，至少 128x128，推荐 256x256（高分屏 3x 余量）。 */
.game-item .ico {
    width: 64px; height: 64px; margin: 0 auto 7px; border-radius: 18px;
    background: #eef0fa; display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700; color: var(--primary); overflow: hidden;
    border: 2px solid transparent;
}
.game-item .ico img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* 分类默认图标（内联 SVG）：用 currentColor，自动跟随主色/选中态颜色 */
.game-item .ico svg.gi { width: 58%; height: 58%; display: block; }
.game-item .nm { font-size: 12px; color: var(--text-2); }
.game-item.on .ico { border-color: var(--primary); box-shadow: 0 4px 10px rgba(106, 92, 255, .25); }
.game-item.on .nm { color: var(--primary); font-weight: 600; }

/* -------------------- 双按钮（人工客服 / 考核商行） -------------------- */
.dual-btns { display: flex; gap: 10px; padding: 0 12px 14px; }
.dual-btn {
    flex: 1; border-radius: 14px; padding: 12px 14px; color: #fff; cursor: pointer;
    background: linear-gradient(135deg, #ff7bc4, #ff5fa2);
    display: flex; align-items: center; justify-content: space-between; min-height: 66px;
    box-shadow: 0 6px 14px rgba(255, 95, 162, .22);
}
.dual-btn.purple { background: linear-gradient(135deg, #a97bff, #7b57ff); box-shadow: 0 6px 14px rgba(123, 87, 255, .22); }
.dual-btn .t { font-size: 15px; font-weight: 700; }
.dual-btn .s { font-size: 11px; opacity: .92; margin-top: 2px; }
.dual-btn .emoji { font-size: 26px; }

/* -------------------- 分类筛选条 -------------------- */
.filter-bar {
    display: flex; gap: 8px; overflow-x: auto; padding: 0 12px 12px;
    scrollbar-width: none;
}
.filter-bar::-webkit-scrollbar { display: none; }
.chip {
    flex: 0 0 auto; padding: 6px 14px; border-radius: 999px; background: #f2f3f9;
    color: var(--text-2); font-size: 13px; cursor: pointer; border: 1px solid transparent;
}
.chip.on { background: var(--primary); color: #fff; border-color: var(--primary); }

/* -------------------- 商品卡片 -------------------- */
.goods-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 12px 14px; }
.goods-card {
    background: #fff; border-radius: 12px; overflow: hidden; cursor: pointer;
    box-shadow: 0 2px 10px rgba(70, 60, 140, .06);
}
.goods-card .thumb {
    position: relative; width: 100%; padding-top: 84%; background: linear-gradient(140deg, #e8ebfb, #dfe3fa); overflow: hidden;
}
.goods-card .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.goods-card .thumb .tag {
    position: absolute; left: 0; bottom: 8px; background: rgba(28, 30, 44, .88); color: #ffd75e;
    font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 0 6px 6px 0;
}
.goods-card .body { padding: 9px 10px 11px; }
.goods-card .ttl { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.goods-card .sub { font-size: 12px; color: var(--text-3); height: 34px; overflow: hidden; margin-bottom: 6px; }
.goods-card .price-row { display: flex; align-items: baseline; gap: 6px; }
.goods-card .price { color: var(--price); font-size: 17px; font-weight: 700; }
.goods-card .price small { font-size: 11px; }
.goods-card .origin { color: var(--text-3); font-size: 12px; text-decoration: line-through; }
.goods-card .sold { margin-left: auto; font-size: 11px; color: var(--text-3); }
.goods-card .badge {
    display: inline-block; margin-left: auto; background: #2b2f3a; color: #fff;
    font-size: 10px; padding: 2px 6px; border-radius: 4px;
}

/* 横向商品行（全部商品页右侧列表） */
.goods-row { display: flex; gap: 10px; background: #fff; border-radius: 12px; padding: 10px; margin-bottom: 10px; }
.goods-row .thumb {
    position: relative; width: 96px; height: 78px; border-radius: 8px; overflow: hidden; flex: 0 0 auto;
    background: linear-gradient(140deg, #e8ebfb, #dfe3fa);
}
.goods-row .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.goods-row .info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.goods-row .ttl { font-weight: 600; font-size: 14px; }
.goods-row .sub { font-size: 12px; color: var(--text-3); flex: 1; overflow: hidden; margin: 2px 0 6px; }
.goods-row .price { color: var(--price); font-size: 17px; font-weight: 700; }
.goods-row .origin { color: var(--text-3); font-size: 12px; text-decoration: line-through; margin-left: 6px; }

/* -------------------- 通用块 -------------------- */
.card { background: #fff; border-radius: var(--radius); padding: 14px; margin: 0 12px 12px; box-shadow: var(--shadow); }
.card.flush { padding: 0; overflow: hidden; }
.sec-title { padding: 14px 16px 8px; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.sec-title::before { content: ''; width: 4px; height: 14px; border-radius: 2px; background: var(--primary-grad); }
.muted { color: var(--text-3); font-size: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.divider { height: 1px; background: var(--line); margin: 12px 0; }
.empty { text-align: center; color: var(--text-3); padding: 46px 20px; font-size: 13px; }
.empty .ic { font-size: 40px; margin-bottom: 10px; opacity: .5; }
.tag-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; background: #f0f1fa; color: var(--primary); }

/* 状态色 */
.st-0 { color: var(--warn); }
.st-1, .st-2, .st-3 { color: var(--primary); }
.st-4 { color: var(--ok); }
.st-5 { color: var(--text-3); }
.st-6 { color: var(--danger); }

/* -------------------- 表单 -------------------- */
.form-item { padding: 13px 16px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.form-item:last-child { border-bottom: 0; }
.form-item .lb { width: 88px; flex: 0 0 auto; color: var(--text-2); font-size: 14px; }
.form-item input, .form-item textarea, .form-item select {
    flex: 1; border: 0; background: transparent; font-size: 14px; color: var(--text); min-width: 0;
}
.form-item input::placeholder, .form-item textarea::placeholder { color: #b9bed2; }
.form-item textarea { resize: none; min-height: 60px; line-height: 1.6; }
.form-item .arrow { color: #c8ccdd; }
.form-block { background: #fff; border-radius: var(--radius); margin: 0 12px 12px; overflow: hidden; }
.form-label { font-size: 13px; color: var(--text-2); padding: 0 16px 6px; }

.seg { display: flex; gap: 10px; }
.seg .sg {
    flex: 1; text-align: center; padding: 11px 0; border-radius: 10px; background: #f4f5fb;
    color: var(--text-2); cursor: pointer; font-size: 14px;
}
.seg .sg.on { background: var(--primary); color: #fff; font-weight: 600; }

.stepper { display: flex; align-items: center; gap: 0; margin-left: auto; }
.stepper .sb {
    width: 32px; height: 30px; background: #f4f5fb; display: flex; align-items: center;
    justify-content: center; cursor: pointer; color: var(--text-2); font-size: 17px;
}
.stepper .sb:first-child { border-radius: 8px 0 0 8px; }
.stepper .sb:last-child { border-radius: 0 8px 8px 0; }
.stepper .num { width: 46px; text-align: center; font-size: 15px; }

/* -------------------- 按钮 -------------------- */
.btn {
    display: block; width: 100%; padding: 13px 0; border: 0; border-radius: 999px;
    background: var(--primary-grad); color: #fff; font-size: 16px; font-weight: 600;
    cursor: pointer; text-align: center;
}
.btn:active { opacity: .88; }
.btn.ghost { background: #f2f3f9; color: var(--text-2); }
.btn.danger { background: linear-gradient(135deg, #ff7b7b, #ff5b5b); }
.btn.ok { background: linear-gradient(135deg, #34d399, #12b886); }
.btn.sm { padding: 8px 16px; font-size: 13px; width: auto; display: inline-block; border-radius: 999px; }
.btn[disabled] { opacity: .55; pointer-events: none; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }

/* 底部固定操作条 */
.foot-bar {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px;
    background: #fff; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); z-index: 60;
}
.foot-bar .ic-btn { width: 52px; text-align: center; color: var(--text-3); font-size: 11px; cursor: pointer; }
.foot-bar .ic-btn .i { font-size: 19px; display: block; line-height: 1.2; }
.foot-bar .ic-btn.on { color: var(--price); }
/* 底部操作条里的按钮要覆盖 .btn 的 width:100%
   .btn 基础样式是 display:block; width:100%（用于整行按钮），
   放进 flex 的 .foot-bar 后，带 flex:0 0 auto 的次要按钮会“既不肯收缩、
   又要求占满一整行”，把容器撑破 → 页面出现横向滚动条 + 主按钮被挤成竖排。
   所以这里显式改回 width:auto，并按主/次区分伸缩行为。 */
.foot-bar .btn { flex: 1 1 0; width: auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foot-bar .btn.ghost { flex: 0 0 auto; }

/* 底部导航 */
.tabbar {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: #fff; border-top: 1px solid var(--line); display: flex; z-index: 70;
}
.tabbar .tb { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #b0b5c9; font-size: 11px; gap: 2px; }
.tabbar .tb .i { font-size: 20px; line-height: 1; }
.tabbar .tb.on { color: var(--primary); }
.tabbar .tb .dot {
    position: absolute; margin-left: 14px; margin-top: -17px;
    min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
    border-radius: 8px; background: var(--danger); color: #fff;
    font-size: 10px; line-height: 16px; text-align: center;
    font-style: normal; font-weight: 600;
}

/* 悬浮操作按钮（消息页「一键标为已读」） */
.fab {
    position: fixed; right: 16px; bottom: 82px; z-index: 60;
    background: var(--primary); color: #fff;
    font-size: 13px; font-weight: 600; line-height: 1;
    padding: 12px 18px; border-radius: 24px; cursor: pointer;
    box-shadow: 0 6px 18px rgba(106, 92, 255, .38);
    user-select: none; -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, box-shadow .12s ease;
}
.fab:active { transform: scale(.96); box-shadow: 0 3px 10px rgba(106, 92, 255, .3); }
.fab.hide { display: none !important; }

.has-tabbar { padding-bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom)); }
.has-footbar { padding-bottom: 84px; }

/* -------------------- 列表条目 -------------------- */
.list-cell {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff;
    border-bottom: 1px solid var(--line); cursor: pointer;
}
.list-cell:last-child { border-bottom: 0; }
.list-cell .i { width: 22px; text-align: center; font-size: 17px; }
.list-cell .n { flex: 1; font-size: 14px; }
.list-cell .v { color: var(--text-3); font-size: 13px; }
.list-cell .arrow { color: #c8ccdd; font-size: 15px; }

/* 网格菜单（个人中心） */
.grid-menu { display: flex; flex-wrap: wrap; background: #fff; border-radius: var(--radius); margin: 0 12px 12px; padding: 14px 0 6px; }
.grid-menu .gm { width: 25%; text-align: center; margin-bottom: 14px; cursor: pointer; }
.grid-menu .gm .i { font-size: 22px; }
.grid-menu .gm .n { font-size: 12px; color: var(--text-2); margin-top: 5px; }

/* -------------------- 订单卡片 -------------------- */
.order-card { background: #fff; border-radius: var(--radius); margin: 0 12px 12px; padding: 14px; box-shadow: var(--shadow); }
.order-card .oh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.order-card .no { font-size: 12px; color: var(--text-3); }
.order-card .st { font-size: 13px; font-weight: 600; }
.order-card .og { display: flex; gap: 10px; }
.order-card .og .thumb { width: 74px; height: 62px; border-radius: 9px; overflow: hidden; flex: 0 0 auto; background: #eef0fa; }
.order-card .og .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.order-card .og .info { flex: 1; min-width: 0; }
.order-card .og .ttl { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
.order-card .of { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.order-meta { font-size: 12px; color: var(--text-3); line-height: 1.8; }
.order-meta b { color: var(--text-2); font-weight: 500; }

/* -------------------- 状态标签条 -------------------- */
.status-tabs { display: flex; background: #fff; border-bottom: 1px solid var(--line); overflow-x: auto; }
.status-tabs .st-t { flex: 0 0 auto; padding: 12px 16px; font-size: 14px; color: var(--text-2); position: relative; cursor: pointer; white-space: nowrap; }
.status-tabs .st-t.on { color: var(--primary); font-weight: 600; }
.status-tabs .st-t.on::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 22px; height: 3px; border-radius: 2px; background: var(--primary); }

/* -------------------- 弹窗 / 抽屉 -------------------- */
.mask { position: fixed; inset: 0; background: rgba(20, 18, 40, .48); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.mask.bottom { align-items: flex-end; padding: 0; }
.modal {
    width: 100%; max-width: 380px; background: #fff; border-radius: 16px; overflow: hidden;
    max-height: 80vh; display: flex; flex-direction: column; animation: pop .18s ease;
}
@keyframes pop { from { transform: scale(.94); opacity: .4; } to { transform: scale(1); opacity: 1; } }
.modal-hd { padding: 16px; font-weight: 700; font-size: 16px; text-align: center; border-bottom: 1px solid var(--line); position: relative; }
.modal-hd .x { position: absolute; right: 12px; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: #f2f3f9; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-2); font-size: 16px; }
.modal-bd { padding: 16px; overflow-y: auto; flex: 1; }
.modal-ft { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; gap: 10px; }
.modal-ft .btn { flex: 1; }
.sheet-box { width: 100%; max-width: 480px; background: #fff; border-radius: 18px 18px 0 0; max-height: 84vh; display: flex; flex-direction: column; animation: up .2s ease; }
@keyframes up { from { transform: translateY(30%); } to { transform: translateY(0); } }

/* 图片预览 */
.viewer { position: fixed; inset: 0; background: #000; z-index: 500; display: flex; align-items: center; justify-content: center; }
.viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Toast */
.toast {
    position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 900;
    background: rgba(24, 22, 40, .88); color: #fff; padding: 11px 20px; border-radius: 10px;
    font-size: 14px; max-width: 76%; text-align: center; animation: fade .16s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.loading-mask { position: fixed; inset: 0; z-index: 880; display: flex; align-items: center; justify-content: center; }
.spinner { width: 30px; height: 30px; border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.loading-mask.dark { background: rgba(20, 18, 40, .35); }
@keyframes spin { to { transform: rotate(360deg); } }

/* -------------------- 富文本内容 -------------------- */
.rich { font-size: 14px; line-height: 1.85; color: #3c4159; word-break: break-word; }
.rich img { max-width: 100%; height: auto; border-radius: 10px; margin: 10px auto; display: block; object-fit: contain; }
.rich p { margin: 8px 0; }
.rich h1, .rich h2, .rich h3, .rich h4 { margin: 14px 0 8px; font-size: 15px; color: var(--text); }
.rich table { width: 100%; border-collapse: collapse; }
.rich td, .rich th { border: 1px solid var(--line); padding: 6px 8px; }

/* -------------------- 图片上传 -------------------- */
.uploader { display: flex; flex-wrap: wrap; gap: 10px; }
.uploader .up-item { width: 84px; height: 84px; border-radius: 10px; overflow: hidden; position: relative; background: #f2f3f9; }
.uploader .up-item img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.uploader .up-item .del {
    position: absolute; right: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%;
    background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center;
}
.uploader .up-add {
    width: 84px; height: 84px; border-radius: 10px; border: 1px dashed #ccd2e6; background: #fafbff;
    display: flex; align-items: center; justify-content: center; color: #b3b9d2; font-size: 24px; cursor: pointer;
}

/* -------------------- 打手 / 大神卡片 -------------------- */
.god-card { display: flex; gap: 12px; background: #fff; border-radius: var(--radius); margin: 0 12px 12px; padding: 14px; box-shadow: var(--shadow); }
.god-card .av { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: #eef0fa; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.god-card .av img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.god-card .info { flex: 1; min-width: 0; }
.god-card .nm { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.god-lv { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: linear-gradient(135deg, #ffe08a, #ffb648); color: #6b4a00; font-weight: 700; }
.god-lv.pro { background: linear-gradient(135deg, #ff9d9d, #ff5b5b); color: #fff; }
.god-card .desc { font-size: 12px; color: var(--text-3); margin: 4px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.god-card .price { color: var(--price); font-weight: 700; }

/* 排行榜 */
.rank-item { display: flex; align-items: center; gap: 12px; background: #fff; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.rank-item .rk { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; background: #f2f3f9; color: var(--text-2); }
.rank-item .rk.r1 { background: linear-gradient(135deg, #ffd75e, #ffb300); color: #6b4a00; }
.rank-item .rk.r2 { background: linear-gradient(135deg, #dfe6f5, #b9c6de); color: #47506b; }
.rank-item .rk.r3 { background: linear-gradient(135deg, #ffcfa8, #e59a5c); color: #5c3300; }
.rank-item .av { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: #eef0fa; display: flex; align-items: center; justify-content: center; }
.rank-item .av img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.rank-item .info { flex: 1; min-width: 0; }
.rank-item .amt { color: var(--price); font-weight: 700; }

/* -------------------- 搜索框 -------------------- */
.search { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .92); border-radius: 999px; padding: 7px 14px; }
.search input { flex: 1; border: 0; background: transparent; font-size: 13px; }

/* -------------------- 消息 -------------------- */
.msg-item { display: flex; gap: 12px; padding: 15px 16px; background: #fff; border-bottom: 1px solid var(--line); cursor: pointer; }
.msg-item .i { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px; flex: 0 0 auto; background: #eef0fa; }
.msg-item .info { flex: 1; min-width: 0; }
.msg-item .t { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.msg-item .c { font-size: 12px; color: var(--text-3); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.msg-item .tm { font-size: 11px; color: var(--text-3); }
.reddot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); display: inline-block; }

/* -------------------- 我的 -------------------- */
.profile-hd { background: var(--header-grad); padding: 20px 16px 46px; color: #fff; position: relative; }
.profile-hd .av { width: 62px; height: 62px; border-radius: 50%; overflow: hidden; background: rgba(255, 255, 255, .28); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.profile-hd .av img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.profile-hd .nm { font-size: 18px; font-weight: 700; }
.profile-hd .code { font-size: 12px; opacity: .85; margin-top: 2px; }
/* ⚠️ 悬浮卡片必须显式提升层级：
   .profile-hd 是 position:relative 的定位元素，会盖住后续的静态元素，
   而这两块卡片是用负 margin 上移做"悬浮"效果的，若不提升 z-index 会被头部裁掉上半截。 */
.vip-box {
    position: relative; z-index: 2;
    margin: -34px 12px 12px; border-radius: var(--radius); padding: 14px; color: #fff;
    background: linear-gradient(135deg, #b08968, #8d6e52);
    box-shadow: 0 10px 24px rgba(120, 90, 60, .28);
}
.vip-box .bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .3); margin-top: 10px; overflow: hidden; }
.vip-box .bar > i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #ffe08a, #ffb300); }
.wallet { position: relative; z-index: 2; display: flex; gap: 10px; margin: 0 12px 12px; }
.wallet.float { margin-top: -34px; }
.wallet .wi { flex: 1; background: #fff; border-radius: var(--radius); padding: 14px; text-align: center; box-shadow: var(--shadow); }
.wallet .wi .v { font-size: 19px; font-weight: 700; }
.wallet .wi .n { font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* -------------------- 抢单大厅 -------------------- */
.hall-item { background: #fff; border-radius: var(--radius); margin: 0 12px 12px; padding: 14px; box-shadow: var(--shadow); }
.hall-item .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hall-item .money { color: var(--price); font-weight: 700; font-size: 18px; }
.countdown { font-size: 12px; color: #fff; background: linear-gradient(135deg, #ff8f6b, #ff5b5b); border-radius: 999px; padding: 2px 10px; }
.countdown.over { background: #c8ccdd; }

/* -------------------- 开关 -------------------- */
.switch { width: 46px; height: 26px; border-radius: 13px; background: #dfe3f0; position: relative; transition: .2s; cursor: pointer; flex: 0 0 auto; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: .2s; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.switch.on { background: var(--primary); }
.switch.on::after { left: 23px; }

/* -------------------- 星级 -------------------- */
.stars { color: #ffb300; font-size: 16px; letter-spacing: 2px; }
.stars input { display: none; }
.star-pick { display: flex; gap: 8px; font-size: 28px; color: #dfe3f0; cursor: pointer; }
.star-pick .s.on { color: #ffb300; }

/* -------------------- 登录页 -------------------- */
.login-wrap { min-height: 100vh; background: linear-gradient(180deg, #f3f6ff 0%, #fdf1f6 100%); padding: 40px 26px; display: flex; flex-direction: column; }
.login-logo { width: 108px; height: 108px; border-radius: 50%; margin: 30px auto 40px; background: linear-gradient(150deg, #8b5cf6, #6a5cff); display: flex; align-items: center; justify-content: center; font-size: 46px; box-shadow: 0 12px 30px rgba(106, 92, 255, .3); }
.login-btn { display: block; width: 100%; padding: 15px 0; border-radius: 999px; text-align: center; font-size: 16px; font-weight: 600; border: 0; cursor: pointer; margin-bottom: 14px; }
.login-btn.purple { background: var(--primary-grad); color: #fff; }
.login-btn.green { background: #07c160; color: #fff; }
.agree-row { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 26px; font-size: 12px; color: var(--text-3); }
.agree-row .cb { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #c8ccdd; display: flex; align-items: center; justify-content: center; font-size: 11px; color: transparent; }
.agree-row .cb.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.agree-row a { color: var(--primary); }

/* -------------------- 工具类 -------------------- */
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; }
.tc { text-align: center; } .tr { text-align: right; }
.fz12 { font-size: 12px; } .fz13 { font-size: 13px; } .fz16 { font-size: 16px; }
.bold { font-weight: 700; }
.price { color: var(--price); font-weight: 700; }
.flex1 { flex: 1; }
.hide { display: none !important; }
.pd12 { padding: 12px; }
.scroll-x { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.scroll-x::-webkit-scrollbar { display: none; }

/* 生日三连下拉：年 / 月 / 日 分开选，避免原生日期控件往前翻几十年的麻烦 */
.dsel { display: flex; gap: 8px; flex: 1; min-width: 0; }
.dsel select {
    flex: 1 1 0; min-width: 0; border: 0; background-color: transparent; text-align: center;
    font-size: 14px; color: #23263a; padding: 4px 14px 4px 0; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #b9bfd6 50%),
                      linear-gradient(135deg, #b9bfd6 50%, transparent 50%);
    background-position: right 6px center, right 1px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.dsel select:focus { outline: none; }

/* =============================================================
 *  全部商品页（v2 美化版）
 * ============================================================= */
.ag-page { background: #f5f6fa; }

/* 顶部游戏选择：胶囊卡片 */
.ag-games { display: flex; gap: 10px; overflow-x: auto; padding: 12px 14px 12px; background: #fff; scrollbar-width: none; }
.ag-games::-webkit-scrollbar { display: none; }
.ag-game {
    flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding: 6px 15px 6px 6px;
    border-radius: 999px; background: #f4f5fb; color: #666b85; font-size: 13px;
    cursor: pointer; border: 1px solid transparent; transition: .18s;
}
.ag-game .ic {
    width: 28px; height: 28px; border-radius: 50%; background: #fff; display: flex; align-items: center;
    justify-content: center; font-size: 12px; font-weight: 700; color: var(--primary); overflow: hidden;
}
.ag-game .ic img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ag-game .ic svg.gi { width: 64%; height: 64%; display: block; }
.ag-game.on {
    background: linear-gradient(135deg, #6a5cff, #9a6bff); color: #fff;
    box-shadow: 0 6px 14px rgba(106, 92, 255, .28);
}
.ag-game.on .ic { background: rgba(255, 255, 255, .24); color: #fff; }
.ag-game:active { transform: scale(.97); }

/* 平台声明条 */
.ag-notice {
    margin: 12px 14px; border-radius: 14px; padding: 13px 15px; color: #fff; display: flex; gap: 11px;
    align-items: center; background: linear-gradient(120deg, #2b3050, #454e80);
    box-shadow: 0 8px 20px rgba(43, 48, 80, .2);
}
.ag-notice .i { font-size: 22px; line-height: 1; }
.ag-notice b { display: block; font-size: 13.5px; font-weight: 700; }
.ag-notice span { font-size: 12px; opacity: .82; }

/* 主体：左侧类目栏 + 右侧商品列表 */
.ag-body { display: flex; align-items: flex-start; padding-bottom: 20px; }
.ag-rail {
    width: 98px; flex: 0 0 auto; background: #fff; border-radius: 0 14px 14px 0;
    padding: 10px 0 16px; position: sticky; top: 0; z-index: 5;
}
.ag-rail .rh { font-size: 11px; color: #b3b9d2; padding: 2px 0 9px; text-align: center; letter-spacing: 1px; }
.ag-rail .ri {
    position: relative; padding: 13px 6px; text-align: center; font-size: 13px; color: #666b85;
    cursor: pointer; transition: .16s; word-break: break-all; line-height: 1.25;
}
.ag-rail .ri.on { color: var(--primary); font-weight: 700; background: #f4f5ff; }
.ag-rail .ri.on::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #6a5cff, #9a6bff);
}
.ag-rail .ri:active { background: #f7f8ff; }

.ag-main { flex: 1; min-width: 0; padding: 0 12px 0 10px; }

/* 排序条 */
.ag-sort { display: flex; align-items: center; gap: 8px; padding: 4px 0 10px; overflow-x: auto; scrollbar-width: none; }
.ag-sort::-webkit-scrollbar { display: none; }
.ag-sort .sc {
    flex: 0 0 auto; padding: 6px 13px; border-radius: 999px; font-size: 12.5px; color: #666b85;
    background: #fff; border: 1px solid #eef0f7; cursor: pointer; transition: .16s;
}
.ag-sort .sc.on {
    color: #fff; background: linear-gradient(135deg, #6a5cff, #9a6bff);
    border-color: transparent; font-weight: 600;
}
.ag-sort .cnt { margin-left: auto; font-size: 12px; color: #9aa0b8; flex: 0 0 auto; padding-right: 2px; }

/* 商品卡片（列表版） */
.gcard {
    display: flex; gap: 11px; background: #fff; border-radius: 14px; padding: 11px; margin-bottom: 11px;
    box-shadow: 0 3px 12px rgba(70, 60, 140, .06); transition: .18s; cursor: pointer;
}
.gcard:active { transform: scale(.985); box-shadow: 0 1px 6px rgba(70, 60, 140, .08); }
.gcard .thumb {
    position: relative; width: 106px; height: 86px; flex: 0 0 auto; border-radius: 11px;
    overflow: hidden; background: #eef0fa;
}
.gcard .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.gcard .thumb .tag {
    position: absolute; left: 0; bottom: 0; background: rgba(28, 30, 44, .86); color: #ffd75e;
    font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 0 7px 0 8px;
}
.gcard .info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gcard .ttl { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.gcard .sub {
    font-size: 12px; color: #9aa0b8; margin: 4px 0 auto; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.gcard .bot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 7px; }
.gcard .price { color: var(--price); font-weight: 700; font-size: 18px; line-height: 1; }
.gcard .price small { font-size: 11px; }
.gcard .origin { color: #9aa0b8; font-size: 11.5px; text-decoration: line-through; margin-left: 5px; }
.gcard .sold { font-size: 11px; color: #9aa0b8; }
.gcard .cta {
    flex: 0 0 auto; padding: 6px 14px; border-radius: 999px; font-size: 12px; color: #fff;
    background: linear-gradient(135deg, #6a5cff, #9a6bff); box-shadow: 0 4px 10px rgba(106, 92, 255, .26);
}

/* 骨架屏 */
.sk { background: #fff; border-radius: 14px; padding: 11px; margin-bottom: 11px; display: flex; gap: 11px; }
.sk .b {
    background: linear-gradient(90deg, #f1f3fa 25%, #e6eaf7 37%, #f1f3fa 63%);
    background-size: 400% 100%; animation: shine 1.2s ease infinite; border-radius: 8px;
}
.sk .b1 { width: 106px; height: 86px; border-radius: 11px; flex: 0 0 auto; }
.sk .lines { flex: 1; display: flex; flex-direction: column; gap: 9px; padding-top: 5px; }
.sk .l1 { height: 14px; width: 60%; } .sk .l2 { height: 12px; width: 92%; } .sk .l3 { height: 17px; width: 36%; }
@keyframes shine { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* =============================================================
 * 全局防横向溢出
 * -------------------------------------------------------------
 * body 是 flex 容器，#page 作为 flex item 默认 min-width:auto，
 * 不会缩到小于内容的 min-content 宽度 —— 只要某个卡片里有一行
 * 长文本/大字号价格，整页就会被撑宽，右侧内容被裁掉（手机上表现为
 * 价格、底部按钮被切一半）。
 * 这里显式允许收缩，并把外溢裁掉，避免出现横向滚动。
 * ============================================================= */
html, body { max-width: 100%; overflow-x: hidden; }
#page { min-width: 0; }

/* ---------- 品牌风游戏图标 ----------
 * 深色方块 + 彩色标志 + 左上角平台角标（手游 / PC）
 * 非品牌分类（手机 / 显示器 / 手柄）不套深色底，保留原来的浅底。
 */
.game-item .ico .gm {
    position: relative; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: #171b28; border-radius: inherit;   /* 统一深色底，和参考图一致 */
}
.game-item .ico .gm svg { width: 68%; height: 68%; display: block; }
.game-item.on .ico .gm.brand { background: #10131d; }

/* 全部服务页的小胶囊：28px 套深色底会糊，只显示彩色标志 */
.ag-game .ic .gi-chip { width: 64%; height: 64%; display: flex; align-items: center; justify-content: center; }
.ag-game .ic .gi-chip svg { width: 100%; height: 100%; display: block; }
.ag-game.on .ic .gi-chip svg { color: #fff !important; }