:root {
  --cg-bg: #081225;
  --cg-surface: #ffffff;
  --cg-surface-soft: #f8fafc;
  --cg-border: rgba(15, 23, 42, 0.08);
  --cg-border-strong: rgba(148, 163, 184, 0.28);
  --cg-text: #0f172a;
  --cg-muted: #64748b;
  --cg-primary: #2563eb;
  --cg-primary-dark: #1d4ed8;
  --cg-success: #16a34a;
  --cg-radius-xl: 28px;
  --cg-radius-lg: 20px;
  --cg-shadow: 0 20px 60px rgba(2, 6, 23, 0.08);
  --cg-shadow-soft: 0 12px 32px rgba(15, 23, 42, 0.06);
}

/* =========================
   PAGE / HERO / SECTIONS
   ========================= */

.cg-page {
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.10), transparent 30%),
    radial-gradient(circle at top right, rgba(22, 163, 74, 0.10), transparent 28%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 26%, #f8fafc 100%);
}

.cg-hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 40px;
}

.cg-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(37, 99, 235, 0.14), transparent 28%),
    radial-gradient(circle at 85% 15%, rgba(22, 163, 74, 0.14), transparent 24%);
  pointer-events: none;
}

.cg-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  background: rgba(255, 255, 255, 0.72);
  color: var(--cg-primary);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  backdrop-filter: blur(10px);
}

.cg-hero-title {
  font-size: clamp(2.2rem, 5vw, 4.1rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: var(--cg-text);
  margin-bottom: 18px;
}

.cg-hero-title .accent {
  background: linear-gradient(90deg, #2563eb, #16a34a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cg-hero-lead {
  max-width: 900px;
  margin: 0 auto;
  color: var(--cg-muted);
  font-size: 1.08rem;
  line-height: 1.8;
}

.cg-section {
  padding: 72px 0;
}

.cg-section-sm {
  padding: 56px 0;
}

.cg-section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 28px;
}

.cg-section-eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cg-primary);
  font-weight: 700;
  margin-bottom: 10px;
}

.cg-section-title {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--cg-text);
  font-weight: 800;
}

.cg-section-desc {
  color: var(--cg-muted);
  max-width: 760px;
  margin: 10px 0 0;
}

/* =========================
   SEARCH / AUTOCOMPLETE
   ========================= */

.cg-search-shell {
  margin-top: 32px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12);
  border-radius: 24px;
  padding: 16px;
  backdrop-filter: blur(14px);
}

.cg-search-shell .form-control {
  min-height: 62px;
  border-radius: 16px;
  border: 1px solid var(--cg-border-strong);
  font-size: 15px;
  padding-inline: 18px;
  box-shadow: none;
}

.cg-search-shell .btn {
  min-height: 62px;
  border-radius: 16px;
  padding-inline: 20px;
  font-weight: 700;
}

.cg-search-hints {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.cg-search-hints a {
  text-decoration: none;
  color: var(--cg-muted);
  font-size: 13px;
  padding: 7px 12px;
  background: #fff;
  border: 1px solid var(--cg-border);
  border-radius: 999px;
  transition: all .18s ease;
}

.cg-search-hints a:hover {
  color: var(--cg-primary);
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.24);
}

.cg-search-note {
  margin-top: 14px;
  color: var(--cg-muted);
  font-size: 13px;
  line-height: 1.65;
}

.cg-autocomplete-wrap {
  position: relative;
}

.cg-autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 1200;
  display: none;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  text-align: left;
}

.cg-autocomplete-section-title {
  padding: 10px 14px 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #64748b;
  background: #f8fafc;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
}

.cg-autocomplete-section-title:first-child {
  border-top: 0;
}

.cg-autocomplete-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  text-decoration: none;
  color: #0f172a;
  transition: background-color .16s ease;
  border-top: 1px solid rgba(241, 245, 249, 0.9);
}

.cg-autocomplete-item:hover,
.cg-autocomplete-item.is-active {
  background: #f8fbff;
  color: #0f172a;
}

.cg-autocomplete-item:first-of-type {
  border-top: 0;
}

.cg-autocomplete-icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(22, 163, 74, 0.10));
  color: #2563eb;
  font-size: 13px;
  margin-top: 1px;
}

.cg-autocomplete-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cg-autocomplete-label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: #0f172a;
  word-break: break-word;
}

.cg-autocomplete-meta {
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
}

.cg-autocomplete-empty {
  padding: 16px 14px;
  font-size: 14px;
  color: #64748b;
}

.cg-autocomplete-footer {
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(226, 232, 240, 0.85);
  background: #fcfdff;
}

.cg-autocomplete-footer-note {
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 10px;
}

.cg-autocomplete-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cg-autocomplete-actions .btn {
  border-radius: 10px;
  font-weight: 700;
}

.cg-autocomplete-wrap.is-loading .form-control {
  background-image: linear-gradient(90deg, rgba(37,99,235,0.03), rgba(22,163,74,0.03));
}

