/* ===== Login lebih hidup + Pemilih Tema (Klasik / Pa5X) — hanya tampilan ===== */
#authModal .tp-eq{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:16px;margin-top:.55rem}
#authModal .tp-eq i{width:4px;border-radius:2px;background:linear-gradient(180deg,rgb(var(--ac-300,251 191 36)),rgb(var(--accent-rgb,34 211 238)));height:30%;animation:tpEq 1.1s ease-in-out infinite;animation-delay:calc(var(--n)*-.17s)}
@keyframes tpEq{0%,100%{height:22%}50%{height:100%}}
#authModal>.glass-card>div:nth-child(1)>div:first-child{animation:tpPulse 3.2s ease-in-out infinite}
@keyframes tpPulse{0%,100%{box-shadow:0 10px 30px -8px rgb(var(--accent-rgb)/.5),0 0 0 0 rgb(var(--accent-rgb)/.35)}50%{box-shadow:0 10px 30px -8px rgb(var(--accent-rgb)/.7),0 0 0 10px rgb(var(--accent-rgb)/0)}}
#authModal>.glass-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgb(var(--ac-300,251 191 36)),rgb(var(--accent-rgb,34 211 238)),transparent);background-size:200% 100%;animation:tpFlow 3.5s linear infinite}
@keyframes tpFlow{to{background-position:-200% 0}}
#btnAuthSubmit{position:relative;overflow:hidden;letter-spacing:.08em}
#btnAuthSubmit:not(:disabled){animation:tpGlow 2.8s ease-in-out infinite}
@keyframes tpGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}
#authModal input:focus{box-shadow:0 0 0 3px rgb(var(--accent-rgb)/.18)}

/* ---- pemilih tema ---- */
#tpOverlay{position:fixed;inset:0;z-index:80;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));
  background:radial-gradient(60% 50% at 15% 10%,rgb(var(--accent-rgb,34 211 238)/.2),transparent 70%),radial-gradient(55% 45% at 90% 95%,rgba(255,85,0,.16),transparent 70%),linear-gradient(180deg,#070910,#04060a);
  font-family:'Chakra Petch','Rajdhani',system-ui,sans-serif;color:#e5e7eb;animation:tpIn .5s ease both}
#tpOverlay.out{animation:tpOut .35s ease forwards}
@keyframes tpIn{from{opacity:0}to{opacity:1}}
@keyframes tpOut{to{opacity:0;transform:scale(1.03)}}
#tpOverlay .tp-head{text-align:center}
#tpOverlay .tp-head 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}
#tpOverlay .tp-head p{margin:.25rem 0 0;font-size:12px;color:#94a3b8;letter-spacing:.04em}
#tpOverlay .tp-row{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;width:100%;max-width:56rem}
#tpOverlay .tp-card{flex:1 1 17rem;max-width:27rem;position:relative;overflow:hidden;text-align:left;cursor:pointer;color:inherit;font:inherit;
  border-radius:1.25rem;padding:.9rem;border:1px solid #2a3140;background:linear-gradient(160deg,rgba(20,26,46,.85),rgba(8,10,18,.95));
  box-shadow:0 20px 50px -20px #000;transition:transform .2s,border-color .2s,box-shadow .2s;animation:tpCard .6s cubic-bezier(.16,1,.3,1) both;touch-action:manipulation}
#tpOverlay .tp-card:nth-child(2){animation-delay:.12s}
@keyframes tpCard{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}
#tpOverlay .tp-card:hover,#tpOverlay .tp-card:focus-visible{transform:translateY(-4px);outline:0}
#tpOverlay .tp-card:active{transform:scale(.97)}
#tpOverlay .tp-card.c{--c:34 211 238}#tpOverlay .tp-card.p{--c:255 85 0}
#tpOverlay .tp-card:hover,#tpOverlay .tp-card:focus-visible,#tpOverlay .tp-card.last{border-color:rgb(var(--c)/.8);box-shadow:0 20px 50px -20px #000,0 0 28px rgb(var(--c)/.28)}
#tpOverlay .tp-top{display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem}
#tpOverlay .tp-ico{flex:0 0 auto;width:3rem;height:3rem;border-radius:.9rem;display:flex;align-items:center;justify-content:center;color:rgb(var(--c));
  background:linear-gradient(145deg,rgb(var(--c)/.25),rgb(var(--c)/.04));border:1px solid rgb(var(--c)/.55);animation:tpIco 3s ease-in-out infinite}
@keyframes tpIco{0%,100%{box-shadow:0 0 0 0 rgb(var(--c)/.4)}50%{box-shadow:0 0 0 9px rgb(var(--c)/0)}}
#tpOverlay .tp-ico svg{width:1.7rem;height:1.7rem}
#tpOverlay .tp-t{font-weight:800;font-size:17px;letter-spacing:.1em;color:rgb(var(--c))}
#tpOverlay .tp-d{font-size:11px;color:#94a3b8;line-height:1.35;margin-top:2px}
#tpOverlay .tp-badge{margin-left:auto;font-size:9px;font-weight:800;letter-spacing:.08em;padding:2px 7px;border-radius:99px;background:rgb(var(--c)/.18);border:1px solid rgb(var(--c)/.5);color:rgb(var(--c));white-space:nowrap}
#tpOverlay .tp-go{margin-top:.7rem;display:flex;align-items:center;justify-content:center;gap:6px;padding:.55rem;border-radius:.7rem;font-weight:800;font-size:12px;letter-spacing:.12em;color:#06080c;background:rgb(var(--c))}
#tpOverlay .tp-foot{font-size:10px;color:#64748b;text-align:center}

