.cl-hero { padding:60px 0 30px; text-align:center; }
.cl-hero-title { font-size:2.2rem; font-weight:800; }
.cl-hero-sub { color:var(--text-muted, #6b7280); font-size:1.05rem; margin-top:6px; }

.cl-entry { border:1px solid var(--border-color, #e5e7eb); border-radius:12px; padding:24px 28px; margin-bottom:20px; background:var(--bg-card, #fff); }
.cl-entry-header { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.cl-version { display:inline-block; padding:3px 12px; border-radius:20px; font-size:.78rem; font-weight:700; background:rgba(124,58,237,.12); color:#7c3aed; }
.cl-date { font-size:.82rem; color:var(--text-muted, #6b7280); }
.cl-author { font-size:.82rem; color:var(--text-muted, #6b7280); }
.cl-title { font-size:1.15rem; font-weight:700; margin-bottom:8px; }
.cl-content { font-size:.92rem; line-height:1.7; color:var(--text-body, #374151); white-space:pre-wrap; }
.cl-vis-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:20px; font-size:.7rem; font-weight:600; }

.cl-empty { text-align:center; padding:60px 20px; color:var(--text-muted, #6b7280); }
.cl-empty-icon { font-size:3rem; opacity:.3; margin-bottom:16px; }

@media (max-width: 767.98px) {
    .cl-hero { padding: 36px 0 20px; }
    .cl-hero-title { font-size: 1.6rem; }
    .cl-entry { padding: 18px 20px; }
}
@media (max-width: 575.98px) {
    .cl-hero { padding: 24px 0 14px; }
    .cl-hero-title { font-size: 1.3rem; }
    .cl-hero-sub { font-size: .92rem; }
    .cl-entry { padding: 14px 16px; }
}

.cl-pagination { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; }
.cl-page-btn {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:34px; height:34px; padding:0 8px;
    border-radius:8px; border:1.5px solid var(--border-color);
    background:var(--card-color); color:var(--p-color);
    font-size:.82rem; font-weight:700; text-decoration:none;
    cursor:pointer; transition:background .15s, border-color .15s, color .15s;
}
.cl-page-btn:hover, .cl-page-btn.active { background:var(--underline-color); border-color:var(--underline-color); color:#fff; }
.cl-page-ellipsis { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; color:var(--p-color); font-size:.82rem; }