.track-comments-button, .about-song-button, #album-header .about-album-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  margin: 8px 8px 0 0;
  padding: 0 9px;
  border: 1px solid rgba(67, 235, 209, .22);
  border-radius: 999px;
  background: rgba(67, 235, 209, .08);
  color: var(--cyan);
  font: 9px 'DM Mono', monospace;
  letter-spacing: .06em;
  cursor: pointer;
}
.track-comments-button:hover, .about-song-button:hover, #album-header .about-album-button:hover { background: rgba(67, 235, 209, .17); border-color: var(--cyan); }
.track-comments-button svg, .about-song-button svg, #album-header .about-album-button svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.comments-modal { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(0, 7, 10, .84); backdrop-filter: blur(9px); }
.comments-modal.hidden { display: none; }
.comments-dialog { position: relative; display: flex; flex-direction: column; width: min(690px, 100%); max-height: min(780px, 92vh); overflow: hidden; border: 1px solid rgba(67, 235, 209, .65); background: #091a20; color: var(--text); box-shadow: 0 20px 80px rgba(0, 0, 0, .55); }
.comments-heading { padding: 25px 28px 17px; border-bottom: 1px solid var(--line); }
.comments-heading p { margin: 0 0 7px; color: var(--cyan); font: 10px 'DM Mono', monospace; letter-spacing: .15em; }
.comments-heading h2 { margin: 0; font-size: 21px; line-height: 1.3; }
.comments-heading .comments-track-byline { margin: 6px 0 0; color: var(--muted); font: 10px 'DM Mono', monospace; letter-spacing: .05em; }
.comments-close { position: absolute; z-index: 1; top: 13px; right: 15px; border: 0; background: transparent; color: var(--cyan); font-size: 27px; cursor: pointer; }
.comments-list { min-height: 74px; max-height: 35vh; overflow: auto; padding: 10px 28px; }
.comments-empty,.comments-loading { padding: 20px 0; color: var(--muted); font-size: 13px; }
.comment-item { padding: 13px 0; border-bottom: 1px solid var(--line); }
.comment-reply { margin: 8px 0 0 18px; padding: 11px 12px; border: 1px solid rgba(67, 235, 209, .22); border-left: 2px solid var(--cyan); background: rgba(67, 235, 209, .045); }
.comment-item:last-child { border-bottom: 0; }
.comment-item header { display: flex; align-items: baseline; gap: 10px; }
.comment-item strong { color: var(--text); font-size: 13px; }
.comment-item time { color: var(--muted); font: 9px 'DM Mono', monospace; }
.comment-item p { margin: 6px 0 0; color: #d2e2e0; font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.comments-form { display: grid; gap: 10px; padding: 17px 28px 23px; border-top: 1px solid var(--line); }
.comments-form label { color: var(--muted); font: 10px 'DM Mono', monospace; letter-spacing: .05em; }
.comments-form input:not([type="hidden"]),.comments-form textarea { width: 100%; margin-top: 5px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 2px; outline: 0; background: #061319; color: var(--text); font: 13px Manrope, sans-serif; }
.comments-form input:focus,.comments-form textarea:focus { border-color: var(--cyan); }
.comments-form textarea { min-height: 78px; max-height: 150px; resize: vertical; line-height: 1.5; }
.human-check { display: flex; align-items: end; gap: 12px; }
.human-check label { flex: 1; }
.human-check input { width: 90px!important; }
.comments-honeypot { position: absolute!important; left: -10000px!important; width: 1px!important; height: 1px!important; overflow: hidden!important; opacity: 0!important; }
.comments-submit { justify-self: start; min-height: 34px; padding: 0 14px; border: 1px solid var(--cyan); border-radius: 3px; background: rgba(67, 235, 209, .12); color: var(--cyan); font: 10px 'DM Mono', monospace; letter-spacing: .08em; cursor: pointer; }
.comments-submit:hover:not(:disabled) { background: rgba(67, 235, 209, .23); }
.comments-submit:disabled { opacity: .5; cursor: wait; }
.comments-status { min-height: 16px; margin: 0; color: var(--muted); font-size: 11px; }
.comments-status[data-error="true"] { color: #ff8a8a; }
@media (max-width: 600px) {
  .comments-modal { padding: 9px; }
  .comments-heading { padding: 22px 18px 14px; }
  .comments-list { padding: 8px 18px; max-height: 30vh; }
  .comment-reply { margin-left: 10px; }
  .comments-form { padding: 14px 18px 18px; }
}