/* ===== MIDI ROYALE PRO v10.1 — Pemilih keyboard visual + chip model ===== */
#brOverlay{position:fixed;inset:0;z-index:82;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:max(.9rem,env(safe-area-inset-top)) max(.9rem,env(safe-area-inset-right)) 0 max(.9rem,env(safe-area-inset-left));
  background:radial-gradient(55% 45% at 12% 8%,rgb(var(--accent-rgb,34 211 238)/.18),transparent 70%),radial-gradient(50% 45% at 92% 96%,rgba(255,106,31,.14),transparent 70%),linear-gradient(180deg,#070910,#04060a);
  font-family:'Chakra Petch','Rajdhani',system-ui,sans-serif;color:#e5e7eb;animation:bpIn .45s ease both}
#brOverlay.out{animation:bpOut .3s ease forwards}
@keyframes bpIn{from{opacity:0}to{opacity:1}}
@keyframes bpOut{to{opacity:0;transform:scale(1.02)}}
#brOverlay .bp-glow{position:fixed;inset:-20%;pointer-events:none;background:conic-gradient(from 0deg at 50% 50%,transparent,rgb(var(--accent-rgb,34 211 238)/.06),transparent 30%,rgba(255,106,31,.05),transparent 60%);animation:bpSpin 28s linear infinite}
@keyframes bpSpin{to{transform:rotate(360deg)}}
#brOverlay .bp-wrap{position:relative;max-width:60rem;margin:0 auto;min-height:100%;display:flex;flex-direction:column;gap:.85rem}

/* kepala */
#brOverlay .bp-head{text-align:center}
#brOverlay .bp-steps{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:.55rem;font-size:10px;font-weight:800;letter-spacing:.14em;color:#64748b}
#brOverlay .bp-steps span{display:inline-flex;align-items:center;gap:.35rem}
#brOverlay .bp-steps i{font-style:normal;width:1.35rem;height:1.35rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid #334155;font-size:10px}
#brOverlay .bp-steps span.on{color:rgb(var(--ac-300,103 232 249))}
#brOverlay .bp-steps span.on i{border-color:rgb(var(--accent-rgb));background:rgb(var(--accent-rgb)/.2);box-shadow:0 0 12px rgb(var(--accent-rgb)/.5)}
#brOverlay .bp-steps em{width:2.2rem;height:2px;border-radius:2px;background:linear-gradient(90deg,rgb(var(--accent-rgb)),#334155)}
#brOverlay h2{margin:0;font-size:clamp(18px,3.4vw,26px);font-weight:800;letter-spacing:.14em;background:linear-gradient(90deg,#22d3ee,#fff,#fbbf24);-webkit-background-clip:text;background-clip:text;color:transparent}
#brOverlay .bp-head p{margin:.25rem 0 0;font-size:12px;color:#94a3b8;letter-spacing:.03em}

/* cari */
#brOverlay .bp-search{max-width:30rem;margin:0 auto .7rem;width:100%}
#brOverlay .bp-search input{width:100%;height:2.6rem;border-radius:.85rem;border:1px solid #273042;background:#0a0e17 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat .8rem 50%/1rem;
  color:#e5e7eb;padding:0 .9rem 0 2.4rem;font:600 14px 'Chakra Petch',system-ui,sans-serif;outline:0;transition:border-color .2s,box-shadow .2s}
#brOverlay .bp-search input:focus{border-color:rgb(var(--accent-rgb));box-shadow:0 0 0 3px rgb(var(--accent-rgb)/.18)}
#brOverlay .bp-empty{text-align:center;font-size:12px;color:#94a3b8;padding:.4rem 0 .8rem}

/* kartu merek */
#brOverlay .bp-brands{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.8rem}
#brOverlay .bp-brand{position:relative;overflow:hidden;text-align:left;cursor:pointer;color:inherit;font:inherit;touch-action:manipulation;
  display:flex;flex-direction:column;gap:.3rem;min-height:9.5rem;padding:.95rem .95rem .8rem;border-radius:1.2rem;border:1px solid #232b3b;
  background:radial-gradient(90% 70% at 100% 0%,rgb(var(--c)/.22),transparent 60%),linear-gradient(165deg,rgba(20,26,44,.9),rgba(7,9,16,.96));
  box-shadow:0 18px 40px -22px #000;transition:transform .2s,border-color .2s,box-shadow .2s;animation:bpCard .55s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i)*.07s)}
@keyframes bpCard{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
#brOverlay .bp-brand:hover,#brOverlay .bp-brand:focus-visible{transform:translateY(-3px);border-color:rgb(var(--c)/.85);box-shadow:0 18px 40px -22px #000,0 0 26px rgb(var(--c)/.3);outline:0}
#brOverlay .bp-brand:active{transform:scale(.97)}
#brOverlay .bp-wm{font:900 clamp(22px,4.2vw,30px)/1 'Orbitron','Chakra Petch',sans-serif;letter-spacing:.16em;color:#fff;text-shadow:0 0 18px rgb(var(--c)/.55)}
#brOverlay .bp-brand.o .bp-wm{font-size:clamp(18px,3.4vw,22px)}
#brOverlay .bp-sub{font-size:11px;color:#94a3b8;line-height:1.3;min-height:1.3em}
#brOverlay .bp-cnt{margin-top:auto;display:flex;align-items:center;justify-content:space-between;font-size:10px;font-weight:800;letter-spacing:.08em;color:rgb(var(--c))}
#brOverlay .bp-cnt small{font-size:inherit}
@media (min-height:700px){#brOverlay .bp-body{flex:1;display:flex;flex-direction:column;justify-content:center}}
#brOverlay .bp-cnt b{width:1.7rem;height:1.7rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgb(var(--c));color:#06080c;font-size:10px;transition:transform .2s}
#brOverlay .bp-brand:hover .bp-cnt b{transform:translateX(3px)}
#brOverlay .bp-badge{position:absolute;top:.65rem;right:.65rem;font-size:9px;font-weight:800;letter-spacing:.08em;padding:2px 8px;border-radius:99px;background:rgb(var(--c)/.18);border:1px solid rgb(var(--c)/.55);color:rgb(var(--c))}
#brOverlay .bp-badge.det{background:#16a34a33;border-color:#22c55e99;color:#4ade80;animation:bpPulse 1.8s ease-in-out infinite}
@keyframes bpPulse{50%{box-shadow:0 0 0 6px rgba(34,197,94,0)}0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.45)}}

/* mini piano di kartu merek */
#brOverlay .bp-keys{position:relative;height:1.6rem;margin:.35rem 0 .2rem;display:grid;grid-template-columns:repeat(14,1fr);gap:2px}
#brOverlay .bp-keys i{border-radius:0 0 3px 3px;background:linear-gradient(180deg,#d6dbe4,#f8fafc);opacity:.9;animation:bpKey 4.2s ease-in-out infinite}
#brOverlay .bp-keys i:nth-child(3n+1){animation-delay:.4s}#brOverlay .bp-keys i:nth-child(4n+2){animation-delay:1.3s}#brOverlay .bp-keys i:nth-child(5n){animation-delay:2.4s}
@keyframes bpKey{0%,86%,100%{background:linear-gradient(180deg,#d6dbe4,#f8fafc)}90%{background:linear-gradient(180deg,rgb(var(--c)),rgb(var(--c)/.6))}}
#brOverlay .bp-keys b{position:absolute;top:0;height:62%;width:calc(100%/14*.58);left:calc(100%/14*(var(--k) + 1) - 100%/14*.29);border-radius:0 0 2px 2px;background:#05070b;box-shadow:0 1px 0 rgb(var(--c)/.4)}

/* bar merek + tab seri */
#brOverlay .bp-bar{display:flex;align-items:center;gap:.7rem;margin-bottom:.6rem}
#brOverlay .bp-back{height:2.2rem;padding:0 .85rem;border-radius:.7rem;border:1px solid #2a3344;background:#0b0f18;color:#cbd5e1;font:800 11px 'Chakra Petch',sans-serif;letter-spacing:.1em;cursor:pointer}
#brOverlay .bp-back:active{transform:scale(.96)}
#brOverlay .bp-bn{font:900 clamp(18px,3.4vw,24px) 'Orbitron','Chakra Petch',sans-serif;letter-spacing:.16em;color:#fff;text-shadow:0 0 16px rgb(var(--c)/.6)}
#brOverlay .bp-tabs{display:flex;gap:.45rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.15rem;margin-bottom:.7rem}
#brOverlay .bp-tabs::-webkit-scrollbar{display:none}
#brOverlay .bp-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:.35rem;height:2.2rem;padding:0 .8rem;border-radius:99px;border:1px solid #273042;background:#0a0e17;color:#94a3b8;font:700 12px 'Chakra Petch',sans-serif;cursor:pointer;white-space:nowrap;transition:all .2s}
#brOverlay .bp-tab b{color:#fbbf24;font-size:11px}
#brOverlay .bp-tab em{font-style:normal;font-size:10px;padding:0 6px;border-radius:99px;background:#1b2231;color:#94a3b8}
#brOverlay .bp-tab.on{border-color:rgb(var(--c));color:#fff;background:rgb(var(--c)/.16);box-shadow:0 0 14px rgb(var(--c)/.3)}
#brOverlay .bp-tab.on em{background:rgb(var(--c));color:#06080c}
#brOverlay .bp-hint{font-size:11px;color:#94a3b8;background:#0b0f18;border:1px dashed #2a3344;border-radius:.7rem;padding:.45rem .7rem;margin-bottom:.7rem}

/* kotak model */
#brOverlay .bp-models{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.2rem,1fr));gap:.6rem;margin-bottom:.8rem}
#brOverlay .bp-model{position:relative;text-align:left;cursor:pointer;color:inherit;font:inherit;touch-action:manipulation;min-height:4.8rem;padding:.7rem .75rem .6rem;border-radius:.95rem;
  border:1px solid #232b3b;background:linear-gradient(165deg,#111727,#070a12);display:flex;flex-direction:column;gap:.35rem;transition:transform .15s,border-color .2s,box-shadow .2s;animation:bpCard .4s cubic-bezier(.16,1,.3,1) both}
#brOverlay .bp-model:hover{border-color:rgb(var(--c)/.6)}
#brOverlay .bp-model:active{transform:scale(.96)}
#brOverlay .bp-model.on{border-color:rgb(var(--c));background:radial-gradient(100% 90% at 0% 0%,rgb(var(--c)/.26),transparent 70%),linear-gradient(165deg,#141b2e,#080b14);box-shadow:0 0 0 1px rgb(var(--c)),0 0 24px rgb(var(--c)/.35)}
#brOverlay .bp-mb{font-size:9px;font-weight:800;letter-spacing:.14em;color:rgb(var(--c))}
#brOverlay .bp-mn{font-weight:800;font-size:16px;letter-spacing:.03em;color:#f1f5f9;line-height:1.15}
#brOverlay .bp-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto}
#brOverlay .bp-tags i{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.05em;padding:1px 6px;border-radius:5px;border:1px solid}
#brOverlay .bp-tags i.ok{color:#4ade80;border-color:#22c55e66;background:#22c55e14}
#brOverlay .bp-tags i.mid{color:#fbbf24;border-color:#f59e0b66;background:#f59e0b14}
#brOverlay .bp-tags i.off{color:#94a3b8;border-color:#47556966}
#brOverlay .bp-tags i.ver{color:#67e8f9;border-color:#22d3ee66;background:#22d3ee12}
#brOverlay .bp-chk{position:absolute;top:.5rem;right:.5rem;width:1.35rem;height:1.35rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#06080c;background:rgb(var(--c));transform:scale(0);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
#brOverlay .bp-model.on .bp-chk{transform:scale(1)}
#brOverlay .bp-body.bp-anim>*{animation:bpFade .3s ease both}
@keyframes bpFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* kaki: ringkasan + tombol */
#brOverlay .bp-foot{position:sticky;bottom:0;margin:auto calc(-1*max(.9rem,env(safe-area-inset-left))) 0;padding:.7rem max(.9rem,env(safe-area-inset-right)) max(.7rem,env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(4,6,10,0),rgba(4,6,10,.92) 22%,#04060a);display:flex;flex-direction:column;gap:.5rem}
#brOverlay .bp-sum{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;justify-content:center;max-width:60rem;margin:0 auto;width:100%}
#brOverlay .bp-sum-t{font-size:11px;color:#64748b;letter-spacing:.08em}
#brOverlay .bp-sum.on{justify-content:space-between;padding:.6rem .7rem;border-radius:1rem;border:1px solid rgb(var(--c)/.6);background:linear-gradient(120deg,rgb(var(--c)/.16),rgba(8,11,20,.97) 60%),#080b14;box-shadow:0 0 30px -10px rgb(var(--c)/.6);animation:bpFade .3s ease both}
#brOverlay .bp-sum-i{display:flex;flex-direction:column;gap:.3rem;min-width:0;flex:1 1 16rem}
#brOverlay .bp-sum-n{font-size:12px;letter-spacing:.12em;color:#94a3b8;font-weight:800}
#brOverlay .bp-sum-n b{font-size:17px;color:#fff;letter-spacing:.04em}
#brOverlay .bp-sum-c{display:flex;flex-wrap:wrap;gap:4px}
#brOverlay .bp-sum-c i{font-style:normal;font:700 10px 'JetBrains Mono',monospace;padding:2px 7px;border-radius:6px;background:#0b0f18;border:1px solid #273042;color:#cbd5e1}
#brOverlay .bp-sum-c i.ok{color:#4ade80;border-color:#22c55e55}
#brOverlay .bp-sum-c i.warn{color:#fbbf24;border-color:#f59e0b55}
#brOverlay .bp-sum-x{font-size:10px;color:#94a3b8;line-height:1.3}
#brOverlay .bp-go{flex:0 0 auto;height:2.9rem;padding:0 1.3rem;border-radius:.85rem;border:0;cursor:pointer;font:900 13px 'Chakra Petch',sans-serif;letter-spacing:.12em;color:#06080c;
  background:linear-gradient(90deg,rgb(var(--c)),rgb(var(--ac-300,251 191 36)));box-shadow:0 8px 24px -8px rgb(var(--c)/.8);animation:bpGo 2.6s ease-in-out infinite}
@keyframes bpGo{50%{filter:brightness(1.15)}}
#brOverlay .bp-go:active{transform:scale(.97)}
#brOverlay .bp-fl{display:flex;align-items:center;gap:.8rem;justify-content:center;max-width:60rem;margin:0 auto;width:100%}
#brOverlay .bp-fl span{font-size:10px;color:#64748b;text-align:center}
#brOverlay .bp-skip{flex:0 0 auto;height:2.1rem;padding:0 1rem;border-radius:.7rem;border:1px solid #2a3344;background:transparent;color:#94a3b8;font:800 11px 'Chakra Petch',sans-serif;letter-spacing:.12em;cursor:pointer}

/* HP landscape (tinggi kecil) */
@media (max-height:500px){
  #brOverlay .bp-wrap{gap:.5rem}
  #brOverlay .bp-steps{margin-bottom:.25rem}
  #brOverlay .bp-head p{display:none}
  #brOverlay .bp-brands{grid-template-columns:repeat(4,1fr);gap:.55rem}
  #brOverlay .bp-brand{min-height:7.4rem;padding:.7rem}
  #brOverlay .bp-keys{height:1.1rem;margin:.15rem 0}
  #brOverlay .bp-sub{font-size:10px}
  #brOverlay .bp-wm{font-size:clamp(17px,2.9vw,24px);letter-spacing:.1em}
  #brOverlay .bp-cnt small{display:none}
  #brOverlay .bp-search{margin-bottom:.5rem}
  #brOverlay .bp-search input{height:2.2rem}
  #brOverlay .bp-models{grid-template-columns:repeat(auto-fill,minmax(8.2rem,1fr));gap:.45rem}
  #brOverlay .bp-model{min-height:3.9rem;padding:.5rem .6rem}
  #brOverlay .bp-mn{font-size:14px}
  #brOverlay .bp-fl span{display:none}
  #brOverlay .bp-foot{padding-top:.4rem}
  #brOverlay .bp-go{height:2.5rem}
  #brOverlay[data-view=models] .bp-head h2{display:none}
  #brOverlay .bp-sum-x{display:none}
  #brOverlay .bp-sum.on{padding:.45rem .6rem;gap:.5rem}
  #brOverlay .bp-sum-n b{font-size:15px}
  #brOverlay .bp-fl{gap:.5rem}
}
@media (max-width:480px){#brOverlay .bp-brands{grid-template-columns:1fr 1fr}#brOverlay .bp-brand{min-height:8.6rem;padding:.75rem}#brOverlay .bp-sub{font-size:10px}#brOverlay .bp-fl span{display:none}#brOverlay .bp-go{width:100%}}

/* preset grafis */
html.gfx-low #brOverlay *,html.gfx-low #brOverlay{animation:none!important;transition:none!important}
html.gfx-low #brOverlay .bp-glow{display:none}
html.gfx-low #brOverlay .bp-brand,html.gfx-low #brOverlay .bp-model.on,html.gfx-low #brOverlay .bp-sum.on{box-shadow:none}
html.gfx-medium #brOverlay .bp-glow,html.gfx-medium #brOverlay .bp-keys i,html.gfx-medium #brOverlay .bp-go,html.gfx-medium #brOverlay .bp-badge.det{animation:none!important}
@media (prefers-reduced-motion:reduce){#brOverlay *,#brOverlay{animation:none!important}}

/* ===== chip model keyboard di bar atas ===== */
.mr-kbchip{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;max-width:9.5rem;cursor:pointer;touch-action:manipulation;
  font:800 8px/1 'JetBrains Mono',monospace;letter-spacing:.04em;padding:2px 6px;border-radius:6px;color:rgb(var(--ac-300,103 232 249));
  background:rgb(var(--accent-rgb,34 211 238)/.1);border:1px solid rgb(var(--accent-rgb,34 211 238)/.45);transition:transform .1s,box-shadow .2s}
.mr-kbchip svg{width:1.15em;height:1.15em;flex-shrink:0}
.mr-kbchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mr-kbchip em{font-style:normal}
.mr-kbchip.k{min-width:0;flex-shrink:1}
@media (max-width:1400px){p:has(> .mr-kbchip) > .k-chips{display:none!important}.mr-kbchip.k em{display:none}.mr-author{flex-shrink:0}}
@media (max-width:700px){.mr-author{flex-shrink:1}}
.mr-kbchip:active{transform:scale(.94)}
.mr-kbchip.unset{color:#fbbf24;background:#f59e0b14;border-color:#f59e0b88;border-style:dashed;animation:kbChip 2.2s ease-in-out infinite}
@keyframes kbChip{50%{box-shadow:0 0 10px #f59e0b66}}
@media (min-width:768px){.mr-kbchip.k{font-size:9px;padding:3px 8px}}
#paRoot .pa-top .mr-kbchip.p{min-height:32px;padding:0 .65rem;font-size:11px;border-radius:.55rem;max-width:11rem;color:var(--pa-acc,#ff6a1f);background:rgba(255,106,31,.08);border:1px solid rgba(255,106,31,.5)}
#paRoot .pa-top .mr-kbchip.p.unset{color:#fbbf24;border-color:#f59e0b88}
@media (max-width:820px){#paRoot .pa-top .mr-kbchip.p em{display:none}}
@media (max-width:640px){#paRoot .pa-top .mr-kbchip.p{max-width:6.5rem;padding:0 .45rem;font-size:10px}}
html.gfx-low .mr-kbchip{animation:none!important}

/* kartu keyboard di Panduan Setup langkah 1 */
.wz-kb{display:flex;align-items:center;gap:.7rem;justify-content:space-between;flex-wrap:wrap;margin-top:.6rem;padding:.7rem .8rem;border-radius:.9rem;border:1px dashed #f59e0b88;background:#f59e0b0d}
.wz-kb.on{border-style:solid;border-color:rgb(var(--accent-rgb)/.6);background:linear-gradient(120deg,rgb(var(--accent-rgb)/.14),transparent 70%)}
.wz-kb-i{display:flex;flex-direction:column;gap:2px;min-width:0}
.wz-kb-i small{font-size:9px;font-weight:800;letter-spacing:.14em;color:#64748b}
.wz-kb-i b{font-size:17px;color:#fff;letter-spacing:.04em}
.wz-kb-i span{font-size:11px}

/* v10.2: layar pendek — LEWATI sebaris dengan ringkasan, daftar model terlihat lebih banyak */
@media (max-height:500px){
  #brOverlay .bp-foot{flex-direction:row;align-items:center;gap:.55rem}
  #brOverlay .bp-fl{order:-1;width:auto;margin:0;flex:0 0 auto}
  #brOverlay .bp-sum{flex:1 1 auto;min-width:0}
  #brOverlay .bp-go{padding:0 1rem;font-size:12px}
}