.cg-autocomplete-mark {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
  font-weight: 800;
  padding: 0 2px;
  border-radius: 4px;
}

.cg-autocomplete-preview {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

.cg-autocomplete-item--artist .cg-autocomplete-label {
  font-size: 15px;
}

/* =========================
   GRIDS / PANELS / CARDS
   ========================= */

.cg-stats-grid,
.cg-card-grid {
  display: grid;
  gap: 20px;
}

.cg-stats-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 34px;
}

.cg-card-grid.quick-links {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.cg-card-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cg-card-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cg-panel,
.cg-stat-card,
.cg-song-card,
.cg-artist-card,
.cg-genre-card,
.cg-mini-card,
.cg-route-card {
  background: var(--cg-surface);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius-lg);
  box-shadow: var(--cg-shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cg-stat-card:hover,
.cg-song-card:hover,
.cg-artist-card:hover,
.cg-genre-card:hover,
.cg-mini-card:hover,
.cg-route-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.10);
  border-color: rgba(37, 99, 235, 0.20);
}

.cg-stat-card {
  padding: 24px;
  text-align: left;
}

.cg-stat-label {
  color: var(--cg-muted);
  font-size: 14px;
  margin-top: 8px;
}

.cg-stat-value {
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  color: var(--cg-text);
}

.cg-route-card,
.cg-song-card,
.cg-artist-card,
.cg-genre-card,
.cg-mini-card {
  height: 100%;
}

.cg-route-card .card-body,
.cg-song-card .card-body,
.cg-artist-card .card-body,
.cg-genre-card .card-body,
.cg-mini-card .card-body {
  padding: 22px;
}

.cg-route-card .card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 180px;
}

.cg-route-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef4ff;
  color: #2563eb;
  font-size: 16px;
  margin-bottom: 14px;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.cg-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cg-text);
  margin-bottom: 8px;
  line-height: 1.45;
  word-break: break-word;
}

.cg-card-title a,
.cg-artist-card a,
.cg-song-card a,
.cg-genre-card a {
  text-decoration: none;
  color: inherit;
}

.cg-card-text,
.cg-song-meta,
.cg-muted {
  color: var(--cg-muted);
  line-height: 1.7;
}

.cg-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.cg-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  text-decoration: none;
}

.cg-song-snippet {
  margin-top: 14px;
  color: #475569;
  font-size: 14px;
  line-height: 1.7;
}

.cg-artist-avatar,
.cg-genre-avatar {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  background: #eef4ff;
  color: var(--cg-primary);
  font-size: 22px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.cg-panel {
  padding: 28px;
}

.cg-breakdown-list {
  display: grid;
  gap: 12px;
}

.cg-breakdown-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--cg-surface-soft);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.cg-breakdown-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--cg-text);
}

.cg-breakdown-value {
  color: var(--cg-muted);
  font-size: 14px;
  font-weight: 600;
}

.cg-split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  gap: 24px;
  align-items: center;
}

/* =========================
   DARK BAND / CTA / FAQ
   ========================= */

.cg-cta-band {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.12), transparent 35%),
    linear-gradient(135deg, #0f172a 0%, #1e3a8a 55%, #0f766e 100%);
  color: #fff;
  border-radius: 28px;
  padding: 34px;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.20);
}

.cg-cta-band p {
  color: rgba(255, 255, 255, 0.80);
  margin-bottom: 0;
}

.cg-faq .accordion-item {
  border-radius: 18px !important;
  overflow: hidden;
  border: 1px solid var(--cg-border) !important;
  margin-bottom: 14px;
  box-shadow: var(--cg-shadow-soft);
}

.cg-faq .accordion-button {
  font-weight: 700;
  color: var(--cg-text);
  box-shadow: none !important;
}

.cg-faq .accordion-button:not(.collapsed) {
  background: #f8fbff;
  color: var(--cg-primary);
}

.cg-dark-strip {
  background: linear-gradient(90deg, #04112d 0%, #071839 45%, #081225 100%);
  color: #fff;
  border-radius: 34px;
  padding: 34px;
  box-shadow: 0 30px 80px rgba(8, 18, 37, 0.28);
  overflow: hidden;
}

.cg-dark-strip .cg-chip {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.10);
  color: #fff;
}

.cg-dark-strip .cg-section-title {
  color: #f8fafc;
}

.cg-dark-strip .cg-section-desc,
.cg-dark-strip p {
  color: rgba(226, 232, 240, 0.88);
}

.cg-dark-strip .cg-route-card {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(203, 213, 225, 0.78);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16);
}

.cg-dark-strip .cg-route-card .cg-card-title {
  color: #0f172a !important;
}

.cg-dark-strip .cg-route-card .cg-card-text {
  color: #64748b !important;
}

.cg-dark-strip .cg-route-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.20);
}


.cg-artist-card-v2,
.cg-genre-card-v2 {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  height: 100%;
}

.cg-artist-card-v2:hover,
.cg-genre-card-v2:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.10);
  border-color: rgba(37, 99, 235, 0.16);
}

