.vpn-sites-page { max-width: 1280px; margin: 0 auto; padding: calc(var(--dash-header-height, 80px) + 2rem) 2rem 4rem; }
.vpn-page-heading, .vpn-editor-heading, .vpn-site-title, .vpn-actions, .vpn-card-actions { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
.vpn-page-heading h1, .vpn-editor h2, .vpn-site-card h2 { margin:0; }
.vpn-site-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1rem; margin:1.5rem 0; }
.vpn-site-card, .vpn-editor, .vpn-empty { background:#fff; border:1px solid var(--color-border); border-radius:12px; padding:1.25rem; box-shadow:0 4px 16px rgba(15,23,42,.08); }
.vpn-status { border-radius:999px; padding:.25rem .65rem; font-weight:700; font-size:.78rem; }
.vpn-status.online { color:#08783e; background:#dcfce7; } .vpn-status.offline { color:#a12828; background:#fee2e2; }
.vpn-site-card dl { display:grid; grid-template-columns:130px 1fr; gap:.45rem; } .vpn-site-card dt { color:var(--color-text-secondary); } .vpn-site-card dd { margin:0; overflow-wrap:anywhere; }
.vpn-endpoints { display:grid; gap:.4rem; margin:1rem 0; } .vpn-endpoints code { display:block; padding:.45rem; background:#f1f5f9; border-radius:5px; overflow-wrap:anywhere; }
.vpn-endpoints code.reachable b { color:#08783e; }.vpn-endpoints code.unreachable b { color:#a12828; }.vpn-endpoints code.unchecked b { color:#64748b; }
.vpn-editor { margin-top:1.5rem; } #vpnDraftEditor { width:100%; min-height:460px; margin-top:1rem; padding:1rem; border:1px solid #94a3b8; border-radius:8px; background:#0f172a; color:#e2e8f0; font:13px/1.5 ui-monospace,monospace; tab-size:2; }
.vpn-message, .vpn-validation { margin:1rem 0; border-radius:8px; padding:.75rem 1rem; } .vpn-message:empty, .vpn-validation:empty { display:none; }
.vpn-message.success, .vpn-validation.valid { color:#075d35; background:#dcfce7; } .vpn-message.error, .vpn-validation.invalid { color:#8b1d1d; background:#fee2e2; }
.vpn-access-denied { padding:5rem 2rem; text-align:center; } .vpn-card-actions { justify-content:flex-start; }
@media(max-width:700px){.vpn-sites-page{padding-left:1rem;padding-right:1rem}.vpn-site-card dl{grid-template-columns:1fr}.vpn-site-card dt{margin-top:.35rem}}