/* ============================================================
   KARMAFLEX — MAIN STYLESHEET
   Author: Bigkarmatech
   ============================================================ */

/* ==========================================
   GENRE SCROLLBAR — always dark, below header
   ========================================== */
.kf-genre-bar {
  background: var(--kf-header-bg);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  position: relative;
}

.kf-genre-bar__inner {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 10px 20px;
  -ms-overflow-style: none;
}
.kf-genre-bar__inner::-webkit-scrollbar { display: none; }

.kf-genre-bar a {
  flex-shrink: 0;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(248,250,252,0.6);
  text-decoration: none;
  border-radius: var(--kf-r-full);
  border: 1px solid transparent;
  transition: all var(--kf-ease);
  white-space: nowrap;
}

.kf-genre-bar a:hover,
.kf-genre-bar a.active {
  background: var(--kf-accent-glow);
  color: var(--kf-accent-2);
  border-color: rgba(34,197,94,0.25);
}

/* ==========================================
   HERO — Featured post
   ========================================== */
.kf-hero {
  position: relative;
  margin: 24px 0;
  border-radius: var(--kf-r-xl);
  overflow: hidden;
  background: var(--kf-bg-card);
  border: 1px solid var(--kf-border);
  box-shadow: var(--kf-shadow-lg);
}

.kf-hero__media {
  position: relative;
  aspect-ratio: 16/8;
  overflow: hidden;
  background: var(--kf-bg-3);
}

.kf-hero__media img {
  width: 100%; height: 100%; object-fit: cover;
}

.kf-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
}

.kf-hero__content {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 32px;
  display: flex; flex-direction: column; gap: 10px;
}

.kf-hero__badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--kf-accent); color: #fff;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  padding: 5px 14px; border-radius: var(--kf-r-full); width: fit-content;
}

.kf-hero__title {
  font-size: clamp(22px, 4vw, 38px);
  font-weight: 800; color: #fff; line-height: 1.15;
  max-width: 800px; letter-spacing: -0.5px;
}

.kf-hero__title a { color: #fff; }
.kf-hero__title a:hover { color: var(--kf-accent-2); }

.kf-hero__meta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.kf-hero__meta span { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,0.75); font-weight: 500; }
.kf-hero__meta svg { opacity: .85; }

@media (max-width: 640px) {
  .kf-hero__media { aspect-ratio: 4/3; }
  .kf-hero__content { padding: 18px 18px; }
}

/* ==========================================
   POST LIST — Latest posts
   ========================================== */
.kf-post-list { display: flex; flex-direction: column; gap: 14px; }

.kf-post-card {
  display: grid; grid-template-columns: 120px 1fr;
  gap: 16px; background: var(--kf-bg-card);
  border: 1px solid var(--kf-border); border-radius: var(--kf-r-lg);
  overflow: hidden; transition: all var(--kf-ease);
}

.kf-post-card:hover { border-color: var(--kf-accent); box-shadow: var(--kf-shadow-md); transform: translateY(-2px); }

.kf-post-card__thumb {
  position: relative; aspect-ratio: 1; overflow: hidden; background: var(--kf-bg-3);
}
.kf-post-card__thumb img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; object-position: center; transition: transform .4s; }
.kf-post-card:hover .kf-post-card__thumb img { transform: scale(1.06); }

.kf-post-card__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.35); opacity: 0; transition: opacity var(--kf-ease);
}
.kf-post-card:hover .kf-post-card__play { opacity: 1; }
.kf-post-card__play svg { width: 36px; height: 36px; color: #fff; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); }

.kf-post-card__body { padding: 14px 16px 14px 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kf-post-card__tags { display: flex; gap: 6px; flex-wrap: wrap; }

.kf-post-card__title {
  font-size: 16px; font-weight: 700; color: var(--kf-text); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kf-post-card__title a { color: inherit; }
.kf-post-card__title a:hover { color: var(--kf-accent); }

.kf-post-card__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: auto; }
.kf-post-card__meta span { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--kf-text-3); }
.kf-post-card__meta svg { opacity: .6; }

.kf-post-card__download {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto; padding: 6px 14px; border-radius: var(--kf-r-full);
  background: var(--kf-accent-glow); color: var(--kf-accent);
  font-size: 12px; font-weight: 700; border: 1px solid transparent; transition: all var(--kf-ease);
}
.kf-post-card__download:hover { background: var(--kf-accent); color: #fff; }

@media (max-width: 560px) {
  .kf-post-card { grid-template-columns: 88px 1fr; }
  .kf-post-card__title { font-size: 14px; }
  .kf-post-card__meta span:not(:first-child):not(.kf-post-card__download) { display: none; }
}

/* ==========================================
   AUDIO PLAYER — Single post
   ========================================== */
.kf-player {
  background: var(--kf-bg-card);
  border: 1px solid var(--kf-border);
  border-radius: var(--kf-r-lg);
  padding: 18px 20px;
  display: flex; align-items: center; gap: 16px;
  margin: 24px 0;
  box-shadow: var(--kf-shadow);
}

.kf-player__art {
  width: 56px; height: 56px; border-radius: var(--kf-r-md);
  overflow: hidden; flex-shrink: 0; background: var(--kf-bg-3);
  display: flex; align-items: center; justify-content: center; color: var(--kf-text-muted);
}
.kf-player__art img { width: 100%; height: 100%; object-fit: cover; }

.kf-player__controls { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.kf-player__btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--kf-accent); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--kf-ease); flex-shrink: 0;
}
.kf-player__btn:hover { background: var(--kf-accent-2); transform: scale(1.05); }
.kf-player__btn--sm { width: 34px; height: 34px; background: var(--kf-bg-3); color: var(--kf-text-2); }
.kf-player__btn--sm:hover { background: var(--kf-accent-glow); color: var(--kf-accent); }

