/* 简安卡社 · 样式
   展示页定位：给访客看的卡册，卡图为主、信息克制（卡图/名称/数量/售价）；
   录入页定位：工具，沿用同一套控件。*/
:root{
  --bg:#f5f7fc; --card:#fff; --ink:#1b1e23; --ink2:#4b5158; --ink3:#8a909a;
  --line:#e6e9f0; --line2:#f2f4f8;
  --brand:#3b6fd4; --brand-soft:#eaf1fc; --brand-ink:#2a59b8;
  --up:#1a9c5b; --down:#d93a3a; --warn:#c98a00; --price:#e2712c;
  --r:14px; --shadow:0 1px 3px rgba(20,30,50,.05); --shadow-h:0 14px 30px rgba(20,30,50,.13);
  --attr-草:#5aa54a; --attr-火:#e2712c; --attr-水:#4a83d6; --attr-雷:#e0a91c;
  --attr-超能:#d0588a; --attr-格斗:#b8423a; --attr-恶:#5f4a3c; --attr-钢:#8f8fa8;
  --attr-龙:#6742c9; --attr-妖精:#d4708c; --attr-无:#9aa0aa;
  --attr-训练家:#7b52c9; --attr-能量:#c8942c;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:linear-gradient(180deg,#f6f8fd 0%,#eef1f8 100%);
  color:var(--ink);
  font:15px/1.65 system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:var(--brand);text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px 80px}

/* 顶栏 */
header.top{
  background:rgba(255,255,255,.82); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); box-shadow:0 1px 14px rgba(20,30,50,.05);
  position:sticky; top:0; z-index:50;
}
header.top .wrap{padding:0 20px; display:flex; align-items:center; gap:18px; height:58px}
/* 品牌区：站点 logo + 「简安卡社」（用主站 xhja.cn 的品牌图形，保持全套站点一致）
   ⚠ logo.png 四周有大量透明留白（图形只占画布 77%×42%），所以框要开大些，
     图形实测显示约 34×19px 才与 17px 的文字相称；gap 相应收小补偿留白。 */
.brand{display:flex;align-items:center;gap:5px;white-space:nowrap;
  font-weight:800;font-size:17px;letter-spacing:.2px;color:var(--ink)}
.brand-logo{width:46px;height:46px;object-fit:contain;flex:none;
  filter:drop-shadow(0 2px 5px rgba(66,144,245,.22))}
.brand small{display:block;font-weight:500;font-size:11.5px;color:var(--ink3);letter-spacing:0;margin-top:1px}
nav.top-nav{display:flex;gap:4px;margin-left:auto}
nav.top-nav a{
  padding:7px 14px; border-radius:9px; color:var(--ink2); font-size:14px; font-weight:500;
}
nav.top-nav a:hover{background:var(--line2)}
nav.top-nav a.on{background:var(--brand-soft);color:var(--brand-ink);font-weight:700}

h1.page{font-size:24px;margin:30px 0 4px;font-weight:800;letter-spacing:-.3px}
h1.page small{font-size:13px;color:var(--ink3);font-weight:500;margin-left:10px}
h2.sec{font-size:16px;margin:30px 0 14px;padding-left:11px;border-left:3px solid var(--brand);font-weight:700}

/* 面板 */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.panel + .panel{margin-top:14px}

