:root {
  --bg: #f5f7fb;
  --card: rgba(255,255,255,.88);
  --card-solid: #ffffff;
  --text: #151b2d;
  --muted: #667085;
  --primary: #6c5ce7;
  --primary-2: #8b5cf6;
  --secondary: #00b894;
  --danger: #ef4444;
  --border: rgba(20,24,40,.1);
  --shadow: 0 22px 55px rgba(15,23,42,.12);
  --soft: rgba(108,92,231,.1);
  --glass: rgba(255,255,255,.65);
  --pre: rgba(17,24,39,.055);
}

body.dark {
  --bg: #08111f;
  --card: rgba(15,23,42,.82);
  --card-solid: #111827;
  --text: #f8fafc;
  --muted: #cbd5e1;
  --primary: #9b8cff;
  --primary-2: #a78bfa;
  --secondary: #2dd4bf;
  --danger: #fb7185;
  --border: rgba(255,255,255,.12);
  --shadow: 0 24px 60px rgba(0,0,0,.42);
  --soft: rgba(155,140,255,.18);
  --glass: rgba(15,23,42,.62);
  --pre: rgba(255,255,255,.065);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Inter, Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(108,92,231,.24), transparent 36%),
    radial-gradient(circle at top right, rgba(0,184,148,.2), transparent 34%),
    var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

.bg-orb {
  position: fixed;
  width: 360px;
  height: 360px;
  border-radius: 999px;
  filter: blur(70px);
  opacity: .22;
  z-index: -1;
}
.orb-1 { background: var(--primary); top: 160px; left: -130px; }
.orb-2 { background: var(--secondary); bottom: 90px; right: -130px; }

.hero {
  padding: 22px 18px 58px;
  background:
    linear-gradient(135deg, rgba(18,24,49,.94), rgba(108,92,231,.85), rgba(0,184,148,.78));
  color: white;
  border-bottom-left-radius: 36px;
  border-bottom-right-radius: 36px;
  box-shadow: 0 30px 80px rgba(15,23,42,.22);
}

.navbar {
  max-width: 1320px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand { display: flex; align-items: center; gap: 13px; }

.logo {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  font-size: 18px;
  font-weight: 900;
}

.brand h1 { margin: 0; font-size: 23px; letter-spacing: -.4px; }
.brand h1 span { color: #5eead4; }
.brand p { margin: 4px 0 0; font-size: 13px; opacity: .88; }

.icon-btn {
  border: 0;
  width: 45px;
  height: 45px;
  border-radius: 15px;
  cursor: pointer;
  font-size: 18px;
  background: rgba(255,255,255,.18);
  color: white;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

.hero-content {
  max-width: 940px;
  text-align: center;
  margin: 44px auto 0;
}

.premium-badge {
  display: inline-flex;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .7px;
  margin-bottom: 16px;
}

.hero-content h2 {
  margin: 0 0 14px;
  font-size: clamp(32px, 6vw, 62px);
  line-height: 1.02;
  letter-spacing: -1.8px;
}

.hero-content p {
  margin: 0 auto 24px;
  max-width: 760px;
  line-height: 1.75;
  opacity: .95;
}

.stats {
  display: flex;
  justify-content: center;
  gap: 13px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.stats div {
  min-width: 120px;
  padding: 14px 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.15);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.17);
  backdrop-filter: blur(10px);
}

.stats b { display: block; font-size: 25px; }
.stats span { font-size: 13px; opacity: .88; }

.search-box {
  max-width: 720px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  border-radius: 23px;
  padding: 0 18px;
  box-shadow: var(--shadow);
}

.search-box span { color: #475467; }

.search-box input {
  width: 100%;
  border: 0;
  outline: none;
  padding: 18px 0;
  border-radius: 20px;
  font-size: 16px;
  background: transparent;
  color: #111827;
}

.container {
  max-width: 1320px;
  margin: -30px auto 0;
  padding: 0 14px 38px;
}

.top-tools {
  background: var(--glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 12px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
}

.letters { display: flex; gap: 8px; }

.small-btn,
.letter-btn {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 800;
  white-space: nowrap;
}

.small-btn.active,
.letter-btn.active,
.small-btn:hover,
.letter-btn:hover {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: white;
}

.app-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 460px;
  gap: 18px;
  margin-top: 20px;
  align-items: start;
}

.panel {
  background: var(--card);
  backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: 26px;
  padding: 16px;
  box-shadow: var(--shadow);
  min-width: 0;
}

.artist-panel,
.detail-panel {
  position: sticky;
  top: 14px;
}

.panel-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 13px;
}

.panel-title h3 { margin: 0; font-size: 18px; }
.panel-title p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.panel-title span { color: var(--muted); font-size: 13px; font-weight: 800; }

.artist-list {
  display: grid;
  gap: 9px;
  max-height: 72vh;
  overflow: auto;
  padding-right: 4px;
}

.artist-list::-webkit-scrollbar,
.content-box::-webkit-scrollbar { width: 7px; }

.artist-list::-webkit-scrollbar-thumb,
.content-box::-webkit-scrollbar-thumb {
  background: rgba(127,127,127,.35);
  border-radius: 999px;
}

.artist-item {
  border: 1px solid var(--border);
  background: rgba(127,127,127,.035);
  color: var(--text);
  border-radius: 18px;
  padding: 12px;
  text-align: left;
  cursor: pointer;
  transition: .2s ease;
}

.artist-item:hover,
.artist-item.active {
  background: var(--soft);
  border-color: rgba(108,92,231,.5);
  transform: translateY(-1px);
}

.artist-item b { display: block; margin-bottom: 4px; }
.artist-item span { color: var(--muted); font-size: 12px; }

.album-box {
  border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--soft), rgba(0,184,148,.08));
  border-radius: 20px;
  padding: 15px;
  margin-bottom: 14px;
}