.cg-artist-card-v2__link,
.cg-genre-card-v2__link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.cg-artist-card-v2__cover,
.cg-genre-card-v2__cover {
  position: relative;
  min-height: 74px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

.cg-artist-card-v2__cover::before,
.cg-genre-card-v2__cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.28), transparent 34%),
    radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.16), transparent 32%);
  pointer-events: none;
}

.cg-artist-card-v2__pattern,
.cg-genre-card-v2__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 22%, rgba(255,255,255,.36) 0 2px, transparent 2.5px),
    radial-gradient(circle at 76% 30%, rgba(255,255,255,.22) 0 2px, transparent 2.5px),
    radial-gradient(circle at 58% 76%, rgba(255,255,255,.18) 0 2px, transparent 2.5px),
    linear-gradient(135deg, rgba(255,255,255,.05) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.05) 50%, rgba(255,255,255,.05) 75%, transparent 75%, transparent);
  background-size: auto, auto, auto, 26px 26px;
}

.cg-artist-card-v2__cover-inner,
.cg-genre-card-v2__cover-inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.cg-artist-card-v2__cover-badge,
.cg-genre-card-v2__cover-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  backdrop-filter: blur(6px);
}

.cg-artist-card-v2__avatar,
.cg-genre-card-v2__avatar {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.cg-artist-card-v2__body,
.cg-genre-card-v2__body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cg-artist-card-v2__title,
.cg-genre-card-v2__title {
  font-size: 1.08rem;
  line-height: 1.35;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cg-artist-card-v2__meta,
.cg-genre-card-v2__meta {
  color: #64748b;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  min-height: 20px;
}

.cg-artist-card-v2__stats,
.cg-genre-card-v2__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cg-artist-card-v2__chip,
.cg-genre-card-v2__chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.cg-artist-card-v2__chip {
  background: rgba(124, 58, 237, 0.10);
  color: #6d28d9;
}

.cg-genre-card-v2__chip {
  background: rgba(22, 163, 74, 0.10);
  color: #15803d;
}

.cg-artist-card-v2__snippet,
.cg-genre-card-v2__snippet {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 44px;
}

.cg-artist-card-v2__footer,
.cg-genre-card-v2__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 4px;
}

.cg-artist-card-v2__cta,
.cg-genre-card-v2__cta {
  color: #2563eb;
  font-size: 13px;
  font-weight: 800;
}

.cg-artist-card-v2__icon,
.cg-genre-card-v2__icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  font-size: 14px;
}

