/* Mode Tampilan Korg Pa5X (100dvh Strict Landscape & Safe Area Responsive) */
#paRoot {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 45;
  background: #08090a;
  color: #e1e4e8;
  flex-direction: column;
  font-family: 'Chakra Petch', 'Rajdhani', system-ui, sans-serif;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  user-select: none;
  -webkit-user-select: none;
}

body.pa-mode #paRoot {
  display: flex;
}

#paRoot button {
  font: inherit;
  color: inherit;
  background: linear-gradient(180deg, #22252a 0%, #141517 100%);
  border: 1px solid #31353d;
  border-radius: 3px;
  touch-action: manipulation;
  cursor: pointer;
}

/* TOP HEADER BAR */
#paRoot .pa-top {
  height: 32px;
  min-height: 32px;
  background: linear-gradient(180deg, #1f2227 0%, #101214 100%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.5rem;
  border-bottom: 1px solid #25282e;
  flex: 0 0 auto;
}

#paRoot .pa-home {
  border: 1px solid #ff5500;
  color: #ff5500;
  padding: 0.15rem 0.6rem;
  font-weight: 800;
  font-size: 10px;
  border-radius: 3px;
}

#paRoot .pa-top .sp {
  flex: 1;
}

#paRoot .pa-top select {
  background: #000;
  color: #00ff66;
  border: 1px solid #333;
  border-radius: 3px;
  font-size: 11px;
  padding: 0.15rem 0.3rem;
  max-width: 30vw;
}

#paRoot .pa-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  flex: 0 0 auto;
}

#paRoot .pa-dot.ok {
  background: #00ff66;
  box-shadow: 0 0 6px #00ff66;
}

#paRoot .pa-top button {
  padding: 0.15rem 0.5rem;
  font-size: 10px;
  font-weight: 700;
}

#paRoot .pa-readout {
  font: 700 12px 'Rajdhani', monospace;
  color: #00ff66;
  white-space: nowrap;
}

/* BODY WORKSPACE */
#paRoot .pa-body {
  flex: 1 1 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: #08090a;
}

#paRoot .pa-scr {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 0.3rem;
  display: none;
}

#paRoot .pa-scr.on {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* MAIN VIEW LAYOUT (PAS & PADAT TANPA AREA KOSONG) */
#paRoot .pa-card {
  border: 1px solid #282b30;
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  background: #101113;
  display: flex;
  flex-direction: column;
}

#paRoot .pa-keys {
  border: 1px solid #00ff66;
  background: linear-gradient(180deg, rgba(0, 255, 102, 0.06) 0%, rgba(0, 0, 0, 0.5) 100%);
  box-shadow: 0 0 8px rgba(0, 255, 102, 0.15), inset 0 0 10px rgba(0, 255, 102, 0.05);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  flex: 1.2;
  min-height: 0;
}

#paRoot .pa-keys .info {
  flex: 1;
  min-width: 0;
}

#paRoot .pa-keys .k {
  font-weight: 800;
  font-size: 10px;
  color: #00ff66;
  letter-spacing: 0.05em;
}

#paRoot .pa-keys .sub {
  font-size: 10px;
  color: #8b949e;
}

#paRoot .pa-keys .big {
  font-size: clamp(18px, 4.5vw, 26px);
  font-weight: 800;
  color: #00ff66;
  text-shadow: 0 0 8px rgba(0, 255, 102, 0.5);
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#paRoot .pa-ups {
  min-width: 70px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#paRoot .pa-up {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font: 800 9px monospace;
  color: #00ff66;
  opacity: 0.3;
}

#paRoot .pa-up i {
  flex: 1;
  height: 3px;
  background: #00ff66;
  border-radius: 1px;
}

#paRoot .pa-up.on {
  opacity: 1;
}

#paRoot .pa-btns {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.25rem;
  flex: 1;
  min-height: 0;
}

