/* ===== extracted from category.php ===== */

.cat-page { max-width: 1100px; margin: 0 auto; padding: 40px 24px; }

    /* 标题区 */
    .cat-header { text-align: center; margin-bottom: 48px; }
    .cat-back { font-size: 12px; color: var(--text3); letter-spacing: .08em; margin-bottom: 16px; }
    .cat-back a { color: var(--text3); text-decoration: none; transition: color .2s; }
    .cat-back a:hover { color: var(--accent); }
    .cat-title { font-family: var(--serif); font-size: clamp(28px,4vw,42px); font-weight: 400; color: #fff; letter-spacing: .06em; }
    .cat-count { font-size: 12px; color: var(--text3); margin-top: 8px; letter-spacing: .15em; text-transform: uppercase; }

    /* 模特网格 - 5列居中 */
    .cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; justify-content: center; margin-bottom: 48px; }
    .cat-item { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: all .25s ease; cursor: pointer; }
    .cat-item:hover { border-color: var(--accent2); transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 24px rgba(200,169,110,.16); }
    .cat-item-img { aspect-ratio: 3/4; overflow: hidden; background: var(--bg3); position: relative; }
    .cat-item-img img { width: 100%; height: 100%; object-fit: cover; transition: filter .45s ease, transform .45s ease; filter: grayscale(40%) brightness(.55); }
    .cat-item:hover .cat-item-img img { filter: grayscale(0%) brightness(1); transform: scale(1.05); }
    .cat-item-img::after { content:''; position:absolute; bottom:0;left:0;right:0;height:40%;background:linear-gradient(transparent,rgba(0,0,0,.55));pointer-events:none; }
    .cat-item-name { padding: 12px 14px; text-align: center; }
    .cat-item-name span { font-size: 13px; color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

    /* 空状态 */
    .cat-empty { text-align: center; padding: 80px 0; color: var(--text3); }
    .cat-empty-icon { font-size: 48px; margin-bottom: 16px; opacity: .3; }

    @media (max-width: 900px) { .cat-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
    @media (max-width: 680px) { .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
    @media (max-width: 480px) { .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .cat-page { padding: 24px 16px; } }

    /* 分类页广告位 — 视觉与 .cat-item 完全一致，仅在右上角加极小的 AD 角标（金底深字，与角色分类同色） */
    .cat-item-ad { position: relative; }
    .cat-item-ad::before {
      content: 'AD'; position: absolute; top: 8px; right: 8px; z-index: 2;
      font-size: 9px; font-weight: 600; letter-spacing: .12em; color: #1a1410;
      background: var(--accent); border: none;
      padding: 2px 6px; border-radius: 3px; line-height: 1;
      pointer-events: none;
    }