/* ══════════════════════════════════════════════════════
   DayGuitar – chord-single.css
   Single chord song page
   ══════════════════════════════════════════════════════ */

/* ── HERO ────────────────────────────────────────────── */
.dg-chs-hero{background:linear-gradient(155deg,rgba(24,14,6,.98) 0%,rgba(18,11,4,.9) 70%,var(--bg) 100%);padding:36px 0 40px;border-bottom:1px solid var(--line)}
.dg-chs-hero__inner{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;padding-top:10px;flex-wrap:wrap}
.dg-chs-hero__main{flex:1;min-width:280px}

/* Badges row */
.dg-chs-hero__badges{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.dg-chs-badge{display:inline-flex;align-items:center;padding:3px 11px;border-radius:999px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;border:1px solid transparent}
.dg-chs-badge--genre{color:var(--gold);border-color:rgba(255,188,75,.25);background:rgba(255,188,75,.1)}
.dg-chs-badge--rhythm{color:#74d6ff;border-color:rgba(116,214,255,.25);background:rgba(116,214,255,.1)}

/* Title */
.dg-chs-hero__title{font-size:clamp(26px,4vw,52px);font-weight:900;line-height:1.05;letter-spacing:-.04em;margin:0 0 10px;color:var(--head)}

/* Credits */
.dg-chs-hero__credits{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.dg-chs-credit{display:flex;align-items:center;gap:5px;font-size:15px;color:var(--muted)}
.dg-chs-credit a{color:var(--text);font-weight:700;text-decoration:none;transition:.15s}
.dg-chs-credit a:hover{color:var(--gold)}
.dg-chs-credit--composer{font-size:14px}
.dg-chs-credit-sep{color:var(--line)}

/* Pills */
.dg-chs-hero__pills{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.dg-chs-pill{display:flex;flex-direction:column;align-items:center;padding:10px 18px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line);min-width:78px;text-align:center}
.dg-chs-pill__label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:3px}
.dg-chs-pill__val{font-size:20px;font-weight:900;color:var(--head)}
.dg-chs-pill--easy{border-color:rgba(255,188,75,.28);background:rgba(255,188,75,.06)}
.dg-chs-pill--easy .dg-chs-pill__val{color:var(--gold)}
.dg-chs-pill--capo{border-color:rgba(255,116,56,.28);background:rgba(255,116,56,.06)}
.dg-chs-pill--capo .dg-chs-pill__val{color:var(--orange)}

/* Main chord chips in hero */
.dg-chs-hero__chords{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.dg-chs-hero__chords-label{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-right:4px}
.dg-chs-hero-chip{padding:6px 13px;border-radius:10px;background:rgba(255,255,255,.07);border:1px solid var(--line);font-weight:900;color:#ffe1a1;font-size:14px}

/* Key display (right side) */
.dg-chs-hero__key{flex-shrink:0}
.dg-chs-key-display{display:flex;flex-direction:column;align-items:center;justify-content:center;width:110px;height:110px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid var(--line);text-align:center}
.dg-chs-key-display__note{font-size:42px;font-weight:900;color:var(--gold);line-height:1}
.dg-chs-key-display__label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:4px}

/* ── TOOLBAR ─────────────────────────────────────────── */
.dg-chs-toolbar{background:rgba(18,11,4,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding:8px 0;transition:box-shadow .2s}
.dg-chs-toolbar.is-sticky{position:sticky;top:0;z-index:90;box-shadow:0 4px 28px rgba(0,0,0,.5)}
.dg-chs-toolbar__inner{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:0 2px}
.dg-chs-toolbar__inner::-webkit-scrollbar{display:none}
.dg-chs-tb-group{display:flex;align-items:center;gap:4px;flex-shrink:0}
.dg-chs-tb-divider{width:1px;height:22px;background:var(--line);flex-shrink:0}
.dg-chs-tb-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--text);font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);transition:.15s;white-space:nowrap;flex-shrink:0}
.dg-chs-tb-btn:hover{background:rgba(255,188,75,.1);border-color:rgba(255,188,75,.3);color:var(--gold)}
.dg-chs-tb-btn.is-active{background:var(--gold);color:#18100a;border-color:var(--gold)}
.dg-chs-tb-icon{padding:6px 10px}
.dg-chs-tb-reset{padding:4px 8px;font-size:16px;background:none;border:none;color:var(--muted);cursor:pointer;transition:.15s;opacity:.4}
.dg-chs-tb-reset:hover{color:var(--gold);opacity:1}
.dg-chs-tb-key{min-width:36px;text-align:center;font-size:15px;font-weight:900;color:var(--gold);padding:0 2px}
.dg-chs-mode-toggle{background:rgba(255,255,255,.04);border-radius:10px;padding:3px;gap:2px}
.dg-chs-range{-webkit-appearance:none;appearance:none;width:72px;height:3px;border-radius:2px;background:var(--line);outline:none;cursor:pointer;flex-shrink:0}
.dg-chs-range::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--gold);cursor:pointer}
.dg-chs-range::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--gold);border:none}
.dg-chs-tb-scroll.is-active{background:rgba(255,116,56,.15);border-color:rgba(255,116,56,.4);color:var(--orange)}
.dg-chs-tb-print{margin-left:auto}