.kf-player__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.kf-player__title { font-size: 14px; font-weight: 700; color: var(--kf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kf-player__artist { font-size: 12px; color: var(--kf-text-3); }

.kf-player__progress {
  display: flex; align-items: center; gap: 10px; width: 100%;
}
.kf-player__time { font-size: 11px; font-family: var(--kf-font-mono); color: var(--kf-text-3); flex-shrink: 0; min-width: 36px; }
.kf-player__bar {
  flex: 1; height: 6px; background: var(--kf-bg-3); border-radius: var(--kf-r-full);
  position: relative; cursor: pointer; overflow: hidden;
}
.kf-player__bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: var(--kf-accent); border-radius: var(--kf-r-full); transition: width .1s linear;
}
.kf-player__bar-fill::after {
  content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px; background: #fff; border: 2px solid var(--kf-accent); border-radius: 50%;
}

.kf-player__vol { display: none; align-items: center; gap: 6px; }
.kf-player__vol input { width: 70px; accent-color: var(--kf-accent); }

.kf-player__download {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 18px; background: var(--kf-accent); color: #fff;
  border-radius: var(--kf-r-md); font-size: 13px; font-weight: 700;
  text-decoration: none; flex-shrink: 0; transition: all var(--kf-ease);
}
.kf-player__download:hover { background: var(--kf-accent-2); transform: translateY(-1px); }

@media (max-width: 720px) {
  .kf-player { flex-wrap: wrap; }
  .kf-player__vol { display: none !important; }
  .kf-player__download span { display: none; }
  .kf-player__download { padding: 10px 12px; }
}

/* ==========================================
   POST HEADER — Single post title block
   ========================================== */
.kf-post-header { margin: 8px 0 20px; }
.kf-post-header__tags { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }

.kf-post-header__title {
  font-size: clamp(24px, 4vw, 38px); font-weight: 800; line-height: 1.2;
  letter-spacing: -0.5px; margin-bottom: 14px;
}

.kf-post-header__meta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--kf-text-3);
}
.kf-post-header__meta span { display: flex; align-items: center; gap: 6px; }
.kf-post-header__meta svg { opacity: .6; }
.kf-post-header__author { display: flex; align-items: center; gap: 8px; }
.kf-post-header__author img { width: 28px; height: 28px; border-radius: 50%; }

/* Featured image */
.kf-post-thumb {
  border-radius: var(--kf-r-lg); overflow: hidden; margin: 20px 0;
  border: 1px solid var(--kf-border);
}
.kf-post-thumb img { width: 100%; display: block; }

/* ==========================================
   ENTRY CONTENT
   ========================================== */
.kf-entry-content { font-size: 16px; line-height: 1.85; color: var(--kf-text-2); }
.kf-entry-content > * + * { margin-top: 1.2em; }
.kf-entry-content h2,.kf-entry-content h3,.kf-entry-content h4 { margin-top: 1.6em; margin-bottom: .5em; color: var(--kf-text); }
.kf-entry-content h2 { font-size: 24px; } .kf-entry-content h3 { font-size: 20px; }
.kf-entry-content a { color: var(--kf-accent); text-decoration: underline; text-decoration-color: var(--kf-accent-glow); }
.kf-entry-content strong { color: var(--kf-text); }
.kf-entry-content blockquote {
  border-left: 4px solid var(--kf-accent); background: var(--kf-bg-el);
  padding: 14px 20px; border-radius: 0 var(--kf-r-md) var(--kf-r-md) 0; font-style: italic;
}
.kf-entry-content img { border-radius: var(--kf-r-md); }
.kf-entry-content ul, .kf-entry-content ol { padding-left: 24px; }
.kf-entry-content li { margin-bottom: 6px; list-style: revert; }
.kf-entry-content code { background: var(--kf-bg-3); padding: 2px 6px; border-radius: 4px; font-family: var(--kf-font-mono); font-size: .9em; color: var(--kf-accent); }

/* ==========================================
   DOWNLOAD BOX
   ========================================== */
