/* ======================================================================
 *  PDF 提取图片 /tool/pdf-extract-image 专属样式（pei-*）
 *  依赖 tool-detail.css + calc-common.css + file-tool.css + pdf-tool.css
 *  全局 CSS 变量（含黑夜模式），棋盘格底显示透明 PNG
 * ====================================================================== */

/* ---------- 顶部操作条：全选/取消 + 已选计数 ---------- */
.pei-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-bg-soft);
}

.pei-bar-count {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text-sub);
    margin-right: auto;
}

.pei-bar-btn {
    border: 1px solid var(--c-border);
    background: var(--c-bg-card);
    color: var(--c-text-sub);
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.pei-bar-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* ---------- 图片卡片网格 ---------- */
.pei-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.pei-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--c-bg-card);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.pei-card:hover {
    border-color: var(--c-primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.pei-check {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: var(--c-primary);
}

.pei-dl {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: rgba(20, 24, 34, .62);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease, background .15s ease;
}

.pei-card:hover .pei-dl { opacity: 1; }
.pei-dl:hover { background: var(--c-primary); }

.pei-img {
    width: 100%;
    height: 128px;
    object-fit: contain;
    background-color: var(--c-bg-soft, #f2f3f7);
    /* 棋盘格，方便看透明底 PNG */
    background-image:
        linear-gradient(45deg, var(--c-border, #dfe2ea) 25%, transparent 25%),
        linear-gradient(-45deg, var(--c-border, #dfe2ea) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--c-border, #dfe2ea) 75%),
        linear-gradient(-45deg, transparent 75%, var(--c-border, #dfe2ea) 75%);
    background-size: 14px 14px;
    background-position: 0 0, 0 7px, 7px -7px, -7px 0;
    display: block;
}

.pei-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px 9px;
    border-top: 1px solid var(--c-border);
}

.pei-meta b {
    font-size: 12px;
    color: var(--c-text);
    font-weight: 700;
}

.pei-meta small {
    font-size: 11px;
    color: var(--c-text-muted);
}

/* 未勾选时卡片半透明 */
.pei-card:has(.pei-check:not(:checked)) { opacity: .55; }

@media (max-width: 560px) {
    .pei-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 9px; }
    .pei-img { height: 104px; }
    .pei-dl { opacity: 1; }
}