/* PC 用户前台样式：简洁商务交易平台风格 */
:root { --header-h: 64px; }

body { background: var(--bg); }

/* ---------- 顶部 ---------- */
.topbar { height: 32px; background: #1f2937; color: #d1d5db; font-size: 12px; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; height: 32px; gap: 12px; }
.topbar #tb-left, .topbar #tb-right { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar a { color: #d1d5db; }
.topbar a:hover { color: #fff; }

.header { background: var(--white); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.header .container { height: var(--header-h); display: flex; align-items: center; gap: 20px; }
.logo { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: var(--text); white-space: nowrap; flex: none; }
.logo .mark { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, #2563eb, #3b82f6); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; }
/* 品牌标为深色方形徽标：圆角收敛、投影用中性灰（蓝色投影压在黑底上会发脏）
   尺寸 36→42px：页头 64px 高完全放得下，放大后金属 L 与星形一眼可辨 */
.logo .logo-img { width: 42px; height: 42px; border-radius: 11px; object-fit: cover; flex: none; box-shadow: 0 1px 4px rgba(16, 24, 40, .2); }

/* 主导航：只保留高频入口。1200px 容器塞 11 项会把「搜索框」压成一条缝、中文导航折行，
   低频入口统一收进 .nav-more 下拉，顶排宽度不再随功能增加而膨胀。 */
.nav { display: flex; align-items: center; gap: 18px; flex: 0 1 auto; min-width: 0; }
.nav a { font-size: 14px; color: var(--text-2); padding: 4px 0; border-bottom: 2px solid transparent; white-space: nowrap; flex: none; }
.nav a:hover { color: var(--brand); }
.nav a.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.nav a .nav-dot { display: inline-block; margin-left: 4px; vertical-align: 2px; min-width: 15px; height: 15px; line-height: 15px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 10px; text-align: center; }

/* 「更多」下拉：面板放在 #nav 内部，路由高亮（render 里扫 #nav a）与未读角标照旧生效 */
.nav-more { position: relative; flex: none; }
.nav-more-btn { display: inline-flex; align-items: center; gap: 3px; padding: 4px 0; border-bottom: 2px solid transparent;
  font-size: 14px; color: var(--text-2); cursor: pointer; white-space: nowrap; user-select: none; }
.nav-more-btn:hover, .nav-more.open .nav-more-btn { color: var(--brand); }
.nav-more-btn.active { color: var(--brand); font-weight: 600; }
.nav-more-btn .caret { font-style: normal; font-size: 10px; transition: transform .16s; }
.nav-more.open .nav-more-btn .caret { transform: rotate(180deg); }
.nav-more-panel { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); display: none;
  grid-template-columns: 1fr 1fr; gap: 2px; min-width: 272px; padding: 8px; background: var(--white);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 34px rgba(16, 24, 40, .16); z-index: 130; }
.nav-more.open .nav-more-panel { display: grid; }
.nav-more-panel a { display: block; padding: 9px 12px; border-radius: 7px; border-bottom: none;
  font-size: 13px; font-weight: 400; color: var(--text-2); white-space: nowrap; }
.nav-more-panel a:hover { background: var(--bg-2); color: var(--brand); }
.nav-more-panel a.active { background: var(--brand-light); color: var(--brand); font-weight: 600; border-bottom-color: transparent; }

/* 搜索框：旧写法 flex:1 会吃掉全部剩余空间，把导航/操作区挤到折行；这里给上限并靠右 */
.search { flex: 1 1 200px; min-width: 150px; max-width: 300px; position: relative; margin-left: auto; }
.search .input { padding-left: 36px; border-radius: 20px; background: var(--bg); }
.search .ico { position: absolute; left: 12px; top: 9px; color: var(--text-4); font-size: 14px; }
.search-btn { position: absolute; right: 4px; top: 4px; height: 30px; border-radius: 16px; }

/* 右侧操作区：内容随登录态变化，但按钮尺寸固定，避免整排来回跳动 */
.header-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.header-actions .link { color: var(--text-2); font-size: 14px; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.header-actions .link:hover { color: var(--brand); }
.header-actions .btn { white-space: nowrap; }
.user-wrap .nav-more-panel { grid-template-columns: 1fr; min-width: 172px; left: auto; right: 0; transform: none; }
.user-chip { display: flex; align-items: center; gap: 6px; max-width: 132px; }
.user-chip span:last-child { overflow: hidden; text-overflow: ellipsis; }
.dot { position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 11px; line-height: 16px; text-align: center; }
.rel { position: relative; display: inline-flex; }

/* ---------- 主体 ---------- */
.main { min-height: calc(100vh - 220px); padding: 20px 0 40px; }
.page-title { font-size: 20px; margin-bottom: 4px; }
.page-sub { color: var(--text-3); font-size: 13px; margin-bottom: 20px; }

/* 首页 */
.hero { background: linear-gradient(120deg, #1e3a8a, #2563eb); border-radius: var(--radius-lg); color: #fff; padding: 34px 40px; margin-bottom: 20px; }
.hero h1 { font-size: 26px; margin-bottom: 8px; }
.hero p { opacity: .85; margin-bottom: 18px; }
.hero .stats { display: flex; gap: 40px; margin-top: 20px; }
.hero .stats div b { display: block; font-size: 22px; }
.hero .stats div span { font-size: 12px; opacity: .8; }

/* ---------- 首页：交易流程引导（降低新用户理解成本） ---------- */
.hero-promise { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.hero-promise span { font-size: 12px; padding: 4px 10px; border-radius: 14px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24); color: #fff; }

.how-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 20px; }
.how-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.how-hd h3 { font-size: 15px; }
.how-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.how-step { position: relative; padding: 14px 14px 14px 46px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
.how-step .n { position: absolute; left: 12px; top: 14px; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; }
.how-step b { display: block; font-size: 14px; margin-bottom: 4px; }
.how-step .small { line-height: 1.6; }
.how-tip { margin-top: 14px; padding: 10px 12px; background: var(--brand-light); border-radius: 6px; font-size: 13px; color: #1e40af; }

/* 信誉 / 评分标识（全局：商品卡、榜单、聊天对象信息统一使用） */
.rp { color: #f59e0b; font-weight: 600; }

.cat-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.cat-item { padding: 8px 16px; background: var(--white); border: 1px solid var(--border); border-radius: 20px; cursor: pointer; font-size: 13px; color: var(--text-2); }
.cat-item:hover { border-color: var(--brand); color: var(--brand); }
.cat-item.active { background: var(--brand); border-color: var(--brand); color: #fff; }

.filter-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px; flex-wrap: wrap; }
.filter-bar .sort { padding: 5px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; color: var(--text-3); }
.filter-bar .sort.active { background: var(--brand-light); color: var(--brand); font-weight: 600; }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.pcard { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: box-shadow .18s, transform .18s; cursor: pointer; }
.pcard:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.pcard .thumb { height: 160px; background: var(--bg-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pcard .thumb img { width: 100%; height: 100%; object-fit: cover; }
.pcard .body { padding: 12px; }
.pcard .title { font-size: 14px; font-weight: 500; height: 40px; overflow: hidden; margin-bottom: 8px; }
.pcard .meta { display: flex; align-items: center; justify-content: space-between; }
.pcard .seller { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }

/* 商品详情 */
.detail-wrap { display: grid; grid-template-columns: 420px 1fr; gap: 24px; }
.detail-gallery .main-img { height: 340px; background: var(--bg-2); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--border); }
.detail-gallery .thumbs { display: flex; gap: 8px; margin-top: 10px; }
.detail-gallery .thumbs div { width: 72px; height: 72px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; cursor: pointer; }
.detail-gallery .thumbs div.active { border-color: var(--brand); border-width: 2px; }
.detail-gallery .thumbs img { width: 100%; height: 100%; object-fit: cover; }
.detail-info h1 { font-size: 20px; line-height: 1.4; margin-bottom: 8px; }
.detail-info .sub { color: var(--text-3); margin-bottom: 16px; }
.price-box { background: linear-gradient(90deg, #fff7ed, #fffbeb); border: 1px solid #fed7aa; border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.spec-row { display: flex; gap: 24px; padding: 12px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.spec-row .k { color: var(--text-3); width: 72px; flex: none; }
.buy-box { display: flex; gap: 12px; align-items: center; margin-top: 20px; }
.num-input { display: flex; align-items: center; border: 1px solid var(--border-2); border-radius: 6px; overflow: hidden; }
.num-input button { width: 32px; height: 36px; border: none; background: var(--bg-2); cursor: pointer; }
.num-input input { width: 52px; height: 36px; border: none; text-align: center; outline: none; }

.section { margin-top: 24px; }
.section h3 { font-size: 15px; padding: 12px 0; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.content-box { line-height: 1.9; white-space: pre-wrap; color: var(--text-2); }

/* 个人中心 */
.uc-layout { display: grid; grid-template-columns: 200px 1fr; gap: 20px; }
.uc-menu { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; align-self: start; }
.uc-menu .group-title { font-size: 12px; color: var(--text-4); padding: 12px 12px 6px; }
.uc-menu a { display: block; padding: 9px 12px; border-radius: 6px; color: var(--text-2); font-size: 14px; }
.uc-menu a:hover { background: var(--bg-2); color: var(--brand); }
.uc-menu a.active { background: var(--brand-light); color: var(--brand); font-weight: 600; }

/* 可点击的资金统计项：余额 / 累计消费 / 累计收入（点开跳资金中心对应明细） */
.stat-link { display: block; color: inherit; padding: 4px 6px; margin: -4px -6px; border-radius: 6px; transition: background .15s; }
.stat-link:hover { background: var(--brand-light); }
.stat-link:hover .muted, .stat-link:hover .strong, .stat-link:hover .price { color: var(--brand); }

/* 提现手续费实时预览 */
.wd-preview { padding: 10px 14px; background: var(--brand-light); border-radius: 8px; }

/* 订单列表 */
.order-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; }
.order-card .hd { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--bg-2); border-bottom: 1px solid var(--border); font-size: 13px; }
.order-card .bd { display: flex; gap: 14px; padding: 14px 16px; }
.order-card .bd img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; background: var(--bg-2); }
.order-card .info { flex: 1; }
.order-card .ft { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border); }
.order-card .amount { text-align: right; }
/* 订单「下一步」引导：用一句话说清当前该做什么，避免抽象状态码 */
.next-tip { display: inline-block; margin-top: 8px; padding: 5px 10px; border-radius: 6px; background: var(--brand-light); color: #1e40af; font-size: 12px; font-weight: 500; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tabs .tab { padding: 10px 16px; cursor: pointer; color: var(--text-3); border-bottom: 2px solid transparent; font-size: 14px; }
.tabs .tab:hover { color: var(--brand); }
.tabs .tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }

/* 支付页 */
.pay-box { max-width: 480px; margin: 40px auto; }
.pay-methods { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.pay-method { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.pay-method.active { border-color: var(--brand); background: var(--brand-light); }
.pay-method .ico { width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; }
.pay-method .name { flex: 1; }
.pay-method .radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-2); }
.pay-method.active .radio { border-color: var(--brand); background: var(--brand); box-shadow: inset 0 0 0 3px #fff; }

/* 申诉 */
.chat-list { max-height: 460px; overflow-y: auto; padding: 16px; }
.chat-item { display: flex; gap: 10px; margin-bottom: 16px; }
.chat-item.mine { flex-direction: row-reverse; }
.chat-item .bubble { max-width: 72%; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.chat-item.mine .bubble { background: var(--brand-light); border-color: var(--brand-100); }
.chat-item .bubble .role { font-size: 12px; color: var(--text-4); margin-bottom: 4px; }
.chat-item .bubble .txt { white-space: pre-wrap; word-break: break-all; }
.chat-item .ev { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.chat-item .ev img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; cursor: pointer; }

/* 页脚 */
.footer { background: #111827; color: #9ca3af; padding: 36px 0 24px; font-size: 13px; }
.footer .container { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; }
.footer h4 { color: #fff; font-size: 14px; margin-bottom: 12px; }
.footer a { color: #9ca3af; display: block; padding: 3px 0; }
.footer a:hover { color: #fff; }
.footer .bottom { border-top: 1px solid #1f2937; margin-top: 24px; padding-top: 16px; text-align: center; font-size: 12px; }
/* 底部备案号：内联链接（覆盖 .footer a 的块级样式），虚线下划线提示可跳转工信部 */
.footer .bottom a { display: inline; padding: 0; color: #9ca3af; text-decoration: none; border-bottom: 1px dashed rgba(156, 163, 175, .55); }
.footer .bottom a:hover { color: #fff; border-bottom-color: #fff; }

/* 登录 */
.auth-wrap { max-width: 880px; margin: 40px auto; display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: center; }
.auth-side h1 { font-size: 28px; margin-bottom: 12px; }
.auth-side .points { margin-top: 20px; }
.auth-side .points li { padding: 6px 0; color: var(--text-2); }
.auth-box { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow); }
.auth-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.auth-tabs span { padding: 8px 0; cursor: pointer; color: var(--text-3); border-bottom: 2px solid transparent; }
.auth-tabs span.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.code-row { display: flex; gap: 8px; }
.code-row .btn { flex: none; white-space: nowrap; }
.code-row .input { flex: 1; min-width: 0; }
.captcha-img { flex: none; width: 120px; height: 44px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; cursor: pointer; background: #f4f4fb; display: flex; align-items: center; justify-content: center; }
.captcha-img svg { display: block; width: 100%; height: 100%; }

/* ================= 运营增强：评价 / 聊天 / 优惠券 / 客服 / 榜单 ================= */
/* 星级 */
.stars { display: inline-flex; gap: 1px; }
.star { color: #d1d5db; font-size: 14px; line-height: 1; }
.star.on { color: #f59e0b; }
.star.big { font-size: 26px; cursor: pointer; }
.star-pick { display: inline-flex; gap: 4px; }
.star-pick .star.big { color: #d1d5db; }
.star-pick .star.big.on { color: #f59e0b; }

/* 评价 */
.review-item { padding: 14px 0; border-bottom: 1px dashed var(--border); }
.review-item:last-child { border-bottom: none; }
.review-item .tag-row { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.review-imgs { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.review-imgs img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; }
.review-reply { margin-top: 8px; padding: 8px 10px; background: var(--bg); border-left: 3px solid var(--brand); border-radius: 4px; font-size: 13px; color: var(--text-2); }
.tag-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.tag.pick { cursor: pointer; user-select: none; }
.tag.pick.on { background: var(--brand-light); border-color: var(--brand); color: var(--brand); }
.tag.pick.bad.on { background: #fee2e2; border-color: var(--danger); color: var(--danger); }
.rv-form .field { margin-bottom: 12px; }

/* 星级分布 */
.star-dist { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; max-width: 320px; }
.sd-row { display: flex; align-items: center; gap: 8px; }
.sd-bar { flex: 1; height: 8px; background: var(--bg-2); border-radius: 4px; overflow: hidden; }
.sd-bar i { display: block; height: 100%; background: #f59e0b; }

/* 站内聊天 */
.chat-wrap { display: grid; grid-template-columns: 280px 1fr; gap: 16px; }
.chat-side { max-height: 620px; overflow: auto; }
.chat-side .card-bd { padding: 0; }
.conv-item { padding: 12px 14px; border-bottom: 1px solid var(--border); cursor: pointer; }
.conv-item:hover { background: var(--bg); }
.conv-item.active { background: var(--brand-light); }
.dot-sm { display: inline-block; min-width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 8px; background: var(--danger); color: #fff; font-size: 11px; padding: 0 4px; }
.chat-main { display: flex; flex-direction: column; min-height: 560px; }
.chat-body { flex: 1; overflow: auto; max-height: 420px; padding: 14px; background: var(--bg); }
.chat-msg { display: flex; gap: 8px; margin-bottom: 14px; align-items: flex-start; }
.chat-msg.mine { flex-direction: row-reverse; }
.chat-msg.mine .col { align-items: flex-end; }
.chat-msg .col { display: flex; flex-direction: column; gap: 4px; }
.chat-msg .bubble { max-width: 62%; background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; word-break: break-all; white-space: pre-wrap; }
.chat-msg.mine .bubble { background: var(--brand-light); border-color: var(--brand-100); }
.chat-img { max-width: 220px; border-radius: 8px; border: 1px solid var(--border); }
.chat-sys { text-align: center; font-size: 12px; color: var(--text-4); background: var(--bg-2); border-radius: 10px; padding: 6px 10px; margin: 10px auto; max-width: 80%; }
.chat-input { display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--border); }

/* 优惠券 */
.cp-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(90deg, #fff7ed 0%, #fff 42%); }
.cp-disabled { filter: grayscale(1); opacity: .7; }
.cp-left { width: 110px; text-align: center; border-right: 1px dashed var(--border); padding-right: 12px; }
.cp-value { color: var(--danger); font-weight: 700; }
.cp-value b { font-size: 26px; }
.cp-value .sym { font-size: 14px; }
.cp-value span { font-size: 14px; }
.cp-mid { flex: 1; min-width: 0; }
.cp-right { flex: none; }

/* 公告 / 帮助 */
.notice-line { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.notice-line:last-child { border-bottom: none; }
.help-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--border); }
.help-row:last-child { border-bottom: none; }
.help-row a { color: var(--text-1); }
.help-row a:hover { color: var(--brand); }

/* 工单对话 */
.tk-msg { margin-bottom: 14px; }
.tk-msg .bubble { display: inline-block; max-width: 76%; padding: 10px 14px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); white-space: pre-wrap; }
.tk-msg.mine { text-align: right; }
.tk-msg.mine .bubble { background: var(--brand-light); border-color: var(--brand-100); }
.tk-msg.admin .bubble { background: #f0fdf4; border-color: #bbf7d0; }

/* 首页榜单 */
.rank-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rank-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); cursor: pointer; }
.rank-row:last-child { border-bottom: none; }
.rank-row:hover { color: var(--brand); }
.rank-no { width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 4px; background: var(--bg-2); color: var(--text-3); font-size: 12px; flex: none; }
.rank-no.top { background: var(--danger); color: #fff; font-weight: 700; }

/* 1280~1440 屏：导航间距与搜索框先让一步，避免顶排在常见笔记本宽度上就折行 */
@media (max-width: 1180px) {
  .header .container { gap: 16px; }
  .nav { gap: 14px; }
  .nav a, .nav-more-btn { font-size: 13px; }
  .search { max-width: 220px; }
  .nav-more-panel { min-width: 248px; }
}
/* 1024 屏（小笔记本 / 平板横屏）：再收紧一档，给品牌名和操作按钮留出空间 */
@media (max-width: 1024px) {
  .header .container { gap: 12px; }
  .nav { gap: 12px; }
  .logo { font-size: 16px; }
  .search { flex: 0 1 160px; min-width: 120px; }
  .header-actions { gap: 10px; }
}

@media (max-width: 1000px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .how-steps { grid-template-columns: repeat(2, 1fr); }
  .detail-wrap { grid-template-columns: 1fr; }
  .auth-wrap { grid-template-columns: 1fr; }
  .chat-wrap { grid-template-columns: 1fr; }
  .rank-wrap { grid-template-columns: 1fr; }
}

/* ================= 站内交易守护 UI ================= */
.guard-bar { padding: 10px 14px; background: #fff7ed; border-bottom: 1px solid #fed7aa; }
.guard-bar .tag { background: #fff; border: 1px solid #fed7aa; color: #9a3412; font-size: 12px; }
.guard-warn { margin: 0 14px; padding: 10px 12px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; color: #991b1b; }
.guard-warn b, .guard-warn .strong { color: #7f1d1d; }

/* ================= 游戏类目 ================= */
.game-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
.game-chip {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px 10px; border-radius: 12px; border: 1px solid transparent;
  cursor: pointer; transition: all .15s ease; text-align: center; background: #fff;
}
.game-chip:hover { transform: translateY(-2px); border-color: var(--primary, #2563eb); box-shadow: 0 6px 16px rgba(37,99,235,.12); }
.game-chip.active { border-color: var(--primary, #2563eb); background: #eff6ff; }
.game-chip .game-ico { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.game-chip .game-ico-txt { display: flex; align-items: center; justify-content: center; font-size: 24px; background: #eef2ff; }
.game-chip .game-name { font-size: 12px; color: #1f2937; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-chip .game-cnt { font-size: 11px; color: #9ca3af; }
.game-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.game-filter .game-chip { flex-direction: row; padding: 6px 12px 6px 6px; gap: 8px; border: 1px solid #e5e7eb; }
.game-filter .game-chip .game-ico { width: 32px; height: 32px; border-radius: 8px; }
.game-filter .game-chip .game-cnt { display: none; }
.spec-game-ico { width: 22px; height: 22px; border-radius: 6px; vertical-align: -6px; margin-right: 4px; }
.game-pick { display: flex; flex-wrap: wrap; gap: 10px; }
.game-pick .game-chip { width: 96px; padding: 10px 4px 8px; }
.game-pick .game-chip .game-ico { width: 44px; height: 44px; }
@media (max-width: 900px) { .game-grid { grid-template-columns: repeat(4, 1fr); } }

/* ================= 发布服务增强（套餐/加价/必填/保障） ================= */
.my-chip { display:inline-flex; align-items:center; gap:4px; padding:5px 11px; margin:0 6px 6px 0; border:1px solid #dbe1ea;
  border-radius:14px; font-size:12px; color:#475569; cursor:pointer; background:#fff; transition:.12s; user-select:none; }
.my-chip:hover { border-color:#93b4f7; color:#2563eb; }
.my-chip.active { background:#2563eb; border-color:#2563eb; color:#fff; }
.my-chip i { font-style:normal; font-size:11px; opacity:.75; }
.pub-sec { border:1px solid #e8edf5; border-radius:12px; padding:14px 16px 16px; margin:14px 0; background:#fbfcfe; }
.pub-sec-hd { display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.pub-sec-hd b { font-size:14px; }
.pub-sec-no { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
  border-radius:50%; background:#2563eb; color:#fff; font-size:12px; }
.pub-tip { font-size:12px; color:#2563eb; background:#eff6ff; border:1px solid #d7e5fd; border-radius:8px; padding:7px 10px; margin-bottom:10px; }
.spec-mode-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
/* 两种计价方式时铺满两列，别让第三个空位把画面拉歪 */
.spec-mode-tabs.sm2 { grid-template-columns:repeat(2,1fr); }
.sm-tab { border:1px solid #dbe1ea; border-radius:10px; padding:10px 12px; cursor:pointer; background:#fff; transition:.14s; }
.sm-tab:hover { border-color:#93b4f7; }
.sm-tab.active { border-color:#2563eb; background:#eff6ff; box-shadow:0 0 0 2px rgba(37,99,235,.1); }
.sm-tab b { display:block; font-size:13px; margin-bottom:2px; }
.sm-tab.active b { color:#2563eb; }
.sm-tab span { font-size:11px; color:#94a3b8; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:780px){ .grid-3{grid-template-columns:1fr;} .spec-mode-tabs{grid-template-columns:1fr;} }
.sku-table { border:1px solid #e5e9f0; border-radius:10px; overflow:hidden; background:#fff; }
.sku-head, .sku-row { display:grid; grid-template-columns:2.2fr 1fr 1fr .9fr .9fr auto; gap:6px; align-items:center; }
.sku-head { background:#f4f7fb; padding:8px 10px; font-size:12px; color:#64748b; }
.sku-row { padding:8px 10px; border-top:1px solid #eef2f7; }
.sku-row input { padding:5px 8px; font-size:12px; }
.addon-row { grid-template-columns:1.4fr 2.2fr 1fr auto; }
.field-row { grid-template-columns:1.6fr 1.2fr .9fr auto; }
.fd-req { font-size:12px; color:#475569; display:flex; align-items:center; gap:4px; white-space:nowrap; }
.sku-empty { padding:16px; text-align:center; font-size:12px; color:#94a3b8; }
.btn-del { color:#dc2626; border-color:#fecaca; background:#fff; }
.btn-del:hover { background:#fef2f2; }
.addon-quick { margin-bottom:8px; }

/* ================= 详情页：套餐 / 增值项选择 ================= */
.picker-sec { margin:14px 0; }
.picker-hd { font-size:13px; font-weight:600; margin-bottom:8px; }
.sku-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:10px; }
.sku-card { border:1px solid #dbe1ea; border-radius:10px; padding:10px 12px; cursor:pointer; background:#fff; transition:.14s; }
.sku-card:hover { border-color:#93b4f7; transform:translateY(-1px); }
.sku-card.active { border-color:#2563eb; background:#eff6ff; box-shadow:0 0 0 2px rgba(37,99,235,.12); }
.sku-card .sk-nm { font-size:13px; color:#1f2937; margin-bottom:4px; }
.sku-card .sk-pr { font-size:17px; color:#dc2626; font-weight:600; }
.sku-card .sk-pr small { font-size:12px; font-weight:400; }
.sku-card .sk-pr del { font-size:11px; color:#94a3b8; margin-left:4px; font-weight:400; }
.sku-card .sk-meta { font-size:11px; color:#94a3b8; margin-top:3px; }
.sku-card.addon .sk-pr { font-size:15px; }
.tag-guar { background:#ecfdf5; color:#059669; border:1px solid #a7f3d0; }

/* ================= 下单台（#/order）：三步导购 =================
   与「全部服务」(#/list) 是两种心智：这里是「我知道要什么，尽快办掉」，
   所以刻意不做排序 / 价格筛选 / 长列表分页——那些属于货架页，
   需要更多选择时用「看全部 N 个同类服务」跳过去，两边互链但不互相复制。 */
.oe-steps { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.oe-step { display:flex; align-items:center; gap:7px; padding:8px 14px; border:1px solid var(--border);
  border-radius:10px; background:#fff; font-size:13px; }
.oe-step .no { width:20px; height:20px; flex:none; border-radius:50%; background:var(--bg-2); color:var(--text-4);
  font-size:12px; display:flex; align-items:center; justify-content:center; }
.oe-step .tx { color:var(--text-3); }
.oe-step b { color:var(--text); font-weight:600; }
.oe-step.active { border-color:var(--brand); background:var(--brand-light); }
.oe-step.active .no { background:var(--brand); color:#fff; }
.oe-step.active .tx { color:var(--brand); font-weight:600; }
.oe-step.done { border-color:#a7f3d0; background:#ecfdf5; }
.oe-step.done .no { background:#10b981; color:#fff; }
.oe-step.clickable { cursor:pointer; }
.oe-arrow { color:var(--text-4); font-size:15px; }

.oe-cats { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.oe-cat { padding:12px 10px; border:1px solid var(--border); border-radius:10px; background:#fff;
  cursor:pointer; text-align:center; transition:.14s; }
.oe-cat:hover { border-color:var(--brand-100); background:var(--bg-2); }
.oe-cat.active { border-color:var(--brand); background:var(--brand-light); box-shadow:0 0 0 2px rgba(37,99,235,.1); }
.oe-cat-ico { font-size:22px; line-height:1.2; }
.oe-cat-nm { font-size:14px; font-weight:600; color:var(--text); margin-top:4px; }
.oe-cat-meta { font-size:12px; color:var(--text-4); margin-top:3px; }

.oe-deck { display:grid; grid-template-columns:1fr 300px; gap:16px; align-items:start; }
.oe-picks { display:flex; flex-direction:column; gap:10px; }
.oe-pick { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--border);
  border-radius:10px; background:#fff; }
.oe-pick:hover { border-color:var(--brand-100); }
.oe-pick .thumb { width:84px; height:64px; flex:none; border-radius:8px; overflow:hidden; background:var(--bg-2);
  display:flex; align-items:center; justify-content:center; }
.oe-pick .thumb img { width:100%; height:100%; object-fit:cover; }
.oe-pick .info { flex:1; min-width:0; }
.oe-pick .info .t { font-size:14px; font-weight:600; color:var(--text); }
.oe-pick .info .m { margin-top:3px; }
.oe-pick .info .s { font-size:12px; color:var(--text-4); margin-top:3px; }
.oe-pick .act { flex:none; display:flex; flex-direction:column; gap:6px; }
.oe-more { display:block; margin-top:10px; font-size:13px; color:var(--brand); }

/* 货架页顶部的下单台入口：告诉用户「逛」和「办」是两条路 */
.oe-entry { display:flex; align-items:center; gap:12px; margin-bottom:16px; padding:12px 16px;
  border:1px solid var(--brand-100); border-radius:var(--radius); text-decoration:none; color:inherit;
  background:linear-gradient(90deg, var(--brand-light), #fff); }
.oe-entry:hover { border-color:var(--brand); }
.oe-entry-t { font-size:14px; font-weight:600; color:var(--text); flex:none; }
.oe-entry-d { font-size:13px; color:var(--text-3); }
@media (max-width:600px){ .oe-entry { flex-direction:column; align-items:flex-start; gap:4px; } }

.oe-side { display:flex; flex-direction:column; gap:12px; }
.oe-ask { display:block; padding:14px; border:1px dashed var(--brand-100); border-radius:10px;
  background:linear-gradient(180deg,var(--brand-light),#fff); text-decoration:none; color:inherit; }
.oe-ask:hover { border-color:var(--brand); }
.oe-ask-t { font-size:14px; font-weight:600; color:var(--text); }
.oe-ask-d { font-size:12px; color:var(--text-3); margin-top:5px; line-height:1.6; }
.oe-ask-b { margin-top:8px; font-size:13px; font-weight:600; color:var(--brand); }
.oe-fields { padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:var(--bg-2); }
.oe-fields-hd { font-size:13px; font-weight:600; color:var(--text); margin-bottom:8px; }
.oe-fchips { display:flex; flex-wrap:wrap; gap:6px; }
.oe-fchip { padding:4px 9px; border-radius:6px; background:#fff; border:1px solid var(--border);
  font-size:12px; color:var(--text-2); }
.oe-fchip.req { border-color:#fcd34d; background:#fffbeb; color:#92400e; }
.oe-fchip i { color:#dc2626; font-style:normal; }
@media (max-width:900px){ .oe-deck { grid-template-columns:1fr; } }
@media (max-width:600px){
  .oe-pick { flex-wrap:wrap; }
  .oe-pick .act { flex-direction:row; width:100%; }
  .oe-cats { grid-template-columns:repeat(2,1fr); }
}

/* ================= 下单页：按游戏生成的需求表单 ================= */
.mb6 { margin-bottom:6px; }
.gf-chips { display:flex; flex-wrap:wrap; gap:0; }
.gf-chips .my-chip { margin:0 8px 8px 0; padding:7px 14px; border-radius:8px; font-size:13px; }
.gf-rank { display:grid; grid-template-columns:1fr 40px 1fr; align-items:end; gap:10px; }
.gf-rank-col { min-width:0; }
.gf-rank-col select.input { width:100%; height:42px; border-radius:8px; }
.gf-rank-arrow { display:flex; align-items:center; justify-content:center; height:42px; color:#94a3b8; font-size:18px; }
.gf-match { margin-top:10px; padding:9px 12px; border-radius:8px; background:#f1f5f9; border:1px solid #e2e8f0; }
.gf-match.ok { background:#ecfdf5; border-color:#a7f3d0; }
.gf-match.bad { background:#fef2f2; border-color:#fecaca; }
.gf-match b { color:#dc2626; font-size:15px; }
.gf-match.bad .small { color:#b91c1c; }
@media (max-width:780px){ .gf-rank { grid-template-columns:1fr; } .gf-rank-arrow { height:auto; transform:rotate(90deg); } }

/* ================= 协议中心（前台） ================= */
.ag-card {
  display: flex; align-items: center; gap: 12px; padding: 14px 4px;
  border-bottom: 1px solid var(--border); text-decoration: none; color: inherit;
}
.ag-card:last-child { border-bottom: none; }
.ag-card:hover { background: var(--bg-2); }
.ag-ico {
  width: 40px; height: 40px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; background: var(--brand-light); border: 1px solid var(--brand-100);
}
.ag-preview {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 22px; font-size: 14px; line-height: 1.9; max-height: none;
}
.ag-preview h1 { font-size: 21px; margin: 6px 0 12px; }
.ag-preview h2 { font-size: 19px; margin: 14px 0 10px; }
.ag-preview h3 { font-size: 16px; margin: 16px 0 8px; color: var(--brand); }
.ag-preview h4 { font-size: 14px; margin: 12px 0 6px; }
.ag-preview p { margin: 4px 0; color: var(--text-2); }
.ag-preview blockquote {
  margin: 10px 0; padding: 8px 14px; border-left: 3px solid var(--warning);
  background: var(--warning-bg); color: #92400e; border-radius: 0 6px 6px 0;
}
.ag-preview li { margin-left: 20px; list-style: disc; color: var(--text-2); }
.ag-preview hr { margin: 16px 0; border: none; border-top: 1px dashed var(--border); }

/* 协议勾选清单（注册 / 下单 / 发单共用） */
.ag-box { display: flex; flex-direction: column; gap: 6px; }
.ag-item { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; line-height: 1.6; }
.ag-item .ck { margin-top: 3px; }
.ag-txt { font-size: 13px; color: var(--text-2); }
.ag-txt a { color: var(--brand); }
.ag-ver { margin-left: 6px; font-size: 12px; color: var(--text-4); }

/* ---------- 接单中心 #/seller ---------- */
.wb-hero { background: var(--white); }
.wb-hero .wb-money { margin-left: auto; }
@media (max-width: 900px) {
  .wb-hero .row.center.gap16 { flex-wrap: wrap; }
  .wb-hero .wb-money { margin-left: 0; width: 100%; }
}
.wb-todo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.todo-card {
  display: block; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow);
}
.todo-card:hover { border-color: var(--brand); }
.todo-num { font-size: 26px; font-weight: 600; line-height: 1.3; color: var(--text); }
@media (max-width: 900px) { .wb-todo { grid-template-columns: repeat(2, 1fr); } }
.wb-alerts { display: flex; flex-direction: column; gap: 6px; border-left: 3px solid var(--warning); }
.wb-alerts .alert-danger { color: var(--danger); font-weight: 500; }
.wb-alerts .alert-warn { color: #b45309; }
.wb-alerts .alert-info { color: var(--text-3); }
.pend-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-bottom: 1px dashed var(--border);
}
.pend-row:last-child { border-bottom: none; }
.entry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.entry {
  display: block; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px;
}
.entry:hover { border-color: var(--brand); }
@media (max-width: 900px) { .entry-grid { grid-template-columns: repeat(2, 1fr); } }

/* ==================================================================
   窄屏适配（平板竖屏 / 手机横屏 / 手机浏览器直接打开 /pc/）
   原先最小断点只到 780px，且只改了 grid-3：手机打开 PC 版时
   顶部导航 + 搜索 + 操作区会横向溢出，hero 四个统计数字挤成一排。
   ================================================================== */
@media (max-width: 860px) {
  .container { padding: 0 10px; }
  .topbar .container { font-size: 11px; gap: 10px; }
  /* 头部改为可换行：logo + 操作区一行，导航与搜索各占一行 */
  .header .container { height: auto; flex-wrap: wrap; gap: 8px 12px; padding: 8px 0; }
  .header .container .logo { font-size: 16px; }
  .logo .logo-img { width: 36px; height: 36px; }
  /* 导航改「自动换行」而非横向滚动：滚动容器会裁掉「更多」下拉面板（overflow 的定高裁剪） */
  .nav {
    order: 3; flex-basis: 100%; flex-wrap: wrap; gap: 10px 16px; white-space: normal;
  }
  /* 下拉在窄屏右对齐，避免贴右边缘时被视口裁掉 */
  .nav-more-panel { left: auto; right: 0; transform: none; min-width: 240px; }
  .search { flex: 1 1 150px; max-width: none; }
  .header-actions { gap: 10px; }
  .main { padding: 14px 0 30px; }
  .grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .grid-2 { grid-template-columns: 1fr; }
  .hero { padding: 22px 18px; }
  .hero h1 { font-size: 21px; }
  .hero .stats { gap: 22px; flex-wrap: wrap; }
  .hero .stats div b { font-size: 19px; }
  .game-grid { grid-template-columns: repeat(4, 1fr); }
  .filter-bar { padding: 10px 12px; gap: 8px; }
  .detail-gallery .main-img { height: 280px; }
  .wb-todo { grid-template-columns: repeat(3, 1fr); }
  /* 表格在窄屏横向滚动，而不是把整页撑出横向滚动条 */
  .table-scroll { overflow-x: auto; }
  .table-scroll .table { min-width: 560px; }
  /* 兜底：没包 .table-scroll 的表格，让最近的卡片容器可横向滚动。
     :has() 是渐进增强——老浏览器忽略这条，只是回到原来的溢出行为，不会更糟 */
  .card-bd:has(.table) { overflow-x: auto; }
  .card-bd:has(.table) .table { min-width: 560px; }
}

@media (max-width: 600px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .game-grid { grid-template-columns: repeat(3, 1fr); }
  .how-steps { grid-template-columns: 1fr; }
  .how-card { padding: 14px; }
  .hero { padding: 18px 14px; }
  .hero .stats { gap: 14px 18px; }
  .hero .stats div b { font-size: 17px; }
  .detail-gallery .main-img { height: 220px; }
  .detail-gallery .thumbs div { width: 58px; height: 58px; }
  .detail-info h1 { font-size: 17px; }
  .page-title { font-size: 17px; }
  .buy-box { flex-wrap: wrap; }
  .buy-box .btn { flex: 1 1 46%; margin-left: 0 !important; }
  .spec-row { gap: 12px; }
  .spec-row .k { width: 60px; }
  .wb-todo { grid-template-columns: repeat(2, 1fr); }
  .wb-hero .wb-money { width: 100%; }
  .sku-cards { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

@media (max-width: 420px) {
  .grid { grid-template-columns: 1fr; }
  .game-grid { grid-template-columns: repeat(3, 1fr); }
  .game-chip .game-ico { width: 44px; height: 44px; }
  .cat-item { padding: 6px 12px; font-size: 12px; }
  .pcard .thumb { height: 140px; }
  .hero .row.gap12 { flex-direction: column; align-items: stretch; }
  .hero .row.gap12 .btn { justify-content: center; }
  .modal { max-width: 94vw; }
  .buy-box .btn { flex: 1 1 100%; }
}