.cg-theme-1 .cg-artist-card-v2__cover,
.cg-theme-1 .cg-genre-card-v2__cover { background: linear-gradient(135deg, #5b8def 0%, #4f7ee8 55%, #5aa8c8 100%); }

.cg-theme-2 .cg-artist-card-v2__cover,
.cg-theme-2 .cg-genre-card-v2__cover { background: linear-gradient(135deg, #55a8a1 0%, #59bcb5 55%, #72c8e3 100%); }

.cg-theme-3 .cg-artist-card-v2__cover,
.cg-theme-3 .cg-genre-card-v2__cover { background: linear-gradient(135deg, #8a72eb 0%, #7a7cf0 55%, #6d9af1 100%); }

.cg-theme-4 .cg-artist-card-v2__cover,
.cg-theme-4 .cg-genre-card-v2__cover { background: linear-gradient(135deg, #f19952 0%, #f2b14e 55%, #f5a56f 100%); }

.cg-theme-5 .cg-artist-card-v2__cover,
.cg-theme-5 .cg-genre-card-v2__cover { background: linear-gradient(135deg, #eb6d7f 0%, #ef7f93 55%, #f3a0af 100%); }

.cg-theme-6 .cg-artist-card-v2__cover,
.cg-theme-6 .cg-genre-card-v2__cover { background: linear-gradient(135deg, #6f7c92 0%, #647187 55%, #556176 100%); }

.cg-song-list-page {
  font-family: "Inter", "Be Vietnam Pro", "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.cg-song-list-page h1,
.cg-song-list-page h3,
.cg-song-list-page .btn,
.cg-song-list-page .form-control,
.cg-song-list-page .cg-tag {
  letter-spacing: 0;
}

.cg-song-list-page .cg-page-title {
  font-size: clamp(1.75rem, 2.8vw, 2.35rem);
  line-height: 1.25;
  font-weight: 800;
}

.cg-song-list-page .cg-search-input {
  min-height: 52px;
  font-size: 15px;
  line-height: 1.5;
}

.cg-song-list-page .cg-muted,
.cg-song-list-page p {
  line-height: 1.65;
}

.cg-search-top-card {
  padding: 24px;
}

.cg-search-shell--compact {
  margin-top: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.cg-search-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.cg-search-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #eef2f7;
}

.cg-search-toolbar-left {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.cg-search-toolbar-note {
  font-size: 13px;
  color: #64748b;
}

.cg-search-mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid #dbe4f0;
  background: #ffffff;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all .18s ease;
}

.cg-search-mode-chip:hover {
  border-color: rgba(59, 130, 246, 0.24);
  color: #2563eb;
}

.cg-search-mode-chip.is-active {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #3730a3;
}

.cg-search-helper-card,
.cg-search-empty {
  padding: 18px;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.cg-search-helper-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
}

.cg-search-helper-text {
  font-size: 14px;
  color: #64748b;
  line-height: 1.65;
  margin-bottom: 0;
}

.cg-search-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.cg-search-actions .btn {
  min-height: 42px;
  font-weight: 700;
}

.cg-search-block + .cg-search-block {
  margin-top: 24px;
}

.cg-search-block-title,
.cg-song-grid-title {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 14px;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 1399.98px) {
  .cg-card-grid.four {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1199.98px) {
  .cg-stats-grid,
  .cg-card-grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cg-card-grid.three,
  .cg-split-grid {
    grid-template-columns: 1fr;
  }

  .cg-card-grid.quick-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cg-dark-strip {
    padding: 28px;
  }
}

@media (max-width: 767.98px) {
  .cg-hero {
    padding-top: 36px;
    padding-bottom: 22px;
  }

  .cg-hero-title {
    font-size: clamp(1.7rem, 8vw, 2.5rem);
    margin-bottom: 12px;
  }

  .cg-hero-lead {
    font-size: .95rem;
    line-height: 1.65;
  }

  .cg-search-shell {
    padding: 10px;
    border-radius: 18px;
  }

  .cg-search-shell .form-control,
  .cg-search-shell .btn {
    min-height: 50px;
    border-radius: 12px;
  }

  .cg-search-shell .btn {
    padding-inline: 14px;
    font-size: 14px;
  }

  .cg-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .cg-card-grid.quick-links,
  .cg-card-grid.three,
  .cg-card-grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .cg-section,
  .cg-section-sm {
    padding: 34px 0;
  }

  .cg-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
  }

  .cg-section-title {
    font-size: 1.48rem;
  }

  .cg-panel,
  .cg-dark-strip,
  .cg-cta-band {
    padding: 18px;
    border-radius: 22px;
  }

  .cg-chip {
    font-size: 12px;
    padding: 7px 12px;
  }

  .cg-route-card .card-body,
  .cg-song-card .card-body,
  .cg-artist-card .card-body,
  .cg-genre-card .card-body,
  .cg-mini-card .card-body {
    padding: 14px;
  }

  .cg-route-card .card-body {
    min-height: auto;
  }

  .cg-route-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 14px;
    margin-bottom: 10px;
  }

  .cg-card-title {
    font-size: .96rem;
    line-height: 1.3;
    margin-bottom: 6px;
  }

  .cg-card-text,
  .cg-muted,
  .cg-song-snippet,
  .cg-breakdown-value {
    font-size: 13px;
    line-height: 1.5;
  }

  .cg-song-snippet {
    margin-top: 10px;
  }

  .cg-tags {
    gap: 6px;
    margin-top: 10px;
  }

  .cg-tag {
    padding: 5px 8px;
    font-size: 11px;
  }

  .cg-artist-avatar,
  .cg-genre-avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 18px;
    margin-bottom: 10px;
  }

  .cg-breakdown-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .cg-breakdown-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px;
    min-height: 100%;
  }

  .cg-breakdown-name {
    align-items: center;
    gap: 8px;
    font-size: 14px;
  }

  .cg-search-hints {
    justify-content: flex-start;
    gap: 6px;
    margin-top: 12px;
  }

  .cg-search-hints a:nth-child(n+5) {
    display: none;
  }

  .cg-search-hints a {
    font-size: 12px;
    padding: 6px 10px;
  }

  .cg-search-note {
    font-size: 12px;
    line-height: 1.55;
  }

  .cg-stat-card {
    padding: 14px;
  }

  .cg-stat-value {
    font-size: 1.35rem;
  }

  .cg-stat-label {
    font-size: 12px;
    line-height: 1.35;
    margin-top: 6px;
  }

  .cg-section-head .btn {
    min-height: 42px;
    padding: 0 14px;
    font-size: 13px;
    border-radius: 12px;
  }

  .cg-autocomplete-dropdown {
    border-radius: 14px;
  }

  .cg-autocomplete-item {
    padding: 11px 12px;
  }

  .cg-autocomplete-label {
    font-size: 13px;
  }

  .cg-autocomplete-meta,
  .cg-autocomplete-footer-note {
    font-size: 11px;
  }

  .cg-autocomplete-actions .btn {
    flex: 1 1 auto;
  }

  .cg-song-card-v2 {
    border-radius: 20px;
  }

  .cg-song-card-v2__cover {
    min-height: 62px;
    padding: 10px 12px 8px;
  }

  .cg-song-card-v2__avatar {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 13px;
  }

  .cg-song-card-v2__body {
    padding: 14px;
    gap: 8px;
  }

  .cg-song-card-v2__title {
    font-size: .98rem;
  }

  .cg-song-card-v2__artist,
  .cg-song-card-v2__snippet {
    font-size: 13px;
  }

  .cg-song-card-v2__snippet {
    min-height: 40px;
  }

  .cg-artist-card-v2,
  .cg-genre-card-v2 {
    border-radius: 20px;
  }

  .cg-artist-card-v2__cover,
  .cg-genre-card-v2__cover {
    min-height: 62px;
    padding: 10px 12px 8px;
  }

  .cg-artist-card-v2__avatar,
  .cg-genre-card-v2__avatar {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 13px;
  }

  .cg-artist-card-v2__body,
  .cg-genre-card-v2__body {
    padding: 14px;
    gap: 8px;
  }

  .cg-artist-card-v2__title,
  .cg-genre-card-v2__title {
    font-size: .98rem;
  }

  .cg-artist-card-v2__meta,
  .cg-genre-card-v2__meta,
  .cg-artist-card-v2__snippet,
  .cg-genre-card-v2__snippet {
    font-size: 13px;
  }

  .cg-artist-card-v2__snippet,
  .cg-genre-card-v2__snippet {
    min-height: 40px;
  }

  .cg-song-list-page .cg-page-title {
    font-size: 1.55rem;
    margin-bottom: 10px !important;
  }

  .cg-search-top-card {
    padding: 16px;
    border-radius: 16px;
  }

  .cg-search-form-row {
    gap: 10px 0;
  }

  .cg-search-input,
  .cg-search-submit {
    min-height: 46px;
    font-size: 14px;
  }

  .cg-search-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .cg-search-block + .cg-search-block {
    margin-top: 18px;
  }

  .cg-search-block-title,
  .cg-song-grid-title {
    margin-bottom: 10px;
    font-size: 0.95rem;
  }

  .cg-search-empty {
    padding: 16px;
    border-radius: 14px;
    font-size: 13px;
  }

  .cg-search-toolbar {
    margin-top: 12px;
    padding-top: 12px;
    align-items: flex-start;
  }

  .cg-search-toolbar-left {
    width: 100%;
  }

  .cg-search-toolbar-note {
    font-size: 12px;
    line-height: 1.5;
  }

  .cg-search-mode-chip {
    font-size: 11px;
    padding: 6px 10px;
  }

  .cg-search-helper-card,
  .cg-search-empty {
    padding: 14px;
    border-radius: 16px;
  }

  .cg-search-helper-title {
    font-size: 0.94rem;
    margin-bottom: 4px;
  }

  .cg-search-helper-text {
    font-size: 13px;
    line-height: 1.55;
  }

  .cg-search-actions {
    gap: 8px;
    margin-top: 12px;
  }

  .cg-search-actions .btn {
    min-height: 40px;
    font-size: 13px;
  }
}
/* =========================
   GLOBAL POLISH / UTILITIES
   ========================= */

html {
  scroll-behavior: smooth;
}

body {
  color: var(--cg-text);
  background: #f8fafc;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

a:hover {
  color: inherit;
}

.text-muted {
  color: var(--cg-muted) !important;
}

.bg-light-subtle {
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.92) 0%, rgba(241, 245, 249, 0.92) 100%) !important;
}

/* =========================
   BUTTON CONSISTENCY
   ========================= */

.btn {
  border-radius: 12px;
  font-weight: 700;
  transition: all .18s ease;
}

.btn-primary {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border-color: #1d4ed8;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18);
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  border-color: #1e40af;
  transform: translateY(-1px);
}

.btn-outline-primary {
  border-color: rgba(37, 99, 235, 0.24);
  color: #2563eb;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.34);
  color: #1d4ed8;
}

.btn-outline-success:hover,
.btn-outline-success:focus {
  transform: translateY(-1px);
}

/* =========================
   SONG GRID FIX
   ========================= */

#latest-songs .row {
  --bs-gutter-x: 1.25rem;
  --bs-gutter-y: 1.25rem;
}

#latest-songs .cg-song-card {
  min-height: 100%;
}

#latest-songs .cg-card-title a,
#latest-songs .cg-song-meta a {
  transition: color .18s ease;
}

#latest-songs .cg-card-title a:hover,
#latest-songs .cg-song-meta a:hover {
  color: var(--cg-primary);
}

#latest-songs .cg-tags {
  min-height: 32px;
}

/* =========================
   SMALL MOBILE TUNING
   ========================= */

@media (max-width: 575.98px) {
  .cg-stats-grid {
    grid-template-columns: 1fr;
  }

  .cg-card-grid.quick-links,
  .cg-card-grid.three,
  .cg-card-grid.four {
    grid-template-columns: 1fr;
  }

  #latest-songs .row {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
  }

  .cg-song-card .card-body {
    padding: 12px;
  }

  .cg-card-title {
    font-size: 0.92rem;
  }

  .cg-song-meta,
  .cg-song-snippet {
    font-size: 12.5px;
  }

  .cg-tag {
    font-size: 10.5px;
    padding: 4px 7px;
  }
}


/* =========================
   SONG CARD V2 OVERRIDE
   ========================= */

.cg-song-card-v2 {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cg-song-card-v2:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.10);
  border-color: rgba(37, 99, 235, 0.16);
  color: inherit;
  text-decoration: none;
}

.cg-song-card-v2__cover {
  position: relative;
  min-height: 126px;
  padding: 16px 16px 14px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.cg-song-card-v2__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 22%, rgba(255,255,255,.36) 0 2px, transparent 2.5px),
    radial-gradient(circle at 76% 30%, rgba(255,255,255,.22) 0 2px, transparent 2.5px),
    radial-gradient(circle at 58% 76%, rgba(255,255,255,.18) 0 2px, transparent 2.5px),
    linear-gradient(135deg, rgba(255,255,255,.05) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.05) 50%, rgba(255,255,255,.05) 75%, transparent 75%, transparent);
  background-size: auto, auto, auto, 26px 26px;
}

