/* PANDUAN VOICE CETAK SURAT - DESA PULOSARI */
:root{
  --vg-green:#087b60;
  --vg-blue:#197aa8;
  --vg-ink:#123c37;
  --vg-soft:#eff9f6;
  --vg-border:#d4e8e1;
}
#vgGuideBar{
  width:min(1180px,calc(100% - 28px));
  margin:14px auto 18px;
  background:linear-gradient(135deg,#f9fffd,#eef8ff);
  border:1px solid var(--vg-border);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(20,80,65,.08);
  padding:15px;
  color:var(--vg-ink);
  position:relative;
  z-index:50;
  font-family:Arial,Helvetica,sans-serif;
}
#vgGuideBar *{box-sizing:border-box}
.vg-head{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:12px}
.vg-title{font-size:18px;font-weight:900;line-height:1.2}
.vg-sub{font-size:12px;color:#58736e;margin-top:4px}
#vgVoiceToggle{
  border:0;border-radius:999px;padding:9px 13px;font-weight:900;cursor:pointer;
  background:var(--vg-green);color:#fff;white-space:nowrap
}
#vgVoiceToggle.off{background:#687c78}
.vg-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.vg-step{
  border:1px solid var(--vg-border);background:#fff;border-radius:13px;padding:10px 9px;
  min-height:74px;cursor:default;transition:.18s ease;position:relative
}
.vg-step:hover,.vg-step:focus{transform:translateY(-2px);box-shadow:0 8px 20px rgba(11,100,80,.12);outline:none}
.vg-step.active{border-color:#79cbb5;background:#eaf9f3;box-shadow:inset 0 0 0 1px #b8e5d8}
.vg-num{
  display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;
  background:#e9f3ff;color:#176b98;font-weight:900;font-size:12px;margin-bottom:5px
}
.vg-step.active .vg-num{background:var(--vg-green);color:#fff}
.vg-step b{display:block;font-size:12px}
.vg-step span{display:block;font-size:10px;color:#627772;margin-top:3px;line-height:1.3}
.vg-hint{
  margin-top:10px;padding:9px 11px;border-radius:11px;background:#fff7df;color:#705d22;
  font-size:11px;border:1px solid #f0dfa4
}
.vg-speaking{
  outline:3px solid rgba(9,139,104,.18)!important;
  box-shadow:0 0 0 6px rgba(9,139,104,.06)!important
}
#vgMini{
  position:fixed;left:18px;bottom:18px;z-index:99999;
  display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--vg-border);
  border-radius:999px;padding:8px 11px;box-shadow:0 8px 24px rgba(0,0,0,.12);
  font:700 11px Arial;color:#19584a;cursor:pointer
}
#vgMini i{font-style:normal;font-size:18px}
@media(max-width:900px){
  .vg-steps{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:560px){
  #vgGuideBar{width:calc(100% - 16px);margin:8px auto 12px;padding:11px;border-radius:14px}
  .vg-head{align-items:flex-start;gap:8px}
  .vg-title{font-size:15px}
  .vg-sub{font-size:10px}
  #vgVoiceToggle{font-size:10px;padding:8px 9px}
  .vg-steps{grid-template-columns:repeat(2,1fr);gap:6px}
  .vg-step{min-height:66px;padding:8px}
  .vg-step b{font-size:11px}
  .vg-step span{font-size:9px}
  #vgMini{left:10px;bottom:10px}
}
@media print{
  #vgGuideBar,#vgMini{display:none!important}
}