/* ================================================
   作品库（分类页）v2026 风格
   路径: /public/css/v2026/cate.css
   依赖: v2026/global.css（--primary: #13c2c2）
   ================================================ */

.cate-wrap { padding-bottom: 40px; }

/* ---- 页面标题 ---- */
.cate-head { display: flex; align-items: baseline; gap: 12px; margin: 8px 0 18px; }
.cate-head h1 { display: flex; align-items: center; margin: 0; font-size: 24px; font-weight: 800; letter-spacing: 1px; }
.cate-head-bar { display: inline-block; width: 5px; height: 22px; margin-right: 10px; border-radius: 3px; background: var(--primary); }
.cate-count { font-size: 13px; color: var(--text-sub); }
.cate-count b { color: var(--primary); font-family: Arial, sans-serif; }

/* ---- 筛选白卡 ---- */
.cate-filter { margin-bottom: 24px; padding: 4px 24px; background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.04); }
.cate-filter .filter-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px dashed #eef0f2; }
.cate-filter .filter-row:last-child { border-bottom: none; }
.cate-filter .filter-label { flex-shrink: 0; width: 52px; line-height: 30px; font-size: 14px; color: var(--text-sub); }
.cate-filter .filter-items { display: flex; flex-wrap: wrap; gap: 10px; }
.cate-filter .filter-pill { display: inline-block; padding: 5px 16px; line-height: 20px; font-size: 14px; color: #555; background: #f4f6f8; border: 1px solid transparent; border-radius: 16px; }
.cate-filter .filter-pill:hover { color: var(--primary); border-color: var(--primary); }
.cate-filter .filter-pill.active { color: #fff; background: var(--primary); border-color: var(--primary); box-shadow: 0 4px 10px rgba(19,194,194,.25); pointer-events: none; }

/* ---- 作品网格（5 列，方形封面） ---- */
.square-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 26px 16px; margin-bottom: 34px; }
.square-card { transition: transform .3s; }
.square-card:hover { transform: translateY(-4px); }

.square-cover { display: block; position: relative; width: 100%; aspect-ratio: 1 / 1; margin-bottom: 10px; border-radius: 10px; overflow: hidden; background: #f0f2f5; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.square-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.square-card:hover .square-cover img { transform: scale(1.05); }

.play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .3s; }
.square-card:hover .play-overlay { opacity: 1; }
.play-icon { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; }
.play-icon::after { content: ''; width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; }

/* 状态角标：连载=黄，完结=主题青 */
.status-tag { position: absolute; top: 8px; right: 8px; padding: 2px 8px; font-size: 11px; font-weight: bold; color: #fff; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.status-ing { background: #faad14; }
.status-end { background: var(--primary); }

/* 精装徽标：左上角，金色 */
.tag-hardcover { position: absolute; top: 8px; left: 8px; padding: 2px 8px; font-size: 11px; font-weight: bold; color: #fff; border-radius: 5px; background: linear-gradient(135deg, #ffb300, #ff8f00); box-shadow: 0 2px 4px rgba(0,0,0,.2); }

/* 标题 + 主播 */
.square-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 39px; margin-bottom: 6px; font-size: 14px; font-weight: bold; line-height: 1.4; color: #333; }
.square-title:hover { color: var(--primary); }
.square-meta { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-sub); }
.square-host { max-width: 64%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.square-host:hover { color: var(--primary); }
.square-stat { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ico-comment { width: 13px; height: 13px; display: inline-block; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23bbb'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E") no-repeat center / contain; }

/* 空状态 */
.cate-empty { grid-column: 1 / -1; padding: 60px 0; text-align: center; font-size: 15px; color: var(--text-sub); }

/* ---- 分页（multipager page_version=2：当前页 a.sel，翻页 a.turn） ---- */
.cate-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0 10px; }
.cate-pagination a { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; font-size: 14px; color: #555; background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.05); transition: .2s; }
.cate-pagination a:hover { color: var(--primary); }
.cate-pagination a.sel { color: #fff; background: var(--primary); box-shadow: 0 4px 10px rgba(19,194,194,.25); }
.cate-pagination .clear { width: 100%; height: 0; }

/* ---- 响应式收窄（可选） ---- */
@media (max-width: 1200px) {
    .square-grid { grid-template-columns: repeat(4, 1fr); }
}