.db-layout {
  display: grid;
  grid-template-columns: 190px 1fr 300px;
  height: calc(100vh - 57px);
}
.filters { padding: 14px; border-right: 1px solid var(--border); background: var(--bg-2); }
.filters h4 { margin: 16px 0 8px; font-size: 13px; color: var(--text-dim); }
.filters .fg { display: flex; flex-wrap: wrap; gap: 6px; }
.filters .chip {
  padding: 4px 9px; border: 1px solid var(--border); border-radius: 14px;
  font-size: 12px; cursor: pointer; user-select: none; background: var(--panel);
}
.filters .chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.filters .reset { margin-top: 18px; width: 100%; }

.browse { display: flex; flex-direction: column; min-width: 0; }
.browse-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.browse-head #kw { width: 320px; }
.count { color: var(--text-dim); font-size: 13px; }

.grid {
  flex: 1; padding: 14px 16px;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  align-content: start;
}
.cardtile {
  position: relative; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border); background: var(--panel);
  cursor: pointer; transition: transform .12s, border-color .12s;
}
.cardtile:hover { transform: translateY(-3px); border-color: var(--accent-2); }
.cardtile .img { width: 100%; aspect-ratio: 63/88; object-fit: cover; display: block; background: #0c0e12; }
.cardtile .noimg { width: 100%; aspect-ratio: 63/88; display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 12px; text-align:center; padding: 8px; }
.cardtile .meta { padding: 5px 7px; }
.cardtile .nm { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cardtile .sub { font-size: 10px; color: var(--text-dim); display: flex; justify-content: space-between; margin-top: 2px; }
.cardtile .fac { position: absolute; top: 5px; left: 5px; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 8px; background: rgba(0,0,0,.6); }
.cardtile .add {
  position: absolute; bottom: 30px; right: 5px; width: 26px; height: 26px;
  border-radius: 50%; background: var(--accent); color: #fff; border: none;
  font-size: 18px; line-height: 1; opacity: 0; transition: opacity .12s;
}
.cardtile:hover .add { opacity: 1; }

.pager { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px; border-top: 1px solid var(--border); }

.deck { display: flex; flex-direction: column; border-left: 1px solid var(--border); background: var(--bg-2); }
.deck-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 600; }
.deck-appearance { padding: 10px 14px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.deck-appearance .ap-row { display: flex; align-items: center; gap: 8px; }
.deck-appearance .ap-row label { width: 36px; font-size: 13px; color: var(--text-dim); }
.deck-appearance select { flex: 1; min-width: 0; }
.ap-preview { height: 64px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); background: var(--panel); display: flex; align-items: center; justify-content: center; }
.ap-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-preview .ap-none { font-size: 11px; color: var(--text-dim); }
/* 势力色卡背预览色块（与对战页 back-face 同配色） */
.ap-preview .ap-fac { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; height: 40px; padding: 0 12px; border-radius: 6px; color: #fff; font-weight: 800; font-size: 13px; border: 1px solid rgba(255,255,255,.4); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.ap-preview .ap-fac[data-fac="魏"] { background: radial-gradient(circle at center, #e0584f 0%, #a8281f 45%, #5c0f0a 100%); }
.ap-preview .ap-fac[data-fac="蜀"] { background: radial-gradient(circle at center, #7fd17f 0%, #3f8f3f 45%, #16401a 100%); }
.ap-preview .ap-fac[data-fac="吴"] { background: radial-gradient(circle at center, #4ea8de 0%, #2c6fa3 45%, #0e3358 100%); }
.ap-preview .ap-fac[data-fac="群"] { background: radial-gradient(circle at center, #6b6f76 0%, #3a3d42 45%, #121316 100%); }
.ap-preview .ap-fac[data-fac="汉"] { background: radial-gradient(circle at center, #b07fd8 0%, #7b3fb0 45%, #3a1456 100%); }
.deck-list { flex: 1; padding: 8px; }
.ougi-head { background: rgba(120, 90, 200, .14); border-bottom: 1px solid var(--accent); }
.ougi-list { max-height: 150px; overflow-y: auto; border-bottom: 1px solid var(--border); background: rgba(120, 90, 200, .06); }
.deck-item { display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 6px; }
.deck-item:hover { background: var(--panel); }
.deck-item .qty { color: var(--accent-2); font-weight: 700; width: 26px; }
.deck-item .di-nm { flex: 1; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-item .di-btn { cursor: pointer; color: var(--text-dim); padding: 0 4px; }
.deck-item .di-btn:hover { color: var(--accent); }
.deck-tools { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }

/* 卡组条目内的编号（异画卡显示原卡号） */
.deck-item .di-no { font-size: 11px; color: var(--text-dim); width: 74px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; }

/* 当前卡组「费用结构」 */
.deck-cost { padding: 10px 12px; border-top: 1px solid var(--border); background: rgba(0,0,0,.12); }
.deck-cost-title { font-size: 12px; font-weight: 600; color: var(--text-dim); margin-bottom: 8px; }
.deck-cost-dist { display: flex; flex-direction: column; gap: 4px; }
.cd-row { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.cd-label { width: 30px; color: var(--text-dim); flex: none; text-align: right; }
.cd-track { flex: 1; height: 10px; background: var(--bg-2); border-radius: 5px; overflow: hidden; }
.cd-bar { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: 5px; min-width: 2px; }
.cd-num { width: 22px; text-align: right; font-weight: 700; color: var(--accent-2); flex: none; }
.cd-empty { font-size: 11px; color: var(--text-dim); }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal.hidden { display: none; }
.modal-inner { position: relative; width: min(760px, 92vw); max-height: 88vh; overflow: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
.modal-close { position: absolute; top: 12px; right: 12px; }
.detail { display: grid; grid-template-columns: 240px 1fr; gap: 20px; }
.detail img { width: 100%; border-radius: 8px; background: #0c0e12; }
.detail .noimg2 { width: 100%; aspect-ratio: 63/88; display:flex; align-items:center; justify-content:center; background:#0c0e12; color: var(--text-dim); border-radius: 8px; }
.detail h2 { margin: 0 0 4px; }
.detail .row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.detail .kv { font-size: 13px; }
.detail .kv b { color: var(--text-dim); font-weight: 500; }
.detail .text { white-space: pre-wrap; font-size: 13px; line-height: 1.7; background: var(--bg-2); padding: 10px; border-radius: 8px; margin-top: 10px; }
.detail .text-cn { background: #1c2b1c; border-left: 3px solid #4caf50; color: #d7ffd7; }
.detail .cn-label { display: inline-block; background: #4caf50; color: #fff; font-size: 11px; border-radius: 4px; padding: 0 5px; margin-right: 6px; vertical-align: middle; }
.hidden { display: none; }

/* 操作提示 toast（奥义区上限等轻提示） */
.db-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(10px);
  background: #2a2030; color: #ffd9a8; border: 1px solid var(--accent);
  padding: 9px 16px; border-radius: 20px; font-size: 13px; z-index: 200;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.db-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }