:root {
  --ink: #1d2537;
  --ink-soft: #5a647c;
  --line: #dde2ec;
  --bg: #e8ecf4;
  --card: #f6f7fb;
  --brand: #4f61d8;
  --brand-soft: #e4e8f7;
  --gold: #e09a33;
  --ok: #14967a;
  --shadow: 0 10px 26px rgba(24, 35, 72, .10);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: radial-gradient(1100px 460px at 12% -10%, #dde3f3 0, transparent 62%), var(--bg);
  color: var(--ink);
  font: 14px/1.6 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

h1 { margin: 0; font-size: 20px; letter-spacing: .5px; }

/* ---------- 顶栏 ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 28px;
  background: linear-gradient(120deg, var(--card) 0%, #e2e7f5 100%);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 14px; }
.logo {
  width: 44px; height: 44px; border-radius: 14px;
  object-fit: cover; display: block;
  background: linear-gradient(140deg, var(--brand), #9a6bff);
  box-shadow: var(--shadow);
}
.stat { text-align: right; }
.stat b { font-size: 22px; color: var(--brand); }
.stat span { display: block; font-size: 12px; color: var(--ink-soft); }

main { padding: 20px 28px 8px; }

/* ---------- 主页：游戏卡片墙 ---------- */
.games {
  display: grid; gap: 16px; max-width: 1080px; margin: 0 auto;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}
.game-card {
  display: flex; flex-direction: row; align-items: stretch; overflow: hidden;
  cursor: pointer; text-align: left; gap: 14px;
  padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--card);
  box-shadow: var(--shadow); transition: transform .16s ease, border-color .16s ease;
}
.game-card:hover { transform: translateY(-3px); border-color: var(--brand); }
/* 左图：固定缩略图尺寸，整张图完整显示不裁切 */
.game-card .cover {
  position: relative; flex: 0 0 118px; width: 118px; height: 118px;
  align-self: center; border-radius: 12px; overflow: hidden; background: #e6eaf4;
}
.game-card .cover img { display: block; width: 100%; height: 100%; object-fit: contain; }
.game-card .cover.fallback {
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700; color: #b9c0e8;
  background: linear-gradient(135deg, #dde3f3, #e9e3f5);
}
/* 右文字 */
.game-card .gbody {
  display: flex; flex-direction: column; gap: 6px; justify-content: center;
  flex: 1 1 auto; min-width: 0; padding: 2px 4px 2px 0;
}
.game-card .gtitle { font-size: 15px; font-weight: 700; }
.game-card .gnote {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 34px; color: var(--ink-soft); font-size: 12.5px;
}
.game-card .gmeta { display: flex; gap: 8px; flex-wrap: wrap; }
.gchip { padding: 2px 9px; border-radius: 999px; font-size: 12px; background: var(--brand-soft); color: var(--brand); }

/* ---------- 列表头部（返回 + 当前游戏） ---------- */
.browse-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 2px 0 14px;
}
.browse-head b { font-size: 16px; }
.browse-head .hint { color: var(--ink-soft); font-size: 12.5px; }
.browse-head .ghost { height: 32px; padding: 0 12px; }

/* ---------- 筛选区 ---------- */
.filters {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.row { display: flex; flex-wrap: wrap; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.field.grow { flex: 1 1 220px; }
.field > span { font-size: 12px; color: var(--ink-soft); }
/* 只看收藏：放在商品列表第一行上方，和右边「每页条数」同排 */
.check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink-soft); cursor: pointer; white-space: nowrap;
}
.check:hover { color: var(--brand); }
.check input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }

input[type="search"], input[type="number"], select {
  height: 38px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #f3f5fa; color: var(--ink); font-size: 13.5px; outline: none;
}
input:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
input[type="number"] { width: 96px; }

