.vg-app{--vg-ac:#ff7a1a;--bg:#16161c;--card:#22222b;--ink:#f4f1ee;--mute:#a8a6b0;--line:#4a4a58;max-width:980px;margin:24px auto;padding:20px;background:var(--bg);color:var(--ink);border-radius:14px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;font-family:inherit;box-sizing:border-box}
.vg-app *{box-sizing:border-box}
.vg-app.vg-single{grid-template-columns:minmax(0,1fr);max-width:560px}
.vg-app h3{margin:0 0 10px;font-size:1rem;font-weight:700;color:var(--ink)}
.vg-main{min-width:0;display:grid;gap:12px;align-content:start}
.vg-wrap{position:relative;background:var(--card);border-radius:12px;overflow:hidden;min-height:300px;display:flex;align-items:center;justify-content:center}
.vg-wrap.vg-over{outline:2px dashed var(--vg-ac);outline-offset:-8px}
.vg-prev{display:block;max-width:100%;max-height:72vh;width:auto;height:auto}
.vg-prev[hidden],.vg-result[hidden]{display:none}
.vg-empty{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;min-height:300px;padding:24px;text-align:center;cursor:pointer;color:var(--ink);border:2px dashed var(--line);border-radius:12px;margin:10px}
.vg-empty:hover,.vg-empty:focus-visible{border-color:var(--vg-ac)}
.vg-empty[hidden]{display:none}
.vg-empty-t{font-weight:700}
.vg-empty-s{font-size:.85rem;color:var(--mute)}
.vg-busy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(22,22,28,.78);color:#fff;text-align:center;padding:20px;font-size:.95rem}
.vg-busy[hidden]{display:none}
.vg-bar{display:flex;flex-wrap:wrap;gap:8px}
.vg-btn{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px 14px;font:inherit;font-size:.9rem;cursor:pointer}
.vg-btn:hover,.vg-btn:focus-visible{border-color:var(--vg-ac)}
.vg-consent{display:flex;gap:8px;align-items:flex-start;font-size:.8rem;color:var(--mute);cursor:pointer}
.vg-consent input{margin-top:3px;accent-color:var(--vg-ac)}
.vg-go{background:var(--vg-ac);color:#1a1006;border:0;border-radius:8px;padding:13px 20px;font:inherit;font-weight:700;font-size:1rem;cursor:pointer}
.vg-go:disabled{opacity:.6;cursor:wait}
.vg-status{min-height:1.2em;font-size:.9rem;color:var(--mute)}
.vg-status.vg-err{color:#ff8f8f}
.vg-link{width:max-content;max-width:100%;color:var(--vg-ac);font-size:.9rem}
.vg-link[hidden]{display:none}
.vg-hint{margin:0;font-size:.78rem;color:var(--mute)}
.vg-result{width:100%;padding:10px}
.vg-cmp{position:relative;direction:ltr;max-width:460px;aspect-ratio:3/4;margin:0 auto;border-radius:10px;overflow:hidden;background:#fff;--p:50%}
.vg-cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vg-bw{position:absolute;inset:0;background:#fff;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.vg-cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.vg-cmp::after{content:"";position:absolute;top:0;bottom:0;left:var(--p);width:3px;background:var(--vg-ac);pointer-events:none}
.vg-tag{position:absolute;top:10px;background:rgba(0,0,0,.65);color:#fff;font-size:.75rem;padding:3px 9px;border-radius:5px;pointer-events:none}
.vg-tag-b{left:10px}.vg-tag-a{right:10px}
.vg-dl{display:block;width:max-content;margin:12px auto 0;color:var(--vg-ac)}
.vg-side{min-width:0;background:var(--card);border-radius:12px;padding:14px;align-self:start}
.vg-search{width:100%;margin:0 0 12px;padding:11px 14px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;font:inherit}
.vg-search:focus{outline:none;border-color:var(--vg-ac)}
.vg-search::placeholder{color:var(--mute)}
.vg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.vg-item{position:relative;cursor:pointer;text-align:center;font-size:.76rem;color:var(--mute)}
.vg-item input{position:absolute;opacity:0}
.vg-item img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;border-radius:8px;border:2px solid transparent;display:block;padding:4px}
.vg-item input:checked+img{border-color:var(--vg-ac)}
.vg-item input:focus-visible+img{outline:2px solid #fff}
.vg-item span{display:block;margin-top:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.vg-open{margin-inline-start:8px}
.vg-modal{display:none;position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.7);overflow:auto;padding:16px}
.vg-modal.open{display:block}
.vg-box{position:relative;max-width:620px;margin:auto}
.vg-close{position:absolute;top:8px;left:8px;z-index:2;background:#fff;color:#000;border:0;border-radius:50%;width:34px;height:34px;font-size:22px;line-height:1;cursor:pointer}
@media (max-width:760px){.vg-app{grid-template-columns:minmax(0,1fr);padding:14px}.vg-wrap,.vg-empty{min-height:240px}}
@media (prefers-reduced-motion:no-preference){.vg-item img{transition:border-color .15s}}