#paRoot .pa-btns button {
  padding: 0;
  font-weight: 700;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#paRoot .pa-btns button.on {
  background: linear-gradient(180deg, #2b1a14 0%, #18110e 100%);
  border-color: #ff5500;
  color: #ff5500;
  box-shadow: 0 0 6px rgba(255, 85, 0, 0.4);
}

#paRoot .pa-regs {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.25rem;
  flex: 1;
  min-height: 0;
}

#paRoot .pa-regs button {
  font-weight: 800;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: #282b30;
}

#paRoot .pa-regs button.has {
  border-color: #00ff66;
  color: #00ff66;
}

#paRoot .pa-regs button.on {
  background: rgba(0, 255, 102, 0.15);
  border-color: #00ff66;
  color: #00ff66;
  box-shadow: inset 0 0 6px rgba(0, 255, 102, 0.3);
}

#paRoot .pa-style {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
}

#paRoot .pa-style .st {
  font-size: 12px;
  font-weight: 700;
  color: #ff5500;
}

/* KEYS BROWSER SCREEN (PRESISI 1:1 KORG PA5X) */
#paScr-keys {
  padding: 0.2rem;
}

#paRoot .pa-kb {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
  align-items: center;
  background: #16181b;
  padding: 2px 4px;
}

#paRoot .pa-kb .badge {
  background: #dc2626;
  color: #fff;
  border: 0;
  font-weight: 800;
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  font-size: 10px;
}

#paRoot .pa-kb input {
  flex: 1;
  background: #000;
  color: #00ff66;
  border: 1px solid #333;
  border-radius: 3px;
  padding: 0.2rem 0.4rem;
  min-width: 0;
  font-size: 11px;
}

#paRoot .pa-split {
  display: flex;
  gap: 0.3rem;
  flex: 1;
  min-height: 0;
}

#paRoot .pa-cats {
  flex: 0 0 110px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#paRoot .pa-cats button {
  min-height: 28px;
  font-size: 9px;
  font-weight: 700;
  text-align: left;
  padding: 0.2rem 0.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #151719;
  border-color: #25282d;
  color: #aaa;
}

#paRoot .pa-cats button.on {
  background: #fffbbf;
  color: #000;
  border-color: #ffd700;
}

#paRoot .pa-list {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 3px;
}

#paRoot .pa-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-align: left;
  padding: 0.2rem 0.4rem;
  border: 1px solid #24272c;
  background: #131517;
  border-radius: 2px;
}

#paRoot .pa-row.on {
  border-color: #ff3300;
  box-shadow: inset 0 0 0 1px #ff3300;
}

#paRoot .pa-row .ico {
  background: #00ff66;
  color: #000;
  font-size: 8px;
  font-weight: bold;
  padding: 1px 2px;
  border-radius: 1px;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 2px;
}

#paRoot .pa-row .nm {
  font-weight: 700;
  font-size: 11px;
  color: #eee;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* BOTTOM NAVIGATION TABS (DIJAMIN MUNCUL UTUH) */
#paRoot .pa-tabs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  padding: 2px 4px;
  height: 38px;
  min-height: 38px;
  background: #08090a;
  border-top: 1px solid #202226;
  flex: 0 0 auto;
  z-index: 10;
}

#paRoot .pa-tabs button {
  border: 1px solid #2a2d33;
  border-radius: 3px;
  background: linear-gradient(180deg, #22252a 0%, #131416 100%);
  font-size: clamp(9px, 2vw, 12px);
  font-weight: bold;
  color: #8b949e;
  display: flex;
  align-items: center;
  justify-content: center;
}

#paRoot .pa-tabs button.on {
  background: linear-gradient(180deg, #ff4400 0%, #cc2900 100%);
  color: #fff;
  border-color: #ff5500;
  box-shadow: 0 0 6px rgba(255, 85, 0, 0.6);
}

/* PANEL APLIKASI UTAMA YANG DIPINDAH KE TAB (Control / Scale Tuning / Style): harus bisa di-scroll */
#paRoot .pa-scr.pa-slot.on {
  display: block;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#paRoot .pa-slot > section {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
}