.chars { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; }
.chars-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chars-head .ghost { margin-left: auto; }
.ghost {
  height: 38px; padding: 0 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
}
.ghost:hover { border-color: var(--brand); color: var(--brand); }
.primary {
  height: 38px; padding: 0 20px; border-radius: 10px; cursor: pointer; border: none;
  background: linear-gradient(135deg, var(--brand), #8a76ff); color: #fff;
  font-size: 13.5px; font-weight: 700; box-shadow: var(--shadow);
}
.primary:hover { filter: brightness(1.05); }
.primary:disabled { opacity: .45; cursor: default; box-shadow: none; }

/* ---------- 已选角色（草稿区，点「搜索商品」才落库查询） ---------- */
.picked-box {
  margin-top: 12px; padding: 10px 12px; border-radius: 14px;
  background: #eef1f8; border: 1px solid var(--line);
}
.picked-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.picked-title { font-size: 12.5px; color: var(--ink-soft); }
.picked-title b { font-size: 15px; color: var(--brand); }
.picked-hint { font-size: 12px; color: var(--ink-soft); }
.picked-head .primary, .picked-head .ghost { margin-left: auto; }
/* 没选角色时按钮不占位，选了才出现在这一行末尾 */
.picked-head .ghost.is-off { display: none; }
.picked-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.picked-list:empty { display: none; }
.picked-card {
  display: flex; align-items: center; gap: 7px; padding: 5px 8px 5px 5px;
  border: 1px solid var(--brand); border-radius: 999px; background: var(--card);
  font: inherit; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.picked-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #d0483a; }
.picked-card .pic {
  width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(140deg, #dfe4f3, #d3daf0);
  display: grid; place-items: center; font-weight: 700; color: var(--brand); font-size: 13px;
}
.picked-card .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.picked-card .nm { font-size: 12.5px; font-weight: 600; max-width: 96px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

.chars-body {
  margin-top: 12px; max-height: 208px; overflow: auto;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.chip {
  width: 76px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); cursor: pointer; padding: 6px 4px 5px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.chip:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.chip.active { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); background: #f7f8ff; }
.chip .pic {
  width: 56px; height: 56px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(140deg, #dfe4f3, #d3daf0);
  display: grid; place-items: center; font-weight: 700; color: var(--brand); font-size: 18px;
}
.chip .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chip .nm, .role .nm {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  width: 100%; max-width: 74px; min-width: 0; overflow: visible; white-space: normal;
}
.chip .nm { font-size: 11.5px; max-width: 68px; text-align: center; }
.nm-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-count {
  flex: none; padding: 0 2px; border-radius: 4px; background: #eef1fa;
  font-size: 10.5px; line-height: 1.35; white-space: nowrap;
}
.chip.active .nm { color: var(--brand); font-weight: 600; }

/* ---------- 结果栏 ---------- */
.bar {
  display: flex; align-items: center; justify-content: space-between;
  margin: 18px 2px 10px; color: var(--ink-soft); font-size: 13px;
}
.page-size select { height: 30px; }

/* ---------- 商品条目：一行一条 ---------- */
.grid {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
  max-width: 1080px; margin: 0 auto;
}
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow: hidden;
}
/* 已售出：搜索商品ID 回捞出来的历史商品，压一个红色大章 */
.card.sold { opacity: .8; }
.card.sold .code { color: var(--ink-soft); }
.sold-stamp {
  position: absolute; right: 26px; top: 50%;
  transform: translateY(-50%) rotate(-14deg);
  color: #e11d2e; border: 4px solid #e11d2e; border-radius: 10px;
  font: 900 30px/1 "Microsoft YaHei", "PingFang SC", sans-serif;
  letter-spacing: 7px; padding: 6px 10px 6px 17px;
  opacity: .85; pointer-events: none; user-select: none;
  box-shadow: 0 0 0 2px rgba(225, 29, 46, .14);
  z-index: 2;
}
.card-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.code {
  font: 700 14.5px/1 ui-monospace, Consolas, monospace;
  color: var(--brand); letter-spacing: .5px;
}

.ssr-badge {
  margin-left: auto;
  background: #fff7e8; color: #b07714; border: 1px solid #f2ddb0;
  border-radius: 999px; padding: 2px 12px; font-size: 12.5px; font-weight: 700;
}

/* 积分售价：靠右和 SSR 并排，先占 auto 外边距，SSR 跟在后面 */
.ssr-badge.points { background: #eef5ff; color: #3567b3; border-color: #cfe0fb; }
.ssr-badge.points.agent { background: #fff7ed; color: #b45309; border-color: #fed7aa; }
.ssr-badge.points + .ssr-badge { margin-left: 6px; }
.copy {
  border: none; background: var(--brand-soft); color: var(--brand);
  border-radius: 8px; padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.copy:hover { background: #e3e7ff; }
/* 收藏：未收藏是中性灰，已收藏是金色 */
.copy.fav { background: #e9edf6; color: #5a647c; }
.copy.fav:hover { background: #dfe4f0; }
.copy.fav.on { background: #fff3d6; color: #a1660c; }
.copy.fav.on:hover { background: #ffe9bd; }
.roles { display: flex; flex-wrap: wrap; gap: 8px; }
.role {
  width: 78px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 3px; border: 2px solid transparent; border-radius: 10px;
}
.role .ph {
  width: 60px; height: 60px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(140deg, #dfe4f3, #d3daf0);
  display: grid; place-items: center; font-weight: 700; color: #8b96c9; font-size: 18px;
}
.role .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.role .nm { font-size: 12px; color: var(--ink); }
.role.hit { border-color: var(--gold); border-radius: 12px; background: #fffaf0; }
.role.hit .nm { color: #b07714; font-weight: 700; }
.more { font-size: 11.5px; color: var(--ink-soft); align-self: center; }
.expand {
  flex-basis: 100%; margin-top: 2px; background: none; border: none; cursor: pointer;
  color: var(--brand); font-size: 13px; text-align: center; padding: 2px;
}
.expand:hover { text-decoration: underline; }
.card-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  border-top: 1px dashed var(--line); padding-top: 9px;
  color: var(--ink-soft); font-size: 12.5px;
}

.empty, .loading, .error {
  grid-column: 1 / -1; text-align: center; padding: 46px 10px;
  color: var(--ink-soft); font-size: 14px;
}
.error { color: #d0483a; }

/* ---------- 分页 ---------- */
.pager { display: flex; justify-content: center; gap: 8px; padding: 18px 0 6px; flex-wrap: wrap; }
.pager button {
  min-width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
}
.pager button.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.pager button:disabled { opacity: .45; cursor: default; }

@media (max-width: 640px) {
  main, .top { padding-left: 14px; padding-right: 14px; }
  .top { flex-wrap: wrap; }
  .top-right { gap: 8px; }
  .account { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .me-name { max-width: 96px; }
  .role { width: 64px; }
  .role .ph { width: 52px; height: 52px; }
  .game-card { gap: 10px; padding: 8px; }
  .game-card .cover { flex: 0 0 92px; width: 92px; height: 92px; }
}

/* ---------- 买家登录 / 我的订单 ---------- */
.top-right { display: flex; align-items: center; gap: 18px; }
.account { display: flex; align-items: center; gap: 8px; }
.me-name {
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 700; color: var(--brand);
}
.me-points {
  display: inline-flex; align-items: center; height: 28px; padding: 0 10px;
  border-radius: 999px; background: var(--brand-soft); color: var(--brand);
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.me-points[hidden] { display: none; }
.ghost.sm, .primary.sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
.card-top .primary.buy { height: 30px; padding: 0 14px; font-size: 12.5px; }
.card-top .buy-box { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.buy-box .ssr-badge.points { margin-left: 0; }
.buy-box + .ssr-badge { margin-left: 0; }

.dlg {
  width: calc(100% - 32px); max-width: 420px; margin: auto; padding: 0; border: none; border-radius: 16px;
  background: var(--card); color: var(--ink); box-shadow: 0 24px 60px rgba(20, 30, 70, .28);
}
.dlg.wide { max-width: 760px; }
.dlg::backdrop { background: rgba(20, 28, 60, .42); }
.dlg-body { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; }
.dlg-body h3 { margin: 0; font-size: 16px; }
.dlg-tip { margin: 0; color: var(--ink-soft); font-size: 12.5px; }
.dlg .field input {
  height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px;
  background: #eff2f8; color: var(--ink); font-size: 13.5px; outline: none;
}
.dlg .field input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.dlg-msg { min-height: 18px; color: #d0483a; font-size: 12.5px; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; }
.buy-points {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: #eff2f8;
}
.buy-points-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: var(--ink-soft); font-size: 13px;
}
.buy-points-row b { color: var(--ink); font-size: 18px; }
.buy-points-row:first-child b { color: var(--brand); }

.orders { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow: auto; }
.order { border: 1px solid var(--line); border-radius: 12px; background: #eff2f8; padding: 10px 12px; }
.order-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.order-top .ssr-badge { margin-left: 0; }
.order-meta, .order-chars { margin-top: 4px; color: var(--ink-soft); font-size: 12.5px; }
.orders .empty { padding: 26px 10px; }
.orders .hint, .orders .error { padding: 26px 10px; text-align: center; font-size: 12.5px; }
.orders .error { color: #d0483a; }

/* 订单卡片：日期、自抽号标签、底部订单号 */
.orders-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.orders-toolbar .dlg-tip { flex: 1 1 auto; }
.order-date { margin-left: auto; color: var(--ink-soft); font-size: 12px; white-space: nowrap; }
.order-tag { padding: 1px 8px; border-radius: 999px; font-size: 11.5px;
  background: #fff1d8; color: #a1660c; border: 1px solid #f3ddb0; }
.order-foot { margin-top: 8px; display: flex; align-items: center; gap: 10px; }
.order-no { flex: 1 1 auto; color: var(--ink-soft); font-size: 11.5px; word-break: break-all; }
.order-foot .ghost { flex: none; }

/* 批量账号列表：一次提取多件时逐行展示，整批可一次复制 */
.acc-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 260px; overflow: auto; padding: 6px;
  background: #eff2f8; border: 1px solid var(--line); border-radius: 10px;
}
.acc-line { display: flex; align-items: center; gap: 8px; }
.acc-val {
  flex: 1; min-width: 0; font-family: Consolas, Menlo, monospace;
  font-size: 12.5px; word-break: break-all; color: #1c2a4a;
}
.acc-line .ghost { flex: none; height: 24px; padding: 0 10px; font-size: 12px; }
.acc-points { flex: none; color: #3567b3; font-size: 12px; font-weight: 700; white-space: nowrap; }

/* 账号资料行（购买成功弹窗 / 我的订单共用）：左侧标签 + 中间值 + 复制按钮 */
.order-cred { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.cred-row { display: flex; align-items: center; gap: 8px; }
.cred-k { flex: 0 0 96px; color: var(--ink-soft); font-size: 12.5px; }
.cred-v { flex: 1; background: #e9edf7; border: 1px solid var(--line); border-radius: 8px;
  padding: 4px 8px; font-size: 12.5px; word-break: break-all; }
.cred-row .ghost { flex: none; height: 26px; padding: 0 10px; font-size: 12px; }
.bought { display: flex; flex-direction: column; gap: 8px; }

/* 卡片资源行（排最前） */
.res-row { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center;
  background: linear-gradient(90deg, #e7edf9, #eff4fd); border: 1px solid var(--line);
  border-radius: 10px; padding: 6px 12px; font-size: 12.5px; margin-bottom: 8px; }
.res-row .res-item .k { color: var(--ink-soft); }
.res-row .res-item b { color: #1c2a4a; }

/* 自抽号提取：列表页右上角，登录且该游戏有货时出现 */
.stock-bar { margin-left: auto; display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 6px 5px 14px; border-radius: 999px;
  background: linear-gradient(120deg, #fff3d6, #ffe7ad); border: 1px solid #f2cf7d;
  box-shadow: 0 4px 14px rgba(240, 165, 63, .22); }
.stock-bar[hidden] { display: none; }
.stock-txt { font-size: 12.5px; color: #8a5a12; white-space: nowrap; }
.stock-txt b { font-size: 15px; color: #b06a00; }
.stock-btn { height: 30px; padding: 0 14px; border: none; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, #f6b73c, #ef9d1f); color: #fff;
  font-size: 12.5px; font-weight: 700; }
.stock-btn:hover { filter: brightness(1.06); }
.stock-btn:disabled { opacity: .5; cursor: default; filter: none; }

/* 账号密码大框：只放 账号----密码，一键全部复制 */
.cred-box { width: 100%; background: #e9edf7; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font-family: Consolas, Menlo, monospace; font-size: 13px; line-height: 1.7;
  color: #1c2a4a; resize: vertical; white-space: pre; }

/* ---------- 商品详情弹窗（进度 / 等级 / 资源 / 角色 / 截图） ---------- */
#itemBody { display: flex; flex-direction: column; gap: 12px; max-height: 62vh; overflow: auto; }
#itemBody .hint, #itemBody .error { padding: 24px 8px; text-align: center; font-size: 12.5px; }
#itemBody .error { color: #d0483a; }
.detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detail-head b {
  font: 700 14.5px/1 ui-monospace, Consolas, monospace;
  color: var(--brand); letter-spacing: .5px;
}
.detail-head .ssr-badge { margin-left: 0; }
.detail-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 16px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #eff2f8;
}
.detail-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 12.5px; min-width: 0;
}
.detail-item span { color: var(--ink-soft); white-space: nowrap; }
.detail-item b { color: #1c2a4a; text-align: right; white-space: nowrap; }
.detail-sec { display: flex; flex-direction: column; gap: 8px; }
.detail-sec-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.detail-res {
  display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px;
  background: linear-gradient(90deg, #e7edf9, #eff4fd);
}
.detail-res-item { font-size: 12.5px; color: var(--ink-soft); }
.detail-res-item b { color: #1c2a4a; margin-left: 4px; }
.detail-shot {
  width: 100%; max-height: 420px; object-fit: contain;
  border: 1px solid var(--line); border-radius: 12px; background: #f4f6fb;
}
/* 详情按钮：排在收藏右边，蓝色系跟收藏区分 */
.copy.detail { background: #e8f0fd; color: #3567b3; }
.copy.detail:hover { background: #dbe8fb; }

.server-picker{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}


/* 服务器格子：和角色格子同款（同尺寸、同选中态），点一下切换服（互斥单选） */
.server-tile { justify-content: flex-start; padding: 6px 6px 5px; }
.server-tile .pic {
  width: 100%; aspect-ratio: 1 / 1; padding: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 13px; font-weight: 800; color: var(--brand); line-height: 1.15; word-break: break-all;
}
.server-tile .pic img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 10px; }
.server-tile.active .pic { color: var(--brand); }