/* cfapi.ak888.chat —— 全站样式（深色 · 无 emoji）
   设计要点：氛围光晕背景 / 玻璃拟态卡片 / 渐变按钮 / 细致交互态
   —— 全站零 emoji，图标一律用 CSS 图形或字符。 */
:root {
  --bg: #070a0f;
  --bg2: #0b1017;
  --card: #111823;
  --card2: #16202e;
  --card3: #1b2637;
  --line: #1e2836;
  --line2: #2b3648;
  --tx: #e8eef5;
  --tx2: #9aa8bb;
  --tx3: #6b7889;
  --tx4: #4d596b;
  --ac: #e5484d;
  /* ★ 作图成品的拼接列宽度 = 服务端缩略图的像素宽度（CF_POSTER_THUMB_W）。
     两者必须一致：1:1 显示才最清楚；不一致就是白白放大插值（发虚）或浪费带宽。
     tools/gallery-ui-test.py 会读 /health 的 render.thumb.w 来核对这个值。 */
  --stack-w: 640px;
  --ac2: #ff6b6b;
  --ok: #3fb950;
  --warn: #d29922;
  --blue: #4c8dff;
  --r: 14px;
  --shadow: 0 10px 30px -18px rgba(0, 0, 0, .95);
  --shadow2: 0 20px 48px -24px rgba(0, 0, 0, .95);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--tx);
  font: 14px/1.62 -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- 氛围背景：两枚光晕 + 细网格 ---------- */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(920px 540px at 10% -10%, rgba(229, 72, 77, .17), transparent 70%),
    radial-gradient(780px 470px at 94% 2%, rgba(76, 141, 255, .10), transparent 72%),
    radial-gradient(1100px 720px at 50% 112%, rgba(229, 72, 77, .07), transparent 70%);
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .016) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 76%);
  mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 76%);
}

a { color: var(--blue); text-decoration: none; transition: .15s; }
a:hover { text-decoration: none; color: #6ea4ff; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 18px; position: relative; z-index: 1; }

/* 统一细滚动条 */
* { scrollbar-width: thin; scrollbar-color: #26313f transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #253040; border: 3px solid transparent; background-clip: padding-box; border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: #35455e; background-clip: padding-box; }

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: linear-gradient(180deg, rgba(7, 10, 15, .94), rgba(7, 10, 15, .76));
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .95);
}
.topbar .inner {
  max-width: 1160px; margin: 0 auto; padding: 13px 18px;
  display: flex; align-items: center; gap: 12px;
}
.logo {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 16px; letter-spacing: .3px; color: var(--tx);
}
.logo:hover { color: var(--tx); }
.logo .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ac);
  box-shadow: 0 0 0 4px rgba(229, 72, 77, .14), 0 0 14px rgba(229, 72, 77, .85);
}
.logo small { color: var(--tx3); font-weight: 400; font-size: 11.5px; letter-spacing: .6px; margin-left: 1px; }
.spacer { flex: 1; }
.who { color: var(--tx2); font-size: 13px; }
.who b { color: var(--tx); font-weight: 600; }
.tag {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px;
  border: 1px solid var(--line2); color: var(--tx2); margin-left: 6px;
  background: rgba(255, 255, 255, .03);
}
.tag.admin { border-color: rgba(229, 72, 77, .5); color: var(--ac2); background: rgba(229, 72, 77, .10); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; border-radius: 10px; border: 1px solid var(--line2);
  background: linear-gradient(180deg, #1c2635, #16202c);
  color: var(--tx); font-size: 14px; cursor: pointer; position: relative;
  transition: background .16s, border-color .16s, transform .1s, box-shadow .16s;
  white-space: nowrap; font-family: inherit;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
}
.btn:hover { border-color: #3d4d66; background: linear-gradient(180deg, #23303f, #1a2531); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(229, 72, 77, .18); }
.btn.primary {
  background: linear-gradient(180deg, #f15a5f, #cd2e33);
  border-color: #e5484d; color: #fff; font-weight: 600;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 8px 20px -10px rgba(229, 72, 77, .95);
}
.btn.primary:hover { background: linear-gradient(180deg, #ff6a6f, #d93539); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.ghost:hover { background: rgba(255, 255, 255, .05); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.sm { padding: 5px 11px; font-size: 12.5px; border-radius: 8px; }
/* 需要用户注意的按钮（如「参数改了，点我重新生成」） */
.btn.hot {
  border-color: rgba(229, 72, 77, .6); color: #ffd7d8;
  background: linear-gradient(180deg, rgba(229, 72, 77, .26), rgba(229, 72, 77, .14));
  animation: hotPulse 1.6s ease-in-out infinite;
}
@keyframes hotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .42); }
  50% { box-shadow: 0 0 0 6px rgba(229, 72, 77, 0); }
}

/* ---------- 表单 ---------- */
.field { margin-bottom: 15px; }
.field label { display: block; color: var(--tx2); font-size: 12.5px; margin-bottom: 7px; letter-spacing: .2px; }
.input {
  width: 100%; padding: 11px 13px; border-radius: 10px;
  border: 1px solid var(--line2); background: linear-gradient(180deg, #090d14, #0c121b);
  color: var(--tx); font-size: 14px; font-family: inherit; outline: none;
  transition: border-color .16s, box-shadow .16s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .55) inset;
}
.input:hover { border-color: #36445a; }
.input:focus {
  border-color: var(--ac);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .55) inset, 0 0 0 3px rgba(229, 72, 77, .14),
    0 0 22px -8px rgba(229, 72, 77, .8);
}
.input::placeholder { color: var(--tx4); }
.hint { color: var(--tx3); font-size: 12px; margin-top: 6px; line-height: 1.7; }
.hint b { color: var(--tx2); font-weight: 600; }

/* ---------- 卡片 ---------- */
.card {
  position: relative;
  background: linear-gradient(180deg, rgba(23, 32, 46, .92), rgba(15, 21, 31, .94));
  border: 1px solid var(--line);
  border-radius: var(--r); padding: 20px;
  box-shadow: var(--shadow), 0 1px 0 rgba(255, 255, 255, .03) inset;
}
.card::before {
  content: ''; position: absolute; left: 16px; right: 16px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .10), transparent);
  pointer-events: none;
}
.auth-card { max-width: 408px; margin: 9vh auto; padding: 28px 26px 24px; }
.auth-card::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px 180px at 50% -30%, rgba(229, 72, 77, .16), transparent 70%);
}