#paRoot .pa-slot .glass-card {
  background: #101113 !important;
  border-color: #282b30 !important;
  border-radius: 4px !important;
}

/* KEYS: favorit & edit di baris voice */
#paRoot .pa-row .nm { flex: 1; min-width: 0; }
#paRoot .pa-row .fav,
#paRoot .pa-row .ed {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
  color: #6b7280;
}
#paRoot .pa-row .fav.on { color: #ffd700; }
#paRoot .pa-row .ed { color: #ff5500; }

/* TAB TOOLS (fitur Klasik yang tidak ada di layout Pa5X) */
#paRoot .pa-scr.pa-tools.on {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: min-content;
  align-content: start;
  gap: 0.3rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#paRoot .pa-tcard { gap: 0.3rem; }
#paRoot .pa-tcard.pa-wide { grid-column: 1 / -1; }

#paRoot .pa-ttl {
  font-size: 10px;
  font-weight: 800;
  color: #00ff66;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #22252a;
  padding-bottom: 2px;
}

#paRoot .pa-trow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

#paRoot .pa-trow > button,
#paRoot .pa-trow > .pa-fbtn {
  flex: 1 1 0;
  min-height: 32px;
  padding: 0 0.4rem;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

#paRoot .pa-trow > .pa-tname {
  flex: 2.2 1 0;
  color: #00ff66;
  border-color: #00ff66;
  overflow: hidden;
  text-overflow: ellipsis;
}

#paRoot .pa-trow > button.on {
  background: linear-gradient(180deg, #2b1a14 0%, #18110e 100%);
  border-color: #ff5500;
  color: #ff5500;
  box-shadow: 0 0 6px rgba(255, 85, 0, 0.4);
}

#paRoot .pa-trow > button.warn {
  color: #ff3300;
  border-color: #ff3300;
}

#paRoot .pa-fbtn {
  background: linear-gradient(180deg, #22252a 0%, #141517 100%);
  border: 1px solid #31353d;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

#paRoot .pa-fbtn input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  cursor: pointer;
}

#paRoot .pa-tinfo {
  font-size: 9px;
  color: #8b949e;
  min-height: 11px;
}

/* strip PRO milik aplikasi utama (PANIC, SUS, SPLIT, REC, SETLIST, PRO) yang dipindah ke tab Tools */
#paRoot #paProSlot > #proStrip {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.25rem;
  width: 100%;
  margin: 0;
  padding: 0;
  grid-area: auto;
}

/* dock keyboard virtual: tampil di atas tab bawah saat tombol KEYS aktif */
#paRoot #paVk {
  flex: 0 0 auto;
}

#paRoot #paVk > #vkDock {
  margin: 0;
  border-radius: 0;
  grid-area: auto;
}

/* samakan gaya tombol strip PRO dengan tombol Pa5X lain */
#paRoot #proStrip .ptoggle,
#paRoot #proStrip .pstep,
#paRoot #proStrip .pro-songname {
  min-height: 32px;
  height: 32px;
  padding: 0 0.5rem;
  font-size: 10px;
  font-weight: 700;
  font-family: inherit;
  color: #e1e4e8;
  background: linear-gradient(180deg, #22252a 0%, #141517 100%);
  border: 1px solid #31353d;
  border-radius: 3px;
  box-shadow: none;
}

#paRoot #proStrip .ptoggle.on,
#paRoot #proStrip .ptoggle.rec {
  background: linear-gradient(180deg, #2b1a14 0%, #18110e 100%);
  border-color: #ff5500;
  color: #ff5500;
  box-shadow: 0 0 6px rgba(255, 85, 0, 0.4);
}

#paRoot #proStrip .ptoggle.red {
  color: #ff3300;
  border-color: #ff3300;
}

#paRoot #proStrip .pro-song {
  display: flex;
  gap: 0.25rem;
  flex: 1 1 auto;
  min-width: 0;
}

#paRoot #proStrip .pro-songname {
  flex: 1;
  min-width: 70px;
}