.cg-song-card-v2__cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.26), transparent 34%),
    radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.14), transparent 32%);
  pointer-events: none;
}

.cg-song-card-v2__cover-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.cg-song-card-v2__cover-title {
  margin: 0;
  color: #ffffff;
  font-size: 1.06rem;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -0.02em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 1px rgba(15, 23, 42, 0.12);
}

.cg-song-card-v2__avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.cg-song-card-v2__cover-badge {
  display: none !important;
}

.cg-song-card-v2__body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cg-song-card-v2__title {
  display: none !important;
}

.cg-song-card-v2__artist {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.cg-song-card-v2__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cg-song-card-v2__chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.cg-song-card-v2__chip--key {
  background: rgba(37, 99, 235, 0.10);
  color: #1d4ed8;
}

.cg-song-card-v2__chip--genre {
  background: rgba(15, 23, 42, 0.06);
  color: #475569;
}

.cg-song-card-v2__chip--lang {
  display: none !important;
}

.cg-song-card-v2__snippet {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 64px;
}

.cg-song-card-v2__footer {
  margin-top: auto;
  padding-top: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cg-song-card-v2__cta {
  color: #2563eb;
  font-size: 13px;
  font-weight: 800;
}

.cg-song-card-v2__icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: #edf2ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  font-size: 18px;
  font-weight: 800;
}

/* Desktop 4 cards */
.cg-song-list-page .row.g-4 > [class*="col-xl-3"] {
  display: flex;
}

.cg-song-list-page .row.g-4 > [class*="col-xl-3"] > .cg-song-card-v2 {
  width: 100%;
}

/* Mobile 2 cards */
@media (max-width: 767.98px) {
  .cg-song-card-v2 {
    border-radius: 20px;
  }

  .cg-song-card-v2__cover {
    min-height: 104px;
    padding: 12px 12px 10px;
  }

  .cg-song-card-v2__cover-title {
    font-size: 0.96rem;
    -webkit-line-clamp: 3;
  }

  .cg-song-card-v2__avatar {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 13px;
  }

  .cg-song-card-v2__body {
    padding: 13px;
    gap: 8px;
  }

  .cg-song-card-v2__artist {
    font-size: 12px;
  }

  .cg-song-card-v2__chip {
    min-height: 28px;
    padding: 0 10px;
    font-size: 11px;
  }

  .cg-song-card-v2__snippet {
    font-size: 12.5px;
    min-height: 56px;
    -webkit-line-clamp: 3;
  }

  .cg-song-card-v2__cta {
    font-size: 12px;
  }

  .cg-song-card-v2__icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 16px;
  }
}

