/* =====================================================================
   MIDI ROYALE PRO - PRESET GRAFIS (v9)
   Kelas di <html>: gfx-low | gfx-medium | gfx-high | gfx-ultra  (diatur js/graphics.js)
   HIGH = tampilan asli (tanpa aturan tambahan).
   ===================================================================== */

/* ---------- LOW: yang penting ringan ---------- */
html.gfx-low *, html.gfx-low *::before, html.gfx-low *::after {
  animation: none !important;
  transition: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  text-shadow: none !important;
  filter: none !important;
}
html.gfx-low *:not(.gd-spot):not(.key-white):not(.key-black) { box-shadow: none !important; }
html.gfx-low #tpSplash, html.gfx-low #authModal .tp-eq, html.gfx-low #paRoot .pa-keys::before,
html.gfx-low #paRoot .pa-keys .deco, html.gfx-low #paRoot .pa-keys .kbd-art { display: none !important; }
/* tanpa blur: latar modal dibuat lebih pekat supaya teks tetap terbaca */
html.gfx-low .ks-modal, html.gfx-low .pro-modal, html.gfx-low #settingsModal, html.gfx-low #tileModal, html.gfx-low #authModal, html.gfx-low .gd-modal { background: rgba(2, 4, 8, .94) !important; }
html.gfx-low .glass-card { background: #0b0f19 !important; }
/* status aktif tetap jelas tanpa glow: pakai garis tebal */
html.gfx-low .voice-tile.active-tile, html.gfx-low .ks-tile.on { outline: 2px solid rgb(var(--accent-rgb)); outline-offset: -2px; }
html.gfx-low #paRoot .pa-tabs button.on, html.gfx-low #paRoot .pa-regs button.on, html.gfx-low #paRoot .pa-row.on { outline: 2px solid #ff7a33; outline-offset: -2px; }
html.gfx-low .ks-pulse { background: #ef4444; }

/* ---------- MEDIUM: seimbang ---------- */
html.gfx-medium *, html.gfx-medium *::before, html.gfx-medium *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* animasi berulang (pulse, equalizer, kedip) hanya diputar sekali; indikator rekam tetap berdenyut */
html.gfx-medium *:not(.ks-pulse):not(#btnAuthSubmit span), html.gfx-medium *::before, html.gfx-medium *::after { animation-iteration-count: 1 !important; }
html.gfx-medium #btnAuthSubmit span::before { animation-iteration-count: infinite !important; }
html.gfx-medium .ks-modal, html.gfx-medium .pro-modal, html.gfx-medium #settingsModal, html.gfx-medium #tileModal, html.gfx-medium .gd-modal { background: rgba(2, 4, 8, .9) !important; }
html.gfx-medium #paRoot .pa-keys::before { display: none; }
html.gfx-medium .voice-tile svg, html.gfx-medium .voice-tile img, html.gfx-medium .mr-nav .mr-chev { filter: none !important; }

/* ---------- ULTRA: semaksimal mungkin ---------- */
html.gfx-ultra .main-tab-btn, html.gfx-ultra .voice-tile, html.gfx-ultra .ks-tile, html.gfx-ultra .ks-btn, html.gfx-ultra .ptoggle, html.gfx-ultra .reg-btn { transition: transform .12s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease; }
html.gfx-ultra .voice-tile.active-tile { box-shadow: 0 0 22px rgb(var(--accent-rgb) / .55), 0 0 2px rgb(var(--accent-rgb)), inset 0 0 16px rgb(var(--accent-rgb) / .2); }
html.gfx-ultra .ks-tile.on { box-shadow: 0 0 26px rgb(var(--c) / .6), inset 0 0 18px rgb(var(--c) / .22); }
html.gfx-ultra #panelVoice:not(.hidden), html.gfx-ultra #panelQt:not(.hidden), html.gfx-ultra #panelCtrl:not(.hidden), html.gfx-ultra #panelStyle:not(.hidden), html.gfx-ultra #panelKset:not(.hidden) { animation: gfxIn .28s ease both; }
@keyframes gfxIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
html.gfx-ultra body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(ellipse at 15% 0%, rgb(var(--accent-rgb) / .10), transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(168, 85, 247, .08), transparent 50%); }
@media (prefers-reduced-motion: reduce) { html.gfx-ultra * { animation: none !important; } }

/* ---------- UI pengaturan grafis + indikator ---------- */
.gfx-seg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; }
.gfx-seg button { position: relative; min-height: 38px; border-radius: .6rem; background: #0b1120; border: 1.5px solid #1e293b; color: #94a3b8; font: 800 .6rem Orbitron, system-ui, sans-serif; letter-spacing: .04em; touch-action: manipulation; }
.gfx-seg button.on { color: #0b0f17; background: rgb(var(--ac-400)); border-color: rgb(var(--ac-300)); }
.gfx-seg button.cur::after { content: ""; position: absolute; top: 4px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #34d399; }
.gfx-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.gfx-chk { display: flex; align-items: center; gap: .4rem; font-size: .7rem; color: #cbd5e1; }
.gfx-chk input { width: 16px; height: 16px; }
.gfx-read { font: 700 .65rem 'JetBrains Mono', ui-monospace, monospace; color: #94a3b8; }
.gfx-ind { position: fixed; z-index: 69; left: max(6px, env(safe-area-inset-left)); bottom: max(6px, env(safe-area-inset-bottom)); padding: 2px 7px; border-radius: 6px; background: rgba(2, 6, 23, .85); border: 1px solid #334155; color: #cbd5e1; font: 700 10px 'JetBrains Mono', ui-monospace, monospace; pointer-events: none; }
.gfx-ind.ok { color: #34d399; border-color: rgba(52, 211, 153, .5); }
.gfx-ind.mid { color: #fbbf24; border-color: rgba(251, 191, 36, .5); }
.gfx-ind.bad { color: #f87171; border-color: rgba(248, 113, 113, .6); }
.gfx-suggest { position: fixed; z-index: 72; left: 50%; top: max(10px, env(safe-area-inset-top)); transform: translateX(-50%); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 20px); padding: .5rem .7rem; border-radius: .8rem; background: #0c101c; border: 1px solid rgba(251, 191, 36, .6); color: #e2e8f0; font-size: 12px; }
.gfx-suggest button { min-height: 34px; padding: 0 .8rem; border-radius: .6rem; background: #0b1120; border: 1px solid #334155; color: #e2e8f0; font: 800 10px Orbitron, system-ui, sans-serif; }
.gfx-suggest button[data-g=yes] { color: #fbbf24; border-color: rgba(251, 191, 36, .6); }
@media (max-width: 480px) { .gfx-seg { grid-template-columns: repeat(3, minmax(0, 1fr)); } }