.album-box h4 { margin: 0 0 6px; }
.album-box p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }

.song-panel {
  max-height: 82vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.song-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  overflow-y: auto;
  padding-right: 4px;
  max-height: 56vh;
}

.song-grid::-webkit-scrollbar {
  width: 7px;
}

.song-grid::-webkit-scrollbar-thumb {
  background: rgba(127,127,127,.35);
  border-radius: 999px;
}

.song-card {
  border: 1px solid var(--border);
  background: rgba(127,127,127,.035);
  color: var(--text);
  border-radius: 19px;
  padding: 14px;
  cursor: pointer;
  text-align: left;
  transition: .2s ease;
}

.song-card:hover,
.song-card.active {
  border-color: rgba(108,92,231,.6);
  background: var(--soft);
  transform: translateY(-2px);
}

.song-card b { display: block; margin-bottom: 6px; line-height: 1.35; }
.song-card span { color: var(--muted); font-size: 13px; }

.song-detail.empty {
  text-align: center;
  color: var(--muted);
  padding: 38px 12px;
}

.empty-icon {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  border-radius: 24px;
  background: var(--soft);
  font-size: 34px;
}

.detail-head {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
  margin-bottom: 14px;
}

.detail-head h2 { margin: 0 0 7px; font-size: 22px; line-height: 1.2; }
.detail-head p { margin: 0; color: var(--muted); line-height: 1.55; }

.detail-actions {
  display: grid;
  gap: 9px;
  min-width: 132px;
}

