/*!
 * 雾寻图片工坊 · 场景库首页（对齐离线单文件版）
 * 公共骨架来自 shared/page.css
 * 这里只负责：搜索框、计数徽标、分类标签、场景卡片网格
 */

/* ============ 搜索 + 计数（放在页头右侧） ============ */
.lib-search {
    width: 200px;
    padding: 9px 13px;
    border: 1px solid var(--fx-line);
    border-radius: var(--fx-r-sm);
    background: var(--fx-surface);
    color: var(--fx-ink);
    font-family: inherit;
    font-size: 16px;
    outline: none;
    transition: border-color .16s var(--fx-ease), box-shadow .16s var(--fx-ease);
}

@media (min-width: 761px) {
    .lib-search {
        font-size: 12px;
    }
}

.lib-search::placeholder {
    color: var(--fx-mute);
}

.lib-search:focus {
    border-color: #9fb0ff;
    box-shadow: 0 0 0 3px rgba(79, 107, 255, .10);
}

.lib-badge {
    padding: 5px 11px;
    border: 1px solid var(--fx-brand-soft-2);
    border-radius: 20px;
    background: var(--fx-brand-soft);
    color: var(--fx-brand-strong);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* ============ 分类标签 ============ */
.lib-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 16px 0 4px;
}

.lib-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    border: 1px solid var(--fx-line);
    border-radius: 20px;
    background: var(--fx-surface);
    color: var(--fx-sub);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .16s var(--fx-ease), color .16s var(--fx-ease), background .16s var(--fx-ease);
}

.lib-tab:hover {
    border-color: #b8c4ff;
    color: var(--fx-brand-strong);
}

.lib-tab .n {
    color: var(--fx-mute);
    font-size: 10.5px;
    font-weight: 700;
}

.lib-tab.on {
    border-color: transparent;
    background: var(--fx-grad);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 8px 18px -10px rgba(79, 107, 255, .7);
}

.lib-tab.on .n {
    color: rgba(255, 255, 255, .82);
}

/* ============ 场景卡片网格（离线版规格） ============ */
.lib-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
}

.lib-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--fx-line);
    border-radius: var(--fx-r-lg);
    background: var(--fx-surface);
    color: inherit;
    box-shadow: var(--fx-sh);
    overflow: hidden;
    text-decoration: none;
    transition: transform .2s var(--fx-ease), border-color .2s var(--fx-ease), box-shadow .2s var(--fx-ease);
}

.lib-card:hover {
    transform: translateY(-3px);
    border-color: #b8c4ff;
    box-shadow: var(--fx-sh-md);
}

.lib-card:focus-visible {
    outline: 2px solid var(--fx-brand);
    outline-offset: 2px;
}

.lib-card .preset-thumb {
    display: block;
    position: relative;
    height: 132px;
    flex: 0 0 auto;
    border-bottom: 1px solid rgba(27, 36, 80, .05);
    overflow: hidden;
}

/* 缩略图里的示意元素（源自离线版 shared/app.css 的 .pg 系列）
 * 收在 .lib-card 作用域内，避免像 app.css 那样污染整个前台页。 */
.lib-card .preset-thumb .pg {
    position: absolute;
    border-radius: 3px;
}

.lib-card .preset-thumb .pg.card {
    background: #fff;
    box-shadow: 0 8px 18px -10px rgba(30, 40, 90, .45);
}

.lib-card .preset-thumb .pg.line {
    background: currentColor;
    opacity: .9;
}

.lib-card .preset-thumb .pg.soft {
    background: currentColor;
    opacity: .22;
}

.lib-card .preset-thumb .pg.pill {
    background: linear-gradient(120deg, #4f6bff, #a56bff);
}

.lib-card .preset-thumb .pg.btn {
    background: linear-gradient(120deg, #4f6bff, #a56bff);
    border-radius: 20px;
}

.lib-card .preset-thumb .pg.qr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 3px;
    background: #fff;
    border: 1px solid #1b2450;
}

.lib-card .preset-thumb .pg.qr i {
    background: #1b2450;
    border-radius: 1px;
}

.lib-card .meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 14px 13px;
}

.lib-card .meta b {
    font-size: 13.5px;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lib-card .meta .tag {
    color: var(--fx-sub);
    font-size: 11px;
    line-height: 1.55;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lib-card .cat {
    width: fit-content;
    margin-top: 5px;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--fx-brand-soft);
    color: var(--fx-brand-strong);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2px;
}

.lib-card .go {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    padding-top: 9px;
    color: var(--fx-brand);
    font-size: 11px;
    font-weight: 700;
}

.lib-card .go i {
    font-style: normal;
    transition: transform .18s var(--fx-ease);
}

.lib-card:hover .go i {
    transform: translateX(3px);
}

.lib-empty {
    padding: 30px 4px;
    color: var(--fx-sub);
    font-size: 13px;
}

/* ============ 响应式 ============ */
@media (max-width: 760px) {
    .lib-search {
        width: 100%;
        flex: 1 1 auto;
    }

    .lib-tabs {
        gap: 6px;
        margin: 14px 0 2px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .lib-tabs::-webkit-scrollbar {
        display: none;
    }

    .lib-tab {
        flex: 0 0 auto;
        padding: 6px 12px;
        font-size: 11.5px;
    }

    .lib-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .lib-card {
        border-radius: 13px;
    }

    .lib-card .preset-thumb {
        height: 96px;
    }

    .lib-card .meta {
        padding: 10px 11px 11px;
    }

    .lib-card .meta b {
        font-size: 12px;
    }

    .lib-card .meta .tag {
        font-size: 10.5px;
    }

    .lib-card .cat {
        font-size: 9.5px;
    }

    .lib-card .go {
        padding-top: 7px;
        font-size: 10.5px;
    }
}

@media (max-width: 360px) {
    .lib-grid {
        grid-template-columns: 1fr;
    }
}