/* ===== MIDI ROYALE PRO v10.2 — tuts & akor dari keyboard ===== */
/* keyboard virtual: tuts dari keyboard (hijau), berbeda dari sentuhan layar (warna aksen) */
.vk-white.in{background:linear-gradient(180deg,#86efac 0%,#22c55e 100%)!important;color:#052e16;box-shadow:0 0 14px rgba(34,197,94,.75) inset}
.vk-black.in{background:linear-gradient(180deg,#4ade80 0%,#15803d 100%)!important;box-shadow:0 0 12px rgba(34,197,94,.85)}
.vk-white.in.down,.vk-black.in.down{filter:hue-rotate(-40deg)}

/* dasar kotak akor */
.mr-chord{display:flex;flex-direction:column;line-height:1;pointer-events:none;font-variant-numeric:tabular-nums}
.mr-chord small{font:800 8px 'Orbitron','Chakra Petch',sans-serif;letter-spacing:.2em;opacity:.7}
.mr-chord .cn{font:900 22px 'Orbitron','Chakra Petch',sans-serif;letter-spacing:.02em;white-space:nowrap}
.mr-chord .cs{font:700 9px 'JetBrains Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;opacity:.75}
.mr-chord.mem .cn{opacity:.55}
.mr-chord.none .cn{opacity:.25}
.mr-chord.pop .cn{animation:chPop .22s cubic-bezier(.34,1.56,.64,1)}
@keyframes chPop{from{transform:scale(.82);opacity:.4}to{transform:none;opacity:1}}

/* Klasik: panel voice (pojok kanan atas) */
#mrChord{position:absolute;bottom:.5rem;right:.7rem;align-items:flex-end;gap:2px;max-width:34%;color:rgb(var(--ac-300,103 232 249));z-index:3}
#mrChord .cn{font-size:clamp(16px,2.4vw,24px);text-shadow:0 0 14px rgb(var(--accent-rgb)/.6)}
#mrChord .cs{color:#94a3b8;text-align:right}

/* Klasik: pil akor mengambang (tab selain VOICE) */
#mrChordFloat{position:fixed;z-index:40;right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));flex-direction:row;align-items:center;gap:.45rem;
  padding:.35rem .7rem;border-radius:99px;background:rgba(6,9,16,.88);border:1px solid rgb(var(--accent-rgb)/.6);color:rgb(var(--ac-300));box-shadow:0 6px 22px rgba(0,0,0,.5),0 0 16px rgb(var(--accent-rgb)/.25);
  opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
#mrChordFloat.show{opacity:1;transform:none}
#mrChordFloat .cn{font-size:18px}
#mrChordFloat .cs{display:none}
html.mr-locked #mrChordFloat{z-index:97}

/* Klasik/Pa5X: di atas keyboard virtual */
#vkChord{flex-direction:row;align-items:baseline;gap:.35rem;color:#4ade80;margin-right:.4rem}
#vkChord .cn{font-size:15px}
#vkChord .cs{display:none}

/* Pa5X: kotak CHORD di LCD, di atas piano mini */
#paRoot #paChord{position:absolute;right:17%;top:6px;max-width:44%;flex-direction:row;align-items:baseline;justify-content:flex-end;gap:.45rem;color:#00ff66;z-index:2}
#paRoot #paChord small{color:#00ff66}
#paRoot #paChord .cn{font-size:clamp(16px,2.3vw,26px);text-shadow:0 0 12px rgba(0,255,102,.65)}
#paRoot #paChord .cs{color:#9fe8b8;max-width:9rem}
#paRoot .pa-kboct{position:absolute;right:17%;bottom:1px;font:700 8px 'JetBrains Mono',monospace;color:rgba(0,255,102,.6);pointer-events:none}
html.lcd-amber #paRoot #paChord,html.lcd-amber #paRoot #paChord small,html.lcd-amber #paRoot .pa-kboct,html.lcd-amber #paRoot #paChordTop .cn{color:#ffb000}
html.lcd-amber #paRoot #paChord .cn{text-shadow:0 0 12px rgba(255,176,0,.6)}
html.lcd-ice #paRoot #paChord,html.lcd-ice #paRoot #paChord small,html.lcd-ice #paRoot .pa-kboct,html.lcd-ice #paRoot #paChordTop .cn{color:#38bdf8}
html.lcd-ice #paRoot #paChord .cn{text-shadow:0 0 12px rgba(56,189,248,.6)}

/* Pa5X: akor di bar atas (terlihat di semua tab) */
#paRoot #paChordTop{flex-direction:row;align-items:center;gap:.35rem;flex:0 0 auto;min-height:32px;padding:0 .6rem;border-radius:.55rem;background:#000;border:1px solid rgba(0,255,102,.45);color:#00ff66;min-width:5.2rem;justify-content:center}
#paRoot #paChordTop small{font-size:7px}
#paRoot #paChordTop .cn{font-size:15px;text-shadow:0 0 8px rgba(0,255,102,.55)}
#paRoot #paChordTop .cs{display:none}
@media (max-width:700px){#paRoot #paChordTop{min-width:3.6rem;padding:0 .4rem}#paRoot #paChordTop small{display:none}#paRoot #paChordTop .cn{font-size:13px}}

/* layar pendek */
@media (max-height:470px){#mrChord small{display:none}}
@media (max-width:760px){#paRoot #paChord,#paRoot .pa-kboct{display:none!important}}

/* Pengaturan */
.ki-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;font-size:12px;color:#cbd5e1}
.ki-sw{position:relative;flex:0 0 auto;width:42px;height:24px;cursor:pointer}
.ki-sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.ki-sw i{position:absolute;inset:0;border-radius:99px;background:#1e293b;border:1px solid #334155;transition:background .2s}
.ki-sw i::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#94a3b8;transition:transform .2s,background .2s}
.ki-sw input:checked+i{background:rgb(var(--accent-rgb)/.35);border-color:rgb(var(--accent-rgb))}
.ki-sw input:checked+i::after{transform:translateX(18px);background:rgb(var(--ac-300))}

/* grafis */
html.gfx-low .mr-chord .cn{text-shadow:none!important;animation:none!important}
html.gfx-low #mrChordFloat{transition:none;box-shadow:none}
html.gfx-low .vk-white.in,html.gfx-low .vk-black.in{box-shadow:none}