.copy-btn,
.control-btn {
  border: 0;
  border-radius: 14px;
  color: white;
  padding: 10px 13px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.copy-btn { background: linear-gradient(135deg, var(--secondary), #14b8a6); }
.control-btn { background: linear-gradient(135deg, var(--primary), var(--primary-2)); }
.control-btn.stop { background: linear-gradient(135deg, var(--danger), #f97316); }


.main-share-bar,
.song-share-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}

.main-share-bar {
  justify-content: center;
  margin-top: 14px;
}

.song-share-bar {
  padding: 11px;
  margin: -2px 0 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(127,127,127,.05);
}

.share-btn {
  border: 0;
  border-radius: 999px;
  padding: 10px 13px;
  font-weight: 900;
  cursor: pointer;
  color: white;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
}

.share-btn.whatsapp { background: linear-gradient(135deg, #22c55e, #16a34a); }
.share-btn.facebook { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.share-btn.x { background: linear-gradient(135deg, #111827, #374151); }

.share-btn:hover {
  transform: translateY(-1px);
}

@media (max-width: 560px) {
  .main-share-bar,
  .song-share-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .share-btn {
    width: 100%;
    padding: 10px 8px;
    font-size: 12px;
  }
}

.pro-controls {
  display: grid;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(127,127,127,.04);
  margin-bottom: 14px;
}

.control-row {
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.control-label {
  font-size: 13px;
  font-weight: 900;
  color: var(--muted);
}

.transpose-box,
.scroll-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mini-btn {
  border: 1px solid var(--border);
  background: var(--card-solid);
  color: var(--text);
  height: 35px;
  min-width: 38px;
  padding: 0 10px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 900;
}

.mini-btn:hover {
  background: var(--primary);
  color: white;
}

#transposeValue,
#speedValue {
  min-width: 38px;
  text-align: center;
  font-weight: 900;
}

.range {
  width: 145px;
  accent-color: var(--primary);
}

.content-box {
  border-radius: 20px;
  background: var(--pre);
  padding: 17px;
  overflow-x: auto;
  max-height: 70vh;
  overflow-y: auto;
  border: 1px solid var(--border);
}

pre {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.78;
  font-family: "Courier New", monospace;
  color: var(--text);
  font-size: 14.5px;
}

.chord-token {
  color: var(--primary);
  font-weight: 900;
}

.loading, .no-result {
  border: 1px dashed var(--border);
  border-radius: 19px;
  padding: 18px;
  text-align: center;
  color: var(--muted);
}

footer {
  text-align: center;
  padding: 18px 15px 34px;
  color: var(--muted);
}

@media (max-width: 1160px) {
  .app-layout { grid-template-columns: 280px 1fr; }
  .detail-panel { grid-column: 1 / -1; position: static; }
}

@media (max-width: 780px) {
  .app-layout { grid-template-columns: 1fr; }
  .artist-panel { position: static; }
  .song-panel {
    max-height: none;
    overflow: visible;
  }
  .artist-list { max-height: 280px; }
  .song-grid {
    grid-template-columns: 1fr;
    max-height: 360px;
    overflow-y: auto;
  }
  .detail-panel {
    order: 3;
  }
  .hero-content h2 { letter-spacing: -1px; }
}

@media (max-width: 540px) {
  .hero {
    border-bottom-left-radius: 26px;
    border-bottom-right-radius: 26px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .brand h1 { font-size: 18px; }
  .brand p { font-size: 12px; }
  .logo { width: 44px; height: 44px; border-radius: 15px; font-size: 15px; }

  .stats div { min-width: 96px; padding: 12px; }
  .stats b { font-size: 20px; }

  .panel { padding: 13px; border-radius: 22px; }
  .detail-head { flex-direction: column; }
  .detail-actions { width: 100%; }
  .copy-btn, .control-btn { width: 100%; }
  .range { width: 120px; }
}


.mobile-open-detail {
  display: none;
  margin-bottom: 12px;
  border: 0;
  border-radius: 16px;
  padding: 12px 14px;
  width: 100%;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: white;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 780px) {
  .mobile-open-detail {
    display: block;
  }
}


/* Loading database */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at top left, rgba(108,92,231,.28), transparent 34%),
    radial-gradient(circle at bottom right, rgba(0,184,148,.22), transparent 34%),
    rgba(8,17,31,.92);
  color: white;
  transition: .35s ease;
}

.page-loader.hide {
  opacity: 0;
  pointer-events: none;
}

.loader-card {
  width: min(90vw, 360px);
  text-align: center;
  padding: 28px;
  border-radius: 26px;
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 30px 90px rgba(0,0,0,.35);
  backdrop-filter: blur(16px);
}

.loader-spinner {
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  border-radius: 999px;
  border: 5px solid rgba(255,255,255,.25);
  border-top-color: #5eead4;
  animation: spin .85s linear infinite;
}

.loader-card h3 {
  margin: 0 0 8px;
}

.loader-card p {
  margin: 0;
  opacity: .86;
  line-height: 1.5;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Diagram chord */
.chord-diagram-section {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 15px;
  background: rgba(127,127,127,.045);
}

.chord-diagram-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.chord-diagram-head h3 {
  margin: 0 0 5px;
  font-size: 17px;
}

.chord-diagram-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.chord-diagram-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.chord-diagram-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card-solid);
  padding: 12px;
  text-align: center;
  min-height: 142px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.chord-diagram-card b {
  color: var(--primary);
  font-size: 16px;
}

.chord-diagram-card img {
  width: 100%;
  max-width: 110px;
  margin: auto;
  display: block;
  object-fit: contain;
}

.chord-diagram-card .no-img {
  min-height: 82px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--pre);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  padding: 8px;
}

.chord-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.chord-loading::before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 999px;
  border: 2px solid rgba(127,127,127,.25);
  border-top-color: var(--primary);
  animation: spin .8s linear infinite;
}

@media (max-width: 780px) {
  .chord-diagram-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .chord-diagram-grid {
    grid-template-columns: 1fr;
  }
}


/* PWA, favorit, history, live mode */
.install-btn {
  border: 0;
  border-radius: 15px;
  cursor: pointer;
  padding: 12px 15px;
  background: rgba(255,255,255,.18);
  color: white;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

.quick-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.quick-card {
  background: var(--glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 14px;
  box-shadow: var(--shadow);
  min-width: 0;
}

.quick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.quick-head h3 {
  margin: 0;
  font-size: 16px;
}

.link-btn {
  border: 0;
  background: transparent;
  color: var(--primary);
  font-weight: 900;
  cursor: pointer;
}

.quick-list {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding-bottom: 3px;
}

.quick-item {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 16px;
  padding: 11px 12px;
  min-width: 180px;
  text-align: left;
  cursor: pointer;
}

.quick-item b {
  display: block;
  font-size: 13px;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quick-item span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.empty-mini {
  color: var(--muted);
  font-size: 13px;
  padding: 10px 0;
}

.fav-btn {
  border: 1px solid var(--border);
  background: var(--card-solid);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 13px;
  font-weight: 900;
  cursor: pointer;
}

.fav-btn.active {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: white;
}

.live-btn {
  background: linear-gradient(135deg, #111827, var(--primary));
}

body.live-mode {
  background: #020617;
}

body.live-mode .hero,
body.live-mode .top-tools,
body.live-mode .quick-section,
body.live-mode .artist-panel,
body.live-mode .song-panel,
body.live-mode footer {
  display: none !important;
}

body.live-mode .container {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

body.live-mode .app-layout {
  display: block;
  margin: 0;
}

body.live-mode .detail-panel {
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #020617;
  color: white;
  position: static;
}

body.live-mode .detail-head,
body.live-mode .pro-controls,
body.live-mode .chord-diagram-section {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

body.live-mode .content-box {
  height: calc(100vh - 190px);
  max-height: calc(100vh - 190px);
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
  max-width: 1100px;
  margin: 0 auto;
  background: rgba(255,255,255,.06);
  color: white;
  scroll-behavior: auto;
}

body.live-mode .live-btn,
body.live-mode .copy-content-btn {
  display: none !important;
}

body.live-mode pre {
  color: white;
  font-size: clamp(20px, 3vw, 34px);
  line-height: 1.9;
}

body.live-mode .chord-token {
  color: #5eead4;
}

.exit-live-floating {
  display: none;
}

body.live-mode .exit-live-floating {
  display: block;
  position: fixed;
  right: 14px;
  top: 14px;
  z-index: 999;
  border: 0;
  border-radius: 999px;
  padding: 12px 15px;
  background: #ef4444;
  color: white;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 780px) {
  .quick-section {
    grid-template-columns: 1fr;
  }

  .install-btn {
    padding: 11px 12px;
    font-size: 12px;
  }
}

/* ===== Smart Search Upgrade ===== */
.search-status {
  max-width: 760px;
  margin: 10px auto 0;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--text-soft, #e9e9ff);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}

.artist-list,
.song-grid {
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}

.song-card,
.artist-item {
  will-change: transform;
}

/* =========================================================
   Upgrade V03: Virtual List untuk database besar
   ========================================================= */
.song-grid.virtual-song-list {
  display: block;
  position: relative;
  overflow-y: auto;
  max-height: none;
  min-height: 320px;
  padding-right: 8px;
  contain: strict;
}

.virtual-info {
  position: sticky;
  top: 0;
  z-index: 3;
  min-height: 40px;
  padding: 10px 12px;
  margin-bottom: 4px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(14px);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.virtual-spacer {
  width: 1px;
  opacity: 0;
  pointer-events: none;
}

.virtual-window {
  position: absolute;
  left: 0;
  right: 8px;
  top: 0;
  display: grid;
  gap: 8px;
  will-change: transform;
}

.song-card.virtual-row {
  min-height: 68px;
  width: 100%;
  margin: 0;
}

@supports not (background: color-mix(in srgb, white 50%, black)) {
  .virtual-info {
    background: rgba(255,255,255,.88);
  }

  body.dark .virtual-info {
    background: rgba(15,23,42,.88);
  }
}


/* =========================================================
   Upgrade V04: Setlist Mode Musisi
   ========================================================= */
.setlist-section {
  margin-top: 16px;
  grid-column: 1 / -1;
}

.setlist-main-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.setlist-main-head h3 {
  margin: 0 0 6px;
}

.setlist-main-head p,
.setlist-info {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.setlist-actions,
.setlist-toolbar,
.setlist-song-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.setlist-toolbar {
  margin-bottom: 10px;
}

#setlistSelect {
  min-width: 220px;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--card-solid);
  color: var(--text);
  font-weight: 800;
  outline: none;
}

.danger-link {
  color: #ef4444;
}

.setlist-songs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 9px;
  margin-top: 10px;
}

.setlist-song {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  padding: 8px;
}

.setlist-song.active {
  outline: 2px solid var(--primary);
}

.setlist-open {
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  min-width: 0;
}

.setlist-open b,
.setlist-open span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.setlist-open b {
  font-size: 13px;
  margin-bottom: 4px;
}

.setlist-open span {
  color: var(--muted);
  font-size: 12px;
}

.setlist-song-actions button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--card-solid);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
}

.setlist-live-bar {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 1200;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 22px;
  background: rgba(15,23,42,.92);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(16px);
  color: white;
}

.setlist-live-bar button {
  border: 0;
  border-radius: 15px;
  padding: 12px 15px;
  background: linear-gradient(135deg, #22c55e, #06b6d4);
  color: #06111f;
  font-weight: 900;
  cursor: pointer;
}

.setlist-live-bar .danger-mini {
  background: #ef4444;
  color: white;
}

.setlist-live-info {
  min-width: 0;
  text-align: center;
}

.setlist-live-info b,
.setlist-live-info span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setlist-live-info span {
  color: #cbd5e1;
  font-size: 12px;
  margin-top: 3px;
}

body.live-mode .exit-live-floating {
  top: 76px;
}

body.live-mode .content-box {
  padding-bottom: 95px;
}

@media (max-width: 780px) {
  .setlist-main-head,
  .setlist-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .setlist-actions {
    width: 100%;
  }

  .setlist-actions .small-btn {
    flex: 1;
  }

  #setlistSelect {
    width: 100%;
  }

  .setlist-live-bar {
    grid-template-columns: 1fr 1fr;
  }

  .setlist-live-info {
    grid-column: 1 / -1;
    order: -1;
  }
}


/* =========================================================
   V06 PATCH - Live Mode: hanya lirik yang berjalan
   Bar tombol tetap diam agar Stop Auto Scroll selalu bisa ditekan
   ========================================================= */
body.live-mode {
  height: 100vh !important;
  overflow: hidden !important;
  background: #020617 !important;
}

body.live-mode .detail-panel {
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 12px !important;
}

body.live-mode .detail-head {
  flex: 0 0 auto !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto 8px auto !important;
  padding: 10px 12px !important;
  border-radius: 18px !important;
  background: rgba(2, 6, 23, .96) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  backdrop-filter: blur(12px) !important;
}

body.live-mode .pro-controls {
  flex: 0 0 auto !important;
  position: sticky !important;
  top: 76px !important;
  z-index: 45 !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto 10px auto !important;
  padding: 10px 12px !important;
  border-radius: 18px !important;
  background: rgba(2, 6, 23, .94) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  backdrop-filter: blur(12px) !important;
}

body.live-mode .content-box {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
  scroll-behavior: auto !important;
  -webkit-overflow-scrolling: touch !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding-bottom: 140px !important;
}

/* Paksa hilangkan tombol yang tidak dibutuhkan ketika live */
body.live-mode .live-btn,
body.live-mode .copy-content-btn,
body.live-mode button[onclick*="toggleLiveMode"].live-btn,
body.live-mode button[onclick*="copyCurrentContent"],
body.live-mode button[onclick*="copy"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.live-mode .exit-live-floating {
  display: block !important;
  position: fixed !important;
  right: 14px !important;
  top: 14px !important;
  z-index: 9999 !important;
}

body.live-mode pre {
  margin: 0 !important;
  padding-bottom: 80px !important;
}

@media (max-width: 780px) {
  body.live-mode .detail-panel {
    padding: 8px !important;
  }

  body.live-mode .detail-head,
  body.live-mode .pro-controls {
    border-radius: 14px !important;
    padding: 8px !important;
  }

  body.live-mode .pro-controls {
    top: 86px !important;
  }

  body.live-mode .content-box {
    padding-bottom: 160px !important;
  }
}

/* =========================================================
   V07 FIX - Live Auto Scroll aktif kembali
   Penyebab V06: .song-detail belum menjadi flex container,
   sehingga .content-box tidak punya tinggi scroll yang tetap.
   ========================================================= */
body.live-mode .song-detail {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

body.live-mode .song-detail .detail-head,
body.live-mode .song-detail .pro-controls {
  flex: 0 0 auto !important;
}

body.live-mode #scrollBox.content-box {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

body.live-mode #currentContent {
  min-height: max-content !important;
}

/* =========================================================
   V08 - Song Screen / Detail Modal
   Halaman utama dibuat lebih bersih: lirik & chord muncul di layar khusus.
   ========================================================= */
.hidden {
  display: none !important;
}

.app-layout {
  grid-template-columns: 300px minmax(0, 1fr) !important;
}

.song-screen {
  position: fixed;
  inset: 0;
  z-index: 2500;
  background: rgba(2, 6, 23, .72);
  backdrop-filter: blur(12px);
  padding: 18px;
  overflow-y: auto;
}

.song-screen-panel {
  max-width: 1120px;
  min-height: calc(100vh - 36px);
  margin: 0 auto;
  position: relative !important;
  top: auto !important;
}

.close-detail-btn {
  border: 0;
  border-radius: 14px;
  color: white;
  padding: 10px 13px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  background: linear-gradient(135deg, #ef4444, #f97316);
}

body.song-screen-open {
  overflow: hidden;
}

body.song-screen-open:not(.live-mode) .song-screen {
  display: block;
}

/* Saat live, diagram chord dihilangkan agar layar tidak penuh. */
body.live-mode .chord-diagram-section {
  display: none !important;
}

/* Live mode sekarang bekerja di dalam song-screen fullscreen. */
body.live-mode .song-screen {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 3000 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #020617 !important;
  backdrop-filter: none !important;
}

body.live-mode .song-screen-panel {
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

body.live-mode .detail-actions .close-detail-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1160px) {
  .app-layout {
    grid-template-columns: 280px minmax(0, 1fr) !important;
  }
}

@media (max-width: 780px) {
  .app-layout {
    grid-template-columns: 1fr !important;
  }

  .song-screen {
    padding: 8px;
  }

  .song-screen-panel {
    min-height: calc(100vh - 16px);
    border-radius: 20px;
  }
}

/* =========================================================
   V09 - Compact Live Controls
   Kontrol live dibuat horizontal agar area lirik lebih luas.
   ========================================================= */
body.live-mode .detail-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 10px !important;
  margin: 0 auto 6px auto !important;
  min-height: auto !important;
}

body.live-mode .detail-head h2 {
  font-size: clamp(16px, 3.6vw, 24px) !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.live-mode .detail-head p {
  font-size: clamp(11px, 2.8vw, 14px) !important;
  margin: 2px 0 0 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.live-mode .detail-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  min-width: 0 !important;
}

body.live-mode .detail-actions button {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 7px 10px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Saat live hanya tampil tombol yang penting: Tutup/Keluar, Favorit, Auto Scroll.
   Live Mode dan Salin disembunyikan paksa. */
body.live-mode .detail-actions .live-btn,
body.live-mode .detail-actions .copy-content-btn,
body.live-mode .detail-actions button[onclick*="copyCurrentContent"],
body.live-mode .detail-actions button[onclick*="toggleLiveMode"].live-btn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.live-mode .pro-controls {
  top: 0 !important;
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  margin: 0 auto 6px auto !important;
}

body.live-mode .pro-controls .control-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  min-width: 0 !important;
}

body.live-mode .pro-controls .control-label {
  display: none !important;
}

body.live-mode .transpose-box,
body.live-mode .scroll-box {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

body.live-mode .mini-btn,
body.live-mode .scroll-box span {
  width: auto !important;
  min-width: 0 !important;
  padding: 7px 9px !important;
  font-size: 12px !important;
  border-radius: 11px !important;
  white-space: nowrap !important;
}

body.live-mode .range {
  width: min(28vw, 170px) !important;
  max-width: 170px !important;
}

body.live-mode #scrollBox.content-box {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  padding: 12px 14px 90px 14px !important;
}

body.live-mode #currentContent {
  font-size: clamp(18px, 4.7vw, 30px) !important;
  line-height: 1.7 !important;
}

body.live-mode .exit-live-floating {
  display: none !important;
}

@media (max-width: 620px) {
  body.live-mode .detail-head {
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 6px 8px !important;
  }

  body.live-mode .detail-actions {
    gap: 4px !important;
  }

  body.live-mode .detail-actions .fav-btn,
  body.live-mode .detail-actions .copy-btn:not(.copy-content-btn) {
    display: none !important;
  }

  body.live-mode .detail-actions button {
    padding: 7px 8px !important;
    font-size: 11px !important;
  }

  body.live-mode .pro-controls {
    overflow-x: auto !important;
    justify-content: flex-start !important;
    padding: 6px 8px !important;
  }

  body.live-mode .range {
    width: 120px !important;
  }
}

/* Admin config hooks - default tetap sama, hanya aktif jika diubah dari admin.html */
.feature-share-off .main-share-bar,
.feature-share-off .song-share-bar,
.feature-main-share-off .main-share-bar,
.feature-song-share-off .song-share-bar,
.feature-transpose-off .pro-controls .control-row:first-child,
.feature-autoscroll-off #autoScrollBtn,
.feature-autoscroll-off .pro-controls .control-row:nth-child(2),
.feature-diagram-off .chord-diagram-section,
.feature-favorites-off .quick-section .quick-card:first-child,
.feature-favorites-off #favoriteBtn,
.feature-history-off .quick-section .quick-card:nth-child(2),
.feature-setlist-off .setlist-section,
.feature-setlist-off .detail-actions button[onclick*="Setlist"],
.feature-live-off .live-btn,
.feature-live-off .exit-live-floating,
.feature-copy-off .copy-content-btn,
.feature-close-off .close-detail-btn,
.feature-search-off .search-box,
.feature-search-off .search-status,
.feature-letter-filter-off .top-tools,
.feature-stats-off .stats,
.feature-related-songs-off .related-song-section,
.feature-recently-played-off .recently-section,
.feature-continue-reading-off .continue-section,
.feature-song-screen-off .song-screen,
.feature-all-buttons-off .main-share-bar,
.feature-all-buttons-off .song-share-bar,
.feature-all-buttons-off .detail-actions,
.feature-all-buttons-off .pro-controls,
.feature-all-buttons-off .setlist-section,
.feature-all-buttons-off .top-tools,
.feature-all-buttons-off .quick-head button,
.feature-all-buttons-off #installBtn,
.feature-all-buttons-off #themeBtn {
  display: none !important;
}

/* V18 logo image */
.logo img{width:78%;height:78%;object-fit:contain;display:block}

/* ===== V19 Smart Search PRO ===== */
.search-history {
  max-width: 760px;
  margin: 10px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.history-chip {
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.12);
  color: var(--text);
  border-radius: 999px;
  padding: 7px 11px;
  cursor: pointer;
  transition: .2s ease;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-chip:hover,
.history-chip.active {
  transform: translateY(-1px);
  border-color: rgba(108,92,231,.65);
  background: rgba(108,92,231,.2);
}

.history-chip.clear {
  opacity: .75;
}

.search-mark {
  background: rgba(255, 214, 10, .32);
  color: inherit;
  border-radius: 6px;
  padding: 0 3px;
}

.song-card small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  opacity: .85;
}

.virtual-song-list .song-card.virtual-row {
  min-height: 64px;
}

@media (max-width: 540px) {
  .search-history {
    justify-content: flex-start;
    padding: 0 4px;
  }

  .history-chip {
    max-width: 135px;
  }
}

/* V22 - Related Songs + Recently Played enhancement */
.related-song-section {
  margin-top: 18px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

.related-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.related-head h3 {
  margin: 0 0 5px;
  font-size: 18px;
}

.related-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.related-song-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.related-song-card {
  text-align: left;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,23,42,.58);
  color: inherit;
  border-radius: 16px;
  padding: 12px 13px;
  cursor: pointer;
  transition: .2s ease;
}

.related-song-card:hover {
  transform: translateY(-2px);
  border-color: rgba(108,92,231,.6);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.related-song-card b {
  display: block;
  font-size: 14px;
  line-height: 1.35;
  margin-bottom: 4px;
}

.related-song-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

body.live-mode .related-song-section {
  display: none !important;
}

@media (max-width: 680px) {
  .related-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .related-song-grid {
    grid-template-columns: 1fr;
  }
}

/* V23 - Recently Played + Continue Reading PRO */
.continue-section {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.continue-section[hidden] {
  display: none !important;
}

.continue-info {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.continue-icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(108,92,231,.18);
  border: 1px solid rgba(108,92,231,.35);
  flex: 0 0 auto;
}

.continue-info h3,
.quick-head p {
  margin: 0;
}

.continue-info h3 {
  font-size: 17px;
  margin-bottom: 5px;
}

.continue-info p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.continue-info p b {
  color: var(--text);
}

.continue-info p span {
  opacity: .8;
}

.continue-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.recently-section {
  margin-bottom: 18px;
}

.full-card {
  width: 100%;
}

.recently-list {
  max-height: 260px;
  overflow-y: auto;
  padding-right: 6px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.recently-item {
  text-align: left;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,23,42,.46);
  color: inherit;
  border-radius: 16px;
  padding: 12px 13px;
  cursor: pointer;
  transition: .2s ease;
}

.recently-item:hover {
  transform: translateY(-2px);
  border-color: rgba(108,92,231,.6);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.recently-item b {
  display: block;
  font-size: 14px;
  line-height: 1.35;
  margin-bottom: 4px;
}

.recently-item span {
  color: var(--muted);
  font-size: 12px;
}

body.live-mode .continue-section,
body.live-mode .recently-section {
  display: none !important;
}

@media (max-width: 680px) {
  .continue-section {
    align-items: flex-start;
    flex-direction: column;
  }

  .continue-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .recently-list {
    grid-template-columns: 1fr;
    max-height: 300px;
  }
}

/* V26 - UX PRO theme, SEO/PWA polish, and local insights */
body.neon {
  --bg: #020617;
  --card: rgba(2, 12, 27, .78);
  --card-solid: #07111f;
  --text: #e6fbff;
  --muted: #9ad8e8;
  --primary: #00f5ff;
  --primary-2: #8b5cf6;
  --secondary: #00ff9d;
  --danger: #ff4d8d;
  --border: rgba(0,245,255,.22);
  --shadow: 0 26px 70px rgba(0,245,255,.12);
  --soft: rgba(0,245,255,.14);
  --glass: rgba(2,12,27,.68);
  --pre: rgba(0,245,255,.075);
}

body.neon .hero {
  background:
    radial-gradient(circle at 16% 18%, rgba(0,245,255,.34), transparent 26%),
    radial-gradient(circle at 84% 10%, rgba(139,92,246,.36), transparent 28%),
    linear-gradient(135deg, rgba(2,6,23,.96), rgba(8,13,32,.96));
  box-shadow: 0 34px 90px rgba(0,245,255,.18);
}

body.neon .quick-card,
body.neon .panel,
body.neon .song-screen-panel {
  box-shadow: 0 18px 60px rgba(0,245,255,.09), inset 0 0 0 1px rgba(0,245,255,.08);
}

body.neon .premium-badge,
body.neon .small-btn.active,
body.neon .control-btn,
body.neon .install-btn {
  box-shadow: 0 0 22px rgba(0,245,255,.25);
}

.insight-section {
  margin-top: 16px;
}

.compact-rank-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  overflow: visible;
}

.ranked-item {
  position: relative;
  padding-left: 54px !important;
  min-height: 66px;
}

.ranked-item small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.rank-badge {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: white !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
}

.icon-btn {
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.icon-btn:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 12px 30px rgba(15,23,42,.18);
}

@media (display-mode: standalone) {
  .install-btn { display: none !important; }
  .hero { padding-top: 28px; }
}

@media (max-width: 720px) {
  .compact-rank-list {
    grid-template-columns: 1fr;
  }
}