:root{--bg:#07111f;--panel:#0d1b2d;--panel2:#12243a;--text:#eef6ff;--muted:#93a7bf;--line:rgba(255,255,255,.10);--accent:#42d6ff;--gold:#ffd166;--danger:#ff6b6b;--ok:#7ae582}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at top,#132b47 0,#07111f 45%,#050914 100%);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text)}button,input{font:inherit}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:rgba(7,17,31,.86);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px}.logo{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#755cff);font-weight:900;color:#00111c;box-shadow:0 10px 35px rgba(66,214,255,.22)}h1,h2,h3,p{margin:0}.brand h1{font-size:18px}.brand p{font-size:12px;color:var(--muted)}.app{max-width:1100px;margin:0 auto;padding:18px 14px 120px}.hero{padding:18px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(145deg,rgba(18,36,58,.96),rgba(7,17,31,.92));box-shadow:0 20px 60px rgba(0,0,0,.22)}.hero h2{font-size:28px;line-height:1.05;margin-bottom:8px}.hero p{color:var(--muted);line-height:1.5}.searchbox{position:relative;margin-top:16px}.searchbox input{width:100%;padding:16px 18px;border-radius:20px;border:1px solid var(--line);background:#081522;color:var(--text);outline:none}.searchbox input:focus{border-color:rgba(66,214,255,.75);box-shadow:0 0 0 4px rgba(66,214,255,.12)}.section{margin-top:20px}.section-title{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:12px}.section-title h3{font-size:19px}.section-title span{color:var(--muted);font-size:13px}.grid-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.artist-card,.song-card,.mini-card{border:1px solid var(--line);border-radius:22px;background:rgba(13,27,45,.82);padding:14px;cursor:pointer;transition:.18s transform,.18s border-color,.18s background}.artist-card:hover,.song-card:hover,.mini-card:hover{transform:translateY(-2px);border-color:rgba(66,214,255,.55);background:rgba(18,36,58,.95)}.artist-card b,.song-card b{display:block;font-size:16px}.artist-card span,.song-card span,.mini-card span{display:block;color:var(--muted);font-size:13px;margin-top:4px}.chips{display:flex;gap:8px;overflow:auto;padding-bottom:4px}.chip{white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:9px 12px;background:rgba(255,255,255,.04);color:var(--text);cursor:pointer}.actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.btn,.ghost{border:1px solid var(--line);border-radius:16px;padding:10px 13px;background:rgba(255,255,255,.06);color:var(--text);cursor:pointer}.btn.primary{background:linear-gradient(135deg,var(--accent),#755cff);color:#00111c;font-weight:800;border:0}.btn.warn{background:rgba(255,209,102,.14);border-color:rgba(255,209,102,.35)}.muted{color:var(--muted)}.song-header{border:1px solid var(--line);border-radius:24px;background:rgba(13,27,45,.9);padding:16px;margin-bottom:14px}.lyrics{white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;line-height:1.75;font-size:15px;border:1px solid var(--line);border-radius:22px;background:#050b13;padding:16px;overflow:auto}.chord-token{color:var(--gold);font-weight:800}.diagram-dock{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(5,9,20,.92);backdrop-filter:blur(18px);border-top:1px solid var(--line);padding:10px 10px 12px;display:none}.diagram-dock.show{display:block}.diagram-inner{max-width:1100px;margin:0 auto}.diagram-title{font-size:12px;color:var(--muted);margin:0 0 8px 4px}.chord-row{display:flex;gap:8px;overflow:auto}.chord-card{min-width:76px;border:1px solid var(--line);border-radius:16px;background:rgba(18,36,58,.96);padding:8px;text-align:center}.chord-card strong{font-size:15px;color:var(--gold)}.grid{height:44px;margin-top:5px;background:linear-gradient(90deg,transparent 15%,rgba(255,255,255,.18) 16%,transparent 17%,transparent 32%,rgba(255,255,255,.18) 33%,transparent 34%,transparent 49%,rgba(255,255,255,.18) 50%,transparent 51%,transparent 66%,rgba(255,255,255,.18) 67%,transparent 68%,transparent 83%,rgba(255,255,255,.18) 84%,transparent 85%),linear-gradient(0deg,transparent 22%,rgba(255,255,255,.16) 23%,transparent 24%,transparent 47%,rgba(255,255,255,.16) 48%,transparent 49%,transparent 72%,rgba(255,255,255,.16) 73%,transparent 74%);position:relative}.grid span{width:7px;height:7px;border-radius:50%;background:var(--accent);position:absolute}.grid span:nth-child(1){left:12%;top:18%}.grid span:nth-child(2){left:30%;top:55%}.grid span:nth-child(3){left:48%;top:35%}.grid span:nth-child(n+4){display:none}.live body{}body.live-mode .topbar{display:none}body.live-mode .app{max-width:900px;padding-top:10px}body.live-mode .song-header{position:sticky;top:0;z-index:10;background:rgba(5,9,20,.96)}body.live-mode .lyrics{font-size:20px;line-height:1.9;border:0;background:transparent;padding:8px 4px 140px}.empty{padding:20px;border:1px dashed var(--line);border-radius:20px;color:var(--muted);text-align:center}@media(min-width:760px){.grid-list{grid-template-columns:repeat(4,minmax(0,1fr))}.hero h2{font-size:42px}.lyrics{font-size:16px}.brand h1{font-size:22px}}@media(max-width:420px){.grid-list{grid-template-columns:1fr}.topbar{padding:10px}.hero h2{font-size:24px}}


/* v1.1 Auto Scroll Upgrade: kontrol tetap terlihat, hanya lirik yang berjalan */
.song-header{position:sticky;top:72px;z-index:18}
.speed-control{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:16px;padding:8px 10px;background:rgba(255,255,255,.06);color:var(--muted);font-size:13px}
.speed-control select{border:0;outline:0;border-radius:12px;padding:6px 8px;background:#081522;color:var(--text)}
.lyrics{max-height:calc(100vh - 250px);min-height:46vh;overflow:auto;scroll-behavior:auto;-webkit-overflow-scrolling:touch}
body.live-mode{overflow:hidden}
body.live-mode .app{height:100vh;padding-bottom:112px;display:flex;flex-direction:column;overflow:hidden}
body.live-mode .song-header{position:sticky;top:0;flex:0 0 auto;margin-bottom:10px;border-radius:18px}
body.live-mode .lyrics{flex:1 1 auto;min-height:0;height:auto;max-height:none;overflow:auto;padding-bottom:170px}
body.live-mode .actions{margin-bottom:4px}
body.live-mode .speed-control{background:rgba(255,255,255,.08)}
@media(max-width:520px){.song-header{top:66px}.actions{gap:7px}.btn,.ghost,.speed-control{padding:9px 10px;border-radius:14px;font-size:13px}.speed-control{width:100%;justify-content:space-between}.lyrics{max-height:calc(100vh - 290px)}}

/* v1.2 Screen lirik lebih lega + tombol tutup + diagram file asli */
.song-header.compact{padding:10px 12px;margin-bottom:10px;border-radius:18px}
.song-topline{display:flex;align-items:center;gap:10px}
.song-topline h2{font-size:18px;line-height:1.15}
.close-btn{flex:0 0 auto;background:rgba(255,107,107,.14);border-color:rgba(255,107,107,.38);color:#ffd6d6;padding:8px 10px}
.compact-actions{margin:9px 0 0;gap:6px}
.compact-actions .btn,.compact-actions .speed-control{padding:7px 9px;border-radius:13px;font-size:12.5px}
.compact-actions .speed-control select{padding:4px 6px;font-size:12.5px}
.lyrics{font-size:16px;line-height:1.72;padding:14px;max-height:calc(100vh - 218px);min-height:56vh}
.chord-card{min-width:92px;max-width:120px}
.chord-img{width:100%;height:74px;object-fit:contain;display:block;margin-top:5px;border-radius:10px;background:rgba(255,255,255,.035)}
.chord-card .grid{display:none}
.chord-card.no-diagram .grid{display:block}
.chord-card.no-diagram .chord-img{display:none}
body.live-mode .song-header.compact{padding:8px 10px;margin-bottom:6px;border-radius:16px}
body.live-mode .song-topline h2{font-size:17px}
body.live-mode .compact-actions{margin-top:7px}
body.live-mode .lyrics{font-size:19px;line-height:1.78;padding:6px 2px 172px}
@media(max-width:520px){
  .song-header.compact{top:60px;padding:9px}
  .song-topline{gap:8px}
  .song-topline h2{font-size:16px}
  .compact-actions .btn,.compact-actions .speed-control{font-size:12px;padding:7px 8px}
  .compact-actions .speed-control{width:auto;justify-content:flex-start}
  .lyrics{font-size:15.5px;line-height:1.72;max-height:calc(100vh - 205px);min-height:58vh;padding:12px}
  body.live-mode .lyrics{font-size:18px;line-height:1.78}
  .chord-card{min-width:84px}.chord-img{height:66px}
}


/* v1.3 - Live View sederhana + auto scroll lebih pelan */
body.live-mode .topbar{display:none}
.live-only-header{box-shadow:0 10px 30px rgba(0,0,0,.22)}
.simple-live-actions{align-items:center}
.simple-live-actions .btn,.simple-live-actions .speed-control{font-size:12px;padding:7px 9px}
.live-only-lyrics{font-size:17px;line-height:1.82}
body.live-mode .app{padding-top:8px;padding-left:10px;padding-right:10px}
body.live-mode .song-header.compact{position:sticky;top:0;z-index:22;padding:8px 9px;margin-bottom:6px}
body.live-mode .lyrics.live-only-lyrics{font-size:18px;line-height:1.86;padding:7px 3px 178px;background:transparent;border:0}
body.live-mode .diagram-dock{padding-top:7px}
@media(max-width:520px){
  body.live-mode .song-topline h2{font-size:15.5px}
  body.live-mode .muted{font-size:11.5px}
  body.live-mode .simple-live-actions{gap:5px}
  body.live-mode .simple-live-actions .btn,
  body.live-mode .simple-live-actions .speed-control{font-size:11.5px;padding:6px 7px;border-radius:11px}
  body.live-mode .speed-control select{font-size:11.5px;padding:3px 5px}
  body.live-mode .lyrics.live-only-lyrics{font-size:17px;line-height:1.9;padding-bottom:170px}
}

/* v1.4 - Capo + kaki/footer sederhana */
.capo-control{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:14px;padding:5px;background:rgba(255,255,255,.055)}
.capo-control strong{font-size:12.5px;color:var(--gold);padding:0 2px;white-space:nowrap}
.capo-control .btn{padding:6px 8px;font-size:12px;border-radius:11px}
.site-footer{max-width:1100px;margin:0 auto 110px;padding:20px 14px 28px;color:var(--muted);font-size:13px;text-align:center;border-top:1px solid var(--line)}
.site-footer strong{color:var(--text)}
.site-footer .footer-links{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.site-footer .footer-links a{color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:6px 10px;background:rgba(255,255,255,.035)}
.site-footer .footer-links a:hover{color:var(--accent);border-color:rgba(66,214,255,.45)}
body.live-mode .site-footer{display:none}
body.live-mode .capo-control{gap:4px;padding:4px;border-radius:11px}
body.live-mode .capo-control strong{font-size:11.5px}
body.live-mode .capo-control .btn{font-size:11.2px;padding:5px 6px;border-radius:9px}
@media(max-width:520px){
  .capo-control{width:100%;justify-content:space-between}
  .capo-control strong{font-size:12px}
  body.live-mode .capo-control{width:auto;justify-content:flex-start}
  .site-footer{margin-bottom:96px;font-size:12px}
}

/* v1.5 - Auto Scroll fix + Logo + Theme Colors */
body[data-theme="ocean"]{--bg:#07111f;--panel:#0d1b2d;--panel2:#12243a;--text:#eef6ff;--muted:#93a7bf;--line:rgba(255,255,255,.10);--accent:#42d6ff;--gold:#ffd166;--danger:#ff6b6b;--ok:#7ae582;--hero1:#132b47;--hero2:#050914}
body[data-theme="sunset"]{--bg:#190b12;--panel:#2a1420;--panel2:#3b1b2a;--text:#fff7f3;--muted:#d8a9a4;--line:rgba(255,232,220,.13);--accent:#ff8a3d;--gold:#ffd166;--danger:#ff6b6b;--ok:#7ae582;--hero1:#4a1e22;--hero2:#12060b}
body[data-theme="forest"]{--bg:#06140f;--panel:#0d231a;--panel2:#143526;--text:#effff7;--muted:#95c7b0;--line:rgba(220,255,235,.12);--accent:#36d399;--gold:#f5d76e;--danger:#ff7777;--ok:#7ae582;--hero1:#143826;--hero2:#04100b}
body[data-theme="purple"]{--bg:#10091f;--panel:#1c1233;--panel2:#2a1b4d;--text:#f7f1ff;--muted:#bba8db;--line:rgba(240,230,255,.13);--accent:#a78bfa;--gold:#facc15;--danger:#fb7185;--ok:#86efac;--hero1:#30205d;--hero2:#0b0616}
body[data-theme="coffee"]{--bg:#15100c;--panel:#241a12;--panel2:#332419;--text:#fff8ef;--muted:#c5aa8e;--line:rgba(255,236,210,.13);--accent:#d69b5f;--gold:#ffd166;--danger:#ff806b;--ok:#9fdf9f;--hero1:#3b2b1e;--hero2:#100b07}
body{background:radial-gradient(circle at top,var(--hero1) 0,var(--bg) 45%,var(--hero2) 100%)}
.logo-img{width:48px;height:48px;border-radius:17px;display:block;box-shadow:0 10px 35px color-mix(in srgb, var(--accent) 30%, transparent)}
.top-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.theme-picker{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:7px 9px;background:rgba(255,255,255,.055);color:var(--muted);font-size:12px}
.theme-picker select{border:0;outline:0;border-radius:999px;padding:6px 8px;background:#081522;color:var(--text);max-width:94px}
.hero{background:linear-gradient(145deg,color-mix(in srgb, var(--panel2) 92%, transparent),color-mix(in srgb, var(--panel) 92%, transparent))}
.artist-card,.song-card,.mini-card,.song-header,.chord-card{background:color-mix(in srgb, var(--panel) 82%, transparent)}
.artist-card:hover,.song-card:hover,.mini-card:hover{border-color:color-mix(in srgb, var(--accent) 55%, transparent);background:color-mix(in srgb, var(--panel2) 95%, transparent)}
.searchbox input,.speed-control select,.theme-picker select{background:color-mix(in srgb, var(--panel) 85%, #000)}
.btn.primary{background:linear-gradient(135deg,var(--accent),color-mix(in srgb, var(--accent) 55%, #8b5cf6));color:#06111b}
body.live-mode .app{height:100dvh;max-height:100dvh;overflow:hidden;padding-bottom:116px}
body.live-mode .lyrics.live-only-lyrics{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:auto;-webkit-overflow-scrolling:touch}
body.live-mode .song-header.compact{flex:0 0 auto}
@media(max-width:520px){.brand p{display:none}.brand h1{font-size:15px}.logo-img{width:42px;height:42px;border-radius:15px}.topbar{gap:8px}.theme-picker span{display:none}.theme-picker select{max-width:84px;padding:5px 7px}.top-actions .ghost{padding:7px 9px;font-size:12px}}


/* v1.6 - Neon theme + home share buttons + admin link */
body[data-theme="neon"]{--bg:#03040a;--panel:#090d1f;--panel2:#111832;--text:#f4fbff;--muted:#9ba9ff;--line:rgba(0,255,255,.18);--accent:#00f5ff;--gold:#fffb73;--danger:#ff3df2;--ok:#39ff88;--hero1:#111338;--hero2:#02030a}
body[data-theme="neon"] .hero,body[data-theme="neon"] .artist-card,body[data-theme="neon"] .song-card,body[data-theme="neon"] .song-header,body[data-theme="neon"] .chord-card{box-shadow:0 0 24px rgba(0,245,255,.08), inset 0 0 0 1px rgba(255,61,242,.06)}
body[data-theme="neon"] .btn.primary,body[data-theme="neon"] .logo-img{filter:drop-shadow(0 0 10px rgba(0,245,255,.35))}
.admin-top-link{text-decoration:none;display:inline-flex;align-items:center}
.home-share{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.share-pill{border:1px solid var(--line);border-radius:999px;padding:8px 11px;color:var(--text);background:rgba(255,255,255,.055);cursor:pointer;font-size:13px}
.share-pill.wa{border-color:rgba(57,255,136,.28)}.share-pill.fb{border-color:rgba(66,133,244,.32)}.share-pill.x{border-color:rgba(255,255,255,.22)}.share-pill.tg{border-color:rgba(66,214,255,.32)}.share-pill.copy{border-color:rgba(255,209,102,.32)}
.share-pill:hover{transform:translateY(-1px);border-color:var(--accent)}
.admin-page{max-width:1100px;margin:0 auto;padding:18px 14px 80px}.admin-layout{display:grid;grid-template-columns:1fr;gap:14px}.admin-card{border:1px solid var(--line);border-radius:22px;background:rgba(13,27,45,.86);padding:15px}.admin-card h2,.admin-card h3{margin-bottom:10px}.form-grid{display:grid;grid-template-columns:1fr;gap:10px}.form-grid label{display:grid;gap:6px;color:var(--muted);font-size:13px}.form-grid input,.form-grid textarea{width:100%;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb, var(--panel) 85%, #000);color:var(--text);padding:11px;outline:none}.form-grid textarea{min-height:260px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;line-height:1.55}.admin-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.admin-list{display:grid;gap:8px;max-height:520px;overflow:auto}.admin-song-item{display:flex;justify-content:space-between;gap:10px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:10px;background:rgba(255,255,255,.035)}.admin-song-item b{display:block}.admin-song-item span{color:var(--muted);font-size:12px}.danger-btn{border-color:rgba(255,107,107,.38);color:#ffd6d6}.ok-note{color:var(--ok);font-size:13px;margin-top:8px}.admin-login{max-width:420px;margin:40px auto}.hidden{display:none!important}@media(min-width:820px){.admin-layout{grid-template-columns:1.1fr .9fr}}

/* v2.0 - Diagram sharp fix + Admin Pro */
.chord-card{
  min-width:132px;
  max-width:150px;
  padding:10px;
  border-radius:18px;
  background:rgba(18,36,58,.90);
}
.chord-card strong{display:block;font-size:22px;line-height:1.1;margin-bottom:7px;color:var(--gold)}
.chord-img{
  width:112px;
  height:132px;
  object-fit:contain;
  display:block;
  margin:0 auto;
  border-radius:12px;
  background:#fff;
  padding:7px;
  opacity:1!important;
  filter:none!important;
  mix-blend-mode:normal!important;
  image-rendering:auto;
  image-rendering:-webkit-optimize-contrast;
  box-shadow:0 6px 18px rgba(0,0,0,.20);
}
.chord-card.no-diagram{min-width:104px;max-width:118px}.chord-card.no-diagram .grid{display:block}.chord-card.no-diagram .chord-img{display:none}
body.hide-diagrams .diagram-dock{display:none!important}
body.hide-share .home-share,body.hide-share .share-control{display:none!important}
body.hide-capo .capo-control{display:none!important}
body.hide-autoscroll .auto-control{display:none!important}
.admin-full-card{margin-bottom:14px}.admin-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stat-card{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.045);padding:13px}.stat-card b{display:block;font-size:22px;color:var(--gold);line-height:1.15;word-break:break-word}.stat-card span{display:block;color:var(--muted);font-size:12px;margin-top:4px}.settings-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}.settings-grid label{display:grid;gap:6px;color:var(--muted);font-size:13px}.settings-grid select{width:100%;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb, var(--panel) 85%, #000);color:var(--text);padding:11px;outline:none}.toggle-row{display:flex!important;align-items:center;gap:9px;border:1px solid var(--line);border-radius:14px;padding:10px;background:rgba(255,255,255,.035)}.toggle-row input{width:18px;height:18px;accent-color:var(--accent)}.toggle-row span{color:var(--text)}
@media(min-width:820px){.admin-stats{grid-template-columns:repeat(4,minmax(0,1fr))}.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.chord-card{min-width:124px;max-width:136px}.chord-img{width:104px;height:124px;padding:6px}.chord-card strong{font-size:20px}.stat-card b{font-size:18px}}


/* v2.2 - Perfecting UI: 3 tema, share social color, diagram anti false chord, admin pro */
body[data-theme="ocean"]{--bg:#061424;--panel:#0b2037;--panel2:#123659;--text:#f2f8ff;--muted:#9bb8d7;--line:rgba(167,210,255,.14);--accent:#38bdf8;--gold:#ffd166;--danger:#ff6b6b;--ok:#7ae582;--hero1:#123659;--hero2:#030814}
body[data-theme="neon"]{--bg:#03040a;--panel:#080d20;--panel2:#111a38;--text:#f6fbff;--muted:#a8b3ff;--line:rgba(0,245,255,.20);--accent:#00f5ff;--gold:#fff76a;--danger:#ff39d6;--ok:#39ff88;--hero1:#151641;--hero2:#02030a}
body[data-theme="sunset"]{--bg:#150d08;--panel:#24150d;--panel2:#3a2211;--text:#fff8ec;--muted:#d8b987;--line:rgba(255,214,130,.16);--accent:#f59e0b;--gold:#ffd166;--danger:#ff806b;--ok:#9fdf9f;--hero1:#3d2613;--hero2:#0d0703}
body.hide-theme-picker .theme-picker{display:none!important}
.home-share{justify-content:center;align-items:center;gap:10px;margin:16px auto 0;max-width:760px}
.share-pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;min-width:112px;border:0;border-radius:999px;padding:10px 14px;color:#fff;font-weight:800;box-shadow:0 8px 22px rgba(0,0,0,.18);transition:.16s transform,.16s filter;white-space:nowrap}
.share-pill.wa{background:#25D366}.share-pill.fb{background:#1877F2}.share-pill.x{background:#111}.share-pill.tg{background:#229ED9}.share-pill.copy{background:linear-gradient(135deg,var(--gold),#f59e0b);color:#1c1203}
.share-pill:hover{transform:translateY(-2px);filter:brightness(1.08)}
@media(max-width:640px){.home-share{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.share-pill{width:100%;min-width:0;font-size:13px;padding:9px 10px}.share-pill.copy{grid-column:1/-1}}
@media(min-width:900px){.home-share{justify-content:center}.share-pill{min-width:128px}}
.chord-row{align-items:stretch}.chord-card{background:color-mix(in srgb,var(--panel) 90%,transparent);border-color:color-mix(in srgb,var(--accent) 28%,var(--line));}
.chord-img{background:#fff!important;filter:none!important;opacity:1!important;mix-blend-mode:normal!important;}
.admin-page{padding-top:22px}.admin-card{box-shadow:0 16px 45px rgba(0,0,0,.18)}.admin-card h2,.admin-card h3{color:var(--text)}
.admin-song-item{transition:.15s transform,.15s border-color}.admin-song-item:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 42%,var(--line))}
.ok-note{min-height:20px}.settings-grid .toggle-row{cursor:pointer}.settings-grid .toggle-row:hover{border-color:color-mix(in srgb,var(--accent) 42%,var(--line))}


/* v2.3 - Diagram compact + 3 tema final + admin list scroll */
body[data-theme="dark"]{--bg:#07111f;--panel:#0d1b2d;--panel2:#12243a;--text:#eef6ff;--muted:#93a7bf;--line:rgba(255,255,255,.10);--accent:#42d6ff;--gold:#ffd166;--danger:#ff6b6b;--ok:#7ae582;--hero1:#132b47;--hero2:#050914}
body[data-theme="light"]{--bg:#f4f8ff;--panel:#ffffff;--panel2:#e8f1ff;--text:#102033;--muted:#5d7188;--line:rgba(20,45,70,.14);--accent:#2563eb;--gold:#b7791f;--danger:#dc2626;--ok:#16a34a;--hero1:#dbeafe;--hero2:#f8fbff}
body[data-theme="neonblue"]{--bg:#020617;--panel:#061529;--panel2:#0b2447;--text:#effbff;--muted:#8fd5ff;--line:rgba(0,209,255,.22);--accent:#00d9ff;--gold:#eaff6a;--danger:#ff4fd8;--ok:#39ff88;--hero1:#092b5b;--hero2:#01030a}
body[data-theme="neonblue"] .hero,body[data-theme="neonblue"] .artist-card,body[data-theme="neonblue"] .song-card,body[data-theme="neonblue"] .song-header,body[data-theme="neonblue"] .admin-card{box-shadow:0 0 24px rgba(0,217,255,.08), inset 0 0 0 1px rgba(0,217,255,.04)}

/* Kembalikan diagram kecil seperti awal agar tidak memenuhi layar */
.diagram-dock{padding:8px 9px 10px}
.chord-row{gap:7px;align-items:stretch}
.chord-card{min-width:76px!important;max-width:86px!important;padding:7px!important;border-radius:14px!important}
.chord-card strong{font-size:14px!important;line-height:1.05!important;margin-bottom:4px!important}
.chord-img{width:62px!important;height:74px!important;padding:4px!important;border-radius:8px!important;box-shadow:0 4px 12px rgba(0,0,0,.16)!important}
.chord-card.no-diagram{min-width:76px!important;max-width:86px!important}
body.live-mode .lyrics.live-only-lyrics{padding-bottom:128px!important}
@media(max-width:520px){.chord-card{min-width:70px!important;max-width:78px!important;padding:6px!important}.chord-img{width:56px!important;height:66px!important;padding:3px!important}.chord-card strong{font-size:13px!important}.diagram-title{font-size:11px}.chord-row{gap:6px}}

/* Daftar lagu admin dibuat scroll agar tidak terlalu panjang */
.admin-list{max-height:360px!important;overflow-y:auto!important;overflow-x:hidden!important;padding-right:4px;scrollbar-width:thin}
.admin-song-item{align-items:flex-start}
.admin-song-item .admin-actions{margin-top:0;flex-shrink:0}
@media(max-width:640px){.admin-list{max-height:330px!important}.admin-song-item{display:grid;grid-template-columns:1fr;gap:8px}.admin-song-item .admin-actions{justify-content:flex-start}}

/* v2.6 - UX musisi: scroll daftar lagu, favorit, riwayat, setlist */
.song-list-scroll{max-height:62vh;overflow:auto;padding-right:4px;scrollbar-width:thin}
.mini-song-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:260px;overflow:auto;padding-right:4px}
.song-card{position:relative;padding-bottom:46px}
.mini-setlist-btn{position:absolute;left:12px;right:12px;bottom:10px;border:1px solid var(--line);border-radius:999px;padding:7px 9px;background:rgba(255,255,255,.06);color:var(--text);font-size:12px;cursor:pointer}
.mini-setlist-btn:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:color-mix(in srgb,var(--accent) 12%,transparent)}
.setlist-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px}
body.live-mode #favoriteBtn{border-color:color-mix(in srgb,var(--gold) 42%,var(--line));background:rgba(255,209,102,.10)}
@media(min-width:760px){.mini-song-row{grid-template-columns:repeat(4,minmax(0,1fr));max-height:320px}.song-list-scroll{max-height:68vh}}
@media(max-width:520px){.song-list-scroll{max-height:58vh}.mini-song-row{grid-template-columns:1fr;max-height:300px}.mini-setlist-btn{font-size:11px;padding:6px 8px}.song-card{padding-bottom:42px}}


/* v2.7 - homepage order and mobile scroll refinement */
.home-musisi-tools{display:grid;gap:16px;margin-top:18px}
.home-musisi-tools .section{margin-top:0}
.popular-scroll,.artist-letter-scroll{scrollbar-width:thin}
.letter-scroll{scrollbar-width:thin}
.artist-letter-scroll{max-height:430px;overflow:auto;padding-right:4px}
@media(min-width:760px){.home-musisi-tools{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}.home-musisi-tools .mini-song-row{grid-template-columns:1fr;max-height:280px}.artist-letter-scroll{max-height:520px}}
@media(max-width:640px){
  .popular-scroll{display:flex;overflow-x:auto;gap:10px;padding:2px 2px 10px;scroll-snap-type:x proximity}
  .popular-scroll .artist-card{min-width:150px;scroll-snap-align:start;flex:0 0 150px}
  .artist-letter-scroll{display:grid;grid-template-columns:1fr;max-height:360px;overflow:auto;padding-right:4px}
  .all-artist-section .chips{padding-bottom:10px}
  .home-musisi-tools .mini-song-row{max-height:220px}
}


/* v2.8 - Light theme contrast fix */
body[data-theme="light"]{
  background:linear-gradient(180deg,#f7fbff 0%,#eef5ff 45%,#ffffff 100%)!important;
  color:var(--text)!important;
}
body[data-theme="light"] .topbar{
  background:rgba(255,255,255,.92)!important;
  border-bottom:1px solid var(--line)!important;
  box-shadow:0 10px 30px rgba(37,99,235,.08)!important;
}
body[data-theme="light"] .brand h1,
body[data-theme="light"] .section-title h3,
body[data-theme="light"] .song-topline h2,
body[data-theme="light"] .song-header h2,
body[data-theme="light"] .admin-card h2,
body[data-theme="light"] .admin-card h3{
  color:#102033!important;
}
body[data-theme="light"] .brand p,
body[data-theme="light"] .section-title span,
body[data-theme="light"] .muted,
body[data-theme="light"] .diagram-title{
  color:#53667d!important;
}
body[data-theme="light"] .hero,
body[data-theme="light"] .song-header,
body[data-theme="light"] .artist-card,
body[data-theme="light"] .song-card,
body[data-theme="light"] .mini-card,
body[data-theme="light"] .admin-card{
  background:rgba(255,255,255,.94)!important;
  color:#102033!important;
  border-color:rgba(20,45,70,.14)!important;
  box-shadow:0 14px 38px rgba(37,99,235,.08)!important;
}
body[data-theme="light"] .lyrics{
  background:#ffffff!important;
  color:#102033!important;
  border-color:rgba(20,45,70,.14)!important;
}
body[data-theme="light"] .btn,
body[data-theme="light"] .ghost,
body[data-theme="light"] .speed-control,
body[data-theme="light"] .capo-control,
body[data-theme="light"] .theme-picker,
body[data-theme="light"] .mini-setlist-btn{
  background:#ffffff!important;
  color:#102033!important;
  border-color:rgba(20,45,70,.18)!important;
}
body[data-theme="light"] .btn.primary{
  background:linear-gradient(135deg,#2563eb,#60a5fa)!important;
  color:#ffffff!important;
  border:0!important;
}
body[data-theme="light"] .speed-control strong,
body[data-theme="light"] .capo-control strong,
body[data-theme="light"] .speed-control label,
body[data-theme="light"] .capo-control label,
body[data-theme="light"] .simple-live-actions,
body[data-theme="light"] .compact-actions{
  color:#102033!important;
}
body[data-theme="light"] .speed-control select,
body[data-theme="light"] .theme-picker select,
body[data-theme="light"] .form-grid input,
body[data-theme="light"] .form-grid textarea,
body[data-theme="light"] .settings-grid select,
body[data-theme="light"] .searchbox input{
  background:#ffffff!important;
  color:#102033!important;
  border-color:rgba(20,45,70,.18)!important;
}
body[data-theme="light"] .searchbox input::placeholder,
body[data-theme="light"] input::placeholder,
body[data-theme="light"] textarea::placeholder{
  color:#71859b!important;
}
body[data-theme="light"] .diagram-dock{
  background:rgba(255,255,255,.94)!important;
  border-top:1px solid rgba(20,45,70,.14)!important;
  box-shadow:0 -10px 28px rgba(37,99,235,.08)!important;
}
body[data-theme="light"] .chord-card{
  background:#ffffff!important;
  color:#102033!important;
  border-color:rgba(20,45,70,.14)!important;
}
body[data-theme="light"] .chord-card strong,
body[data-theme="light"] .chord-token,
body[data-theme="light"] .capo-control strong{
  color:#b7791f!important;
}
body[data-theme="light"].live-mode .song-header,
body[data-theme="light"] body.live-mode .song-header,
body[data-theme="light"] .song-header.compact,
body[data-theme="light"] .live-only-header{
  background:rgba(255,255,255,.96)!important;
  color:#102033!important;
  border-color:rgba(20,45,70,.14)!important;
}
body[data-theme="light"].live-mode .lyrics,
body[data-theme="light"] .lyrics.live-only-lyrics{
  color:#102033!important;
}
body[data-theme="light"] a,
body[data-theme="light"] .footer-links a{
  color:#2563eb!important;
}