/* Voxxaa STORE v86 : Panduan lengkap. Memakai warna tema toko yang sudah ada, tanpa warna baru. */
.gd-back{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .25s ease}
.gd-back.on{opacity:1;pointer-events:auto}
.gd{position:fixed;z-index:81;left:50%;top:50%;width:min(640px,calc(100% - 20px));height:min(88dvh,820px);display:flex;flex-direction:column;
  background:var(--cl-bg,var(--panel));border:1px solid var(--cl-line,var(--glass-b));border-radius:24px;overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.07);
  opacity:0;visibility:hidden;transform:translate(-50%,-46%) scale(.97);transition:opacity .25s ease,transform .3s cubic-bezier(.2,.9,.3,1),visibility 0s .3s}
.gd.on{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);transition:opacity .25s ease,transform .3s cubic-bezier(.2,.9,.3,1)}
html.gd-open{overflow:hidden}

.gd-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 14px 18px;border-bottom:1px solid var(--cl-line-soft,var(--glass-b));
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0)),var(--cl-s1,var(--panel))}
.gd-hi{display:flex;align-items:center;gap:12px;min-width:0}
.gd-ic{width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;background:rgba(var(--acc-rgb),.18);border:1px solid rgba(var(--hot-rgb),.35);color:var(--acc-hot)}
.gd-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.gd-h h2{font-family:var(--display);font-size:25px;font-weight:800;line-height:1;letter-spacing:.02em}
.gd-h p{margin-top:3px;color:var(--mute);font-size:12.5px;font-weight:600;line-height:1.3}
.gd-x{width:38px;height:38px;flex:none;border-radius:50%;font-size:24px;line-height:1;cursor:pointer;color:var(--text);background:var(--cl-s2,var(--glass));border:1px solid var(--cl-line,var(--glass-b));transition:border-color .2s,transform .2s}
.gd-x:hover{border-color:var(--acc-hot)}.gd-x:active{transform:scale(.94)}

.gd-tools{display:grid;gap:10px;padding:12px 16px;border-bottom:1px solid var(--cl-line-soft,var(--glass-b))}
.gd-tools input{width:100%;min-height:44px;padding:0 14px;border-radius:14px;font:inherit;font-size:15px;color:var(--text);background:var(--cl-s1,var(--panel));border:1px solid var(--cl-line,var(--glass-b))}
.gd-tools input:focus{outline:0;border-color:var(--acc-hot);box-shadow:0 0 0 4px rgba(var(--acc-rgb),.14)}
.gd-bt{display:flex;gap:8px}
.gd-bt button{flex:1;min-height:36px;border-radius:999px;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;color:var(--mute);background:transparent;border:1px solid var(--cl-line-soft,var(--glass-b));transition:color .2s,border-color .2s}
.gd-bt button:hover{color:var(--text);border-color:var(--acc-hot)}

.gd-sc{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:6px 16px 22px;-webkit-overflow-scrolling:touch}
.gd-grp{margin:18px 2px 8px;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--acc-hot)}
.gd-grp[hidden]{display:none}
.gd-it{margin-top:8px;border-radius:18px;background:var(--cl-s1,var(--panel));border:1px solid var(--cl-line,var(--glass-b));overflow:hidden;transition:border-color .2s}
.gd-it[hidden]{display:none}
.gd-it[open]{border-color:rgba(var(--hot-rgb),.55)}
.gd-it summary{list-style:none;display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gd-it summary::-webkit-details-marker{display:none}
.gd-it summary:focus-visible{outline:2px solid var(--acc-hot);outline-offset:-2px}
.gd-it summary i{width:30px;height:30px;flex:none;border-radius:10px;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:13px;color:var(--acc-hot);background:rgba(var(--acc-rgb),.16);border:1px solid rgba(var(--hot-rgb),.3)}
.gd-tx{flex:1;min-width:0}
.gd-tx b{display:block;font-size:15px;font-weight:800;line-height:1.25}
.gd-tx small{display:block;margin-top:2px;color:var(--mute);font-size:12.5px;font-weight:600;line-height:1.35}
.gd-chev{width:20px;height:20px;flex:none;fill:none;stroke:var(--mute);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
.gd-it[open] .gd-chev{transform:rotate(180deg);stroke:var(--acc-hot)}

.gd-b{padding:2px 16px 16px;border-top:1px solid var(--cl-line-soft,var(--glass-b));animation:gdIn .28s ease both}
@keyframes gdIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.gd-lbl{margin:14px 0 6px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.gd-b ol,.gd-b ul{margin:0;padding:0;list-style:none}
.gd-b ol{counter-reset:gd}
.gd-b ol li{counter-increment:gd;position:relative;padding:7px 0 7px 34px;font-size:14px;line-height:1.55;color:var(--text)}
.gd-b ol li::before{content:counter(gd);position:absolute;left:0;top:7px;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--on-acc,#fff);background:var(--acc)}
.gd-b ul li{position:relative;padding:6px 0 6px 20px;font-size:13.5px;line-height:1.55;color:var(--mute)}
.gd-b ul li::before{content:"";position:absolute;left:4px;top:14px;width:6px;height:6px;border-radius:50%;background:var(--acc-hot)}
.gd-b b{color:var(--text);font-weight:800}
.gd-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.gd-go{min-height:40px;padding:0 16px;border-radius:999px;font:inherit;font-size:13px;font-weight:800;cursor:pointer;color:var(--on-acc,#fff);background:var(--acc);border:1px solid var(--acc-hot);transition:background .2s,transform .15s}
.gd-go:hover{background:var(--acc-hot)}.gd-go:active{transform:scale(.97)}
.gd-empty{margin:26px 0 8px;text-align:center;color:var(--mute);font-size:14px}
.gd-empty[hidden]{display:none}
.gd-end{margin:20px 4px 0;text-align:center;color:var(--mute);font-size:12.5px;line-height:1.5}
.gd-end b{color:var(--text)}

@media(max-width:560px){
  .gd{width:100%;height:94dvh;top:auto;bottom:0;left:0;border-radius:24px 24px 0 0;transform:translateY(24px)}
  .gd.on{transform:none}
  .gd-h h2{font-size:23px}
}
@media(prefers-reduced-motion:reduce){.gd,.gd.on,.gd-back,.gd-b{transition:none;animation:none}}
html.lite .gd,html.lite .gd-back,html.lite .gd-b{transition:none!important;animation:none!important}