/* ---------- 首屏 ---------- */
.hero { padding: 38px 0 4px; }
.hero h1 {
  font-size: 28px; margin: 0 0 10px; letter-spacing: .3px; line-height: 1.35;
  background: linear-gradient(180deg, #ffffff, #aebdd0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { color: var(--tx2); margin: 0; font-size: 14px; }

.search { display: flex; gap: 10px; margin: 28px 0 20px; }
.search .input { font-size: 15px; padding: 14px 16px; }
.search .btn { padding: 14px 28px; font-size: 15px; }

/* ---------- 结果：资料卡 ---------- */
.prof { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.prof .av {
  width: 60px; height: 60px; border-radius: 16px; flex: none;
  background: linear-gradient(135deg, #f0565b, #7c2124);
  display: flex; align-items: center; justify-content: center;
  font-size: 23px; font-weight: 700; color: #fff;
  box-shadow: 0 10px 24px -12px rgba(229, 72, 77, .95), 0 1px 0 rgba(255, 255, 255, .2) inset;
  overflow: hidden; position: relative;
}
/* ---------- 军衔（等级）徽章 ---------- */
.prof .av.has-badge {
  /* 军衔图标要按原图完整显示 → 不做圆角裁切、也不要 overflow 裁剪 */
  border-radius: 0;
  overflow: visible;
  background: linear-gradient(135deg, #1b2330, #0e131b);
  border: 1px solid var(--line2);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .06) inset;
}
.prof .av .avimg {
  width: 100%; height: 100%; object-fit: contain; display: block;
  border-radius: 0;                       /* 不切圆角 */
}
/* 徽章图加载失败时退回「角色名首字」，不会留一个空框 */
.prof .av.av-fallback { background: linear-gradient(135deg, #f0565b, #7c2124); }
.prof .av.av-fallback::after {
  content: attr(data-letter);
  font-size: 23px; font-weight: 700; color: #fff;
}
.rank-tag {
  display: inline-block; margin-left: 9px; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; vertical-align: 3px;
  color: #ffd9a8; background: linear-gradient(180deg, rgba(240, 176, 84, .22), rgba(240, 176, 84, .10));
  border: 1px solid rgba(240, 176, 84, .38);
}
.prof .meta h2 { margin: 0 0 5px; font-size: 19px; letter-spacing: .2px; }
.prof .meta .sub { color: var(--tx3); font-size: 12.5px; font-family: Consolas, Monaco, monospace; }
.kv { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 16px; }
.kv div { color: var(--tx3); font-size: 12.5px; }
.kv b { color: var(--tx); font-weight: 600; margin-left: 2px; }
/* ---------- 排位段位：图标与「军衔（等级）徽章」同尺寸 60px ----------
 * 源图是 240×240 的 PNG，缩到 60px 显示是「降采样」——不会有任何像素放大损失，
 * 即使在 2x 屏（60 CSS px = 120 设备像素）也仍小于源图，依然清晰。
 * 圆角沿用军衔徽章的规矩：不切圆角、object-fit: contain 完整显示。
 */
.kv .seg-cell {
  flex: 1 0 100%;                        /* 独占一行，避免和数值项挤在一起 */
  display: flex; align-items: center; gap: 14px;
  padding: 12px 15px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .008));
  border: 1px solid var(--line);
}
.kv .seg-badge {
  width: 60px; height: 60px; flex: none;  /* ★ 与 .prof .av 完全一致 */
  border-radius: 0; overflow: visible;    /* 和军衔徽章一致：不切圆角 */
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1b2330, #0e131b);
  border: 1px solid var(--line2);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .06) inset;
}
.kv .seg-badge .seg-img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  border-radius: 0;                       /* 不切圆角 */
}
.kv .seg-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kv .seg-k { font-style: normal; color: var(--tx3); font-size: 11.5px; }
.kv .seg-v {
  color: var(--tx); font-size: 17px; font-weight: 700;
  letter-spacing: .2px; margin-left: 0; line-height: 1.25;
}
.kv .seg-sub { font-style: normal; color: var(--tx3); font-size: 11.5px; margin-left: 0; }

/* ---------- 页签 ---------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 14px; }
.tab {
  padding: 7px 15px; border-radius: 999px; border: 1px solid var(--line2);
  background: rgba(255, 255, 255, .02); color: var(--tx2); cursor: pointer; font-size: 13px;
  font-family: inherit; transition: .16s;
}
.tab:hover { border-color: #3d4d66; color: var(--tx); background: rgba(255, 255, 255, .05); }
.tab.on {
  background: linear-gradient(180deg, #f15a5f, #cd2e33);
  border-color: #e5484d; color: #fff; font-weight: 600;
  box-shadow: 0 8px 18px -10px rgba(229, 72, 77, .95);
}

/* ---------- 资产网格 ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.item {
  position: relative;
  background: linear-gradient(180deg, var(--card), #0f151f);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 15px 11px 13px; display: flex; flex-direction: column; align-items: center;
  gap: 11px; transition: transform .16s, border-color .16s, box-shadow .16s, background .16s;
}
.item::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}
.item:hover {
  transform: translateY(-2px);
  border-color: #3a4a63;
  background: linear-gradient(180deg, var(--card2), #121a26);
  box-shadow: 0 16px 30px -20px rgba(0, 0, 0, .98), 0 0 0 1px rgba(229, 72, 77, .10);
}
.item .thumb { position: relative; flex: none; width: 66px; height: 66px; }
.item img {
  width: 66px; height: 66px; object-fit: contain;
  background: radial-gradient(circle at 50% 40%, #131b26, #0a0f16);
  border-radius: 11px;
}
.item .noimg {
  width: 66px; height: 66px; border-radius: 11px;
  background: radial-gradient(circle at 50% 40%, #131b26, #0a0f16);
}
/* 重复获得的数量角标。
 * ★ 以前是一块 31×37 的缎带书签压在缩略图右上角 —— 而资产图是宽矩形（675×300），
 *   在 66×66 的方框里 contain 之后只有约 66×29 的可视高度，那块角标正好盖掉可视画面的 ~45%。
 *   现在改成**挂在卡片右上角的紧凑胶囊**（DOM 上也移到了 .item 直属，否则会被
 *   .thumb 的 position:relative 接管定位、照样压图 —— 这个坑踩过）。图片是水平居中的，
 *   左右两侧本来就有留白（桌面约 46px、手机约 36px），胶囊落在右侧留白里 → 完全不压图。
 *   颜色仍跟着品级走（金系四档），保留「一眼看出重复获得」的作用。
 */
.item .qty {
  position: absolute; right: 7px; top: 7px; z-index: 2;
  height: 19px; padding: 0 7px; max-width: 72px; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #ffd76b, #d9a03a);
  color: #2b1d05; font-size: 11px; font-weight: 800; letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .95), inset 0 0 0 1px rgba(255, 255, 255, .16);
  pointer-events: none;                       /* 不挡鼠标（整卡可点） */
}
/* 书签颜色跟着品级走（与卡片金系配色一致；无品级的用主色红） */
.item.tier-legend .qty { background: linear-gradient(180deg, var(--tg-legend-a), var(--tg-legend-b)); }
.item.tier-hero   .qty { background: linear-gradient(180deg, var(--tg-hero-a), var(--tg-hero-b)); }
.item.tier-king   .qty { background: linear-gradient(180deg, var(--tg-king-a), var(--tg-king-b)); }
.item.tier-dazzle .qty { background: linear-gradient(180deg, var(--tg-dazzle-a), var(--tg-dazzle-b)); }
.item:not([class*="tier-"]) .qty { background: linear-gradient(180deg, #f15a5f, #cd2e33); color: #fff; }
.item .nm {
  font-size: 12.5px; font-weight: 600; line-height: 1.4; text-align: center;
  width: 100%; word-break: break-all; color: var(--tx);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ================= 武器品级配色（四档金） =================
 * 传说级 = 红金色 / 英雄级 = 亮金色 / 王者级 = 暗金色 / 炫金级 = 紫金色
 * 官方品级值来自上游 filterOptions.propLevel（1 传说 / 4 VVIP / 2 王者 / 3 炫金），
 * 这里只做「档位 -> 配色」的映射，档位判定在服务端（server.js 的 TIER_BY_LEVEL）。
 * 名称用渐变字（宽浏览器支持），并给卡片描边 + 顶部色条，远看就能分辨。
 */
:root {
  --tg-legend-a: #ff6a4d; --tg-legend-b: #ffc46b;   /* 传说 · 红金 */
  --tg-hero-a:   #ffe694; --tg-hero-b:   #fff9d6;   /* 英雄 · 亮金 */
  --tg-king-a:   #d8b04a; --tg-king-b:   #a8842c;   /* 王者 · 暗金 */
  --tg-dazzle-a: #c08cff; --tg-dazzle-b: #f0cf7a;   /* 炫金 · 紫金 */
}

.item.tier-legend, .item.tier-hero, .item.tier-king, .item.tier-dazzle {
  overflow: hidden;
}
.item.tier-legend::before, .item.tier-hero::before,
.item.tier-king::before, .item.tier-dazzle::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  pointer-events: none;
}
.item.tier-legend::before { background: linear-gradient(90deg, var(--tg-legend-a), var(--tg-legend-b)); }
.item.tier-hero::before   { background: linear-gradient(90deg, var(--tg-hero-a), var(--tg-hero-b)); }
.item.tier-king::before   { background: linear-gradient(90deg, var(--tg-king-a), var(--tg-king-b)); }
.item.tier-dazzle::before { background: linear-gradient(90deg, var(--tg-dazzle-a), var(--tg-dazzle-b)); }

/* 名称：先给一个稳妥的实色兜底，再用渐变字覆盖（不支持 background-clip:text 的浏览器不会变透明） */
.item.tier-legend .nm { color: #ffb08a; }
.item.tier-hero   .nm { color: #ffe9a8; }
.item.tier-king   .nm { color: #cfa845; }
.item.tier-dazzle .nm { color: #d3a9ff; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .item.tier-legend .nm, .item.tier-hero .nm,
  .item.tier-king .nm, .item.tier-dazzle .nm {
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
  .item.tier-legend .nm { background-image: linear-gradient(100deg, var(--tg-legend-a), var(--tg-legend-b)); }
  .item.tier-hero   .nm { background-image: linear-gradient(100deg, var(--tg-hero-a), var(--tg-hero-b)); }
  .item.tier-king   .nm { background-image: linear-gradient(100deg, var(--tg-king-a), var(--tg-king-b)); }
  .item.tier-dazzle .nm { background-image: linear-gradient(100deg, var(--tg-dazzle-a), var(--tg-dazzle-b)); }
}

.item.tier-legend { border-color: rgba(255, 106, 77, .42); background: linear-gradient(180deg, rgba(255, 106, 77, .07), #0f151f 62%); }
.item.tier-hero   { border-color: rgba(255, 226, 150, .40); background: linear-gradient(180deg, rgba(255, 226, 150, .07), #0f151f 62%); }
.item.tier-king   { border-color: rgba(216, 176, 74, .40); background: linear-gradient(180deg, rgba(216, 176, 74, .07), #0f151f 62%); }
.item.tier-dazzle { border-color: rgba(192, 140, 255, .42); background: linear-gradient(180deg, rgba(192, 140, 255, .08), #0f151f 62%); }

/* 金系格子：常驻品级微光 + 内侧顶部高光（不用等 hover 就有质感） */
.item.tier-legend, .item.tier-hero, .item.tier-king, .item.tier-dazzle {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .075), 0 12px 26px -22px rgba(0, 0, 0, .95);
}
.item.tier-legend { box-shadow: inset 0 1px 0 rgba(255,255,255,.075), 0 12px 26px -20px rgba(255, 106, 77, .85); }
.item.tier-hero   { box-shadow: inset 0 1px 0 rgba(255,255,255,.085), 0 12px 26px -20px rgba(255, 226, 150, .80); }
.item.tier-king   { box-shadow: inset 0 1px 0 rgba(255,255,255,.070), 0 12px 26px -20px rgba(216, 176, 74, .80); }
.item.tier-dazzle { box-shadow: inset 0 1px 0 rgba(255,255,255,.080), 0 12px 26px -20px rgba(192, 140, 255, .85); }

.item.tier-legend:hover { border-color: rgba(255, 106, 77, .78); box-shadow: 0 16px 30px -20px #000, 0 0 0 1px rgba(255, 106, 77, .22); }
.item.tier-hero:hover   { border-color: rgba(255, 226, 150, .76); box-shadow: 0 16px 30px -20px #000, 0 0 0 1px rgba(255, 226, 150, .22); }
.item.tier-king:hover   { border-color: rgba(216, 176, 74, .76); box-shadow: 0 16px 30px -20px #000, 0 0 0 1px rgba(216, 176, 74, .22); }
.item.tier-dazzle:hover { border-color: rgba(192, 140, 255, .78); box-shadow: 0 16px 30px -20px #000, 0 0 0 1px rgba(192, 140, 255, .24); }

/* ---------- 武器品级筛选条（「分类」入口） ---------- */
.lvbar {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin: 0 0 14px; padding: 10px 12px;
  background: rgba(255, 255, 255, .022);
  border: 1px solid var(--line); border-radius: 12px;
}
.lvbar .lvb {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--tx2); background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line2); transition: .16s;
}
.lvbar .lvb b { font-weight: 700; opacity: .85; font-size: 12px; }
.lvbar .lvb:hover { color: var(--tx); border-color: #3d4d66; background: rgba(255, 255, 255, .06); }
.lvbar .lvb.on { color: #fff; background: linear-gradient(180deg, #f15a5f, #cd2e33); border-color: #e5484d;
  box-shadow: 0 8px 18px -10px rgba(229, 72, 77, .95); }

/* 带档位色的筛选按钮：用对应金色描边 + 文字，选中时填充该金色 */
.lvbar .lvb.t-legend { border-color: rgba(255, 106, 77, .48); color: #ffb08a; }
.lvbar .lvb.t-hero   { border-color: rgba(255, 226, 150, .46); color: #ffe9a8; }
.lvbar .lvb.t-king   { border-color: rgba(216, 176, 74, .46); color: #cfa845; }
.lvbar .lvb.t-dazzle { border-color: rgba(192, 140, 255, .48); color: #d3a9ff; }
.lvbar .lvb.t-legend:hover, .lvbar .lvb.t-hero:hover,
.lvbar .lvb.t-king:hover, .lvbar .lvb.t-dazzle:hover { color: #fff; }
.lvbar .lvb.t-legend.on { background: linear-gradient(180deg, #ff8a6d, #d2452c); border-color: #ff8a6d;
  color: #fff; box-shadow: 0 8px 18px -10px rgba(255, 106, 77, .9); }
.lvbar .lvb.t-hero.on { background: linear-gradient(180deg, #ffe694, #d9b64a); border-color: #ffe694;
  color: #2a2107; box-shadow: 0 8px 18px -10px rgba(255, 226, 150, .85); }
.lvbar .lvb.t-king.on { background: linear-gradient(180deg, #d8b04a, #94741f); border-color: #d8b04a;
  color: #241a05; box-shadow: 0 8px 18px -10px rgba(216, 176, 74, .85); }
.lvbar .lvb.t-dazzle.on { background: linear-gradient(180deg, #c08cff, #8f5fd6); border-color: #c08cff;
  color: #fff; box-shadow: 0 8px 18px -10px rgba(192, 140, 255, .9); }
/* 色卡说明：只给色块，不再把颜色名当文字写出来（鼠标悬停才用 title 提示档位/颜色） */
.lvbar .lvhint {
  margin-left: auto; font-size: 11.5px; color: var(--tx3); font-weight: 400;
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.lvbar .lvd {
  display: inline-block; width: 14px; height: 14px; border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  vertical-align: -2px;
}
.lvbar .lvd.t-legend { background: linear-gradient(135deg, var(--tg-legend-a), var(--tg-legend-b)); }
.lvbar .lvd.t-hero   { background: linear-gradient(135deg, var(--tg-hero-a), var(--tg-hero-b)); }
.lvbar .lvd.t-king   { background: linear-gradient(135deg, var(--tg-king-a), var(--tg-king-b)); }
.lvbar .lvd.t-dazzle { background: linear-gradient(135deg, var(--tg-dazzle-a), var(--tg-dazzle-b)); }
@media (max-width: 720px) {
  .lvbar .lvhint { margin-left: 0; width: 100%; }
}

/* ---------- 提示块 ---------- */
.notice {
  border-left: 3px solid var(--warn);
  background: linear-gradient(90deg, rgba(210, 153, 34, .10), transparent 80%);
  border-radius: 8px; padding: 12px 14px;
}
.notice b { display: block; font-size: 14px; margin-bottom: 5px; }
.notice div { color: var(--tx2); font-size: 13px; line-height: 1.7; }

/* ---------- 积分角标（免费 / 付费分开显示） ---------- */
.ptsbox { display: flex; gap: 6px; align-items: center; }
.pill.pts { font-variant-numeric: tabular-nums; }
.pill.pts.free.ok { border-color: #1f6f4a; color: #6ee7a8; background: rgba(46, 160, 102, .10); }
.pill.pts.free.off { border-color: #26313f; color: var(--tx3); background: transparent; }
.pill.pts.paid.ok { border-color: #8a6a1f; color: #f5c96b; background: rgba(210, 153, 34, .10); }
.pill.pts.paid.off { border-color: #26313f; color: var(--tx3); background: transparent; }

/* ---------- 弹层（一键作图） ---------- */
.modal {
  position: fixed; inset: 0; z-index: 80; display: none;
  background: rgba(3, 5, 8, .8); backdrop-filter: blur(6px);
  padding: 26px 14px; overflow: auto;
}
.modal.on { display: block; }
.modal-in {
  max-width: 640px; margin: 0 auto;
  background: linear-gradient(180deg, rgba(23, 32, 46, .97), rgba(13, 18, 27, .98));
  border: 1px solid var(--line2); border-radius: 16px; padding: 20px;
  box-shadow: var(--shadow2);
  animation: popIn .18s ease-out;
}
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
.modal-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.modal-hd > b { font-size: 15px; letter-spacing: .3px; }
.modal-bd { background: #080c12; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }

.empty { color: var(--tx3); text-align: center; padding: 44px 0; font-size: 13px; }

/* ---------- 提示条 ---------- */
.toast {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%) translateY(18px);
  background: linear-gradient(180deg, #1d2735, #151d28);
  border: 1px solid var(--line2); border-left-width: 3px; color: var(--tx);
  padding: 12px 20px; border-radius: 11px; font-size: 13.5px; z-index: 99;
  opacity: 0; pointer-events: none; transition: .25s;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .98);
  max-width: min(90vw, 640px);
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { border-color: #7a3b3d; border-left-color: var(--ac); color: #ffb9b9; }
.toast.ok { border-color: #2c5b34; border-left-color: var(--ok); color: #a8ecb4; }

.loading {
  display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, .22);
  border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 表格（后台与「最近对局」共用） ---------- */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
th, td { text-align: left; padding: 10px 11px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th {
  color: var(--tx3); font-weight: 600; font-size: 11.5px; letter-spacing: .4px;
  background: #101722; position: sticky; top: 0; z-index: 2;
  border-bottom: 1px solid var(--line2);
}
tbody tr { transition: background .14s; }
tbody tr:nth-child(even) { background: rgba(255, 255, 255, .012); }
tbody tr:hover { background: rgba(229, 72, 77, .065); }
tbody tr:last-child td { border-bottom: none; }
td.mono, th.mono { font-family: Consolas, Monaco, monospace; font-size: 12px; }

.tablewrap {
  overflow: auto; max-height: 70vh;
  background: linear-gradient(180deg, rgba(18, 25, 36, .9), rgba(13, 18, 27, .92));
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow);
}

/* ---------- 统计卡 ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 12px; }
.stat {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, rgba(30, 42, 60, .9), rgba(14, 20, 29, .92));
  border: 1px solid var(--line); border-radius: 12px; padding: 15px 16px 14px;
  box-shadow: var(--shadow), 0 1px 0 rgba(255, 255, 255, .03) inset;
}
.stat::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--ac), rgba(229, 72, 77, 0));
  opacity: .8;
}
.stat .n {
  font-size: 26px; font-weight: 700; letter-spacing: .4px; line-height: 1.2;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff, #b7c5d8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat .l { color: var(--tx3); font-size: 12px; margin-top: 4px; }

/* ---------- 通用小标签 ---------- */
.pill {
  display: inline-block; padding: 2.5px 10px; border-radius: 999px; font-size: 12px;
  border: 1px solid var(--line2); color: var(--tx2); background: rgba(255, 255, 255, .025);
  font-variant-numeric: tabular-nums;
}
.pill.ok { border-color: #2c5b34; color: #7ee787; background: rgba(63, 185, 80, .10); }
.pill.bad { border-color: #7a3b3d; color: #ff9a9a; background: rgba(229, 72, 77, .10); }
.pill.warn { border-color: #6b5620; color: #f0c674; background: rgba(210, 153, 34, .10); }

.foot { color: var(--tx4); font-size: 12px; text-align: center; padding: 38px 0 30px; }

/* ---------- 一键作图（多张超清长图） ---------- */
.modal-in.wide { max-width: 1200px; }
.input.sm {
  width: auto; padding: 5px 26px 5px 11px; font-size: 12.5px; border-radius: 8px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--tx3) 50%),
    linear-gradient(135deg, var(--tx3) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; cursor: pointer;
}

/* 浏览器预览的成品：同样**从上到下无缝拼接**。
 * 原来每张外面套了一个 1px 边框 + 10px 内边距 + 12px 圆角 + 16px 外边距的「框」，
 * 而且 max-height:540px 还会在框里出现滚动条 —— 现在全部去掉，图片首尾相接 = 完整长图。
 * 顶部那行信息（第 N 张 / 尺寸 / 体积 / 放大 / 下载）改成悬浮条：桌面 hover 才出现，触屏常显。
 */
.part { position: relative; margin: 0; line-height: 0; }
.part-hd {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0; padding: 7px 10px 14px; line-height: 1.4;
  background: linear-gradient(180deg, rgba(6, 9, 14, .84), rgba(6, 9, 14, 0));
  opacity: 0; transition: opacity .15s;
}
.part:hover .part-hd, .part:focus-within .part-hd { opacity: 1; }
@media (hover: none) { .part .part-hd { opacity: 1; } }
.part-hd b { font-size: 13.5px; color: var(--tx); }
.part-bd {
  background: #0c1119;
  border: 0; border-radius: 0; padding: 0;
  max-height: none; overflow: visible;
}
.part-bd img { display: block; width: 100%; height: auto; border-radius: 0; transition: filter .15s; }
.part-bd img:hover { filter: brightness(1.06); }

/* ---------- 注册页辅助（步骤条 / 验证码行统一样式定义在 register.html） ---------- */

/* ---------- 响应式 ---------- */
@media (max-width: 720px) {
  .hero { padding: 26px 0 2px; }
  .hero h1 { font-size: 21px; }
  .search { flex-direction: column; }
  .search .btn { width: 100%; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
  .item { padding: 12px 9px 11px; }
  .item .thumb, .item img, .item .noimg { width: 58px; height: 58px; }
  .modal-in.wide { max-width: none; }
  .wrap { padding: 0 14px; }
  .topbar .inner { padding: 11px 14px; gap: 9px; }
  .who { display: none; }
  .stat .n { font-size: 22px; }
  .tablewrap { max-height: 60vh; }
}


/* ---------- 服务端成品图库（每张一个卡片，可点开放大） ----------
 * 列表里只加载缩略图（几十 KB）；原图一张 5~10MB，几十张全加载会把手机拖死。
 */
/* ---------- 服务端成品：从上到下「无缝拼接」 ----------
 * 每张成品是一整张长图的一段，直接首尾相接 = 完整长图：
 * 不加边框 / 圆角 / 内边距 / 间隙，也不再裁切（以前是 168px 高的 object-fit:cover，等于把长图切成小方块）。
 * 宽度锁 460px（= 缩略图原始宽度）→ 1:1 显示、不做放大插值，字最清楚。
 * 元信息与「放大 / 下载」收进悬浮条：桌面 hover 才出现，触屏常显但很淡。
 */
.pgrid {
  display: flex; flex-direction: column; gap: 0;
  width: 100%; max-width: var(--stack-w, 640px); margin: 0 auto;
}
.pcard { position: relative; margin: 0; line-height: 0; }
.pcard img.pimg {
  display: block; width: 100%; height: auto; cursor: zoom-in;
  background: #0c1119; transition: filter .15s;
}
.pcard img.pimg:hover { filter: brightness(1.06); }
.pcard .pov {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px; line-height: 1.4;
  padding: 7px 10px 14px; font-size: 11.5px; color: var(--tx2);
  background: linear-gradient(180deg, rgba(6, 9, 14, .84), rgba(6, 9, 14, 0));
  opacity: 0; transition: opacity .15s;
}
.pcard:hover .pov, .pcard:focus-within .pov { opacity: 1; }
.pcard .pov b { color: var(--tx); font-weight: 600; }
.pcard .pov .sp { margin-left: auto; display: flex; gap: 6px; }
.pcard .pov .btn { padding: 3px 10px; font-size: 11.5px; }
@media (hover: none) { .pcard .pov { opacity: 1; } }   /* 触屏没有 hover：常显 */
.pcard.pending .pcard-wait {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; color: var(--tx3);
  background: repeating-linear-gradient(45deg, #0f141c, #0f141c 9px, #131a25 9px, #131a25 18px);
  animation: pcardPulse 1.6s ease-in-out infinite;
}
.pcard.pending { min-height: 220px; }      /* 行内样式会按已出图比例给出更准的估算高度 */
@keyframes pcardPulse { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
@media (max-width: 720px) {
  /* 拼接栈本来就跟宽度自适应，不再需要按断点改图高（改了就破坏「无缝」） */
  .pcard .pov .btn { padding: 3px 8px; }
}

/* ---------- 图片放大查看（lightbox） ---------- */
.lb { position: fixed; inset: 0; z-index: 90; display: none; background: rgba(4, 7, 11, .97); }
.lb.on { display: flex; flex-direction: column; }
.lb-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(16, 22, 31, .96), rgba(10, 14, 20, .92));
}
.lb-title {
  font-size: 13.5px; color: var(--tx); font-weight: 600;
  max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-hint { font-size: 11.5px; color: var(--tx3); }
.lb-bd {
  flex: 1; min-height: 0; overflow: auto; padding: 14px;
  display: flex; align-items: flex-start; justify-content: center;
  -webkit-overflow-scrolling: touch;
}
.lb-bd img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: calc(100vh - 116px);
  border-radius: 6px; cursor: zoom-in;
  box-shadow: 0 24px 70px -34px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .06);
}
.lb-bd img.raw { max-width: none; max-height: none; cursor: zoom-out; }
@media (max-width: 720px) {
  .lb-hint { display: none; }
  .lb-title { max-width: 44vw; }
}

/* 浏览器预览那几张也可以点开放大 */
.part-bd img { cursor: zoom-in; }