/* ==========================================================================
   消费项目图片统一展示样式
   用于后台项目列表 / 项目表单 / 扣卡弹窗，保证不同尺寸下图片展示、留白一致。
   ========================================================================== */

.ui-thumb {
    position: relative;
    display: block;
    flex: none;
    overflow: hidden;
    border-radius: 0.5rem;
    background: #eef2f7;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
    line-height: 0;
}

.ui-thumb > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.18s ease;
}

/* 尺寸：统一正方形，避免有无图片时列表行高 / 卡片高度不一致 */
.ui-thumb--48 { width: 48px; height: 48px; }
.ui-thumb--56 { width: 56px; height: 56px; }
.ui-thumb--160 { width: 160px; height: 160px; border-radius: 0.75rem; }
.ui-thumb--preview {
    width: 100%;
    max-width: 420px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border-radius: 0.75rem;
}

/* 商家未上传图片、当前展示系统默认图 */
.ui-thumb--default::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px dashed rgba(100, 116, 139, 0.5);
    border-radius: inherit;
    pointer-events: none;
}

/* 点击查看大图 */
.ui-thumb-link {
    display: inline-block;
    line-height: 0;
    border-radius: 0.5rem;
    cursor: zoom-in;
}
.ui-thumb-link:hover .ui-thumb,
.ui-thumb-link:focus-visible .ui-thumb {
    box-shadow: inset 0 0 0 1px rgba(25, 135, 84, 0.45), 0 0 0 3px rgba(25, 135, 84, 0.12);
}
.ui-thumb-link:hover .ui-thumb > img {
    transform: scale(1.05);
}

/* 表单里的图片预览 + 上传区 */
.ui-image-field {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
}
.ui-image-field__side {
    flex: 1 1 260px;
    min-width: 240px;
}
.ui-image-field__caption {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.4rem;
    text-align: center;
}