/* kfbeta16 — reviews (from template-community-reviews.php) */
.content-area { max-width: 1200px; margin: 0 auto; padding: 20px; color: #fff; font-family: "Malgun Gothic", sans-serif; }
.page-header { text-align: center; margin-bottom: 30px; border-bottom: 1px solid #333; padding-bottom: 20px; }
.page-title { font-size: 26px; font-weight: bold; margin: 0 0 10px 0; color: #fff; }
.page-desc { color: #888; font-size: 14px; margin: 0; }

.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; min-height: 400px; }

.review-card { background: #1e1e1e; border: 1px solid #333; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s; }
.review-card:hover { transform: translateY(-5px); border-color: #555; }

.rc-header { padding: 15px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #2a2a2a; }

.rc-avatar-wrap {
    width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #555;
    flex-shrink: 0; display: flex; justify-content: center; align-items: center;
    font-weight: 600; color: #fff; text-transform: uppercase; user-select: none; font-size: 16px;
}
.rc-avatar-img { width: 100%; height: 100%; object-fit: cover; }

.rc-user-info { flex: 1; overflow: hidden; }
.rc-username { font-weight: bold; font-size: 14px; color: #fff; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-date { font-size: 12px; color: #777; }

.rc-body { padding: 15px; flex: 1; display: flex; flex-direction: column; }
.rc-rating-badge { align-self: flex-start; padding: 3px 10px; border-radius: 20px; font-weight: bold; font-size: 12px; margin-bottom: 10px; }
.score-high { background: rgba(76, 175, 80, 0.15); color: #4caf50; border: 1px solid #4caf50; }
.score-mid { background: rgba(255, 235, 59, 0.15); color: #fdd835; border: 1px solid #fdd835; }
.score-low { background: rgba(244, 67, 54, 0.15); color: #f44336; border: 1px solid #f44336; }
.rc-content { font-size: 14px; color: #ddd; line-height: 1.6; word-break: break-word; }
.btn-read-more { color: #3ea6ff; cursor: pointer; font-size: 13px; font-weight: 600; margin-left: 5px; display: inline-block; }
.btn-read-more:hover { text-decoration: underline; }

.rc-anime-link { text-decoration: none; color: inherit; display: block; margin-top: auto; }
.rc-footer { background: #151515; padding: 10px; display: flex; align-items: center; gap: 12px; border-top: 1px solid #2a2a2a; transition: background 0.2s; }
.rc-footer:hover { background: #000; }
.rc-thumb-wrapper { width: 90px; aspect-ratio: 16/9; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: #222; }
.rc-anime-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-anime-info { flex: 1; overflow: hidden; }
.rc-label { font-size: 11px; color: #666; display: block; margin-bottom: 2px; }
.rc-anime-name { font-size: 13px; font-weight: 600; color: #3ea6ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

.pagination-wrapper { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 40px; padding-bottom: 40px; flex-wrap: wrap; }
.page-btn { background: #333; color: #fff; border: 1px solid #444; padding: 8px 16px; border-radius: 4px; cursor: pointer; transition: 0.2s; }
.page-btn:hover:not(:disabled) { background: #3ea6ff; border-color: #3ea6ff; }
.page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.page-info { color: #aaa; font-weight: bold; font-size: 14px; min-width: 100px; text-align: center; }
.page-jump { display: flex; align-items: center; gap: 5px; margin-left: 10px; border-left: 1px solid #444; padding-left: 15px; }
.page-input { width: 60px; background: #1e1e1e; border: 1px solid #444; color: #fff; padding: 8px; border-radius: 4px; text-align: center; outline: none; -moz-appearance: textfield; }
.page-input::-webkit-outer-spin-button, .page-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.page-input:focus { border-color: #3ea6ff; }
.page-btn-go { background: #3ea6ff; color: #0f0f0f; border: none; padding: 9px 15px; border-radius: 4px; cursor: pointer; font-weight: bold; }

.skeleton { background: #2a2a2a; animation: shimmer 1.5s infinite linear; background: linear-gradient(to right, #2a2a2a 8%, #333 18%, #2a2a2a 33%); background-size: 800px 104px; }
@keyframes shimmer { 0% { background-position: -468px 0 } 100% { background-position: 468px 0 } }
.sk-card { height: 200px; border-radius: 12px; }