/* ── BODY LAYOUT ─────────────────────────────────────── */
.dg-chs-body{padding-top:36px;padding-bottom:60px;max-width:860px;margin-left:auto;margin-right:auto;display:flex;flex-direction:column;gap:48px}
.dg-chs-section{min-width:0}
.dg-chs-section-title{display:flex;align-items:center;gap:9px;font-size:20px;font-weight:900;margin:0 0 20px;letter-spacing:-.02em}

/* ── TIPS / STRUMMING ────────────────────────────────── */
.dg-chs-tips{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:16px;padding:18px 22px;display:flex;flex-direction:column;gap:10px}
.dg-chs-tip-row{display:flex;align-items:baseline;gap:10px;font-size:14px}
.dg-chs-tip-label{font-weight:800;color:var(--muted);flex-shrink:0}
.dg-chs-strum{background:rgba(255,188,75,.1);color:var(--gold);border:1px solid rgba(255,188,75,.25);padding:3px 10px;border-radius:8px;font-family:'Courier New',monospace;font-size:14px;font-weight:700;letter-spacing:.1em}

/* ── VIDEO ───────────────────────────────────────────── */
.dg-chs-video .dg-video-wrap{border-radius:16px;overflow:hidden}

/* ── LYRICS ──────────────────────────────────────────── */
.dg-chs-lyrics-section{--lyrics-font:16px;--chord-font:13px}
.dg-chs-lyrics,.dg-chs-plain-lyrics{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px 32px}
.dg-chs-stanza{margin-bottom:28px}
.dg-chs-stanza:last-child{margin-bottom:0}
.dg-chs-stanza--chorus{background:rgba(255,188,75,.04);border-left:3px solid rgba(255,188,75,.4);border-radius:0 12px 12px 0;padding:14px 18px;margin-left:0;margin-right:0}
.dg-chs-empty{color:var(--muted);font-style:italic;padding:24px;text-align:center}

/* ── CHORD-ABOVE FORMAT ──────────────────────────────── */
/* Each lyric paragraph line is a flex row of ca-unit columns */
.dg-chs-lyric-line{
  display:flex;flex-wrap:wrap;align-items:flex-end;
  margin:0 0 1px;line-height:1;
}
/* Each unit: chord name on top, text syllable below */
.ca-unit{display:inline-flex;flex-direction:column;align-items:flex-start;white-space:nowrap}
/* Chord label */
.ca-chord{
  display:block;
  font-size:var(--chord-font,13px);font-weight:900;
  color:#ff9640;font-family:var(--font);
  line-height:1.4;min-height:1.4em;
  white-space:nowrap;padding-right:2px;
}
.ca-chord--empty{color:transparent;pointer-events:none;user-select:none}
/* Lyric text below the chord */
.ca-text{
  display:block;
  font-size:var(--lyrics-font,16px);
  line-height:1.85;
  color:var(--text);
  font-family:'Courier New',Courier,monospace;
  white-space:pre;
}
/* Section labels: ĐK, Chorus, etc. */
.dg-chs-lyric-label{
  font-size:12px;font-weight:900;color:var(--gold);
  margin:8px 0 6px;text-transform:uppercase;letter-spacing:.06em;
  font-family:var(--font);
}
/* Plain lyrics mode */
.dg-chs-plain-line{
  font-size:var(--lyrics-font,16px);
  line-height:1.85;
  margin:0 0 1px;
  color:var(--text);
  font-family:'Courier New',Courier,monospace;
}