/* 控件 */
input,select,textarea,button{font:inherit}
.form-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:12.5px;color:var(--ink3);font-weight:500}
.field input,.field select,.field textarea{
  border:1px solid var(--line);border-radius:9px;padding:8px 11px;background:#fff;
  min-width:120px;outline:none;transition:border-color .12s;
}
.field input:focus,.field select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.field input[type=number]{font-variant-numeric:tabular-nums}
button,.btn{
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:9px;padding:8px 16px;cursor:pointer;font-weight:600;transition:all .12s;
}
button:hover{border-color:var(--ink3)}
button.primary{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
button.primary:hover{filter:brightness(1.07);box-shadow:0 6px 16px rgba(59,111,212,.3)}
button.ghost{background:transparent}
button.danger{color:var(--down);border-color:#f0c8c8}
button:disabled{opacity:.5;cursor:not-allowed}

/* 搜索结果 */
.result{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card);box-shadow:var(--shadow);
}
.result .row{
  display:flex;align-items:center;gap:11px;padding:10px 13px;border-bottom:1px solid var(--line2);
  cursor:pointer;transition:background .1s;
}
.result .row:last-child{border-bottom:none}
.result .row:hover{background:var(--brand-soft)}
.result .row.on{background:var(--brand-soft);box-shadow:inset 3px 0 0 var(--brand)}
.result .row .nm{font-weight:700}
.result .row .meta{color:var(--ink3);font-size:12.5px;margin-left:auto;text-align:right}

/* 卡网格：每张卡 = 上方「卡图窗口」+ 下方信息区
   参考同类卡牌站（TCGplayer / 集换社 / binder.builders）的做法：
   卡图不裁满整卡，而是在浅色台面里居中摆一张带投影的卡片本体。 */
/* 卡图源本身只有 300×417，卡片做小反而更锐利（放大才会糊） */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:13px}
.ccard{
  background:var(--card);border:1px solid var(--line);border-radius:13px;
  display:flex;flex-direction:column;overflow:hidden;position:relative;
  cursor:zoom-in;
  box-shadow:0 1px 2px rgba(20,30,50,.04), 0 8px 20px -13px rgba(20,30,50,.22);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ccard:hover{
  transform:translateY(-3px);border-color:#d3e0f7;
  box-shadow:0 3px 8px rgba(20,30,50,.06), 0 18px 32px -16px rgba(20,30,50,.30);
}

/* 台面（卡图窗口） */
.ccard .thumb{
  position:relative;padding:8px 8px 7px;
  background:linear-gradient(168deg,#f4f7fd 0%,#e7edf8 100%);
}
/* 卡片本体：圆角 + 投影 + 悬停微放大 + 高光掠过（镭射感） */
.ccard .art{
  position:relative;aspect-ratio:63/88;border-radius:7px;overflow:hidden;
  background:#fff;
  box-shadow:0 1px 1px rgba(20,30,50,.10), 0 6px 13px -6px rgba(20,30,50,.40);
}
/* object-fit:contain 保证不裁切；图源 300px、显示仅 ~110px，缩小显示不放大
   所以不会糊。image-rendering 保持默认（双线性），别用 pixelated 会更差。 */
.ccard .art img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  display:block;background:#fff;transition:transform .3s ease;
}
.ccard:hover .art img{transform:scale(1.02)}
.ccard .art::after{
  content:"";position:absolute;inset:-25%;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.62) 50%,transparent 62%);
  transform:translateX(-135%);transition:transform .7s ease, opacity .25s ease;
}
.ccard:hover .art::after{transform:translateX(135%);opacity:1}

