/* MIDI ROYALE PRO - kunci layar, kontrol dari Pa600, pengingat backup (v9) */
.st-tg { flex: 0 0 auto; min-height: 34px; padding: 0 .75rem; border-radius: .6rem; background: #0b1120; border: 1.5px solid #334155; color: #94a3b8; font: 800 .6rem Orbitron, system-ui, sans-serif; white-space: nowrap; }
.st-tg.on { color: #34d399; border-color: rgba(16, 185, 129, .6); }
.st-list { display: flex; flex-direction: column; gap: .25rem; max-height: 15rem; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.st-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto 32px; align-items: center; gap: .35rem; padding: .25rem .35rem; border-radius: .5rem; background: #070b14; border: 1px solid #1e293b; }
.st-row.learn { border-color: #fbbf24; background: rgba(251, 191, 36, .08); }
.st-a { font-size: .7rem; color: #e2e8f0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-t { font: 700 .62rem 'JetBrains Mono', ui-monospace, monospace; color: #fbbf24; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-row.learn .st-t { animation: stBlink 1s steps(2) infinite; }
@keyframes stBlink { 50% { opacity: .35; } }
.st-row button { min-height: 30px; padding: 0 .55rem; border-radius: .5rem; background: #0b1120; border: 1px solid #334155; color: #cbd5e1; font: 800 .56rem Orbitron, system-ui, sans-serif; }
.st-row [data-rl] { color: #fbbf24; border-color: rgba(251, 191, 36, .5); }
.st-row [data-rc] { padding: 0; width: 30px; color: #f87171; }
.st-sp { width: 30px; }
/* kunci layar */
.st-lock { position: fixed; inset: 0; z-index: 95; background: rgba(0, 0, 0, .12); touch-action: none; -webkit-user-select: none; user-select: none; }
.st-lbar { position: absolute; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); display: flex; align-items: center; gap: .5rem; padding: .35rem .45rem .35rem .8rem; border-radius: 1rem; background: rgba(8, 12, 22, .92); border: 1px solid rgba(251, 191, 36, .55); box-shadow: 0 6px 24px rgba(0, 0, 0, .5); }
.st-ltxt { font: 800 .62rem Orbitron, system-ui, sans-serif; letter-spacing: .08em; color: #fbbf24; }
.st-panic { min-height: 44px; padding: 0 .8rem; border-radius: .7rem; background: rgba(127, 29, 29, .6); border: 1px solid rgba(248, 113, 113, .6); color: #fecaca; font: 800 .62rem Orbitron, system-ui, sans-serif; }
.st-unlock { display: flex; align-items: center; gap: .45rem; min-height: 52px; padding: 0 .8rem 0 .45rem; border-radius: .8rem; background: #0b1120; border: 1.5px solid #fbbf24; color: #fde68a; font: 800 .55rem/1.2 Orbitron, system-ui, sans-serif; text-align: left; touch-action: none; }
.st-unlock svg { width: 40px; height: 40px; transform: rotate(-90deg); }
.st-unlock circle { fill: none; stroke-width: 3.5; }
.st-unlock .bg { stroke: #334155; }
.st-unlock .fg { stroke: #fbbf24; stroke-linecap: round; }
html.mr-locked #toast { z-index: 96; }
/* pengingat backup */
.st-backup { position: fixed; z-index: 71; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; justify-content: center; width: max-content; max-width: calc(100vw - 20px); padding: .55rem .7rem; border-radius: .9rem; background: #0c101c; border: 1px solid rgb(var(--accent-rgb) / .6); color: #e2e8f0; font-size: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, .55); }
.st-backup button { min-height: 36px; padding: 0 .75rem; border-radius: .6rem; background: #0b1120; border: 1px solid #334155; color: #e2e8f0; font: 800 .58rem Orbitron, system-ui, sans-serif; }
.st-backup [data-b=cloud] { color: #34d399; border-color: rgba(16, 185, 129, .6); }
html.gfx-low .st-lock { background: rgba(0, 0, 0, .25); }
/* merek keyboard */
.brand-sel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
.brand-sel select { width: 100%; min-height: 36px; }
.brand-info { font-size: .68rem; line-height: 1.45; color: #cbd5e1; background: #060912; border: 1px solid #1e293b; border-radius: .6rem; padding: .4rem .55rem; }
.brand-info b { color: rgb(var(--ac-300)); }
.brand-warn { color: #fbbf24; }
.brand-sinfo { font: 600 .66rem/1.4 'JetBrains Mono', ui-monospace, monospace; color: #fbbf24; background: rgba(251, 191, 36, .07); border: 1px solid rgba(251, 191, 36, .35); border-radius: .55rem; padding: .3rem .5rem; }
.st-na { opacity: .32 !important; filter: grayscale(1) !important; }
html.mr-sts-off .ks-sts, html.mr-sts-off .ks-lbl, html.mr-sts-off [data-qsts], html.mr-sts-off .ks-quick:has([data-qsts]) > span:first-child { display: none !important; }
@media (max-width: 560px) { .brand-sel { grid-template-columns: 1fr; } }
/* panduan setup pertama + versi */
.wz-card { max-width: 600px; }
.wz-dots { display: flex; gap: .35rem; justify-content: center; }
.wz-dots i { width: 22px; height: 4px; border-radius: 2px; background: #334155; }
.wz-dots i.on { background: rgb(var(--ac-400)); }
.wz-dots i.done { background: #34d399; }
.wz-body p { margin: 0; font-size: .78rem; line-height: 1.5; color: #cbd5e1; }
.wz-body b { color: #f1f5f9; }
.wz-ul { margin: 0 0 0 1.1rem; padding: 0; list-style: disc; font-size: .76rem; line-height: 1.55; color: #cbd5e1; }
.wz-stat { font: 700 .72rem 'JetBrains Mono', ui-monospace, monospace; padding: .45rem .6rem; border-radius: .6rem; border: 1px solid #334155; }
.wz-stat.ok { color: #34d399; border-color: rgba(16, 185, 129, .55); }
.wz-stat.bad { color: #fbbf24; border-color: rgba(251, 191, 36, .5); }
.wz-test { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: .74rem; }
.wz-dim { font-size: .72rem; color: #94a3b8; }
.ver-banner { top: max(10px, env(safe-area-inset-top)); bottom: auto; }
.ver-banner [data-v=go] { color: #34d399; border-color: rgba(16, 185, 129, .6); }
.ver-banner button { min-height: 36px; padding: 0 .75rem; border-radius: .6rem; background: #0b1120; border: 1px solid #334155; color: #e2e8f0; font: 800 .58rem Orbitron, system-ui, sans-serif; }