/* ── TAB BLOCK ───────────────────────────────────────── */
.dg-chs-tab-wrap{position:relative}
.dg-chs-tab-copy{position:absolute;top:12px;right:14px;padding:4px 12px;border-radius:8px;background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font);transition:.15s}
.dg-chs-tab-copy:hover{color:var(--gold);border-color:rgba(255,188,75,.3);background:rgba(255,188,75,.07)}
.dg-chs-tab-pre{background:rgba(0,0,0,.55);border:1px solid var(--line);border-radius:16px;padding:28px;font-family:'Courier New',Courier,monospace;font-size:14px;line-height:1.75;color:#e8d8b8;overflow-x:auto;white-space:pre;margin:0;scrollbar-width:thin;scrollbar-color:var(--line) transparent}

/* ── CHORD DIAGRAMS ──────────────────────────────────── */
.dg-chs-diagrams-section .dg-chs-section-title{color:var(--head)}
.dg-chs-diagrams{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.dg-chs-diagram-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px 12px;background:var(--card);border:1px solid var(--line);border-radius:16px;transition:.2s;cursor:default}
.dg-chs-diagram-card:hover{border-color:rgba(255,188,75,.3);background:rgba(255,188,75,.04)}
.dg-chs-diagram-svg{display:block;line-height:0}
.dg-chs-diagram-name{font-size:14px;font-weight:900;color:var(--head);text-align:center}

/* ── RELATED SECTIONS ────────────────────────────────── */
.dg-chs-related-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.dg-chs-related-see-all{font-size:13px;font-weight:700;color:var(--gold);text-decoration:none;flex-shrink:0}
.dg-chs-related-see-all:hover{text-decoration:underline}
.dg-chs-related-scroll{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.dg-chs-related-card{display:flex;flex-direction:column;gap:6px;padding:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;text-decoration:none;transition:.2s}
.dg-chs-related-card:hover{border-color:rgba(255,188,75,.35);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25);text-decoration:none}
.dg-chs-rc-header{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.dg-chs-rc-title{font-size:13px;font-weight:800;color:var(--head);line-height:1.3;flex:1;min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dg-chs-rc-diff{font-size:11px;font-weight:800;flex-shrink:0;text-transform:uppercase}
.dg-chs-rc-singer{font-size:12px;color:var(--muted)}
.dg-chs-rc-meta{display:flex;flex-wrap:wrap;gap:4px}
.dg-chs-rc-tag{font-size:11px;font-weight:700;background:rgba(255,255,255,.06);padding:2px 8px;border-radius:6px;color:var(--muted)}
.dg-chs-rc-prog{font-size:11px;color:var(--gold);font-weight:700}

/* ── COMMENTS ────────────────────────────────────────── */
.dg-chs-comments-section .dg-chs-section-title{gap:8px}
.dg-chs-comment-count{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:rgba(255,188,75,.15);color:var(--gold);font-size:12px;font-weight:800}
.dg-chs-comments-intro{font-size:14px;color:var(--muted);margin-bottom:24px;line-height:1.6}
.dg-chs-comments-list{display:flex;flex-direction:column;gap:20px;margin-bottom:32px}

/* Comment item */
.dg-comment{display:flex;gap:14px;padding:20px;background:var(--card);border:1px solid var(--line);border-radius:16px}
.dg-comment--pending{opacity:.6;border-style:dashed}
.dg-comment__avatar img,.dg-comment__avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;overflow:hidden}
.dg-comment__body{flex:1;min-width:0}
.dg-comment__meta{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.dg-comment__author{font-size:14px;font-weight:800;color:var(--head)}
.dg-comment__author a{color:var(--head);text-decoration:none}
.dg-comment__date{font-size:12px;color:var(--muted)}
.dg-comment__text{font-size:14px;line-height:1.7;color:var(--text)}
.dg-comment__text p{margin:0 0 8px}
.dg-comment__text p:last-child{margin-bottom:0}
.dg-comment__pending{font-size:13px;color:var(--muted);font-style:italic;margin:0}
.dg-comment__actions{margin-top:10px}
.dg-comment__actions a,.comment-reply-link{font-size:12px;font-weight:700;color:var(--muted);text-decoration:none;transition:.15s}
.dg-comment__actions a:hover,.comment-reply-link:hover{color:var(--gold)}

/* Children comments */
.children{padding-left:36px;display:flex;flex-direction:column;gap:12px;margin-top:12px}

/* Comment form */
.dg-chs-comment-form{display:flex;flex-direction:column;gap:14px}
.dg-chs-cf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dg-chs-cf-input{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:12px 16px;color:var(--text);font-size:14px;font-family:var(--font);transition:.2s;box-sizing:border-box}
.dg-chs-cf-input:focus{outline:none;border-color:var(--gold);background:rgba(255,188,75,.04)}
.dg-chs-cf-textarea{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:var(--text);font-size:14px;font-family:var(--font);resize:vertical;min-height:110px;transition:.2s;box-sizing:border-box}
.dg-chs-cf-textarea:focus{outline:none;border-color:var(--gold);background:rgba(255,188,75,.04)}
.dg-chs-cf-input::placeholder,.dg-chs-cf-textarea::placeholder{color:var(--muted)}
.comment-form-comment label,.comment-form-author label,.comment-form-email label,.comment-notes{display:none}
.form-submit{margin:0}

/* ── PRINT ───────────────────────────────────────────── */
@media print{
  .dg-header,.dg-footer,.dg-chs-toolbar,.dg-chs-hero__key,.dg-chs-diagrams-section,.dg-chs-related,.dg-chs-comments-section,.dg-back-to-top,.dg-breadcrumb{display:none!important}
  .dg-chs-hero{background:#fff!important;color:#000!important;padding:12px 0!important}
  .dg-chs-hero__title,.dg-chs-section-title{color:#000!important}
  .dg-chs-lyrics,.dg-chs-plain-lyrics{background:#fff!important;border:none!important;padding:0!important}
  .ca-chord{color:#c33!important;font-size:11px!important}
  .ca-chord--empty{display:none!important}
  .ca-text,.dg-chs-plain-line{color:#000!important;font-size:13px!important}
  .dg-chs-body{max-width:100%!important}
}

/* ── RESPONSIVE ──────────────────────────────────────── */
@media(max-width:1100px){
  .dg-chs-related-scroll{grid-template-columns:repeat(3,1fr)}
  .dg-chs-diagrams{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:800px){
  .dg-chs-hero__inner{flex-direction:column;gap:20px}
  .dg-chs-hero__key{display:none}
  .dg-chs-body{gap:36px;padding-top:28px}
  .dg-chs-related-scroll{grid-template-columns:repeat(2,1fr)}
  .dg-chs-diagrams{grid-template-columns:repeat(3,1fr)}
  .dg-chs-cf-row{grid-template-columns:1fr}
}
@media(max-width:600px){
  .dg-chs-toolbar__inner{gap:7px}
  .dg-chs-tb-btn{padding:5px 9px;font-size:12px;gap:4px}
  .dg-chs-lyrics,.dg-chs-plain-lyrics{padding:18px 14px}
  .dg-chs-lyrics-section{--lyrics-font:14px;--chord-font:12px}
  .dg-chs-related-scroll{grid-template-columns:repeat(2,1fr)}
  .dg-chs-diagrams{grid-template-columns:repeat(2,1fr)}
  .children{padding-left:16px}
}
@media(max-width:400px){
  .dg-chs-hero__pills{gap:7px}
  .dg-chs-pill{min-width:66px;padding:8px 12px}
  .dg-chs-pill__val{font-size:18px}
}