/* Vibrozz 2 — VPN (/vpn): the user's key card (QR + Happ) and, for the owner, the connections list. */
.vp{display:grid;gap:20px;max-width:880px;min-width:0}
.vp-head{display:flex;align-items:center;gap:14px;padding:22px 24px 6px}
.vp-head h2{margin:0;font-size:26px;font-weight:800;letter-spacing:-.02em}
.vp-head small{color:var(--tx-3);font-size:13px}
.vp-head>div{flex:1;min-width:0}
.vp-head .pill{font-size:13px;padding:5px 10px}
.vp-logo{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--acc);color:var(--on-acc);flex:none}
.vp-start{padding:18px 24px 26px}
.vp-start .btn{gap:10px}
.vp-warn{display:flex;align-items:center;gap:8px;margin:6px 0 10px;color:var(--dn);font-weight:600}
.vp-body{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:center;padding:14px 24px 8px}
.vp-qr{background:#fff;border-radius:20px;padding:12px;line-height:0;box-shadow:0 0 0 1px var(--line)}
.vp-qr img{display:block;width:220px;height:220px;image-rendering:pixelated}
.vp-go{display:grid;gap:10px;min-width:0}
.vp-go .btn.lg{justify-content:center;gap:10px;width:100%}
.vp-stores{display:flex;flex-wrap:wrap;gap:8px}
.vp-stores .chip{text-decoration:none}
.vp-tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:4px}
.vp-tr>div{display:grid;gap:2px;padding:12px 14px;border-radius:16px;background:var(--soft)}
.vp-tr span{color:var(--tx-3);font-size:13px}
.vp-tr b{font-size:18px;font-weight:700}
.vp-foot{display:flex;justify-content:flex-end;padding:4px 18px 16px}
.vp-on{display:inline-flex;align-items:center;gap:6px;color:var(--up);font-weight:600}
.vp-on::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--up);box-shadow:0 0 0 3px var(--up-soft)}
.vp-row{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,.8fr) auto}
.vp-who{min-width:0;flex-wrap:nowrap}
.vp-who>:first-child{flex:none}
.vp-off>span:first-child{opacity:.6}
@media (max-width:640px){
  .vp-head{padding:18px 18px 4px}
  .vp-body{grid-template-columns:minmax(0,1fr);justify-items:center;padding:12px 18px 6px}
  .vp-go{width:100%}
  .vp-qr img{width:200px;height:200px}
  .vp-row{grid-template-columns:minmax(0,1fr) auto auto auto;gap:10px}
  .vp-row>:nth-child(3){display:none}
  .vp-list .hd{display:none}
}