/* 无图 / 图挂了：同尺寸占位，保证网格高度一致 */
.ccard .phbox{
  position:absolute;inset:0;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;padding:6px;text-align:center;
}
.ccard .art.ph{background:linear-gradient(158deg,#fff,#eef2f9);
  box-shadow:inset 0 0 0 1px #e3e9f3}
.ccard .art.ph .phbox{display:flex}
.ccard .art.ph::after{display:none}
.ccard .phbox em{font-style:normal;font-size:10px;color:var(--ink3);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ccard .phbox span{
  font-family:ui-monospace,Consolas,Menlo,monospace;font-size:13px;font-weight:800;
  color:#c3cddd;letter-spacing:.3px;
}

/* 信息区 */
.ccard .body{padding:8px 9px 9px;display:flex;flex-direction:column;gap:2px;flex:1}
.ccard .nm{
  font-weight:700;font-size:12px;line-height:1.35;letter-spacing:0;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ccard .sub{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--ink3)}
.ccard .sub .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ccard .sub .dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--a)}

/* 底部一行：数量（左） + 售价（右） */
.ccard .foot{
  margin-top:auto;padding-top:6px;border-top:1px solid var(--line2);
  display:flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums;
}
.ccard .qty{
  flex:none;padding:1px 6px;border-radius:999px;background:#eef1f6;color:var(--ink2);
  font-size:10.5px;font-weight:700;
}
.ccard .price{margin-left:auto;display:inline-flex;align-items:baseline;white-space:nowrap}
.ccard .price b{font-size:13.5px;font-weight:800;color:var(--price);letter-spacing:-.2px}
.ccard .price.muted{color:var(--ink3);font-size:10.5px;font-weight:500}

/* 顶部工具行 */
.toolbar{margin:14px 0}
@media(max-width:760px){
  .grid{grid-template-columns:repeat(4,1fr);gap:9px}
}
@media(max-width:560px){
  .grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .ccard .thumb{padding:6px 6px 5px}
  .ccard .body{padding:7px 7px 8px}
  .ccard .nm{font-size:11.5px}
  .ccard .price b{font-size:13px}
}

/* 搜索结果行内小缩略图 */
.result .row .thumb{
  width:36px;height:50px;object-fit:cover;border-radius:5px;
  background:var(--line2);flex:none;
}

/* 系列墙 */
.sets{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:11px}
.setbox{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 13px;cursor:pointer;box-shadow:var(--shadow);transition:all .12s;
}
.setbox:hover{border-color:var(--brand);transform:translateY(-2px)}
.setbox .code{font-size:12px;color:var(--ink3);font-family:ui-monospace,Consolas,monospace}
.setbox .nm{font-weight:700;margin:2px 0 6px}
.setbox .st{font-size:12.5px;color:var(--ink2);font-variant-numeric:tabular-nums}

/* 表格 */
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
table.tbl th{
  background:#f5f6f8;text-align:left;padding:10px 12px;font-weight:700;color:var(--ink2);
  border-bottom:1px solid var(--line);white-space:nowrap;font-size:12.5px;
}
table.tbl td{padding:9px 12px;border-bottom:1px solid var(--line2)}
table.tbl tr:last-child td{border-bottom:none}
table.tbl td.num{text-align:right;font-variant-numeric:tabular-nums}

/* 稀有度徽章 */
.rar{
  display:inline-block;padding:1px 7px;border-radius:6px;font-size:11.5px;font-weight:700;
  background:var(--line2);color:var(--ink2);border:1px solid var(--line);
}
.rar[data-r="SR"],.rar[data-r="RR"]{background:#eceafb;color:#5b3fd4;border-color:#ddd8f8}
.rar[data-r="UR"],.rar[data-r="HR"]{background:#fdf1d8;color:#a56b00;border-color:#f7e3b8}
.rar[data-r="SAR"],.rar[data-r="AR"],.rar[data-r="CHR"],.rar[data-r="CSR"]{
  background:#fce9f1;color:#c33a72;border-color:#f8d5e5}
.rar[data-r="S"]{background:#e4f4ec;color:#13784a;border-color:#cdeadb}

.tagline{font-size:12.5px;color:var(--ink3)}
.empty{padding:30px;text-align:center;color:var(--ink3);font-size:14px}
.hint{font-size:12.5px;color:var(--ink3);margin-top:6px}
.hint code{
  font-family:ui-monospace,Consolas,monospace; font-size:11.5px;
  background:var(--line2); color:var(--ink2);
  padding:1px 5px; border-radius:4px; border:1px solid var(--line);
}
.pill{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;
  background:var(--line2);color:var(--ink2)}
.pill.buy{background:#e9f3ee;color:#13784a}
.pill.sell{background:#fdecec;color:#b52d2d}
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.rowline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.right{margin-left:auto}
.mono{font-family:ui-monospace,Consolas,Menlo,monospace;font-size:12.5px}
.msg{padding:10px 13px;border-radius:9px;font-size:13.5px;margin:10px 0}
.msg.ok{background:#e9f6ef;color:#12794a;border:1px solid #c9e8d8}
.msg.err{background:#fdecec;color:#b52d2d;border:1px solid #f3cccc}
footer.foot{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);
  color:var(--ink3);font-size:12.5px;text-align:center}

/* ============ 仓库页（全信息列表） ============ */
/* 列多，容器放宽 */
.wrap.wide{max-width:1560px}

/* 顶部汇总条：一行紧凑排开，不做大卡片 */
.sumbar{
  display:flex;flex-wrap:wrap;gap:7px 22px;align-items:baseline;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 16px;box-shadow:var(--shadow);margin:14px 0 2px;
  font-size:13px;color:var(--ink3);
}
.sumbar .kv b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;margin-left:4px}

/* 分段切换 */
.seg{display:inline-flex;background:#eceff5;border-radius:11px;padding:3px;gap:2px}
.seg button{border:none;background:transparent;border-radius:9px;padding:6px 14px;
  font-size:13.5px;font-weight:600;color:var(--ink2)}
.seg button:hover{color:var(--ink)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(20,30,50,.13)}

/* 数据表 */
.panel.tblwrap{overflow:auto hidden;padding:0}
table.tbl.data{min-width:1430px;border:none;box-shadow:none;font-size:13px}
table.tbl.data th{font-size:12px}
table.tbl.data th[data-sort]{cursor:pointer;user-select:none;white-space:nowrap}
table.tbl.data th[data-sort]:hover{color:var(--brand)}
table.tbl.data th.sorted{color:var(--brand)}
table.tbl.data th .ar{font-size:9px}
table.tbl.data td{padding:7px 10px;vertical-align:middle}
table.tbl.data tbody tr:hover{background:#f7f9fd}
table.tbl.data tfoot td{
  background:#f6f8fc;font-weight:700;border-top:1px solid var(--line);border-bottom:none;
  font-variant-numeric:tabular-nums;
}
table.tbl.data td.cimg,table.tbl.data th.cimg{width:44px;padding:5px 8px}
table.tbl td.num{white-space:nowrap;font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
.cname{font-weight:700;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cset{font-size:11.5px;color:var(--ink3);max-width:190px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cset .mono{color:#aab3c1;font-size:11px}

/* 表格里的小卡图 */
.kthumb{width:32px;height:45px;border-radius:5px;background:#eef1f6;overflow:hidden;
  box-shadow:0 1px 3px rgba(20,30,50,.2)}
.kthumb img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}
.kthumb.ph{display:flex;align-items:center;justify-content:center;font-size:10px;
  color:var(--ink3);box-shadow:inset 0 0 0 1px #e2e8f2}

/* 属性小圆点 */
.adot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--a);
  margin-right:5px;vertical-align:middle}

/* 盈亏配色：按中文习惯 —— 盈利红、亏损绿 */
.pnl{font-variant-numeric:tabular-nums}
.pnl.gain{color:#d93a3a}
.pnl.loss{color:#1a9c5b}

/* ============ 点开看大图（lightbox） ============ */
.lightbox{position:fixed;inset:0;z-index:120;display:flex;align-items:center;
  justify-content:center;padding:20px;animation:lbIn .16s ease}
.lightbox[hidden]{display:none}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb-bg{position:absolute;inset:0;background:rgba(13,19,31,.76);backdrop-filter:blur(7px)}

.lb-stage{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:13px;max-height:100%;animation:lbPop .2s cubic-bezier(.2,.85,.3,1)}
@keyframes lbPop{from{transform:scale(.95);opacity:.4}to{transform:none;opacity:1}}

/* 大图：高度优先，宽度上限由 JS 按原图分辨率收紧（300px 的 kado 图放太大会糊） */
.lb-stage img{
  display:block;width:auto;height:auto;max-height:64vh;max-width:min(92vw,540px);
  border-radius:14px;background:#fff;
  box-shadow:0 26px 60px -20px rgba(0,0,0,.6), 0 6px 16px rgba(0,0,0,.35);
}
.lb-ph{width:min(52vw,236px);aspect-ratio:63/88;max-height:64vh;border-radius:14px;
  background:linear-gradient(158deg,#fff,#eef2f9);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;color:var(--ink3);font-size:13px;
  box-shadow:inset 0 0 0 1px #e3e9f3, 0 26px 60px -20px rgba(0,0,0,.55)}
.lb-ph span{font-family:ui-monospace,Consolas,Menlo,monospace;font-size:22px;
  font-weight:800;color:#c3cddd}

.lb-info{color:#fff;text-align:center;line-height:1.45;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.lb-info .n{font-size:19px;font-weight:800;letter-spacing:.2px}
.lb-info .m{font-size:12.5px;opacity:.74;margin-top:3px}
.lb-info .f{display:flex;gap:18px;justify-content:center;align-items:baseline;
  margin-top:9px;font-size:14px;font-variant-numeric:tabular-nums}
.lb-info .f b{color:#ffb46b;font-weight:800;font-size:18px}
.lb-info .f em{font-style:normal;opacity:.72;font-size:12.5px;margin-left:4px}

.lb-btn{position:absolute;z-index:2;border:0;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.14);border-radius:50%;backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;line-height:1;
  transition:background .15s ease, transform .15s ease}
.lb-btn:hover{background:rgba(255,255,255,.28)}
.lb-btn[disabled]{opacity:.22;pointer-events:none}
.lb-close{top:16px;right:16px;width:40px;height:40px;font-size:20px}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);width:46px;height:46px;font-size:26px;
  padding-bottom:3px}
.lb-prev{left:14px}
.lb-next{right:14px}
.lb-prev:hover{transform:translateY(-50%) scale(1.06)}
.lb-next:hover{transform:translateY(-50%) scale(1.06)}

@media(max-width:560px){
  .lightbox{padding:12px}
  .lb-close{top:10px;right:10px;width:34px;height:34px;font-size:17px}
  .lb-prev,.lb-next{width:38px;height:38px;font-size:22px}
  .lb-prev{left:8px} .lb-next{right:8px}
  .lb-info .n{font-size:16px}
  .lb-info .f b{font-size:16px}
  .lb-stage img{max-height:58vh}
}