/* ===== CXCG styles ===== */
.cxcg-archive { max-width: 1200px; width:100%; margin: 0 auto; padding: 12px; }
.cxcg-archive-header { margin: 8px 0 16px; }
.cxcg-breadcrumb { font-size: 12px; color: #666; display:flex; gap:8px; align-items:center; flex-wrap: wrap; }
.cxcg-breadcrumb .sep { opacity:.6; }
.cxcg-breadcrumb a:hover { text-decoration: underline; }
.cxcg-archive-title { font-size: 28px; font-weight: 800; margin: 8px 0 6px; line-height: 1.2; }
.cxcg-archive-desc { font-size: 14px; color: #555; margin: 4px 0 12px; }

/* Grid */
.cxcg-fallback-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
@media (max-width: 640px) {
  .cxcg-fallback-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cxcg-title { font-size: 14px; }
}
@media (min-width: 1024px) {
  .cxcg-fallback-grid { grid-template-columns: repeat(var(--cxcg-cols-pc, 5), minmax(0, 1fr)); }
}

/* Card */
.cxcg-card { background: #fff; border:1px solid rgba(0,0,0,.06); border-radius: 10px; overflow: hidden; padding-bottom: 10px; }
.cxcg-thumb-wrap { display:block; position:relative; }
.cxcg-thumb-wrap::before { content:""; display:block; padding-top: calc(100% * var(--ratio-h, 4) / var(--ratio-w, 3)); }
.cxcg-thumb { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#f7f7f7; }
.cxcg-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.cxcg-title { font-size: 16px; font-weight:700; padding: 10px 12px 0; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cxcg-title a { color:#222; text-decoration:none; }
.cxcg-title a:hover { text-decoration:underline; }
.cxcg-meta { font-size:12px; color:#666; padding: 6px 12px 0; }

.cxcg-pagination { display:flex; justify-content:center; margin: 20px 0 28px; }
.cxcg-more-btn { padding: 10px 16px; border-radius: 8px; border:1px solid rgba(0,0,0,.08); background:#fff; font-weight:600; cursor:pointer; }
.cxcg-more-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 22px -8px rgba(0,0,0,.22); }

/* Mobile: hide .cbbfixed */
@media (max-width: 640px) { .cbbfixed { display: none !important; } }

/* ===== Toplist ===== */
.cxcg-toplist { max-width: 900px; margin: 0 auto; padding: 12px; }
.cxcg-toplist-title { font-size: 24px; font-weight: 800; margin: 6px 0 10px; }
.cxcg-toplist-title.gradient {
  font-size: 32px; line-height: 1.2; font-weight: 900; margin: 6px 0 10px;
  background: linear-gradient(90deg, #ff6a00, #ee0979);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (max-width:640px){ .cxcg-toplist-title.gradient { font-size: 26px; } }

.cxcg-toplist-tabs { display:flex; gap:10px; flex-wrap:wrap; justify-content: space-between; margin-bottom: 8px; }
.cxcg-toplist-tabs .group { display:flex; gap:8px; flex-wrap:wrap; }
.cxcg-toplist-tabs .tab { padding:6px 10px; border:1px solid rgba(0,0,0,.1); border-radius: 999px; background:#fff; color:#333; text-decoration:none; font-size: 13px; }
.cxcg-toplist-tabs .tab.active { background:#111; color:#fff; border-color:#111; }

.cxcg-toplist-list { list-style: none; margin: 8px 0 14px; padding: 0; }
.cxcg-toplist-list .item { display:grid; grid-template-columns: 36px 72px 1fr 60px; gap: 10px; align-items:center; padding: 10px 12px; border-bottom: 1px solid rgba(0,0,0,.06); }
.cxcg-toplist-list .item .rank { font-weight:800; font-size: 16px; color:#666; width: 30px; text-align:center; }
.cxcg-toplist-list .item .thumb { display:block; position:relative; width:72px; }
.cxcg-toplist-list .item .thumb::before { content:""; display:block; padding-top: calc(100% * var(--ratio-h, 4) / var(--ratio-w, 3)); }
.cxcg-toplist-list .item .thumb .thumb-inner { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#f7f7f7; border-radius:6px; }
.cxcg-toplist-list .item .thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.cxcg-toplist-list .item .thumb .noimg { width:100%; height:100%; display:block; background:#eee; }
.cxcg-toplist-list .item .title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#222; text-decoration:none; }
.cxcg-toplist-list .item .title:hover { text-decoration: underline; }
.cxcg-toplist-list .item .metric { font-size: 13px; color:#666; text-align:right; }
.cxcg-toplist-list .item.empty { justify-content:center; }

/* Toplist debug */
.cxcg-debug { padding: 6px 8px; background: #fafafa; border:1px dashed rgba(0,0,0,.15); margin: 6px 0 12px; border-radius: 8px; }
.cxcg-debug-table { width:100%; border-collapse: collapse; font-size:12px; }
.cxcg-debug-table th, .cxcg-debug-table td { border:1px solid rgba(0,0,0,.08); padding: 4px 6px; text-align:left; }
.cxcg-debug-empty { font-size:12px; color:#666; margin:4px 0; }


/* Subcategory filter (tabs) */
.cxcg-subcats { display:flex; flex-wrap:wrap; gap:8px; margin: 6px 0 12px; }
.cxcg-subcats .subcat-link { padding:6px 10px; border:1px solid rgba(0,0,0,.1); border-radius:999px; text-decoration:none; color:#333; background:#fff; font-size:13px; }
.cxcg-subcats .subcat-link.active, .cxcg-subcats .subcat-link:hover { background:#111; color:#fff; border-color:#111; }
@media (max-width:640px){ .cxcg-subcats { gap:6px; } .cxcg-subcats .subcat-link { padding:6px 8px; font-size:12px; } }