.vpm { color:#20384a; }
.vpm, .vpm * { box-sizing:border-box; }
.vpm [hidden] { display:none !important; }
.vpm .notice { padding:16px 20px; background:#e5f4ef; border-left:4px solid #49a990; border-radius:4px; font-size:.9rem; }
.vpm .section-title { display:flex; gap:14px; align-items:baseline; margin:30px 0 16px; }
.vpm .section-title > span { font-size:.85rem; font-weight:700; color:#178b80; }
.vpm .section-title h2 { margin:0; font-size:1.35rem; }
.vpm .section-title p { margin:0; color:#506b78; font-size:.9rem; }
.vpm label { display:block; font-weight:700; margin:12px 0 6px; }
.vpm select, .vpm input, .vpm textarea { font:inherit; border:1px solid #a9bbc1; border-radius:8px; background:#fff; padding:11px 12px; color:#20384a; }
.vpm select { width:min(100%,320px); }
.vpm input, .vpm textarea { width:100%; }
.vpm textarea { resize:vertical; }
.vpm .gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; margin:18px 0; }
.vpm .gallery .card { font:inherit; text-align:left; cursor:pointer; padding:0; overflow:hidden; background:#fff; border:2px solid transparent; border-radius:10px; box-shadow:0 2px 12px #193e4a18; color:inherit; }
.vpm .gallery .card:hover, .vpm .gallery .card:focus-visible { border-color:#5ab8a7; }
.vpm .gallery .card[aria-checked=true] { border-color:#078879; box-shadow:0 0 0 2px #9bd9cc; }
.vpm .gallery .card img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.vpm .gallery .card span { display:block; padding:8px 10px; font-size:.85rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vpm .hint { font-size:.86rem; color:#536b76; }
.vpm button:not(.card) { font:inherit; font-weight:700; border:0; border-radius:8px; background:#087d75; color:#fff; padding:12px 22px; cursor:pointer; }
.vpm button:not(.card):hover { background:#075f5b; }
.vpm .actions { display:flex; flex-wrap:wrap; gap:12px; }
.vpm .actions .secondary, .vpm .selected-dialog-actions .selected-dialog-close { background:#e5f1ef; color:#175c57; }
.vpm .selected-dialog-actions .selected-dialog-close:hover { background:#cfe6e0; }
.vpm .error { color:#a32929; }
.vpm .selected-dialog { width:min(90vw,360px); padding:24px; border:0; border-radius:14px; box-shadow:0 18px 50px #12354c55; color:#20384a; text-align:center; }
.vpm .selected-dialog::backdrop { background:#102d3f88; }
.vpm .selected-dialog h2 { margin:0; font-size:1.15rem; }
.vpm .selected-dialog p { margin:8px 0; }
.vpm .selected-dialog .selected-dialog-command { margin:12px 0 20px; font-size:1.25rem; font-weight:700; overflow-wrap:anywhere; color:#087d75; }
.vpm .selected-dialog-actions { display:flex; justify-content:center; gap:10px; }
.vpm .command-guide { margin-top:48px; padding:clamp(20px,4vw,36px); background:#fff; border-radius:14px; box-shadow:0 2px 12px #193e4a12; }
.vpm .command-guide h2 { margin:0 0 18px; font-size:1.45rem; }
.vpm .command-guide h3 { margin:28px 0 8px; font-size:1.1rem; }
.vpm .command-guide code { font-size:.94em; padding:2px 5px; border-radius:4px; background:#edf4f3; color:#075f5b; }
.vpm .command-guide a { color:#087d75; }
.vpm .command-flow { display:flex; flex-wrap:wrap; gap:10px; padding:0; list-style:none; }
.vpm .command-flow li { flex:1 1 170px; padding:12px 15px; border-radius:8px; background:#eaf6f3; }
.vpm .command-flow strong, .vpm .command-flow span { display:block; }
.vpm .command-flow strong { color:#087d75; }
.vpm .command-example { margin:16px 0; padding:8px 20px; background:#f1f5f5; border-left:4px solid #6cb6aa; border-radius:4px; }
.vpm .command-example p { margin:10px 0; }
@media(max-width:480px) { .vpm .gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .vpm .gallery .card span { font-size:.78rem; } }