/* =========================================================
   拾光书阁 · 功德簿（merit.css，.mb-* 前缀 scoped）
   v1.19.0：共享功德排名 + 福报（收款码上传 / 状态）；admin 功德簿管理页复用
   颜色走全站 CSS 变量（--accent/--border/--muted/--glow-soft 等）
   ========================================================= */

.merit-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:6px 0 18px}
.merit-top h1{font-size:22px;margin:0}

.mb-panel{padding:8px 0}
.mb-table-wrap{overflow-x:auto}
.mb-table{width:100%;border-collapse:collapse;min-width:420px}
.mb-table th{font-size:12px;color:var(--muted);font-weight:600;text-align:left;padding:12px 14px 8px;letter-spacing:.06em;border-bottom:1px solid var(--border)}
.mb-table td{padding:11px 14px;border-bottom:1px dashed var(--border);font-size:14px;color:var(--fg,#e8d9c2)}
.mb-table tr:last-child td{border-bottom:none}
.mb-table tr.mb-me{background:color-mix(in srgb,var(--accent) 8%,transparent)}

.mb-rank{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;border-radius:8px;font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--muted);background:rgba(17,10,5,.5)}
.mb-rank.mb-top1{background:linear-gradient(135deg,#f6c453,#e8a33d);color:#241503;box-shadow:0 0 12px rgba(230,160,60,.5)}
.mb-rank.mb-top2{background:linear-gradient(135deg,#d8dbe0,#aab0ba);color:#23262b}
.mb-rank.mb-top3{background:linear-gradient(135deg,#e0a97a,#c17f4e);color:#2b1706}

.mb-user{display:flex;align-items:center;gap:8px;font-weight:600}
.mb-user .avatar{width:28px;height:28px;border-radius:50%}
.mb-tag{font-size:10px;padding:1px 6px;border-radius:99px;background:var(--accent);color:#fff;letter-spacing:.05em}

.mb-merit{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--accent-2,#f0b35c);font-weight:700}

.mb-state{display:inline-block;font-size:12px;padding:2px 10px;border-radius:99px;font-weight:600}
.mb-granted{background:rgba(46,160,67,.16);color:#2ea043;border:1px solid rgba(46,160,67,.4)}
.mb-pending{background:rgba(230,150,40,.14);color:#e69628;border:1px solid rgba(230,150,40,.4)}
.mb-none{background:rgba(128,128,128,.12);color:var(--muted);border:1px solid rgba(128,128,128,.3)}
.mb-lock{font-size:12px;color:var(--muted)}
.mb-dim{color:var(--muted);font-size:13px}

.mb-bless-btn{border:1px solid var(--accent);color:var(--accent);background:transparent}

/* ---- 福报上传弹层 ---- */
.mb-modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);padding:20px}
.mb-modal[hidden]{display:none}
.mb-modal-box{width:100%;max-width:380px;background:var(--bg,#14100c);border:1px solid var(--border);border-radius:14px;padding:20px;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.mb-modal-head{display:flex;align-items:center;justify-content:space-between;font-size:16px;margin-bottom:10px}
.mb-modal-tip{font-size:13px;color:var(--muted);line-height:1.7;margin:0 0 16px}
.mb-modal-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mb-modal-status{font-size:13px;font-family:var(--font-mono)}

/* ---- admin 功德簿：收款码缩略图 ---- */
.mb-code-thumb{display:inline-block}
.mb-code-thumb img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--border);vertical-align:middle;transition:box-shadow .15s ease}
.mb-code-thumb:hover img{box-shadow:0 0 12px var(--glow-soft)}

/* ---- admin 福帖大图预览（扫码打款用） ---- */
.mb-preview{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72);padding:24px}
.mb-preview[hidden]{display:none}
.mb-preview-box{position:relative;max-width:min(92vw,640px);max-height:90vh}
.mb-preview-box img{display:block;max-width:100%;max-height:88vh;border-radius:12px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.mb-preview-close{position:absolute;top:-42px;right:0;font-size:20px;color:#fff;background:none;border:0;cursor:pointer}

@media (max-width:640px){
  .mb-table td,.mb-table th{padding:9px 10px}
}