/* MIDI ROYALE PRO - tab KEYBOARD SET / PERFORMANCE + diagnosa koneksi (v8) */

/* ---- posisi panel di grid tata letak (sama dengan panel Quartertone/Control/Style) ---- */
#panelKset { grid-area: 6/1/8/13; overflow: hidden; min-height: 0; }
#panelKset:not(.hidden) { display: flex !important; flex-direction: column; }
@media (orientation: portrait), (max-width: 559px) { #panelKset { grid-area: 7/1/9/13; } }
@media (orientation: landscape) and (min-width: 560px) { #panelKset { grid-area: 3/1/6/13; } }
body > .sticky > nav.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* 5 tab: label ringkas lebih awal supaya tidak terpotong di tablet */
@container (max-width: 700px) { body > .sticky > nav.grid-cols-5 .tl-full { display: none; } body > .sticky > nav.grid-cols-5 .tl-short { display: inline; } }
/* 5 tab di layar HP: ikon disembunyikan supaya label QUARTER / CONTROL tidak terpotong */
@container (max-width: 560px) { body > .sticky > nav.grid-cols-5 .main-tab-btn i, body > .sticky > nav.grid-cols-5 .main-tab-btn svg { display: none !important; } body > .sticky > nav.grid-cols-5 .main-tab-btn { padding-left: .15rem !important; padding-right: .15rem !important; } }

/* ---- kartu & kepala ---- */
.ks-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: .45rem; padding: .55rem !important; border-radius: 1rem; }
.ks-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.ks-title { display: flex; flex-direction: column; min-width: 0; flex: 1 1 160px; }
.ks-t1 { font: 800 clamp(.62rem, 1.6vw, .85rem) Orbitron, sans-serif; letter-spacing: .06em; color: rgb(var(--ac-300)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ks-title small { font: 600 .66rem 'JetBrains Mono', monospace; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ks-acts { display: flex; gap: .3rem; flex-wrap: nowrap; }
.ks-btn { min-height: 36px; padding: 0 .7rem; border-radius: .65rem; background: #0b1120; border: 1.5px solid #1e293b; color: #cbd5e1; font: 800 .62rem Orbitron, sans-serif; letter-spacing: .03em; white-space: nowrap; touch-action: manipulation; }
.ks-btn.pri { color: #fbbf24; border-color: rgba(245, 158, 11, .6); background: rgba(245, 158, 11, .12); }
.ks-btn.on { color: rgb(var(--ac-300)); border-color: rgb(var(--accent-rgb)); background: rgb(var(--accent-rgb) / .14); }
.ks-btn.bad { color: #f87171; border-color: rgba(239, 68, 68, .5); background: rgba(239, 68, 68, .1); }
.ks-btn:active, .ks-nav:active, .ks-sts:active { transform: scale(.96); }

/* ---- baris PREV / STS 1-4 / NEXT ---- */
.ks-bar { display: flex; align-items: stretch; gap: .3rem; }
.ks-nav { flex: 1 1 0; min-height: 40px; border-radius: .7rem; border: 1px solid rgb(var(--accent-rgb) / .35); background: linear-gradient(#1a1d26, #0d0f15); color: rgb(var(--ac-300)); font: 800 .66rem Orbitron, sans-serif; touch-action: manipulation; }
.ks-lbl { align-self: center; font: 700 .55rem 'JetBrains Mono', monospace; color: #64748b; text-align: center; line-height: 1.1; max-width: 5.5rem; }
.ks-sts { flex: 0 0 auto; width: clamp(38px, 6vw, 56px); min-height: 40px; border-radius: .7rem; border: 1.5px solid rgba(245, 158, 11, .4); background: #0b1120; color: #fbbf24; font: 800 .8rem Orbitron, sans-serif; touch-action: manipulation; }

/* ---- grid tile ---- */
.ks-grid { flex: 1 1 0; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); grid-auto-rows: minmax(64px, auto); gap: .4rem; align-content: start; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: .1rem; }
.ks-tile { --c: 245 158 11; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; padding: .45rem .35rem; border-radius: .85rem; background: #080c16; border: 2px solid rgb(var(--c) / .35); color: #f1f5f9; text-align: center; min-width: 0; transition: transform .08s, box-shadow .15s; touch-action: manipulation; }
.ks-tile:active { transform: scale(.96); }
.ks-tile.on { border-color: rgb(var(--c)); background: rgb(var(--c) / .14); box-shadow: 0 0 16px rgb(var(--c) / .45), inset 0 0 12px rgb(var(--c) / .15); }
.ks-tile.editing { border-style: dashed; }
.ks-tile.c-amber { --c: 245 158 11; } .ks-tile.c-cyan { --c: 34 211 238; } .ks-tile.c-purple { --c: 168 85 247; } .ks-tile.c-rose { --c: 244 63 94; } .ks-tile.c-emerald { --c: 16 185 129; }
.ks-nm { font: 900 clamp(.62rem, 1.5vw, .82rem) Orbitron, sans-serif; letter-spacing: .02em; line-height: 1.15; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.ks-bd { font: 700 .52rem 'JetBrains Mono', monospace; color: rgb(var(--c)); opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ks-no { position: absolute; top: 3px; left: 6px; font: 800 .55rem 'JetBrains Mono', monospace; color: #475569; }
.ks-ed { position: absolute; top: 2px; right: 6px; font-size: .8rem; color: #fbbf24; }
.ks-empty { grid-column: 1 / -1; padding: .8rem; border: 1px dashed #334155; border-radius: .9rem; color: #cbd5e1; font-size: .78rem; line-height: 1.5; display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.ks-empty b { color: #fbbf24; font-family: Orbitron, sans-serif; font-size: .72rem; }
.ks-empty ol { margin: 0 0 0 1.1rem; padding: 0; list-style: decimal; }

/* ---- layar landscape pendek (HP) ---- */
@media (orientation: landscape) and (max-height: 520px) {
  .ks-card { padding: .4rem !important; gap: .3rem; }
  .ks-btn { min-height: 32px; padding: 0 .5rem; font-size: .56rem; }
  .ks-nav, .ks-sts { min-height: 34px; }
  .ks-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); grid-auto-rows: minmax(52px, auto); gap: .3rem; }
  .ks-title small { font-size: .58rem; }
}
@media (max-width: 640px) { .ks-acts .ks-btn span { display: none; } .ks-lbl { display: none; } }

/* ---- mode Pa5X ---- */
#paRoot .pa-tabs { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
#paRoot .pa-slot > #panelKset { display: flex !important; flex-direction: column; height: 100%; }
#paRoot #panelKset > .ks-card { border-radius: 8px !important; border-top: 2px solid #fbbf24 !important; }
#paRoot .ks-tile { border-radius: 8px; }
#paRoot .ks-tile.on { background: linear-gradient(180deg, rgb(var(--c) / .3), rgb(var(--c) / .1)); }

/* ---- modal rekam / editor ---- */
.ks-modal { position: fixed; inset: 0; z-index: 65; background: rgba(0, 0, 0, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: max(.5rem, env(safe-area-inset-top)) max(.6rem, env(safe-area-inset-right)) max(.5rem, env(safe-area-inset-bottom)) max(.6rem, env(safe-area-inset-left)); }
.ks-hide { display: none !important; }
.ks-mcard { width: 100%; max-width: 640px; max-height: 100%; display: flex; flex-direction: column; gap: .5rem; padding: .7rem; border-radius: 1rem; background: #0c101c; border: 1px solid rgb(var(--accent-rgb) / .45); color: #e2e8f0; font-size: .78rem; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.ks-mhead { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ks-mhead b { font: 800 .72rem Orbitron, sans-serif; letter-spacing: .05em; color: rgb(var(--ac-300)); }
.ks-x { width: 36px; height: 36px; border-radius: .6rem; background: #0b1120; border: 1px solid #1e293b; color: #cbd5e1; }
.ks-mbody { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: .5rem; -webkit-overflow-scrolling: touch; }
.ks-mfoot { display: flex; gap: .35rem; justify-content: flex-end; flex-wrap: wrap; }
.ks-sp { flex: 1 1 auto; }
.ks-in { font: 600 .7rem 'JetBrains Mono', monospace; color: #94a3b8; }
.ks-wait { display: flex; align-items: center; gap: .7rem; padding: .7rem; border-radius: .8rem; border: 1px solid rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .07); }
.ks-wait b { display: block; color: #fde68a; font-size: .8rem; line-height: 1.35; }
.ks-wait small { display: block; margin-top: .2rem; font: 700 .68rem 'JetBrains Mono', monospace; color: #fbbf24; }
.ks-pulse { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 rgba(239, 68, 68, .7); animation: ksPulse 1.2s infinite; }
@keyframes ksPulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .7); } 70% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
@media (prefers-reduced-motion: reduce) { .ks-pulse { animation: none; } }
.ks-ok { font: 800 .74rem Orbitron, sans-serif; color: #34d399; }
.ks-sum { display: flex; flex-direction: column; gap: .2rem; font: 600 .68rem 'JetBrains Mono', monospace; color: #cbd5e1; background: #060912; border: 1px solid #1e293b; border-radius: .6rem; padding: .45rem .55rem; max-height: 9.5rem; overflow-y: auto; }
.ks-sum:empty { display: none; }
.ks-sum b { color: rgb(var(--ac-300)); }
.ks-warn { font-size: .7rem; color: #fde68a; border-left: 3px solid #f59e0b; padding: .3rem .5rem; background: rgba(245, 158, 11, .08); border-radius: .3rem; }
.ks-p { margin: 0; font-size: .72rem; line-height: 1.45; color: #94a3b8; }
.ks-p b { color: #e2e8f0; }
.ks-f { display: flex; align-items: center; gap: .5rem; }
.ks-f > span { flex: 0 0 4.2rem; font: 700 .64rem Orbitron, sans-serif; color: #94a3b8; }
.ks-f input[type=text] { flex: 1 1 auto; min-width: 0; min-height: 38px; background: #0f172a; border: 1px solid #334155; border-radius: .6rem; color: #f8fafc; padding: 0 .6rem; font-size: .85rem; user-select: text; -webkit-user-select: text; }
.ks-f input:focus { outline: none; border-color: rgb(var(--accent-rgb)); }
.ks-colors { display: flex; gap: .45rem; }
.ks-col { --c: 245 158 11; width: 30px; height: 30px; border-radius: 50%; background: rgb(var(--c)); border: 3px solid transparent; box-shadow: 0 0 8px rgb(var(--c) / .6); }
.ks-col.on { border-color: #fff; }
.ks-col.c-cyan { --c: 34 211 238; } .ks-col.c-purple { --c: 168 85 247; } .ks-col.c-rose { --c: 244 63 94; } .ks-col.c-emerald { --c: 16 185 129; }
.ks-chk { display: flex; align-items: flex-start; gap: .45rem; font-size: .72rem; color: #cbd5e1; line-height: 1.35; }
.ks-chk input { margin-top: .15rem; width: 16px; height: 16px; flex: 0 0 auto; }
.ks-num { display: flex; align-items: center; gap: .3rem; }
.ks-num > span { flex: 0 0 7.2rem; font: 700 .64rem 'JetBrains Mono', monospace; color: #94a3b8; }
.ks-num button { min-width: 38px; min-height: 36px; border-radius: .55rem; background: #0b1120; border: 1px solid #334155; color: #e2e8f0; font: 800 .72rem 'JetBrains Mono', monospace; touch-action: manipulation; }
.ks-num input { width: 4.2rem; min-height: 36px; text-align: center; background: #0f172a; border: 1px solid #334155; border-radius: .55rem; color: #fbbf24; font: 800 .9rem 'JetBrains Mono', monospace; user-select: text; -webkit-user-select: text; }
.ks-quick { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.ks-quick > span { font: 700 .62rem Orbitron, sans-serif; color: #94a3b8; }
.ks-quick button { min-height: 32px; padding: 0 .6rem; border-radius: .55rem; background: #0b1120; border: 1px solid rgba(245, 158, 11, .45); color: #fbbf24; font: 800 .6rem Orbitron, sans-serif; }
.ks-help { font-size: .72rem; color: #cbd5e1; border: 1px solid #1e293b; border-radius: .6rem; padding: .4rem .6rem; background: #080c16; }
.ks-help summary { cursor: pointer; font-weight: 700; color: #fbbf24; }
.ks-help ol { margin: .4rem 0 0 1.1rem; padding: 0; list-style: decimal; line-height: 1.5; }
.ks-help b { color: #f1f5f9; }
@media (max-width: 520px) { .ks-num > span { flex-basis: 5.4rem; font-size: .58rem; } .ks-num button { min-width: 32px; } }

/* ---- diagnosa koneksi di Pengaturan ---- */
.midi-diag { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .5rem; padding: .45rem .55rem; border-radius: .6rem; background: #060912; border: 1px solid #1e293b; font: 600 10.5px/1.45 'JetBrains Mono', monospace; color: #cbd5e1; word-break: break-word; }
.midi-diag:empty { display: none; }
.dg-ok { color: #34d399; }
.dg-bad { color: #f87171; }
.dg-toggle { color: #94a3b8; }
.dg-toggle.on { color: #34d399; border-color: rgba(16, 185, 129, .55) !important; }