/* MIDI ROYALE PRO - gaya dasar + responsif (dulu inline di index.html) */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700;800&family=Orbitron:wght@600;700;800;900&family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');
:root {
--sat: env(safe-area-inset-top, 0px);
--sar: env(safe-area-inset-right, 0px);
--sab: env(safe-area-inset-bottom, 0px);
--sal: env(safe-area-inset-left, 0px);
--accent-rgb: 212 175 55;
--ac-300: 229 207 135;
--ac-400: 212 175 55;
--ac-500: 180 149 47;
--ac-600: 144 119 37;
--ac-800: 81 67 21;
--ac-900: 59 49 15;
--ac-950: 32 26 8;
}
* {
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100vh;
height: 100dvh;
overflow: hidden;
margin: 0;
padding: 0;
}
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: #04060a;
color: #f3f4f6;
touch-action: manipulation;
user-select: none;
-webkit-user-select: none;
overscroll-behavior: none;
display: flex;
flex-direction: column;
}
/* SAFE AREA PADDING UNTUK MODE PORTRAIT DAN LANDSCAPE FULLSCREEN */
.safe-header-padding {
padding-top: calc(var(--sat) + 0.35rem);
padding-left: max(0.5rem, var(--sal));
padding-right: max(0.5rem, var(--sar));
}
.safe-body-padding {
padding-left: max(0.5rem, var(--sal));
padding-right: max(0.5rem, var(--sar));
padding-bottom: max(0.35rem, var(--sab));
}
/* Custom Scrollbar Utility */
.scrollbar-none::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.scrollbar-none, .no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
.touch-control {
touch-action: none !important;
-webkit-touch-callout: none;
-webkit-user-drag: none;
user-select: none;
}
.glass-card {
background: linear-gradient(145deg, rgba(15, 23, 42, 0.88) 0%, rgba(8, 12, 22, 0.96) 100%);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.main-tab-btn {
background: rgba(13, 19, 34, 0.8);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #94a3b8;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.main-tab-btn.active {
background: rgb(var(--accent-rgb) / 0.12);
border-color: rgb(var(--accent-rgb));
color: rgb(var(--accent-rgb));
box-shadow: 0 0 16px rgb(var(--accent-rgb) / 0.3);
}
.category-tab {
background: rgba(13, 19, 34, 0.8);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #94a3b8;
transition: all 0.2s ease;
}
.category-tab.active {
background: rgb(var(--accent-rgb) / 0.1);
border-color: rgb(var(--accent-rgb));
color: rgb(var(--accent-rgb));
box-shadow: 0 0 14px rgb(var(--accent-rgb) / 0.25);
}
.voice-tile {
position: relative;
background: #080c16;
border-radius: 0.8rem;
border: 2px solid #1e293b;
transition: transform 0.1s ease, border-color 0.15s, box-shadow 0.15s;
overflow: hidden;
min-height: 80px;
}
.voice-tile:active {
transform: scale(0.96);
}
.voice-tile.glow-cyan { border-color: rgb(var(--accent-rgb) / 0.35); }
.voice-tile.glow-cyan.active-tile {
border-color: rgb(var(--accent-rgb));
box-shadow: 0 0 20px rgb(var(--accent-rgb) / 0.4);
background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.15) 0%, #080c16 100%);
}
.voice-tile.glow-amber { border-color: rgba(245, 158, 11, 0.35); }
.voice-tile.glow-amber.active-tile {
border-color: #f59e0b;
box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
background: linear-gradient(180deg, rgba(245, 158, 11, 0.15) 0%, #080c16 100%);
}
.voice-tile.glow-purple { border-color: rgba(168, 85, 247, 0.35); }
.voice-tile.glow-purple.active-tile {
border-color: #a855f7;
box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
background: linear-gradient(180deg, rgba(168, 85, 247, 0.15) 0%, #080c16 100%);
}
.voice-tile.glow-orange { border-color: rgba(255, 107, 0, 0.35); }
.voice-tile.glow-orange.active-tile {
border-color: #ff6b00;
box-shadow: 0 0 20px rgba(255, 107, 0, 0.4);
background: linear-gradient(180deg, rgba(255, 107, 0, 0.15) 0%, #080c16 100%);
}
.voice-tile.glow-rose { border-color: rgba(244, 63, 94, 0.35); }
.voice-tile.glow-rose.active-tile {
border-color: #f43f5e;
box-shadow: 0 0 20px rgba(244, 63, 94, 0.4);
background: linear-gradient(180deg, rgba(244, 63, 94, 0.15) 0%, #080c16 100%);
}
.tile-badge {
background: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #94a3b8;
font-family: 'JetBrains Mono', monospace;
border-radius: 9999px;
padding: 0.1rem 0.35rem;
font-size: 0.55rem;
font-weight: 700;
white-space: nowrap;
}
.slider-track {
background: #05070e;
border: 1.5px solid #1e293b;
border-radius: 0.85rem;
position: relative;
overflow: hidden;
touch-action: none !important;
cursor: pointer;
-webkit-user-drag: none;
}
.pitch-center-line {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: rgb(var(--accent-rgb));
box-shadow: 0 0 10px rgb(var(--accent-rgb));
z-index: 10;
transform: translateX(-50%);
}
.key-white {
background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 100%);
color: #0f172a;
border: 1px solid #64748b;
box-shadow: inset 0 -4px 6px rgba(0,0,0,0.25);
touch-action: none !important;
cursor: pointer;
}
.key-white.qt-active {
background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
color: #ffffff;
box-shadow: 0 0 16px rgba(56, 189, 248, 0.8), inset 0 -3px 5px rgba(0,0,0,0.3);
}
.key-black {
background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
color: #f8fafc;
border: 1px solid #334155;
box-shadow: 0 4px 10px rgba(0,0,0,0.7);
touch-action: none !important;
cursor: pointer;
}
.key-black.qt-active {
background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
color: #ffffff;
box-shadow: 0 0 16px rgba(2, 132, 199, 0.9);
}
.style-btn {
background: #080c16;
border: 1.5px solid #1e293b;
border-radius: 0.6rem;
transition: all 0.12s ease;
}
.style-btn:active {
transform: scale(0.95);
}
.style-btn.active-style {
box-shadow: 0 0 12px currentColor;
background: rgba(15, 23, 42, 0.9);
}
#mainContainer {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
@media screen and (orientation: landscape) {
header.glass-card {
padding: 0.35rem 0.5rem !important;
margin-bottom: 0.35rem !important;
}
.main-tab-btn {
padding-top: 0.3rem !important;
padding-bottom: 0.3rem !important;
}
.slider-track {
height: 2.75rem !important;
}
#panelQt .relative {
height: 8rem !important;
}
#blackKeysContainer {
height: 5rem !important;
}
.glass-card {
padding: 0.5rem !important;
}
}
/* ===== v5 FEATURE PACK STYLES ===== */
.is-hidden { display: none !important; }
input, textarea { -webkit-user-select: text; user-select: text; }

/* Performance strip (transpose / octave / dual / keys / registration) */
.perf-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; width: 100%; padding: 0.15rem 0 0.1rem; }
.perf-group { display: flex; align-items: center; gap: 0.2rem; background: rgba(8, 12, 22, 0.85); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 0.7rem; padding: 0.15rem; }
.pstep { width: 30px; height: 34px; border-radius: 0.55rem; background: #0b1120; border: 1px solid #1e293b; color: #e2e8f0; font: 700 16px/1 'JetBrains Mono', monospace; display: flex; align-items: center; justify-content: center; touch-action: manipulation; transition: transform 0.08s; }
.pstep:active { transform: scale(0.9); border-color: rgb(var(--accent-rgb)); }
.pstep.sm { width: 26px; height: 26px; font-size: 14px; }
.pval { min-width: 46px; height: 34px; border-radius: 0.5rem; background: #05070e; border: 1px solid #1e293b; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; touch-action: manipulation; }
.pval .pl { font: 800 7px 'JetBrains Mono', monospace; letter-spacing: 0.08em; color: #64748b; }
.pval .pv { font: 800 13px 'JetBrains Mono', monospace; color: rgb(var(--accent-rgb)); margin-top: 2px; }
.pval.warn { border-color: rgba(251, 191, 36, 0.6); }
.pval.warn .pv { color: #fbbf24; }
.ptoggle { height: 34px; padding: 0 0.6rem; border-radius: 0.65rem; background: #0b1120; border: 1.5px solid #1e293b; color: #94a3b8; font: 800 10px 'Orbitron', sans-serif; letter-spacing: 0.04em; touch-action: manipulation; white-space: nowrap; transition: all 0.15s; }
.ptoggle.sm { height: 26px; padding: 0 0.5rem; font-size: 9px; }
.ptoggle.on { color: rgb(var(--accent-rgb)); border-color: rgb(var(--accent-rgb)); background: rgb(var(--accent-rgb) / 0.12); box-shadow: 0 0 12px rgb(var(--accent-rgb) / 0.35); }
.ptoggle.purple.on { color: #c084fc; border-color: #a855f7; background: rgba(168, 85, 247, 0.14); box-shadow: 0 0 12px rgba(168, 85, 247, 0.45); }

.reg-group { display: flex; align-items: center; gap: 0.25rem; flex: 1 1 290px; min-width: 0; }
.reg-store { height: 34px; padding: 0 0.55rem; border-radius: 0.6rem; background: #0b1120; border: 1.5px solid #1e293b; color: #f59e0b; font: 800 10px 'Orbitron', sans-serif; touch-action: manipulation; flex-shrink: 0; }
.reg-store.armed { background: rgba(245, 158, 11, 0.2); border-color: #f59e0b; box-shadow: 0 0 12px rgba(245, 158, 11, 0.5); }
.reg-btn { position: relative; flex: 1 1 0; min-width: 0; height: 34px; border-radius: 0.6rem; background: #080c16; border: 1.5px solid #1e293b; color: #475569; font: 800 12px 'Orbitron', sans-serif; touch-action: manipulation; transition: all 0.12s; }
.reg-btn:active { transform: scale(0.92); }
.reg-btn.has-data { color: #e2e8f0; border-color: rgb(var(--accent-rgb) / 0.35); }
.reg-btn.has-data::after { content: ''; position: absolute; top: 3px; right: 4px; width: 4px; height: 4px; border-radius: 50%; background: rgb(var(--accent-rgb)); }
.reg-btn.active-reg { color: rgb(var(--accent-rgb)); border-color: rgb(var(--accent-rgb)); background: rgb(var(--accent-rgb) / 0.14); box-shadow: 0 0 14px rgb(var(--accent-rgb) / 0.45); }
.reg-group.armed .reg-btn { border-color: #f59e0b; animation: regBlink 0.9s ease-in-out infinite; }
@keyframes regBlink { 0%, 100% { box-shadow: 0 0 0 rgba(245, 158, 11, 0); } 50% { box-shadow: 0 0 10px rgba(245, 158, 11, 0.7); } }

/* Voice search + favorites + layer */
.vsearch-row { display: flex; align-items: center; gap: 0.5rem; }
.vsearch-box { position: relative; flex: 1; display: flex; align-items: center; background: #05070e; border: 1.5px solid #1e293b; border-radius: 0.75rem; padding: 0 0.5rem; height: 34px; }
.vsearch-box:focus-within { border-color: rgb(var(--accent-rgb)); }
.vsearch-box input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #f1f5f9; font-size: 16px; font-family: 'Plus Jakarta Sans', sans-serif; padding: 0 0.35rem; height: 100%; }
.vsearch-box button { color: #94a3b8; font-size: 18px; line-height: 1; padding: 0 0.25rem; }
.fav-btn { position: absolute; top: 1px; left: 1px; width: 28px; height: 28px; z-index: 10; display: flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; color: #475569; touch-action: manipulation; }
.fav-btn.on { color: #fbbf24; text-shadow: 0 0 8px rgba(251, 191, 36, 0.7); }
.voice-tile.layer-tile { box-shadow: inset 0 0 0 2px #a855f7, 0 0 14px rgba(168, 85, 247, 0.5); }
.voice-tile.layer-tile::after { content: 'L2'; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); font: 800 8px 'JetBrains Mono', monospace; color: #d8b4fe; background: rgba(88, 28, 135, 0.7); border-radius: 9999px; padding: 0 4px; pointer-events: none; }
.tile-empty { grid-column: 1 / -1; text-align: center; color: #64748b; font-size: 12px; padding: 1.5rem 0.5rem; }
.layer-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.5rem; border: 1px solid rgba(168, 85, 247, 0.45); background: rgba(168, 85, 247, 0.08); border-radius: 0.7rem; font-size: 11px; }
.layer-bar.armed { background: rgba(168, 85, 247, 0.22); box-shadow: 0 0 12px rgba(168, 85, 247, 0.45); }
.layer-bar .lb-tag { font: 800 9px 'Orbitron', sans-serif; color: #c084fc; letter-spacing: 0.06em; }
.layer-bar .lb-name { flex: 1; min-width: 0; font-weight: 700; color: #f1f5f9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-bar .lb-ch { font: 700 10px 'JetBrains Mono', monospace; color: #94a3b8; }
.layer-bar button { font: 800 9px 'Orbitron', sans-serif; color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.5); border-radius: 0.5rem; padding: 0.3rem 0.5rem; touch-action: manipulation; }

/* Virtual keyboard dock */
.vk-dock { flex-shrink: 0; margin-top: 0.4rem; padding: 0.35rem 0.45rem 0.45rem; border-radius: 1rem; }
.vk-toolbar { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.3rem; overflow-x: auto; scrollbar-width: none; }
.vk-toolbar::-webkit-scrollbar { display: none; }
.vk-title { font: 800 9px 'Orbitron', sans-serif; color: rgb(var(--accent-rgb)); letter-spacing: 0.08em; }
.vk-range { font: 700 11px 'JetBrains Mono', monospace; color: #e2e8f0; min-width: 52px; text-align: center; }
.vk-info { flex: 1; font: 700 9px 'JetBrains Mono', monospace; color: #fbbf24; text-align: right; white-space: nowrap; }
.vk-wrap { height: clamp(84px, 22dvh, 132px); touch-action: none; border-radius: 0.6rem; overflow: hidden; background: #02040a; border: 1px solid #1e293b; }
.vk-inner { position: relative; width: 100%; height: 100%; display: flex; touch-action: none; -webkit-touch-callout: none; }
.vk-white { position: relative; flex: 1 1 0; min-width: 0; height: 100%; background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 100%); border-right: 1px solid #64748b; border-radius: 0 0 5px 5px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 3px; font: 700 9px 'JetBrains Mono', monospace; color: #0f172a; }
.vk-white.down { background: linear-gradient(180deg, rgb(var(--ac-300)) 0%, rgb(var(--ac-500)) 100%); color: #fff; box-shadow: 0 0 14px rgb(var(--accent-rgb) / 0.7) inset; }
.vk-black { position: absolute; top: 0; height: 62%; z-index: 2; background: linear-gradient(180deg, #1e293b 0%, #020617 100%); border: 1px solid #334155; border-radius: 0 0 4px 4px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7); }
.vk-black.down { background: linear-gradient(180deg, rgb(var(--ac-500)) 0%, rgb(var(--ac-800)) 100%); box-shadow: 0 0 12px rgb(var(--accent-rgb) / 0.8); }
.vk-qt::before { content: ''; position: absolute; top: 6px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: rgb(var(--accent-rgb)); box-shadow: 0 0 6px rgb(var(--accent-rgb)); pointer-events: none; }
.vk-white.vk-qt::before { top: auto; bottom: 18px; }

/* Toast */
#toast { position: fixed; left: 50%; bottom: calc(var(--sab) + 64px); transform: translateX(-50%) translateY(8px); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 70; background: rgba(8, 12, 22, 0.96); border: 1px solid rgb(var(--accent-rgb) / 0.55); color: #e2e8f0; font: 700 11px 'JetBrains Mono', monospace; padding: 0.45rem 0.8rem; border-radius: 0.8rem; max-width: 90vw; text-align: center; }
#toast.show { opacity: 1; transform: translateX(-50%); }

/* Settings: theme swatches, selects */
.swatch { width: 28px; height: 28px; border-radius: 9999px; border: 2px solid transparent; box-shadow: 0 0 8px currentColor; touch-action: manipulation; }
.swatch.sel { border-color: #fff; }
.set-select { background: #0f172a; border: 1px solid #334155; color: rgb(var(--accent-rgb)); border-radius: 0.5rem; padding: 0.35rem 0.5rem; font-weight: 700; font-size: 12px; max-width: 55%; }

@media screen and (orientation: landscape) {
  .perf-strip { gap: 0.25rem; }
  .pstep, .pval, .ptoggle, .reg-btn, .reg-store { height: 30px; }
}

/* ===== MR GOLD LIVE UI (tambahan tampilan saja) ===== */
body{background:radial-gradient(120% 80% at 50% -10%,color-mix(in srgb,rgb(var(--accent-rgb)) 14%,#07070a) 0%,#07070a 55%)!important}
.mr-hero{display:grid;grid-template-columns:minmax(76px,1fr) minmax(0,3.2fr) minmax(76px,1fr);gap:.6rem;align-items:stretch;padding:.7rem;border-radius:1.1rem;border:1px solid rgb(var(--accent-rgb)/.45);background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(0,0,0,.35)),linear-gradient(100deg,#0a0a0d,rgb(var(--accent-rgb)/.14) 50%,#0a0a0d);box-shadow:0 0 28px rgb(var(--accent-rgb)/.14),inset 0 1px 0 rgba(255,255,255,.08);position:relative}
.mr-nav{min-height:64px;border-radius:.9rem;border:1px solid rgb(var(--accent-rgb)/.35);background:linear-gradient(#22222a,#111116);color:rgb(var(--ac-300));font:800 clamp(.7rem,2.4vw,1rem) Orbitron,sans-serif;letter-spacing:.06em;touch-action:manipulation}
.mr-nav:active{background:rgb(var(--accent-rgb)/.3);transform:scale(.97)}
.mr-name{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;background:none;border:0;color:#f6efd8;text-align:center}
.mr-name span{font:900 clamp(1.15rem,5.2vw,2.6rem)/1.1 Orbitron,sans-serif;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 0 18px rgb(var(--accent-rgb)/.55)}
.mr-name small{font:600 clamp(.6rem,2vw,.8rem) "JetBrains Mono",monospace;color:rgb(var(--ac-300));letter-spacing:.05em}
.mr-fs{position:absolute;top:-.1rem;right:.2rem;transform:translateY(-100%);background:none;border:0;color:rgb(var(--ac-300));font-size:1.2rem;padding:.2rem .5rem}
.voice-tile.active-tile{box-shadow:0 0 18px rgb(var(--accent-rgb)/.55)!important;border-color:rgb(var(--ac-300))!important}
.pstep,.reg-btn,.ptoggle,.reg-store{min-height:44px}
@media(min-height:700px){#voiceTilesGrid{max-height:50dvh!important}}
.mr-close,.mr-catwrap{display:none}
.mr-full{position:fixed!important;inset:0;z-index:45;border-radius:0!important;background:#07070a!important;padding:calc(var(--sat) + .6rem) max(.7rem,var(--sar)) calc(var(--sab) + .6rem) max(.7rem,var(--sal))!important;overflow:auto;max-height:none!important}
.mr-full #voiceTilesGrid{max-height:none!important;flex:1}
.mr-full .mr-close{display:block;min-height:48px;border-radius:.8rem;border:1px solid rgb(var(--accent-rgb)/.5);background:#14141a;color:rgb(var(--ac-300));font:800 .85rem Orbitron,sans-serif}
.mr-full .mr-catwrap{display:block;overflow-x:auto}
@media(prefers-reduced-motion:reduce){.mr-nav:active{transform:none}}

/* ===== MR GOLD 2: tuts quartertone, header, kontrol, lock ===== */
div:has(>#whiteKeysContainer){height:clamp(180px,38dvh,320px)!important;padding:.4rem;border-radius:1rem;background:linear-gradient(#17171d,#07070a);border:1px solid rgb(var(--accent-rgb)/.4);box-shadow:inset 0 2px 14px #000,0 0 22px rgb(var(--accent-rgb)/.12)}
.key-white{background:linear-gradient(#fffdf4,#ece4cc 85%,#cfc4a2)!important;border:1px solid #8c7a45!important;box-shadow:inset 0 -6px 8px rgba(0,0,0,.18)!important}
.key-black{background:linear-gradient(#3a3a42,#050507 70%)!important;border:1px solid rgb(var(--accent-rgb)/.5)!important;box-shadow:0 5px 8px rgba(0,0,0,.7)!important}
.key-white.qt-active,.key-black.qt-active{background:linear-gradient(rgb(var(--ac-300)),rgb(var(--ac-500)))!important;box-shadow:0 0 22px rgb(var(--accent-rgb)/.75)!important;transform:translateY(2px)}
.key-white.qt-active span,.key-black.qt-active span{color:#1a1405!important}
.key-white span{font-size:clamp(.6rem,2vw,.85rem)!important}
#panelCtrl button,#panelStyle button{min-height:48px;border-radius:.9rem}
#panelStyle button:active,#panelCtrl button:active{box-shadow:0 0 16px rgb(var(--accent-rgb)/.6)}
.mr-sec{display:none!important}
.mr-tools.open .mr-sec{display:flex!important}
.mr-more{min-width:40px;min-height:40px;border-radius:.8rem;border:1px solid rgb(var(--accent-rgb)/.4);background:#0c0c10;color:rgb(var(--ac-300));font-weight:900}
.mr-tb{position:absolute;top:0;right:.4rem;transform:translateY(-105%);display:flex;gap:.3rem}
.mr-tb button{background:none;border:0;color:rgb(var(--ac-300));font:800 1rem Orbitron,sans-serif;padding:.2rem .55rem;min-height:36px}
.mr-fs{position:static!important;transform:none!important}
@media(max-height:520px){.mr-hero{padding:.4rem}.mr-nav{min-height:48px}#voiceTilesGrid{max-height:none!important}}

#authModal{background:radial-gradient(90% 70% at 50% 0,color-mix(in srgb,rgb(var(--accent-rgb)) 14%,#07070a),#050506 70%)!important}
#authModal .glass-card{border-color:rgb(var(--accent-rgb)/.45)!important;box-shadow:0 0 40px rgb(var(--accent-rgb)/.18),inset 0 1px 0 rgba(255,255,255,.08)!important}
#btnAuthSubmit{background:linear-gradient(90deg,rgb(var(--ac-600)),rgb(var(--ac-300)) 50%,rgb(var(--ac-600)))!important;color:#0a0a0d!important;min-height:52px}
#authModal input{min-height:48px}

/* ===== MR GOLD 4: ikon tile + nama Mem ===== */
.voice-tile svg,.voice-tile img{width:clamp(30px,5vw,46px)!important;height:clamp(30px,5vw,46px)!important;object-fit:contain;filter:drop-shadow(0 0 6px rgb(var(--accent-rgb)/.35))}
.voice-tile img{border-radius:.5rem;border:1px solid rgb(var(--accent-rgb)/.35);background:#0a0a0d}
.voice-tile.active-tile svg{filter:drop-shadow(0 0 9px rgb(var(--accent-rgb)/.8))}
#mrRegName{display:block;width:100%;font:600 .62rem "JetBrains Mono",monospace;color:rgb(var(--ac-300));text-align:right;padding:.15rem .3rem 0;min-height:1em}

/* ===== MR LAYOUT v2: satu layar, tanpa scroll (landscape) ===== */
html,body{height:100dvh}
body{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto auto auto auto auto minmax(0,1fr) auto;gap:.4rem;padding:calc(var(--sat) + .3rem) max(.6rem,var(--sal)) calc(var(--sab) + .3rem) max(.6rem,var(--sar))!important;overflow:hidden}
body>.sticky,body>.sticky>header,main#mainContainer,#panelVoice:not(.hidden){display:contents!important}
footer{display:none!important}
body>.sticky>header>div:first-child{grid-area:1/1/2/8;min-width:0}
body>.sticky>header>div:last-child{grid-area:1/8/2/13;min-width:0}
body>.sticky>nav{grid-area:2/1/3/13;gap:.3rem}
.main-tab-btn{min-height:40px;padding:.2rem .3rem!important}
#fpsDisplay{display:none!important}
#mrHero{grid-area:3/1/4/13;min-height:0;margin:0;grid-template-rows:auto auto}
#perfStrip{grid-area:5/1/6/13;gap:.3rem}
.pstep,.ptoggle,.reg-btn,.reg-store{min-height:38px!important;height:38px!important}
.reg-group{flex:1 1 100%!important}
#panelVoice>div:nth-child(3){grid-area:6/1/7/13;margin:0}
#panelVoice>.glass-card{grid-area:7/1/8/13;min-height:0!important;display:flex;flex-direction:column;overflow:hidden;padding:.5rem!important;gap:.4rem}
#panelVoice>.glass-card [data-i18n=voiceHeader],#panelVoice>.glass-card>div:first-child i[data-lucide=music],#activeVoiceDisplay{display:none!important}
#voiceTilesGrid{max-height:none!important;flex:1 1 0;min-height:0;overflow-y:auto;align-content:start}
.voice-tile{padding:.35rem!important}
#panelQt,#panelCtrl,#panelStyle{grid-area:6/1/8/13;overflow:auto;min-height:0}
#vkDock{grid-area:8/1/9/13}
.mr-tb{position:static!important;transform:none!important;grid-column:1/-1;grid-row:2;justify-content:center}
/* --- portrait & layar sempit --- */
@media (orientation:portrait),(max-width:559px){
body>.sticky>header>div:first-child{grid-area:1/1/2/6}
body>.sticky>header>div:last-child{grid-area:1/6/2/13}
body>.sticky>header>div:first-child h1{font-size:.72rem}
body>.sticky>header>div:first-child>div>div:first-child{width:30px;height:30px}
.main-tab-btn{min-height:38px;font-size:.6rem!important}.main-tab-btn i{display:none}
#mrHero{padding:.45rem;gap:.35rem;grid-template-columns:minmax(64px,1fr) minmax(0,2.6fr) minmax(64px,1fr);grid-template-rows:auto auto}
.mr-nav{min-height:56px}
.mr-name span{font-size:clamp(1.05rem,5vw,1.7rem)}
.mr-tb{grid-row:2}.mr-tb button{min-height:30px}
.pstep{width:28px}.ptoggle{padding:0 .45rem}
.pstep,.ptoggle,.reg-btn,.reg-store{min-height:36px!important;height:36px!important}
#perfStrip{gap:.25rem}
div:has(>#gridColsSelect){display:none!important}
#panelVoice>.glass-card>div:first-child{position:absolute;top:.5rem;right:.5rem;width:auto;border:0!important;padding:0!important;z-index:2}
.vsearch-row{margin-right:6.4rem}
button[onclick="openAddInstrumentModal()"] span{display:none}
#voiceTilesGrid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))!important;grid-auto-rows:minmax(54px,auto);gap:.35rem!important}
.voice-tile{padding:.25rem!important;gap:.1rem!important}
.voice-tile .tile-badge{display:none}
.voice-tile svg,.voice-tile img{width:26px!important;height:26px!important}
.voice-tile h4{font-size:10px!important}
.style-btn{padding:.2rem!important;min-height:44px!important}
#panelStyle .glass-card,#panelCtrl .glass-card,#panelQt .glass-card{padding:.5rem!important;gap:.4rem!important}
}
@media (orientation:landscape) and (min-width:560px){
body{grid-template-rows:auto auto auto minmax(0,1fr) auto auto}
body>.sticky>header>div:first-child{grid-area:1/1/2/4}
body>.sticky>header>div:last-child{grid-area:1/10/2/13}
body>.sticky>nav{grid-area:1/4/2/10}
#perfStrip{grid-area:2/1/3/13;flex-wrap:nowrap;overflow:hidden}
.reg-group{flex:1 1 0!important}
#mrHero{grid-area:3/1/5/5;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) auto auto}
#mrHero .mr-name{grid-column:1/-1;grid-row:1}
#mrHero .mr-name span{white-space:normal}
#mrHero .mr-nav{grid-row:2}
.mr-tb{grid-row:3}
#panelVoice>div:nth-child(3){grid-area:3/5/4/13}
#panelVoice>.glass-card{grid-area:4/5/6/13}
#panelVoice>.glass-card>div:first-child{position:absolute;top:.5rem;right:.5rem;width:auto;border:0!important;padding:0!important;z-index:2}
.vsearch-row{margin-right:6.4rem}
div:has(>#gridColsSelect){display:none!important}
#panelQt,#panelCtrl,#panelStyle{grid-area:3/1/6/13}
#vkDock{grid-area:6/1/7/13}
}
@media (orientation:landscape) and (max-height:520px){
.main-tab-btn{min-height:36px;font-size:.58rem!important}.main-tab-btn i{display:none}
body>.sticky>header>div:first-child h1{font-size:.7rem}
body>.sticky>header>div:first-child>div>div:first-child{width:28px;height:28px}
.pstep,.ptoggle,.reg-btn,.reg-store{min-height:34px!important;height:34px!important}
.pstep{width:28px}.ptoggle{padding:0 .4rem}
#mrHero{padding:.4rem;gap:.3rem}.mr-nav{min-height:44px}
.mr-name span{font-size:clamp(1.1rem,3.4vw,1.9rem)}
.mr-tb button{min-height:30px;padding:.1rem .5rem}
#voiceTilesGrid{grid-template-columns:repeat(auto-fill,minmax(86px,1fr))!important;grid-auto-rows:minmax(46px,1fr);gap:.3rem!important}
.voice-tile{padding:.2rem!important;gap:.1rem!important;min-height:0}
.voice-tile .tile-badge{display:none}
.voice-tile svg,.voice-tile img{width:22px!important;height:22px!important}
.voice-tile h4{font-size:9px!important}
.vsearch-row input{min-height:32px}
button[onclick="openAddInstrumentModal()"] span{display:none}
#panelStyle .glass-card,#panelCtrl .glass-card,#panelQt .glass-card{padding:.4rem!important;gap:.3rem!important}
.style-btn{padding:.15rem!important;min-height:36px!important;flex-direction:row!important;gap:.3rem!important;font-size:.58rem!important}
.style-btn svg{width:14px!important;height:14px!important}
#pitchTouchTrack,#tripleTouchTrack{height:36px!important;margin:.1rem 0!important}
#panelQt>.glass-card{display:grid!important;grid-template-columns:minmax(0,42%) minmax(0,1fr);grid-auto-rows:min-content;column-gap:.5rem;align-items:start;height:100%}
#panelQt>.glass-card>:nth-child(1){grid-column:1}
#panelQt>.glass-card>:nth-child(1) h3{display:none}
#panelQt>.glass-card>:nth-child(2),#panelQt>.glass-card>:nth-child(3){grid-column:1}
#panelQt>.glass-card>div:has(#whiteKeysContainer){grid-column:2;grid-row:1/6;height:100%!important;min-height:0}
#panelQt>.glass-card>#activeTuningsBadge{grid-column:1}
}

/* ===== mr-responsive-v3 ===== */
/* =====================================================================
   MR RESPONSIVE v3: menyesuaikan otomatis ke semua ukuran layar
   (HP portrait/landscape, tablet, desktop). Hanya tampilan; logika tetap.
   ===================================================================== */

/* ---------- Tab utama: label panjang -> ringkas bila sempit ---------- */
body>.sticky>nav{container-type:inline-size;min-width:0}
.tl{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-short{display:none}
@container (max-width:420px){.tl-full{display:none}.tl-short{display:inline}}
.main-tab-btn{font-size:clamp(.58rem,1.5vw,.8rem)!important;min-width:0}

/* ---------- Header: pilihan MIDI mengecil, tombol tidak keluar layar ---------- */
body>.sticky>header>div:last-child{min-width:0;justify-content:flex-end}
body>.sticky>header>div:last-child>div:first-child{min-width:0!important;flex:1 1 72px}
#midiOutSelect{min-width:0;width:100%;text-overflow:ellipsis}
.mr-tools{flex:0 0 auto}
body>.sticky>header>div:first-child{min-width:0}
body>.sticky>header>div:first-child h1{overflow:hidden;text-overflow:ellipsis}
@media (orientation:landscape) and (min-width:560px){
  body>.sticky>header>div:first-child{grid-area:1/1/2/4}
  body>.sticky>nav{grid-area:1/4/2/10}
  body>.sticky>header>div:last-child{grid-area:1/10/2/13}
}

/* ---------- Bank memori 1-8: tidak lagi tertekan / bertumpuk ---------- */
#perfStrip{flex-wrap:wrap!important;overflow:visible!important;align-content:flex-start}
.reg-btn{min-width:30px;flex:1 1 30px}
.reg-group{flex:1 1 330px!important}
@media (orientation:landscape) and (min-width:560px) and (max-width:759px){
  .reg-btn{min-width:26px}.reg-group{flex:1 1 290px!important}
  .pstep{width:26px}.pval{min-width:38px}.perf-group{gap:.12rem}
}
#perfStrip{container-type:inline-size}
#mrRegName{flex:0 0 100%;width:100%;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (orientation:landscape) and (min-width:560px){
  #mrRegName{display:none}
}
@media (orientation:landscape) and (min-width:1000px){
  #mrRegName{display:block;flex:0 0 auto;width:auto;max-width:12rem}
}

/* ---------- Voice: tanpa kolom pencarian, daftar voice lebih luas ---------- */
.vsearch-row,.vsearch-box{display:none!important}
#panelVoice>div:nth-child(3){overflow:visible!important;flex-wrap:nowrap!important;min-width:0}
#categoryTabs{flex:1 1 0;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
#categoryTabs::-webkit-scrollbar{display:none}
.category-tab{flex:0 0 auto;white-space:nowrap}
#panelVoice>div:nth-child(3)>div:last-child{flex:0 0 auto}
#panelVoice>.glass-card>div:has(#toggleEditModeBtn){padding-bottom:.25rem!important;gap:.4rem!important;flex-wrap:nowrap!important}
#voiceCountBadge{margin-left:auto}
#voiceTilesGrid{scroll-snap-type:y proximity;scroll-padding-top:2px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.voice-tile{scroll-snap-align:start}

/* ---------- Control: Pitch Bend + 1 slider (Mod/Exp/Vel) terlihat semua ---------- */
#panelCtrl:not(.hidden){display:grid!important;grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;gap:.5rem}
#panelCtrl>.glass-card{min-height:0;display:flex;flex-direction:column;gap:.35rem!important}
#panelCtrl .pb-range-btn{min-height:32px!important;padding:.1rem .5rem}
#panelCtrl label{min-height:32px}
#pitchTouchTrack,#tripleTouchTrack{flex:1 1 auto;height:auto!important;min-height:48px;margin:.1rem 0!important}
#tripleTouchTrack>#tripleSliderFill{height:100%}
@media (orientation:landscape) and (min-width:640px){
  #panelCtrl:not(.hidden){grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr)}
}

/* ---------- Style: tombol memenuhi seluruh ruang panel ---------- */
#panelStyle:not(.hidden){display:flex!important;flex-direction:column;min-height:0}
#panelStyle>.glass-card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
#panelStyle>.glass-card>.grid{flex:1 1 0;min-height:0;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:minmax(0,1fr);gap:.6rem!important}
#panelStyle>.glass-card>.grid>div{display:flex;flex-direction:column;gap:.6rem;min-height:0;min-width:0}
#panelStyle>.glass-card>.grid>div>div{flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:.3rem}
#panelStyle>.glass-card>.grid>div>div>.grid{flex:1 1 0;min-height:0;grid-template-rows:minmax(0,1fr)}
#panelStyle .style-btn{height:100%;min-height:44px!important;flex-direction:column!important;gap:.2rem!important;padding:.2rem!important;font-size:clamp(.62rem,1.9vw,1.15rem)!important;line-height:1.1}
#panelStyle .style-btn svg{width:clamp(16px,3.2vw,30px)!important;height:clamp(16px,3.2vw,30px)!important}
#panelStyle .style-btn span{max-width:100%;overflow:hidden;text-overflow:clip;white-space:nowrap}
#panelStyle>.glass-card>.grid>div>div>span{font-size:clamp(.55rem,1.4vw,.8rem)!important}
@media (max-width:559px){
  #panelStyle>.glass-card>.grid{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:repeat(2,minmax(0,1fr))}
}

/* ---------- Quartertone: preset & kontrol membungkus, tidak terpotong ---------- */
#panelQt>.glass-card>div{min-width:0}
#panelQt>.glass-card>div:nth-child(1){flex-wrap:wrap}
#panelQt>.glass-card>div:nth-child(1)>div:last-child{flex-wrap:wrap!important;overflow:visible!important;gap:.3rem!important;min-width:0}
#panelQt>.glass-card>div:nth-child(2){flex-wrap:wrap!important;gap:.4rem!important}
#panelQt>.glass-card>div:nth-child(2)>div{flex-wrap:wrap}
#panelQt>.glass-card>div:nth-child(3){gap:.4rem;flex-wrap:wrap}
#panelQt #sysexBrandSelect{flex:1 1 140px;max-width:100%;min-width:0}
#panelQt button{min-height:34px}
#panelQt>.glass-card>div:last-child{flex-wrap:wrap;gap:.3rem}
@media (orientation:landscape) and (min-width:640px) and (max-height:700px){
  #panelQt>.glass-card{display:grid!important;grid-template-columns:minmax(0,48%) minmax(0,1fr);grid-template-rows:repeat(4,min-content) minmax(0,1fr);column-gap:.6rem;row-gap:.3rem!important;align-items:start;height:100%;padding:.4rem!important}
  #panelQt>.glass-card>div:nth-child(1){padding-bottom:.2rem!important;gap:.25rem!important}
  #panelQt>.glass-card>div:nth-child(1)>div:last-child span{display:none}
  #panelQt>.glass-card>div:nth-child(2),#panelQt>.glass-card>div:nth-child(3){padding:.3rem .4rem!important}
  #panelQt button{min-height:30px;padding-top:.15rem;padding-bottom:.15rem}
  #panelQt>.glass-card>:nth-child(1),#panelQt>.glass-card>:nth-child(2),#panelQt>.glass-card>:nth-child(3){grid-column:1}
  #panelQt>.glass-card>:nth-child(1) h3{display:none}
  #panelQt>.glass-card>div:has(#whiteKeysContainer){grid-column:2;grid-row:1/6;height:100%!important;min-height:0;align-self:stretch}
  #panelQt>.glass-card>:last-child{grid-column:1;grid-row:4}
}

/* ---------- Layar sangat sempit (HP kecil) ---------- */
@media (max-width:380px){
  .pstep{width:26px}.pval{min-width:38px}
  .ptoggle{padding:0 .4rem}
  #mrHero{grid-template-columns:minmax(54px,1fr) minmax(0,2.4fr) minmax(54px,1fr)}
}
/* ===== MR FIX 5: nama di header, ikon PREV/NEXT, logo kartu voice di tengah ===== */
.mr-author{font:700 clamp(7px,1.15vw,11px) Orbitron,sans-serif;letter-spacing:.1em;color:rgb(var(--ac-300));text-shadow:0 0 8px rgb(var(--accent-rgb)/.35);white-space:nowrap}
.mr-nav{display:flex;align-items:center;justify-content:center;gap:.4rem}
.mr-nav .mr-chev{width:1.25em;height:1.25em;flex:0 0 auto;color:rgb(var(--ac-300));filter:drop-shadow(0 0 5px rgb(var(--accent-rgb)/.55))}
.mr-nav:active .mr-chev{color:#fff}
.voice-tile{justify-content:flex-start!important}
.voice-tile .tile-ico{position:relative;flex:1 1 auto;align-self:stretch;min-height:26px;min-width:0}
.voice-tile .tile-ico svg,.voice-tile .tile-ico img{position:absolute;inset:0;margin:auto;height:min(100%,58px)!important;width:auto!important;max-width:100%;aspect-ratio:1/1}
.voice-tile .edit-btn svg{width:18px!important;height:18px!important;filter:none}
svg[data-lucide=crown],svg[data-lucide=music]{color:rgb(var(--ac-400))!important}
#midiStatusDot{width:9px!important;height:9px!important;transition:background .2s,box-shadow .2s}
#midiStatusDot.bg-emerald-400{background:#34d399!important;box-shadow:0 0 8px 2px rgb(52 211 153/.75)}
#midiStatusDot.bg-red-500{background:#ef4444!important;box-shadow:0 0 5px rgb(239 68 68/.5)}

@media (max-width:380px){.mr-nav{gap:.2rem}.mr-nav .mr-chev{width:1em;height:1em}}

/* ===== MR LANDSCAPE ONLY: login landscape + layar "putar perangkat" saat portrait ===== */
#authModal{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:max(.6rem,var(--sat,0px)) max(.8rem,var(--sar,0px)) max(.6rem,var(--sab,0px)) max(.8rem,var(--sal,0px))!important}
@media (orientation:landscape) and (max-height:560px){
  #authModal{align-items:flex-start!important}
  #authModal>.glass-card{display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:1.4rem;align-items:center;max-width:44rem!important;width:100%;margin:auto;padding:.9rem 1.2rem!important}
  #authModal>.glass-card>div:nth-child(1){grid-column:1;grid-row:1/3;margin:0!important}
  #authModal>.glass-card>form{grid-column:2;grid-row:1;margin:0}
  #authModal>.glass-card>div:nth-child(3){grid-column:2;grid-row:2;margin:.6rem 0 0!important;padding-top:.5rem!important}
  #authModal>.glass-card form{display:flex;flex-direction:column;gap:.5rem}
  #authModal>.glass-card form>*{margin:0!important}
  #authModal input{min-height:42px;padding-top:.4rem;padding-bottom:.4rem}
  #btnAuthSubmit{min-height:44px;padding-top:.5rem!important;padding-bottom:.5rem!important}
}
#mrRotate{display:none;position:fixed;inset:0;z-index:9999;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;padding:2rem;text-align:center;background:radial-gradient(90% 70% at 50% 0,color-mix(in srgb,rgb(var(--accent-rgb)) 14%,#07070a),#050506 70%);color:rgb(var(--ac-300));font-family:Orbitron,sans-serif}
#mrRotate svg{width:84px;height:84px;color:rgb(var(--ac-300));filter:drop-shadow(0 0 10px rgb(var(--accent-rgb)/.5));animation:mrTurn 2.4s ease-in-out infinite}
#mrRotate b{font-size:1rem;letter-spacing:.12em}
#mrRotate small{font:600 .75rem "JetBrains Mono",monospace;color:rgb(var(--ac-300)/.8);letter-spacing:.04em}
@keyframes mrTurn{0%,25%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
@media (orientation:portrait) and (pointer:coarse){#mrRotate{display:flex}}
@media (prefers-reduced-motion:reduce){#mrRotate svg{animation:none}}

/* ---------- Layar lebar (tablet / desktop) ---------- */
@media (min-width:1100px){
  body{max-width:1800px;margin-inline:auto}
  .mr-nav{min-height:72px}
}
/* v10.3.1: tombol keluar layar penuh di layar "PUTAR KE LANDSCAPE" (hanya saat layar penuh aktif) */
#mrRotateExit{display:none;margin-top:.4rem;padding:.7rem 1.2rem;border-radius:.8rem;border:1px solid rgb(var(--accent-rgb)/.7);background:rgb(var(--accent-rgb)/.15);color:rgb(var(--ac-300));font:800 .8rem Orbitron,sans-serif;letter-spacing:.1em;pointer-events:auto}
html.mr-in-fs #mrRotateExit{display:block}
html.mr-iphone #mrFsBtn,html.mr-iphone #paFs{display:none!important}