/* vg.css — scoped under #vgApp so it never collides with the site's global styles. */
#vgApp{--vgbg:#faf5ec;--vgpanel:#fff;--vgink:#2b2016;--vgmuted:#8a7a63;--vgline:#e7dcc7;
  --vgorange:#e07b1e;--vgorange-d:#c05f10;--vggold:#c9a227;--vggreen:#1f9d55;
  display:block;color:var(--vgink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;}
#vgApp *{box-sizing:border-box;}

#vgApp .top{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;background:linear-gradient(90deg,var(--vgorange),var(--vgorange-d));color:#fff;flex-wrap:wrap;}
#vgApp .top h1{font-size:1.05rem;margin:0;font-weight:700;letter-spacing:.01em;}
#vgApp .top .sub{font-size:.72rem;opacity:.9;}
#vgApp .top .spacer{flex:1;}

#vgApp .wrap{display:grid;grid-template-columns:1fr 268px;gap:1rem;padding:1rem;max-width:1200px;margin:0 auto;}
@media(max-width:820px){#vgApp .wrap{grid-template-columns:1fr;}}
#vgApp .stage-box{position:relative;background:var(--vgpanel);border:1px solid var(--vgline);border-radius:12px;overflow:hidden;box-shadow:0 8px 30px -14px rgba(120,80,20,.3);}
#vgApp #stage{display:block;width:100%;touch-action:none;background:#f3ede1;cursor:crosshair;}
#vgApp .handle{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid #fff;
  background:var(--vgorange);box-shadow:0 2px 6px rgba(0,0,0,.35);cursor:grab;touch-action:none;z-index:5;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.62rem;font-weight:700;}
#vgApp .handle:active{cursor:grabbing;transform:scale(1.1);}
#vgApp .panel{background:var(--vgpanel);border:1px solid var(--vgline);border-radius:12px;padding:1rem;align-self:start;}
#vgApp .panel h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--vgmuted);margin:.2rem 0 .7rem;}
#vgApp .row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:.55rem 0;font-size:.85rem;}

#vgApp .btn{display:inline-flex;align-items:center;gap:.4rem;justify-content:center;font-weight:600;font-size:.85rem;cursor:pointer;
  border:1px solid var(--vgorange);color:#fff;background:linear-gradient(180deg,var(--vgorange),var(--vgorange-d));border-radius:9px;padding:.55rem .9rem;text-decoration:none;line-height:1.1;}
#vgApp .btn.ghost{background:#fff;color:var(--vgorange-d);}
#vgApp .btn.wide{width:100%;}
#vgApp .btn.sm{padding:.4rem .6rem;font-size:.78rem;}
#vgApp .btn.green{border-color:var(--vggreen);background:linear-gradient(180deg,#27ae60,var(--vggreen));}
#vgApp .btn:disabled{opacity:.5;cursor:not-allowed;}
#vgApp input[type=range]{width:130px;accent-color:var(--vgorange);}
#vgApp input[type=number]{width:64px;padding:.25rem .35rem;border:1px solid var(--vgline);border-radius:6px;font:inherit;}
#vgApp .compass{width:74px;height:74px;margin:.3rem auto;display:block;}
#vgApp .legend{display:grid;gap:.28rem;margin-top:.3rem;}
#vgApp .lg{display:flex;align-items:center;gap:.5rem;font-size:.74rem;line-height:1.35;}
#vgApp .lg i{width:.85rem;height:.85rem;border-radius:3px;flex:none;border:1px solid rgba(0,0,0,.12);}
#vgApp .hint{font-size:.72rem;color:var(--vgmuted);line-height:1.5;margin:.5rem 0 0;}
#vgApp .up{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:2rem 1rem;color:var(--vgmuted);text-align:center;}
#vgApp .up svg{width:44px;height:44px;color:var(--vgorange);}
#vgApp .seg{display:inline-flex;border:1px solid var(--vgline);border-radius:8px;overflow:hidden;flex-wrap:wrap;}
#vgApp .seg button{border:0;background:#fff;padding:.35rem .55rem;font:inherit;font-size:.8rem;cursor:pointer;color:var(--vgink);}
#vgApp .seg button.on{background:var(--vgorange);color:#fff;}

/* ── Save / auth bar in the top strip ── */
#vgApp .top .who{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;background:rgba(255,255,255,.16);padding:.3rem .6rem;border-radius:20px;}
#vgApp .top .who img{width:20px;height:20px;border-radius:50%;}
#vgApp .quota{font-size:.72rem;color:var(--vgmuted);margin:.2rem 0 .6rem;line-height:1.4;}
#vgApp .quota b{color:var(--vgorange-d);}

/* ── Modal (My Maps / Save / Paywall) ── */
#vgApp .vgm{position:fixed;inset:0;z-index:3000;display:none;align-items:center;justify-content:center;background:rgba(30,18,8,.55);padding:1rem;}
#vgApp .vgm.show{display:flex;}
#vgApp .vgm-box{background:#fff;border-radius:16px;max-width:440px;width:100%;max-height:86vh;overflow:auto;box-shadow:0 24px 70px -20px rgba(60,30,0,.6);padding:1.25rem;}
#vgApp .vgm-box h3{margin:.1rem 0 .3rem;font-size:1.1rem;color:var(--vgink);}
#vgApp .vgm-box p{font-size:.85rem;color:var(--vgmuted);line-height:1.55;margin:.3rem 0 .8rem;}
#vgApp .vgm-x{float:right;border:0;background:none;font-size:1.3rem;cursor:pointer;color:var(--vgmuted);line-height:1;}
#vgApp .vgm-field{width:100%;padding:.6rem .7rem;border:1px solid var(--vgline);border-radius:9px;font:inherit;margin:.2rem 0 .8rem;}
#vgApp .vgm-actions{display:flex;gap:.5rem;flex-wrap:wrap;}
#vgApp .map-item{display:flex;align-items:center;gap:.7rem;padding:.55rem .3rem;border-bottom:1px solid var(--vgline);}
#vgApp .map-item .mi-name{flex:1;font-size:.9rem;font-weight:600;color:var(--vgink);cursor:pointer;}
#vgApp .map-item .mi-date{font-size:.7rem;color:var(--vgmuted);}
#vgApp .map-item .mi-del{border:0;background:none;color:#c0392b;cursor:pointer;font-size:1rem;}
#vgApp .pay{text-align:center;padding:.4rem 0;}
#vgApp .pay .big{font-size:2rem;font-weight:800;color:var(--vgorange-d);}
#vgApp .g-btn{display:inline-flex;align-items:center;gap:.55rem;justify-content:center;width:100%;padding:.7rem;border:1px solid var(--vgline);border-radius:10px;background:#fff;font-weight:600;color:#3c4043;cursor:pointer;font-size:.92rem;}
#vgApp .g-btn svg{width:18px;height:18px;}