@media (max-width: 575.98px) {
  .cg-song-card-v2__cover {
    min-height: 96px;
  }

  .cg-song-card-v2__cover-title {
    font-size: 0.92rem;
  }

  .cg-song-card-v2__snippet {
    font-size: 12px;
    min-height: 52px;
  }
}

/* =========================
   SONG CARD V2 SINGLETON
   ========================= */

.cg-song-card-v2 {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cg-song-card-v2:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.10);
  border-color: rgba(37, 99, 235, 0.16);
  color: inherit;
  text-decoration: none;
}

.cg-song-card-v2__link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.cg-song-card-v2__cover {
  position: relative;
  min-height: 92px;
  padding: 14px 14px 12px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.cg-song-card-v2__cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.24), transparent 34%),
    radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.12), transparent 32%);
  pointer-events: none;
}

.cg-song-card-v2__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 22%, rgba(255,255,255,.36) 0 2px, transparent 2.5px),
    radial-gradient(circle at 76% 30%, rgba(255,255,255,.22) 0 2px, transparent 2.5px),
    radial-gradient(circle at 58% 76%, rgba(255,255,255,.18) 0 2px, transparent 2.5px),
    linear-gradient(135deg, rgba(255,255,255,.05) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.05) 50%, rgba(255,255,255,.05) 75%, transparent 75%, transparent);
  background-size: auto, auto, auto, 26px 26px;
}

.cg-song-card-v2__cover-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.cg-song-card-v2__cover-badge {
  display: none !important;
}