.kf-download-box {
  margin: 28px 0; background: var(--kf-bg-card);
  border: 2px solid var(--kf-accent); border-radius: var(--kf-r-lg);
  padding: 20px; position: relative; overflow: hidden;
}
.kf-download-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--kf-accent), var(--kf-accent-2), var(--kf-accent));
}
.kf-download-box__title {
  display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1px; color: var(--kf-accent); margin-bottom: 14px;
}
.kf-download-list { display: flex; flex-direction: column; gap: 8px; }
.kf-download-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--kf-bg-el); border-radius: var(--kf-r-md);
  border: 1px solid var(--kf-border); transition: all var(--kf-ease); text-decoration: none;
}
.kf-download-item:hover { border-color: var(--kf-accent); transform: translateX(3px); }
.kf-download-item__icon {
  width: 36px; height: 36px; border-radius: var(--kf-r-sm); background: var(--kf-accent);
  color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.kf-download-item__info { flex: 1; min-width: 0; }
.kf-download-item__label { font-size: 14px; font-weight: 700; color: var(--kf-text); }
.kf-download-item__size { font-size: 11px; color: var(--kf-text-3); font-family: var(--kf-font-mono); }
.kf-download-item__arrow { color: var(--kf-text-muted); transition: transform var(--kf-ease); }
.kf-download-item:hover .kf-download-item__arrow { transform: translateX(3px); color: var(--kf-accent); }

/* ==========================================
   SHARE BAR
   ========================================== */
.kf-share { display: flex; align-items: center; gap: 10px; margin: 28px 0; flex-wrap: wrap; }
.kf-share__label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--kf-text-3); }
.kf-share__icons { display: flex; gap: 8px; }
.kf-share__btn {
  width: 38px; height: 38px; border-radius: var(--kf-r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--kf-bg-3); color: var(--kf-text-2); border: 1px solid var(--kf-border);
  transition: all var(--kf-ease); cursor: pointer;
}
.kf-share__btn:hover { transform: translateY(-2px); color: #fff; }
.kf-share__btn--wa:hover  { background: #25D366; border-color: #25D366; }
.kf-share__btn--fb:hover  { background: #1877F2; border-color: #1877F2; }
.kf-share__btn--tw:hover  { background: #000;    border-color: #000;    color: #fff; }
[data-theme="dark"] .kf-share__btn--tw:hover { background: #fff; color: #000; }
.kf-share__btn--tg:hover  { background: #26A5E4; border-color: #26A5E4; }
.kf-share__btn--copy.copied { background: var(--kf-accent); border-color: var(--kf-accent); color: #fff; }

/* ==========================================
   TAGS
   ========================================== */
.kf-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.kf-tags a {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; background: var(--kf-bg-3); border: 1px solid var(--kf-border);
  border-radius: var(--kf-r-full); font-size: 12px; color: var(--kf-text-2);
  transition: all var(--kf-ease);
}
.kf-tags a:hover { background: var(--kf-accent-glow); color: var(--kf-accent); border-color: var(--kf-accent); }
.kf-tags a::before { content: '#'; color: var(--kf-accent); font-weight: 700; }

/* ==========================================
   RELATED POSTS
   ========================================== */
.kf-related { margin: 40px 0; }
.kf-related-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
@media (max-width: 640px) { .kf-related-grid { grid-template-columns: 1fr; } }

/* ==========================================
   POST REACTIONS
   ========================================== */
.kf-reactions {
  margin: 32px 0; padding: 24px;
  background: var(--kf-bg-card); border: 1px solid var(--kf-border);
  border-radius: var(--kf-r-lg); text-align: center;
}
.kf-reactions__title { font-size: 14px; font-weight: 700; color: var(--kf-text-2); margin-bottom: 16px; }
.kf-reactions__grid {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.kf-reaction {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 16px; min-width: 78px;
  background: var(--kf-bg-el); border: 1px solid var(--kf-border);
  border-radius: var(--kf-r-md); cursor: pointer; transition: all var(--kf-ease);
  position: relative; overflow: hidden;
}
.kf-reaction:hover { transform: translateY(-3px); border-color: var(--kf-accent); box-shadow: var(--kf-shadow); }
.kf-reaction--active { background: var(--kf-accent-glow); border-color: var(--kf-accent); }
.kf-reaction--active .kf-reaction__count { color: var(--kf-accent); }
.kf-reaction__emoji { font-size: 26px; line-height: 1; transition: transform var(--kf-ease); }
.kf-reaction:hover .kf-reaction__emoji { transform: scale(1.25) rotate(-8deg); }
.kf-reaction__label { font-size: 11px; font-weight: 700; color: var(--kf-text-2); text-transform: capitalize; }
.kf-reaction__count { font-size: 12px; font-weight: 800; color: var(--kf-text-3); font-family: var(--kf-font-mono); }

/* Burst animation on click */
.kf-reaction.kf-burst::after {
  content: attr(data-emoji);
  position: absolute; top: 10px; left: 50%; font-size: 22px;
  animation: kf-burst-up 0.7s ease-out forwards; pointer-events: none;
}
@keyframes kf-burst-up {
  0%   { opacity: 1; transform: translate(-50%,0) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-40px) scale(1.6); }
}

@media (max-width: 480px) {
  .kf-reaction { min-width: 64px; padding: 10px 8px; }
  .kf-reaction__emoji { font-size: 22px; }
  .kf-reaction__label { display: none; }
}

/* ==========================================
   COMMENTS — THREADED
   ========================================== */
.kf-comments { margin: 40px 0; }
.kf-comments__title {
  display: flex; align-items: center; gap: 10px;
  font-size: 20px; font-weight: 800; margin-bottom: 24px;
}
.kf-comments__title svg { color: var(--kf-accent); }
.kf-comments__count {
  background: var(--kf-accent-glow); color: var(--kf-accent);
  font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: var(--kf-r-full);
  font-family: var(--kf-font-mono);
}

.kf-comment-list { list-style: none; }
.kf-comment-list .children { list-style: none; margin-left: 24px; padding-left: 20px; border-left: 2px solid var(--kf-border); }

.kf-comment {
  display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--kf-border);
}
.kf-comment:last-child { border-bottom: none; }

.kf-comment__avatar img { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--kf-border); }
.kf-comment__body { flex: 1; min-width: 0; }
.kf-comment__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.kf-comment__author { font-size: 14px; font-weight: 700; color: var(--kf-text); }
.kf-comment__author--admin {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--kf-accent); color: #fff; font-size: 10px; font-weight: 800;
  padding: 1px 8px; border-radius: var(--kf-r-full); text-transform: uppercase; letter-spacing: .5px;
}
.kf-comment__date { font-size: 12px; color: var(--kf-text-3); }
.kf-comment__text { font-size: 14px; line-height: 1.7; color: var(--kf-text-2); }
.kf-comment__text p { margin-bottom: 8px; }
.kf-comment__reply {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 8px;
  font-size: 12px; font-weight: 700; color: var(--kf-accent); cursor: pointer;
  background: none; border: none; padding: 0;
}
.kf-comment__reply:hover { text-decoration: underline; }

/* Comment form */
.kf-comment-form {
  margin-top: 32px; padding: 24px; background: var(--kf-bg-card);
  border: 1px solid var(--kf-border); border-radius: var(--kf-r-lg);
}
.kf-comment-form__title { font-size: 16px; font-weight: 800; margin-bottom: 16px; }
.kf-comment-form .comment-form-comment { display: block; margin-bottom: 14px; }
.kf-comment-form textarea, .kf-comment-form input[type="text"], .kf-comment-form input[type="email"], .kf-comment-form input[type="url"] {
  width: 100%; padding: 12px 14px; border: 1px solid var(--kf-border-2);
  border-radius: var(--kf-r-md); background: var(--kf-bg-el); color: var(--kf-text);
  font-family: var(--kf-font-body); font-size: 14px; resize: vertical;
}
.kf-comment-form textarea:focus, .kf-comment-form input:focus {
  outline: none; border-color: var(--kf-accent); box-shadow: 0 0 0 3px var(--kf-accent-glow);
}
.kf-comment-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
@media (max-width: 560px) { .kf-comment-form__row { grid-template-columns: 1fr; } }
.kf-comment-form label { display: block; font-size: 12px; font-weight: 700; color: var(--kf-text-3); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .5px; }
.kf-comment-form .form-submit { margin-top: 6px; }
.kf-comment-form input[type="submit"] {
  background: var(--kf-accent); color: #fff; border: none; padding: 11px 26px;
  border-radius: var(--kf-r-md); font-weight: 700; font-size: 14px; cursor: pointer; transition: all var(--kf-ease);
}
.kf-comment-form input[type="submit"]:hover { background: var(--kf-accent-2); }

.kf-no-comments { text-align: center; padding: 32px; color: var(--kf-text-3); }
.kf-no-comments svg { margin-bottom: 10px; opacity: .5; }

/* ==========================================
   SIDEBAR WIDGETS — Inner styles
   ========================================== */
.kf-mini-list { display: flex; flex-direction: column; gap: 12px; }
.kf-mini-item { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.kf-mini-rank {
  width: 22px; height: 22px; border-radius: var(--kf-r-sm); background: var(--kf-bg-3);
  color: var(--kf-text-3); font-size: 11px; font-weight: 800; font-family: var(--kf-font-mono);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.kf-mini-item:nth-child(1) .kf-mini-rank { background: var(--kf-accent); color: #fff; }
.kf-mini-art {
  width: 38px; height: 38px; border-radius: var(--kf-r-sm); overflow: hidden;
  background: var(--kf-bg-3); flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: var(--kf-text-muted);
}
.kf-mini-art img { width: 100%; height: 100%; object-fit: cover; }
.kf-mini-info { min-width: 0; display: flex; flex-direction: column; }
.kf-mini-title { font-size: 13px; font-weight: 600; color: var(--kf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kf-mini-artist { font-size: 11px; color: var(--kf-text-3); }

.kf-genre-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.kf-genre-pill {
  display: flex; align-items: center; gap: 6px; padding: 6px 12px;
  background: var(--kf-bg-3); border: 1px solid var(--kf-border); border-radius: var(--kf-r-full);
  font-size: 12px; color: var(--kf-text-2); text-decoration: none; transition: all var(--kf-ease);
}
.kf-genre-pill:hover { background: var(--kf-accent-glow); color: var(--kf-accent); border-color: var(--kf-accent); }
.kf-genre-pill span { font-size: 10px; color: var(--kf-text-muted); font-family: var(--kf-font-mono); }

.kf-newsletter { text-align: center; }
.kf-newsletter__icon {
  width: 48px; height: 48px; background: var(--kf-accent-glow); color: var(--kf-accent);
  border-radius: var(--kf-r-md); display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
}
.kf-newsletter h4 { font-size: 15px; margin-bottom: 6px; }
.kf-newsletter p { font-size: 12px; color: var(--kf-text-3); margin-bottom: 14px; line-height: 1.6; }
.kf-newsletter-form { display: flex; flex-direction: column; gap: 8px; }
.kf-newsletter-form input {
  padding: 10px 14px; border: 1px solid var(--kf-border-2); border-radius: var(--kf-r-md);
  background: var(--kf-bg-el); color: var(--kf-text); font-size: 13px;
}
.kf-newsletter-form input:focus { outline: none; border-color: var(--kf-accent); }
.kf-newsletter-form .kf-btn { width: 100%; justify-content: center; }

/* ==========================================
   MOBILE NAV OVERLAY (extends header)
   ========================================== */
body.kf-nav-open { overflow: hidden; }

/* ==========================================
   THEME TOGGLE ICON STATES
   ========================================== */
.kf-theme-toggle__sun  { display: none; }
.kf-theme-toggle__moon { display: block; }
[data-theme="dark"] .kf-theme-toggle__sun  { display: block; }
[data-theme="dark"] .kf-theme-toggle__moon { display: none; }

/* ==========================================
   BREADCRUMBS
   ========================================== */
.kf-breadcrumbs { margin: 16px 0; font-size: 12px; color: var(--kf-text-3); }
.kf-breadcrumbs ol { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kf-breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 8px; color: var(--kf-border-2); }
.kf-breadcrumbs a { color: var(--kf-text-3); }
.kf-breadcrumbs a:hover { color: var(--kf-accent); }
.kf-breadcrumbs li:last-child { color: var(--kf-text-2); font-weight: 600; }

/* ==========================================
   ARCHIVE / PAGE HEADER
   ========================================== */
.kf-archive-header {
  margin: 20px 0 28px; padding: 24px;
  background: linear-gradient(135deg, var(--kf-accent-glow), transparent);
  border: 1px solid var(--kf-border); border-radius: var(--kf-r-lg);
}
.kf-archive-header__title { font-size: 26px; font-weight: 800; margin-bottom: 6px; }
.kf-archive-header__desc { font-size: 14px; color: var(--kf-text-3); }

/* ==========================================
   404
   ========================================== */
.kf-404 { text-align: center; padding: 80px 20px; }
.kf-404__code { font-size: 90px; font-weight: 900; color: var(--kf-accent); font-family: var(--kf-font-head); line-height: 1; }
.kf-404 h2 { font-size: 22px; margin: 14px 0; }
.kf-404 p { color: var(--kf-text-3); margin-bottom: 24px; }

/* ==========================================
   SEARCH RESULTS PAGE
   ========================================== */
.kf-search-form { margin: 24px 0; }
.kf-search-input-wrap { position: relative; }
.kf-search-input-wrap input {
  width: 100%; padding: 16px 50px 16px 50px; border: 2px solid var(--kf-border);
  border-radius: var(--kf-r-full); background: var(--kf-bg-card); color: var(--kf-text);
  font-size: 15px; transition: all var(--kf-ease);
}
.kf-search-input-wrap input:focus { outline: none; border-color: var(--kf-accent); box-shadow: 0 0 0 4px var(--kf-accent-glow); }
.kf-search-input-wrap svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--kf-text-3); }
.kf-search-results-info { font-size: 13px; color: var(--kf-text-3); margin: 12px 0 20px; }

/* ==========================================
   LOADING SKELETON
   ========================================== */
.kf-skeleton { background: linear-gradient(90deg, var(--kf-bg-3) 25%, var(--kf-bg-el) 50%, var(--kf-bg-3) 75%); background-size: 200% 100%; animation: kf-shimmer 1.5s infinite; border-radius: var(--kf-r-md); }
@keyframes kf-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ==========================================
   SEARCH OVERLAY
   ========================================== */
.kf-search-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(9,9,11,0.97); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
  padding-top: 100px;
}
.kf-search-overlay.open { opacity: 1; visibility: visible; }

.kf-search-overlay__form {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--kf-r-lg); padding: 16px 20px;
}
.kf-search-overlay__form svg { color: rgba(255,255,255,0.5); flex-shrink: 0; }
.kf-search-overlay__form input {
  flex: 1; background: none; border: none; color: #fff; font-size: 18px; outline: none;
}
.kf-search-overlay__form input::placeholder { color: rgba(255,255,255,0.35); }
#kfSearchClose { background: none; border: none; color: rgba(255,255,255,0.5); cursor: pointer; display: flex; }
#kfSearchClose:hover { color: #fff; }

.kf-search-live-results {
  margin-top: 16px; max-height: 60vh; overflow-y: auto;
  display: none; flex-direction: column; gap: 4px;
}
.kf-search-live-results.show { display: flex; }

.kf-search-result-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-radius: var(--kf-r-md); text-decoration: none; transition: background var(--kf-ease);
}
.kf-search-result-item:hover { background: rgba(255,255,255,0.05); }
.kf-search-result-thumb {
  width: 40px; height: 40px; border-radius: var(--kf-r-sm); overflow: hidden;
  background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.3); flex-shrink: 0;
}
.kf-search-result-thumb img { width: 100%; height: 100%; object-fit: cover; }
.kf-search-result-info { display: flex; flex-direction: column; min-width: 0; }
.kf-search-result-title { font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kf-search-result-artist { font-size: 12px; color: rgba(255,255,255,0.45); }
.kf-search-no-results { padding: 20px; text-align: center; color: rgba(255,255,255,0.4); font-size: 14px; }

/* Header hide on scroll down */
#kf-header { transition: transform .3s ease; }
#kf-header.kf-header--hide { transform: translateY(-100%); }

/* ==========================================
   RESPONSIVE — global tweaks
   ========================================== */
@media (max-width: 1024px) {
  .kf-container { padding: 0 16px; }
}

@media (max-width: 768px) {
  .kf-section-title { font-size: 16px; }
  .kf-download-box, .kf-reactions, .kf-comment-form { padding: 16px; }
  .kf-comment-list .children { margin-left: 12px; padding-left: 12px; }
  .kf-footer-bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  .kf-hero { border-radius: var(--kf-r-lg); }
  .kf-player { padding: 14px; gap: 10px; }
  .kf-player__art { width: 44px; height: 44px; }
  .kf-player__controls { gap: 6px; }
  .kf-player__btn { width: 38px; height: 38px; }
  .kf-player__btn--sm { width: 30px; height: 30px; }
}

/* ==========================================
   PRINT / ACCESSIBILITY
   ========================================== */
.kf-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  background: var(--kf-accent); color: #fff; padding: 10px 18px; border-radius: var(--kf-r-md);
}
.kf-skip-link:focus { left: 10px; top: 10px; }

*:focus-visible { outline: 2px solid var(--kf-accent); outline-offset: 2px; }

/* ============================================================
   HOMEPAGE SECTIONS — Trending / Songs Grid / Albums Grid
   ============================================================ */

/* ==========================================
   TRENDING NOW — horizontal ranked row
   ========================================== */
.kf-trending-row {
  display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: thin; margin-bottom: 8px;
}
.kf-trending-row::-webkit-scrollbar { height: 6px; }
.kf-trending-row::-webkit-scrollbar-thumb { background: var(--kf-border-2); border-radius: 3px; }

.kf-trending-card {
  flex: 0 0 150px; display: flex; flex-direction: column; gap: 8px;
  text-decoration: none; position: relative;
}

.kf-trending-card__rank {
  position: absolute; top: -6px; left: -6px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--kf-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--kf-font-head); font-size: 16px; font-weight: 800;
  border: 3px solid var(--kf-bg); box-shadow: var(--kf-shadow);
}
.kf-trending-card:nth-child(1) .kf-trending-card__rank { background: linear-gradient(135deg,#fbbf24,#f59e0b); }
.kf-trending-card:nth-child(2) .kf-trending-card__rank { background: linear-gradient(135deg,#cbd5e1,#94a3b8); color:#1e293b; }
.kf-trending-card:nth-child(3) .kf-trending-card__rank { background: linear-gradient(135deg,#fb923c,#c2410c); }

.kf-trending-card__art {
  width: 150px; height: 150px; max-width: 100%;
  border-radius: var(--kf-r-md); overflow: hidden;
  background: var(--kf-bg-3); border: 1px solid var(--kf-border);
  transition: transform var(--kf-ease);
  flex-shrink: 0;
}
.kf-trending-card:hover .kf-trending-card__art { transform: translateY(-3px); box-shadow: var(--kf-shadow-md); }
.kf-trending-card__art img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
.kf-trending-card__placeholder { width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--kf-text-muted); }

.kf-trending-card__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kf-trending-card__title {
  font-size: 13px; font-weight: 700; color: var(--kf-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35;
}
.kf-trending-card:hover .kf-trending-card__title { color: var(--kf-accent); }
.kf-trending-card__artist { font-size: 11px; color: var(--kf-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kf-trending-card__views {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; color: var(--kf-text-muted); font-family: var(--kf-font-mono);
}
.kf-trending-card__views svg { opacity: .6; }

@media (max-width: 560px) {
  .kf-trending-card { flex: 0 0 120px; }
  .kf-trending-card__art { width: 120px; height: 120px; }
}

/* ==========================================
   LATEST SONGS — grid cards
   ========================================== */
.kf-song-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media (max-width: 860px) { .kf-song-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .kf-song-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }

.kf-song-card {
  background: var(--kf-bg-card); border: 1px solid var(--kf-border);
  border-radius: var(--kf-r-lg); overflow: hidden; transition: all var(--kf-ease);
}
.kf-song-card:hover { border-color: var(--kf-accent); box-shadow: var(--kf-shadow-md); transform: translateY(-3px); }

.kf-song-card__art {
  position: relative; display: block; aspect-ratio: 1;
  background: var(--kf-bg-3); overflow: hidden;
}
.kf-song-card__art img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; object-position: center; transition: transform .4s; }
.kf-song-card:hover .kf-song-card__art img { transform: scale(1.06); }
.kf-song-card__placeholder { width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--kf-text-muted); }

.kf-song-card__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.3); opacity: 0; transition: opacity var(--kf-ease); color: #fff;
}
.kf-song-card:hover .kf-song-card__play { opacity: 1; }

.kf-song-card__dl {
  position: absolute; bottom: 8px; right: 8px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--kf-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; opacity: 0; transform: translateY(6px);
  transition: all var(--kf-ease);
}
.kf-song-card:hover .kf-song-card__dl { opacity: 1; transform: translateY(0); }
.kf-song-card__dl:hover { background: var(--kf-accent-2); }

.kf-song-card__body { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.kf-song-card__genre {
  font-size: 10px; font-weight: 800; color: var(--kf-accent);
  text-transform: uppercase; letter-spacing: .8px;
}
.kf-song-card__title {
  font-size: 14px; font-weight: 700; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kf-song-card__title a { color: var(--kf-text); }
.kf-song-card:hover .kf-song-card__title a { color: var(--kf-accent); }
.kf-song-card__artist { font-size: 12px; color: var(--kf-text-3); }

/* ==========================================
   LATEST ALBUMS — grid cards
   ========================================== */
.kf-album-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
@media (max-width: 960px) { .kf-album-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .kf-album-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.kf-album-card {
  background: var(--kf-bg-card); border: 1px solid var(--kf-border);
  border-radius: var(--kf-r-lg); overflow: hidden; transition: all var(--kf-ease);
}
.kf-album-card:hover { border-color: var(--kf-accent); box-shadow: var(--kf-shadow-md); transform: translateY(-3px); }

.kf-album-card__art {
  position: relative; display: block; aspect-ratio: 1; background: var(--kf-bg-3); overflow: hidden;
}
.kf-album-card__art img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; object-position: center; transition: transform .4s; }
.kf-album-card:hover .kf-album-card__art img { transform: scale(1.06); }
.kf-album-card__placeholder { width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--kf-text-muted); }

.kf-album-card__type {
  position: absolute; top: 8px; left: 8px;
  background: rgba(15,23,42,0.85); color: #fff; backdrop-filter: blur(4px);
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  padding: 3px 10px; border-radius: var(--kf-r-full);
}

.kf-album-card__body { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.kf-album-card__title { font-size: 14px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kf-album-card__title a { color: var(--kf-text); }
.kf-album-card:hover .kf-album-card__title a { color: var(--kf-accent); }
.kf-album-card__artist { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--kf-text-3); }
.kf-album-card__artist svg { opacity: .6; flex-shrink: 0; }
.kf-album-card__meta { display: flex; gap: 10px; font-size: 11px; color: var(--kf-text-muted); font-family: var(--kf-font-mono); }
.kf-album-card__dl {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 6px; padding: 8px; border-radius: var(--kf-r-sm);
  background: var(--kf-accent-glow); color: var(--kf-accent);
  font-size: 12px; font-weight: 700; text-decoration: none; transition: all var(--kf-ease);
}
.kf-album-card__dl:hover { background: var(--kf-accent); color: #fff; }

/* ==========================================
   ALBUM SINGLE / ARCHIVE PAGE
   ========================================== */
.kf-album-hero {
  display: grid; grid-template-columns: 220px 1fr; gap: 24px;
  background: var(--kf-bg-card); border: 1px solid var(--kf-border);
  border-radius: var(--kf-r-lg); padding: 24px; margin: 20px 0;
}
@media (max-width: 600px) { .kf-album-hero { grid-template-columns: 1fr; } }
.kf-album-hero__art {
  width: 100%; aspect-ratio: 1; border-radius: var(--kf-r-md); overflow: hidden;
  background: var(--kf-bg-3); display: flex; align-items: center; justify-content: center; color: var(--kf-text-muted);
}
.kf-album-hero__art img { width: 100%; height: 100%; object-fit: cover; }
.kf-album-hero__info { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.kf-album-hero__title { font-size: 28px; font-weight: 800; }
.kf-album-hero__artist { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--kf-text-2); }
.kf-album-hero__meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--kf-text-3); }
.kf-album-hero__meta span { display: flex; align-items: center; gap: 5px; }

/* ============================================================
   ICON GENRE BAR — pills with SVG icons
   ============================================================ */
.kf-genre-bar { background: var(--kf-header-bg); border-bottom: 1px solid rgba(255,255,255,0.06); }
.kf-genre-bar__inner { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:10px 20px; -ms-overflow-style:none; }
.kf-genre-bar__inner::-webkit-scrollbar { display:none; }

.kf-genre-pill {
  flex-shrink: 0; display:flex; align-items:center; gap:6px;
  padding: 6px 14px 6px 10px;
  font-size: 12px; font-weight: 600;
  color: rgba(248,250,252,0.6); text-decoration:none;
  border-radius: var(--kf-r-full);
  border: 1px solid transparent;
  transition: all var(--kf-ease); white-space:nowrap;
}
.kf-genre-pill__icon { display:flex; align-items:center; flex-shrink:0; opacity:.7; }
.kf-genre-pill:hover, .kf-genre-pill.active {
  background: var(--kf-accent-glow);
  color: var(--kf-accent-2);
  border-color: rgba(34,197,94,0.3);
}
.kf-genre-pill:hover .kf-genre-pill__icon,
.kf-genre-pill.active .kf-genre-pill__icon { opacity:1; color:var(--kf-accent-2); }

/* ============================================================
   ARTIST SLIDER — circular cards, left↔right slideable
   ============================================================ */
.kf-artists-nav { display:flex; gap:6px; align-items:center; }
.kf-artists-btn {
  width:32px; height:32px; border-radius:50%;
  background:var(--kf-bg-3); border:1px solid var(--kf-border);
  color:var(--kf-text-2); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all var(--kf-ease);
}
.kf-artists-btn:hover { background:var(--kf-accent); border-color:var(--kf-accent); color:#fff; }

.kf-artists-slider-wrap { overflow:hidden; margin-bottom:8px; position:relative; }
.kf-artists-slider {
  display:flex; gap:24px;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  padding: 12px 4px;
}

.kf-artist-card {
  flex: 0 0 100px; display:flex; flex-direction:column;
  align-items:center; gap:8px; text-decoration:none;
  cursor:pointer; transition:transform var(--kf-ease);
}
.kf-artist-card:hover { transform:translateY(-4px); }

.kf-artist-card__avatar {
  position:relative; width:88px; height:88px;
  border-radius:50%; overflow:hidden;
  border: 3px solid var(--kf-border);
  background:linear-gradient(135deg,var(--kf-accent-glow),var(--kf-bg-3));
  display:flex; align-items:center; justify-content:center;
  transition:border-color var(--kf-ease), box-shadow var(--kf-ease);
}
.kf-artist-card:hover .kf-artist-card__avatar {
  border-color:var(--kf-accent);
  box-shadow:0 0 0 4px var(--kf-accent-glow);
}
.kf-artist-card__avatar img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.kf-artist-card__initials {
  font-size:28px; font-weight:800; color:var(--kf-accent);
  font-family:var(--kf-font-head);
}

/* Blue verified badge */
.kf-artist-card__verified {
  position:absolute; bottom:4px; right:4px;
  width:20px; height:20px; border-radius:50%;
  background:#2563eb; color:#fff;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--kf-bg);
  box-shadow:0 1px 4px rgba(37,99,235,0.4);
}
[data-theme="dark"] .kf-artist-card__verified { border-color:var(--kf-bg-card); }

.kf-artist-card__name {
  font-size:13px; font-weight:700; color:var(--kf-text);
  text-align:center; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; max-width:96px; line-height:1.3;
  transition:color var(--kf-ease);
}
.kf-artist-card:hover .kf-artist-card__name { color:var(--kf-accent); }

.kf-artist-card__genre {
  font-size:10px; font-weight:600; color:var(--kf-text-3);
  text-align:center; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; max-width:96px;
  text-transform:uppercase; letter-spacing:.5px;
}

/* ============================================================
   TOP 5 OF THE WEEK — inline sidebar on single post
   ============================================================ */
.kf-top5 {
  margin:32px 0; background:var(--kf-bg-card);
  border:1px solid var(--kf-border); border-radius:var(--kf-r-lg);
  overflow:hidden;
}
.kf-top5__header {
  display:flex; align-items:center; gap:8px;
  padding:14px 18px; border-bottom:1px solid var(--kf-border);
  font-size:12px; font-weight:800; text-transform:uppercase;
  letter-spacing:1px; color:var(--kf-text-3); background:var(--kf-bg-2);
}
.kf-top5__header svg { color:var(--kf-accent); }
.kf-top5__list { display:flex; flex-direction:column; }

.kf-top5__item {
  display:flex; align-items:center; gap:12px;
  padding:12px 18px; border-bottom:1px solid var(--kf-border);
  text-decoration:none; transition:background var(--kf-ease);
}
.kf-top5__item:last-child { border-bottom:none; }
.kf-top5__item:hover { background:var(--kf-bg-el); }

.kf-top5__rank {
  width:24px; height:24px; border-radius:6px; flex-shrink:0;
  background:var(--kf-bg-3); color:var(--kf-text-3);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; font-family:var(--kf-font-mono);
}
.kf-top5__rank--top { background:var(--kf-accent); color:#fff; }
.kf-top5__art {
  width:44px; height:44px; border-radius:8px; overflow:hidden; flex-shrink:0;
  background:var(--kf-bg-3); display:flex; align-items:center; justify-content:center;
  color:var(--kf-text-muted);
}
.kf-top5__art img { width:100%; height:100%; object-fit:cover; }
.kf-top5__info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.kf-top5__title {
  font-size:14px; font-weight:700; color:var(--kf-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color var(--kf-ease);
}
.kf-top5__item:hover .kf-top5__title { color:var(--kf-accent); }
.kf-top5__artist { font-size:11px; color:var(--kf-text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kf-top5__views { font-size:11px; color:var(--kf-text-muted); font-family:var(--kf-font-mono); flex-shrink:0; }

/* ============================================================
   COMMENT VOTE BUTTONS — thumbs up/down
   ============================================================ */
.kf-comment__actions {
  display:flex; align-items:center; gap:12px; margin-top:10px; flex-wrap:wrap;
}
.kf-comment-votes { display:flex; align-items:center; gap:6px; }
.kf-vote-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px; border-radius:var(--kf-r-full);
  border:1px solid var(--kf-border); background:var(--kf-bg-3);
  cursor:pointer; font-size:12px; font-weight:600;
  color:var(--kf-text-3); font-family:var(--kf-font-body);
  transition:all var(--kf-ease); line-height:1;
}
.kf-vote-btn--up:hover, .kf-vote-btn--up.voted {
  background:rgba(34,197,94,0.12); border-color:var(--kf-accent);
  color:var(--kf-accent);
}
.kf-vote-btn--down:hover, .kf-vote-btn--down.voted {
  background:rgba(239,68,68,0.1); border-color:#ef4444; color:#ef4444;
}
.kf-vote-btn.voted { pointer-events:none; }
.kf-vote-count { font-family:var(--kf-font-mono); font-weight:700; }

/* Score badge */
.kf-comment__score {
  font-size:11px; font-weight:800; padding:2px 8px;
  border-radius:var(--kf-r-full); font-family:var(--kf-font-mono);
}
.kf-comment__score--pos { background:rgba(34,197,94,0.12); color:var(--kf-accent); }
.kf-comment__score--neg { background:rgba(239,68,68,0.1); color:#ef4444; }
.kf-comment__pending { font-size:12px; color:var(--kf-text-muted); display:block; margin-bottom:6px; }

/* Reply link update */
.kf-comment__reply {
  display:inline-flex; align-items:center; gap:4px;
  font-size:12px; font-weight:700; color:var(--kf-accent);
  background:none; border:none; padding:0; cursor:pointer; font-family:inherit;
}
.kf-comment__reply:hover { text-decoration:underline; }

/* ============================================================
   YOU MIGHT ALSO LIKE
   ============================================================ */
.kf-ymala { margin:12px 0 40px; }


/* ============================================================
   ARTIST PLUGIN INTEGRATION — inline link + verified badge
   Shown wherever an artist name appears, if the KarmaFlex
   Artists plugin provides a matching verified profile.
   ============================================================ */
.kf-artist-link {
  color: inherit; text-decoration: none; transition: color var(--kf-ease);
}
.kf-artist-link:hover { color: var(--kf-accent); text-decoration: underline; }

.kf-inline-verified {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: #2563eb; color: #fff; vertical-align: middle;
  margin-left: 2px; flex-shrink: 0;
}
.kf-inline-verified svg { width: 8px; height: 8px; }

/* ============================================================
   EMPTY STATE NOTICE — admin-only diagnostic message
   Shown only to logged-in editors/admins when a section has
   no data to display, so they know exactly what to do instead
   of the section just silently disappearing.
   ============================================================ */
.kf-empty-notice {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--kf-bg-el); border: 1px dashed var(--kf-border-2);
  border-radius: var(--kf-r-lg); padding: 16px 18px; margin-bottom: 24px;
}
.kf-empty-notice svg { color: var(--kf-accent); flex-shrink: 0; margin-top: 2px; }
.kf-empty-notice strong { display: block; font-size: 13px; color: var(--kf-text); margin-bottom: 4px; }
.kf-empty-notice p { font-size: 13px; color: var(--kf-text-3); line-height: 1.6; margin: 0; }
.kf-empty-notice a { color: var(--kf-accent); font-weight: 600; }
.kf-empty-notice a:hover { text-decoration: underline; }