/* pratinjau mini beranimasi */
#tpOverlay .tp-pv{height:7.2rem;border-radius:.7rem;background:#050608;border:1px solid #1d2128;padding:6px;display:flex;flex-direction:column;gap:5px;overflow:hidden}
#tpOverlay .pv-c{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:5px}
#tpOverlay .pv-c i{border-radius:5px;background:#10151f;border:1px solid #1f2937;animation:pvTile 3.2s ease-in-out infinite;animation-delay:calc(var(--n)*.25s)}
@keyframes pvTile{0%,70%,100%{background:#10151f;border-color:#1f2937;box-shadow:none}15%{background:rgba(34,211,238,.28);border-color:#22d3ee;box-shadow:0 0 10px rgba(34,211,238,.6)}}
#tpOverlay .pv-p{gap:4px}
#tpOverlay .pv-p .scr{flex:1;border:1px solid #00ff66;border-radius:5px;background:linear-gradient(180deg,rgba(0,255,102,.12),#000);display:flex;align-items:center;justify-content:space-between;padding:0 7px}
#tpOverlay .pv-p .nm{font-weight:800;font-size:12px;color:#00ff66;text-shadow:0 0 8px rgba(0,255,102,.6);letter-spacing:.03em}
#tpOverlay .pv-p .up{display:flex;flex-direction:column;gap:3px;width:26px}
#tpOverlay .pv-p .up i{height:3px;border-radius:2px;background:#00ff66;animation:pvUp 2.4s ease-in-out infinite;animation-delay:calc(var(--n)*.3s)}
@keyframes pvUp{0%,100%{opacity:.25}50%{opacity:1}}
#tpOverlay .pv-p .bt{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;height:11px}
#tpOverlay .pv-p .bt i{border-radius:2px;background:#1b1e24;border:1px solid #2a2e35;animation:pvBt 3.2s ease-in-out infinite;animation-delay:calc(var(--n)*.4s)}
@keyframes pvBt{0%,80%,100%{border-color:#2a2e35}10%{border-color:#ff5500;background:#2b1a14}}
#tpOverlay .pv-p .tb{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;height:11px}
#tpOverlay .pv-p .tb i{border-radius:2px;background:#1b1e24;animation:pvTb 6s steps(1) infinite;animation-delay:calc(var(--n)*1s)}
@keyframes pvTb{0%{background:#ff4400}16.6%,100%{background:#1b1e24}}
@media (prefers-reduced-motion:reduce){#tpOverlay *,#authModal .tp-eq i,#authModal>.glass-card::after{animation:none!important}}
@media (max-height:480px){#tpOverlay .tp-pv{height:4.6rem}#tpOverlay .tp-foot{display:none}}

/* ===== v2: splash, password, spinner, sapaan, warna aksen ===== */
#tpSplash{position:fixed;inset:0;z-index:99;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;background:radial-gradient(60% 50% at 50% 40%,rgb(var(--accent-rgb)/.22),#04060a 70%);animation:tpSplashOut .5s ease 1.5s forwards}
@keyframes tpSplashOut{to{opacity:0;visibility:hidden}}
#tpSplash .lg{width:4.6rem;height:4.6rem;border-radius:1.4rem;display:flex;align-items:center;justify-content:center;color:rgb(var(--ac-300));border:1px solid rgb(var(--accent-rgb)/.6);background:linear-gradient(145deg,rgb(var(--accent-rgb)/.3),rgb(var(--accent-rgb)/.05));animation:tpLg .9s cubic-bezier(.16,1,.3,1) both}
@keyframes tpLg{from{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:none}}
#tpSplash .lg svg{width:2.6rem;height:2.6rem}
#tpSplash h1{margin:0;font:900 clamp(18px,4vw,26px) 'Orbitron','Chakra Petch',sans-serif;letter-spacing:.2em;color:#fff;animation:tpIn .8s .3s both}
#tpSplash .bar{width:9rem;height:3px;border-radius:2px;background:#1b2230;overflow:hidden}
#tpSplash .bar i{display:block;height:100%;background:linear-gradient(90deg,rgb(var(--accent-rgb)),rgb(var(--ac-300)));animation:tpBar 1.4s ease-out both}
@keyframes tpBar{from{width:0}to{width:100%}}
#authModal .tp-pw{position:relative}
#authModal .tp-pw input{padding-right:3rem}
#authModal .tp-eye{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);width:2.4rem;height:2.4rem;display:flex;align-items:center;justify-content:center;border:0;background:transparent;color:#94a3b8;cursor:pointer}
#authModal .tp-eye.on{color:rgb(var(--ac-300))}
#authModal .tp-eye svg{width:1.2rem;height:1.2rem}
#btnAuthSubmit:disabled{opacity:.85}
#btnAuthSubmit:disabled span::before{content:"";display:inline-block;width:.9em;height:.9em;margin-right:.5em;vertical-align:-.12em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:tpSpin .7s linear infinite}
@keyframes tpSpin{to{transform:rotate(360deg)}}
#tpOverlay .tp-hi{margin-top:.35rem;display:inline-block;font-size:11px;color:rgb(var(--ac-300));background:rgb(var(--accent-rgb)/.12);border:1px solid rgb(var(--accent-rgb)/.35);border-radius:99px;padding:2px 10px;max-width:90vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tpOverlay .tp-sw{display:flex;align-items:center;justify-content:center;gap:.6rem;font-size:10px;color:#64748b;letter-spacing:.08em}
#tpOverlay .tp-sw button{width:1.7rem;height:1.7rem;border-radius:50%;border:2px solid transparent;background:rgb(var(--s));cursor:pointer;transition:transform .15s}
#tpOverlay .tp-sw button.on{border-color:#fff;transform:scale(1.15);box-shadow:0 0 10px rgb(var(--s)/.8)}

/* ===== v3: KLASIK + mode panggung (semua tetap landscape) ===== */
.voice-tile{background:linear-gradient(170deg,#0d1322 0%,#06090f 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 12px -6px #000}
.voice-tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:35%;pointer-events:none;background:linear-gradient(0deg,rgb(var(--accent-rgb)/.08),transparent)}
.voice-tile.active-tile{animation:kPulse 2.4s ease-in-out infinite}
.voice-tile.layer-tile{outline:2px dashed rgb(var(--ac-300)/.75);outline-offset:-5px}
@keyframes kPulse{50%{box-shadow:0 0 26px rgb(var(--accent-rgb)/.65),inset 0 0 14px rgb(var(--accent-rgb)/.18)}}
.fav-btn{transition:transform .2s}.fav-btn:active{transform:scale(1.5) rotate(15deg)}
.main-tab-btn i{display:inline-block!important;width:1em;height:1em}
.main-tab-btn{transition:background .2s,box-shadow .2s,transform .1s}.main-tab-btn:active{transform:scale(.96)}
.main-tab-btn.active{box-shadow:0 0 14px rgb(var(--accent-rgb)/.45),inset 0 -3px 0 rgb(var(--ac-300))}
.k-chips{display:inline-flex;gap:3px;margin-left:4px;flex-shrink:0}
.k-chips b{font:800 8px 'JetBrains Mono',monospace;padding:1px 5px;border-radius:5px;color:#9ca3af;background:#0b0f18;border:1px solid #232a38;white-space:nowrap}
.k-chips b.a{color:#c084fc;border-color:#c084fc66}.k-chips b.b{color:#22d3ee;border-color:#22d3ee66}
#pitchValDisplay{font-size:1.15rem!important}#tripleValDisplay{font-size:1rem!important;padding:.1rem .6rem}
.pitch-center-line{box-shadow:0 0 10px rgb(var(--ac-300)/.9)}
.qt-cent.neg{color:#f87171!important}.qt-cent.pos{color:#4ade80!important}
.style-btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.style-btn.active-style{animation:kPulse 1.6s ease-in-out infinite;filter:brightness(1.25)}
#proStrip .ptoggle,#proStrip .pstep{border-radius:.7rem;transition:transform .1s,box-shadow .2s}
#proStrip .ptoggle:active,#proStrip .pstep:active{transform:scale(.95)}
/* animasi pindah tab Pa5X + dua kolom di layar lebar (landscape tablet) */
#paRoot .pa-scr.on{animation:paTab .28s ease-out}
@keyframes paTab{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@media (min-width:900px) and (min-height:560px){
  #paRoot #paScr-main.on{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto 1fr 1fr;gap:.5rem}
  #paRoot #paScr-main .pa-keys{grid-column:1;grid-row:1/4}
  #paRoot #paScr-main .pa-stat{grid-column:2;grid-row:1}
  #paRoot #paScr-main>.pa-card:nth-of-type(2){grid-column:2;grid-row:2}
  #paRoot #paScr-main>.pa-card:nth-of-type(3){grid-column:2;grid-row:3}
  #paRoot #paScr-main .pa-keys .big{font-size:clamp(30px,6vw,56px)}
}
/* mode panggung: tombol besar, info kecil disembunyikan */
body.stage #fpsDisplay,body.stage .mr-author,body.stage .k-chips b:not(.a):not(.b),body.stage #paRoot .pa-cap,body.stage #paRoot .pa-stat,body.stage #paRoot .pa-keys .hint{display:none!important}
body.stage .voice-tile{min-height:104px}
body.stage .main-tab-btn{min-height:48px;font-size:.8rem!important}
body.stage #paRoot .pa-btns button,body.stage #paRoot .pa-regs button{font-size:clamp(13px,2.4vw,18px)}
body.stage #paRoot .pa-tabs{height:54px;min-height:54px}
body.stage .style-btn{font-size:1.05em!important}