.cg-song-card-v2__cover-title {
  margin: 0;
  color: #ffffff;
  font-size: 0.96rem;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -0.02em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 1px rgba(15, 23, 42, 0.12);
}

.cg-song-card-v2__avatar {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.cg-song-card-v2__body {
  padding: 13px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cg-song-card-v2__title {
  display: none !important;
}

.cg-song-card-v2__artist {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cg-song-card-v2__artist a {
  color: inherit;
  text-decoration: none;
}

.cg-song-card-v2__artist a:hover {
  color: #2563eb;
}

.cg-song-card-v2__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cg-song-card-v2__chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.cg-song-card-v2__chip--key {
  background: rgba(37, 99, 235, 0.10);
  color: #1d4ed8;
}

.cg-song-card-v2__chip--genre {
  display: none !important;
}

.cg-song-card-v2__chip--lang {
  display: none !important;
}

.cg-song-card-v2__snippet {
  margin: 0;
  color: #64748b;
  font-size: 12.5px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 38px;
}

.cg-song-card-v2__footer {
  margin-top: auto;
  padding-top: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cg-song-card-v2__cta {
  color: #2563eb;
  font-size: 12px;
  font-weight: 800;
}

.cg-song-card-v2__icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #edf2ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  font-size: 16px;
  font-weight: 800;
}

.cg-song-theme-1 .cg-song-card-v2__cover { background: linear-gradient(135deg, #5b8def 0%, #4f7ee8 55%, #5aa8c8 100%); }
.cg-song-theme-2 .cg-song-card-v2__cover { background: linear-gradient(135deg, #55a8a1 0%, #59bcb5 55%, #72c8e3 100%); }
.cg-song-theme-3 .cg-song-card-v2__cover { background: linear-gradient(135deg, #8a72eb 0%, #7a7cf0 55%, #6d9af1 100%); }
.cg-song-theme-4 .cg-song-card-v2__cover { background: linear-gradient(135deg, #f19952 0%, #f2b14e 55%, #f5a56f 100%); }
.cg-song-theme-5 .cg-song-card-v2__cover { background: linear-gradient(135deg, #eb6d7f 0%, #ef7f93 55%, #f3a0af 100%); }
.cg-song-theme-6 .cg-song-card-v2__cover { background: linear-gradient(135deg, #6f7c92 0%, #647187 55%, #556176 100%); }

.cg-song-list-page .row.g-4 > [class*="col-xl-3"],
.cg-song-list-page .row.g-4 > [class*="col-lg-4"],
.cg-song-list-page .row.g-4 > [class*="col-md-6"],
.cg-song-list-page .row.g-4 > [class*="col-6"] {
  display: flex;
}

.cg-song-list-page .row.g-4 > [class*="col-xl-3"] > .cg-song-card-v2,
.cg-song-list-page .row.g-4 > [class*="col-lg-4"] > .cg-song-card-v2,
.cg-song-list-page .row.g-4 > [class*="col-md-6"] > .cg-song-card-v2,
.cg-song-list-page .row.g-4 > [class*="col-6"] > .cg-song-card-v2 {
  width: 100%;
}

@media (max-width: 767.98px) {
  .cg-song-card-v2 {
    border-radius: 18px;
  }

  .cg-song-card-v2__cover {
  min-height: 64px;
  padding: 10px 10px 8px;
}

  .cg-song-card-v2__cover-title {
    font-size: 0.88rem;
    -webkit-line-clamp: 2;
  }

  .cg-song-card-v2__avatar {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 12px;
  }

  .cg-song-card-v2__body {
    padding: 11px;
    gap: 7px;
  }

  .cg-song-card-v2__artist {
    font-size: 11px;
  }

  .cg-song-card-v2__chip {
    min-height: 25px;
    padding: 0 9px;
    font-size: 10.5px;
  }

  .cg-song-card-v2__snippet {
    font-size: 11.5px;
    min-height: 34px;
    -webkit-line-clamp: 2;
  }

  .cg-song-card-v2__cta {
    font-size: 11px;
  }

  .cg-song-card-v2__icon {
    width: 31px;
    height: 31px;
    border-radius: 11px;
    font-size: 14px;
  }
}

@media (max-width: 575.98px) {
  .cg-song-card-v2__cover {
    min-height: 76px;
  }

  .cg-song-card-v2__cover-title {
    font-size: 0.84rem;
  }

  .cg-song-card-v2__snippet {
    font-size: 11px;
    min-height: 32px;
  }
}










/* =========================================
   SONG DETAIL HERO - COMPACT HOPAMVIET STYLE
   ========================================= */

:root {
  --song-sticky-top: 88px;
  --song-hero-teal-1: #0f6373;
  --song-hero-teal-2: #14839a;
  --song-hero-teal-3: #33c1d5;
}

.song-detail-wrap {
  padding-bottom: 108px;
}

.song-hero-card.song-hero-card--compact.song-hero-card--refined {
  position: relative;
  overflow: hidden;
  padding: 22px 24px 18px;
  border: 0;
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,0.14), transparent 18%),
    linear-gradient(135deg, var(--song-hero-teal-1) 0%, var(--song-hero-teal-2) 46%, var(--song-hero-teal-3) 100%);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
}

.song-hero-card.song-hero-card--compact.song-hero-card--refined::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  left: -72px;
  top: -72px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.song-hero-card.song-hero-card--compact.song-hero-card--refined::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  right: -36px;
  bottom: -46px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.song-hero-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.song-hero-main {
  min-width: 0;
  flex: 1 1 auto;
}

.song-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.94);
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.song-title.song-title--hero {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.75rem, 3vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  font-weight: 900;
}

.song-meta.song-meta--hero {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.98rem;
  line-height: 1.55;
}

.song-meta.song-meta--hero a {
  color: #ffffff;
  font-weight: 800;
  text-decoration: none;
}

.song-meta.song-meta--hero a:hover {
  color: #ffffff;
  opacity: 0.88;
}

.song-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.song-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.84rem;
  line-height: 1;
  backdrop-filter: blur(8px);
}

.song-hero-badge__label {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.song-hero-badge__value,
.song-hero-badge__value a {
  color: #ffffff;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.song-hero-badge__value a:hover {
  opacity: 0.88;
}

.song-hero-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.song-stat-card {
  min-width: 0;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.song-stat-card__icon {
  display: none;
}

.song-stat-card__label {
  font-size: 0.7rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.song-stat-card__value {
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 900;
  color: #ffffff;
  word-break: break-word;
}

.song-admin-tools {
  flex: 0 0 auto;
  align-self: flex-start;
}

.song-admin-tools__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.song-admin-tools__toggle::-webkit-details-marker {
  display: none;
}

.song-admin-tools[open] .song-admin-tools__toggle {
  background: rgba(255, 255, 255, 0.18);
}

.song-admin-tools__menu {
  margin-top: 10px;
  min-width: 180px;
  padding: 8px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}

.song-admin-tools__link {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: #0f172a;
  text-decoration: none;
  font-weight: 700;
}

.song-admin-tools__link:hover {
  background: #f8fafc;
  color: #0f766e;
}

.song-admin-tools__link--danger:hover {
  background: #fff1f2;
  color: #be123c;
}

.song-tool-dock {
  position: sticky;
  top: var(--song-sticky-top, 88px);
  z-index: 1020;
}

.song-bottom-dock {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  z-index: 1065;
  pointer-events: auto;
}

.song-bottom-dock__inner,
.song-bottom-dock button,
.song-bottom-dock input,
.song-bottom-dock .song-dock-btn {
  pointer-events: auto;
}

.cg-navbar {
  z-index: 1040;
}

@media (max-width: 991.98px) {
  .song-hero-card.song-hero-card--compact.song-hero-card--refined {
    padding: 18px 18px 16px;
    border-radius: 22px;
  }

  .song-title.song-title--hero {
    font-size: clamp(1.55rem, 4vw, 2.2rem);
  }

  .song-meta.song-meta--hero {
    font-size: 0.92rem;
  }

  .song-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
  }

  .song-stat-card {
    padding: 10px 12px;
    border-radius: 14px;
  }

  .song-bottom-dock {
    bottom: 14px;
    width: calc(100% - 16px);
    max-width: 720px;
  }
}

@media (max-width: 767.98px) {
  .song-hero-card.song-hero-card--compact.song-hero-card--refined {
    padding: 16px 14px 14px;
    border-radius: 20px;
  }

  .song-hero-top {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .song-admin-tools {
    width: 100%;
  }

  .song-admin-tools__toggle {
    width: 100%;
    justify-content: center;
    min-height: 40px;
    font-size: 0.88rem;
  }

  .song-title.song-title--hero {
    font-size: clamp(1.32rem, 6vw, 1.72rem);
    line-height: 1.12;
  }

  .song-meta.song-meta--hero {
    margin-top: 8px;
    font-size: 0.88rem;
    line-height: 1.5;
  }

  .song-hero-badges {
    margin-top: 10px;
    gap: 6px;
  }

  .song-hero-badge {
    width: 100%;
    justify-content: space-between;
    min-height: 0;
    padding: 8px 10px;
    border-radius: 12px;
  }

  .song-hero-badge__label {
    font-size: 0.66rem;
  }

  .song-hero-badge__value,
  .song-hero-badge__value a {
    font-size: 0.82rem;
    white-space: normal;
    text-align: right;
  }

  .song-hero-stats {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 12px;
  }

  .song-stat-card {
    padding: 10px 12px;
  }
}

@media (max-width: 575.98px) {
  .song-detail-wrap {
    padding-bottom: 96px;
  }

  .song-hero-eyebrow {
    margin-bottom: 6px;
    font-size: 10px;
  }

  .song-title.song-title--hero {
    font-size: clamp(1.18rem, 7vw, 1.5rem);
  }

  .song-meta.song-meta--hero {
    font-size: 0.84rem;
  }

  .song-stat-card__label {
    font-size: 0.66rem;
  }

  .song-stat-card__value {
    font-size: 0.92rem;
  }
}