/* ===== 头像框（zybns_touxiangkuang · 4.0.4 移植版） ===== */

/* 服务端只输出定位标记，JS 用它包出容器；没 JS 时标记不可见 */
.zybns-frame-mark { display: none !important; }

/* 头像 + 框的定位容器 */
.zybns-avatar-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
    vertical-align: middle;
}
.zybns-avatar-wrap > img:first-child { display: block; }

/* 叠加的头像框：比头像大 30%，居中覆盖 */
.zybns-avatar-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130%;
    height: 130%;
    max-width: none;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
    object-fit: fill;
    background: transparent;
}
.zybns-avatar-overlay.zybns-shape-rounded { border-radius: 8px; }
.zybns-avatar-overlay.zybns-shape-circle  { border-radius: 50%; }
.zybns-avatar-overlay.zybns-shape-square  { border-radius: 0; }

/* ---- 头像框墙 ---- */
.zybns-preview-big .avatar-4 { width: 84px; height: 84px; }
.zybns-card { overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.zybns-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15,23,42,.10); }
.zybns-card-preview {
    display: flex; align-items: center; justify-content: center;
    padding: 22px 0 14px; background: linear-gradient(180deg,#f8fafc,#eef2f7);
}
.zybns-card-preview .avatar-4 { width: 64px; height: 64px; }
.zybns-card .card-body b { font-size: 13px; }

/* 稀有度：边框 + 小标签配色 */
.zybns-card.rarity-2 { border-color: #9ec5fe; }
.zybns-card.rarity-3 { border-color: #c4a2f5; }
.zybns-card.rarity-4 { border-color: #f5c26b; }

.zybns-rarity {
    flex: none; font-size: 11px; line-height: 1;
    padding: 3px 6px; border-radius: 6px; margin-left: 6px;
    color: #6b7280; background: #f1f5f9;
}
.zybns-rarity.r2 { color: #1d4ed8; background: #e7f0ff; }
.zybns-rarity.r3 { color: #7c3aed; background: #f1e9ff; }
.zybns-rarity.r4 { color: #b45309; background: #fef3c7; }

/* ---- 后台缩略图 / 编辑预览 ---- */
.zybns-thumb { display: inline-block; width: 46px; height: 46px; }
.zybns-thumb img { width: 100%; height: 100%; object-fit: contain; }
.zybns-edit-preview { display: flex; align-items: center; padding: 12px; background: #f8fafc; border-radius: 10px; }
.zybns-edit-preview .zybns-avatar-wrap { width: 64px; height: 64px; }
.zybns-avatar-demo { width: 64px; height: 64px; border-radius: 8px; background: #e2e8f0; }