/* ═══════════════════════════════════════════════════════════════
   VPN Panel — OpenTunnel Clone UI  (Sneat sidebar edition)
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --vp-primary:     #0061f2;
  --vp-primary-d:   #004fdb;
  --vp-success:     #10b981;
  --vp-warning:     #f59e0b;
  --vp-danger:      #ef4444;
  --vp-radius:      12px;
  --vp-shadow:      0 1px 4px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.05);
  --vp-shadow-lg:   0 8px 28px rgba(0,0,0,.13);
  --vp-card:        #ffffff;
  --vp-card-border: #e2e8f0;
  --vp-text:        #1e293b;
  --vp-muted:       #64748b;
  --vp-bg:          #f8fafc;
  --vp-footer-bg:   #0f172a;
  --vp-footer-text: rgba(255,255,255,.62);
}
[data-bs-theme="dark"] {
  --vp-card:        #2a2d3e;
  --vp-card-border: #3a3f55;
  --vp-text:        #e2e8f0;
  --vp-muted:       #94a3b8;
  --vp-bg:          #25293a;
  --vp-footer-bg:   #080b14;
  --vp-shadow:      0 1px 4px rgba(0,0,0,.25), 0 4px 16px rgba(0,0,0,.2);
  --vp-shadow-lg:   0 8px 28px rgba(0,0,0,.4);
}

/* ── Buttons ─────────────────────────────────────────────── */
.vp-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1.4rem; border-radius: 8px; font-size: .875rem;
  font-weight: 600; border: 2px solid transparent; cursor: pointer;
  transition: all .18s; text-decoration: none; line-height: 1;
}
.vp-btn:disabled { opacity: .5; cursor: not-allowed; }
.vp-btn-primary  { background: var(--vp-primary); color: #fff; border-color: var(--vp-primary); }
.vp-btn-primary:hover:not(:disabled) { background: var(--vp-primary-d); border-color: var(--vp-primary-d); color: #fff; }
.vp-btn-offline  { background: #94a3b8; color: #fff; border-color: #94a3b8; }
.vp-btn-block    { display: flex; width: 100%; justify-content: center; }

/* ── Badges ──────────────────────────────────────────────── */
.vp-badge {
  display: inline-block; background: #dbeafe; color: #1d4ed8;
  font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  padding: .18rem .5rem; border-radius: 20px; text-transform: uppercase;
}
[data-bs-theme="dark"] .vp-badge { background: #1e3a8a; color: #93c5fd; }
.vp-badge-sm {
  display: inline-block; background: var(--vp-primary); color: #fff;
  font-size: .68rem; font-weight: 600; padding: .14rem .45rem; border-radius: 20px;
}

/* ════════════════════════════════════════════════════════════
   Server List Banner: 4 stat card menarik
   ════════════════════════════════════════════════════════════ */
.vp-list-banner {
  background: var(--vp-card);
  border: 1.5px solid var(--vp-card-border);
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
  box-shadow: var(--vp-shadow-lg);
}
.vp-list-banner-top {
  display: flex; align-items: center; gap: 1.25rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--vp-card-border);
}
.vp-list-banner-top h4 { font-size: 1.15rem; font-weight: 800; color: var(--vp-text); margin-bottom: 4px; }
.vp-list-banner-top p  { font-size: .88rem; color: var(--vp-muted); margin-bottom: 0; }

/* 4 stat cards grid */
.vp-stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
}
.vp-stat-card {
  border-radius: 14px;
  padding: 1.1rem 1rem 1rem;
  display: flex; align-items: center; gap: .85rem;
  box-shadow: var(--vp-shadow);
  transition: transform .18s, box-shadow .18s;
  position: relative; overflow: hidden;
}
.vp-stat-card::before {
  content: '';
  position: absolute; top: -18px; right: -14px;
  width: 70px; height: 70px; border-radius: 50%;
  background: rgba(255,255,255,.12);
  pointer-events: none;
}
.vp-stat-card:hover { transform: translateY(-3px); box-shadow: var(--vp-shadow-lg); }

/* Warna per card */
.vp-stat-blue   { background: linear-gradient(135deg, #2563eb, #3b82f6); }
.vp-stat-green  { background: linear-gradient(135deg, #059669, #10b981); }
.vp-stat-purple { background: linear-gradient(135deg, #6d28d9, #8b5cf6); }
.vp-stat-orange { background: linear-gradient(135deg, #c2410c, #ea580c); }

.vp-stat-card-icon {
  width: 42px; height: 42px; flex-shrink: 0;
  background: rgba(255,255,255,.2);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: #fff;
}
.vp-stat-card-body  { display: flex; flex-direction: column; min-width: 0; }
.vp-stat-card-value {
  font-size: 1.15rem; font-weight: 800; color: #fff;
  line-height: 1.1; white-space: nowrap;
}
.vp-stat-card-label {
  font-size: .72rem; color: rgba(255,255,255,.82);
  font-weight: 500; margin-top: .1rem;
}

/* Info box protocol */
.vp-proto-info {
  display: flex; gap: .75rem; align-items: flex-start;
  background: #eff6ff; border: 1px solid #bfdbfe;
  border-left: 4px solid var(--vp-primary);
  border-radius: var(--vp-radius); padding: .85rem 1rem;
  font-size: .855rem; color: #1e40af; margin-bottom: 1.25rem;
}
[data-bs-theme="dark"] .vp-proto-info {
  background: rgba(30,58,138,.15); border-color: #3b82f6;
  border-left-color: #60a5fa; color: #93c5fd;
}
.vp-proto-info .fas { flex-shrink: 0; margin-top: .15rem; color: var(--vp-primary); }

/* ════════════════════════════════════════════════════════════
   Server Card
   ════════════════════════════════════════════════════════════ */
.vp-server-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 1.1rem; margin-bottom: 1rem;
}
.vp-server-card {
  background: var(--vp-card); border: 1.5px solid var(--vp-card-border);
  border-radius: 14px; box-shadow: var(--vp-shadow);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .2s, transform .18s;
}
.vp-server-card:hover    { box-shadow: var(--vp-shadow-lg); transform: translateY(-2px); }
.vp-server-card.is-offline { border-color: #fca5a5; opacity: .82; }

.vp-sc-head {
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem .95rem .75rem;
  border-bottom: 1px solid var(--vp-card-border);
}
.vp-flag-img {
  width: 34px; height: 24px; border-radius: 4px;
  object-fit: cover; display: block; border: 1px solid var(--vp-card-border); flex-shrink: 0;
}
.vp-sc-title { flex: 1; min-width: 0; }
.vp-sc-title strong {
  display: block; font-size: .9rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--vp-text);
}
.vp-sc-title span { font-size: .73rem; color: var(--vp-muted); }
.vp-sc-status {
  display: flex; align-items: center; gap: .28rem;
  font-size: .72rem; font-weight: 600; flex-shrink: 0;
  padding: .2rem .55rem; border-radius: 20px;
}
.status-online  { background: #d1fae5; color: #065f46; }
.status-offline { background: #fee2e2; color: #991b1b; }
[data-bs-theme="dark"] .status-online  { background: #064e3b; color: #6ee7b7; }
[data-bs-theme="dark"] .status-offline { background: #7f1d1d; color: #fca5a5; }
.vp-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; animation: pulseDot 2s infinite;
}
.status-offline .vp-status-dot { animation: none; }
@keyframes pulseDot { 0%,100%{opacity:1} 50%{opacity:.3} }

.vp-sc-info { list-style: none; padding: .45rem .95rem; flex: 1; }
.vp-sc-info li {
  display: flex; justify-content: space-between; align-items: center;
  padding: .35rem 0; font-size: .815rem;
  border-bottom: 1px solid var(--vp-card-border); color: var(--vp-text);
}
.vp-sc-info li:last-child { border-bottom: none; }
.vp-sc-info li > span:first-child { color: var(--vp-muted); display: flex; align-items: center; gap: .3rem; }
.vp-sc-info li > span:first-child .fas { width: 13px; font-size: .76rem; }
.vp-sc-info code {
  background: var(--vp-bg); padding: .1rem .38rem;
  border-radius: 4px; font-size: .76rem; color: var(--vp-primary);
  border: 1px solid var(--vp-card-border);
}
.vp-sc-quota { padding: .45rem .95rem .55rem; }
.vp-sc-quota-row { display: flex; justify-content: space-between; font-size: .73rem; color: var(--vp-muted); margin-bottom: .28rem; }
.vp-progress { height: 5px; background: var(--vp-card-border); border-radius: 99px; overflow: hidden; }
.vp-progress-bar { height: 100%; border-radius: 99px; transition: width .4s; }
.bar-success { background: var(--vp-success); }
.bar-warning { background: var(--vp-warning); }
.bar-danger  { background: var(--vp-danger); }
.vp-sc-action { padding: .55rem .95rem .85rem; }
.vp-sc-action .vp-btn { width: 100%; justify-content: center; font-size: .84rem; }

/* ── Pagination ──────────────────────────────────────────── */
.vp-pagination { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.vp-pagination .pagination { display: flex; gap: .3rem; list-style: none; padding: 0; margin: 0; }
.vp-pagination .page-item .page-link {
  padding: .4rem .78rem; border-radius: 8px; font-size: .83rem; font-weight: 500;
  border: 1.5px solid var(--vp-card-border); color: var(--vp-text);
  background: var(--vp-card); transition: all .14s;
}
.vp-pagination .page-item.active .page-link { background: var(--vp-primary); border-color: var(--vp-primary); color: #fff; }
.vp-pagination .page-item .page-link:hover  { border-color: var(--vp-primary); color: var(--vp-primary); }
.vp-pagination .page-item.disabled .page-link { opacity: .4; cursor: not-allowed; }

/* ── Page icon ───────────────────────────────────────────── */
.vp-page-icon-sm {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: #fff;
}
.vp-page-icon-sm.ssh     { background: linear-gradient(135deg,#2563eb,#1d4ed8); }
.vp-page-icon-sm.openvpn { background: linear-gradient(135deg,#ea580c,#c2410c); }
.vp-page-icon-sm.v2ray   { background: linear-gradient(135deg,#7c3aed,#6d28d9); }
.vp-page-icon-sm.shadowsocks { background: linear-gradient(135deg,#0d9488,#0f766e); }
.vp-page-icon-sm.zivpn, .vp-page-icon-sm.Zivpn { background: linear-gradient(135deg,#f59e0b,#d97706) !important; color: #fff !important; }
.vp-page-icon-sm.wireguard, .vp-page-icon-sm.WireGuard { background: linear-gradient(135deg,#ef4444,#dc2626) !important; color: #fff !important; }
.vp-page-header-inline {
  display: flex; align-items: center; gap: 1rem;
  padding-bottom: .75rem; border-bottom: 2px solid var(--vp-card-border);
}

/* ── Hero inline (homepage) ──────────────────────────────── */
.vp-hero-inline {
  display: flex; align-items: stretch; gap: 1.5rem;
  background: linear-gradient(135deg,#1e3a8a 0%,#2563eb 60%,#3b82f6 100%);
  border-radius: 16px; padding: 1.75rem 2rem;
  position: relative; overflow: hidden; margin-bottom: 1.5rem;
}
[data-bs-theme="dark"] .vp-hero-inline {
  background: linear-gradient(135deg,#0d1b3e 0%,#1e3a8a 60%,#2563eb 100%);
}
.vp-hero-inline::before {
  content: ''; position: absolute; width: 280px; height: 280px; border-radius: 50%;
  background: rgba(255,255,255,.06); top: -70px; right: -50px; pointer-events: none;
}
.vp-hero-inline-left { flex: 1; }
.vp-inline-title { font-size: 1.7rem; font-weight: 800; color: #fff; margin-bottom: .5rem; }
.vp-inline-sub   { font-size: .95rem; color: rgba(255,255,255,.8); margin-bottom: 0; }
.vp-hero-inline-card {
  background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px); border-radius: 12px; padding: 1rem 1.3rem;
  min-width: 215px; flex-shrink: 0;
}
.vp-info-row {
  display: flex; align-items: center; gap: .7rem;
  padding: .45rem 0; border-bottom: 1px solid rgba(255,255,255,.1);
}
.vp-info-row:last-child { border-bottom: none; padding-bottom: 0; }
.vp-info-row .fas { font-size: .95rem; color: rgba(255,255,255,.68); flex-shrink: 0; }
.vp-info-label { display: block; font-size: .65rem; color: rgba(255,255,255,.58); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; line-height: 1; margin-bottom: .12rem; }
.vp-info-val   { display: block; font-size: .86rem; color: #fff; font-weight: 600; }

/* ── Why + service grids ─────────────────────────────────── */
.vp-why-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-bottom: 1.5rem;
}
.vp-why-card {
  background: var(--vp-card); border: 1.5px solid var(--vp-card-border);
  border-radius: var(--vp-radius); padding: 1.1rem; text-align: center;
  box-shadow: var(--vp-shadow); transition: transform .18s, box-shadow .18s;
}
.vp-why-card:hover { transform: translateY(-3px); box-shadow: var(--vp-shadow-lg); }
.vp-why-icon {
  width: 46px; height: 46px; background: #dbeafe; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: var(--vp-primary); margin: 0 auto .75rem;
}
[data-bs-theme="dark"] .vp-why-icon { background: #1e3a8a; }
.vp-why-card h5 { font-size: .9rem; font-weight: 700; margin-bottom: .35rem; color: var(--vp-text); }
.vp-why-card p  { font-size: .8rem; color: var(--vp-muted); margin: 0; }

.vp-service-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1.1rem; margin-bottom: 1.5rem;
}
.vp-service-card {
  background: var(--vp-card); border: 1.5px solid var(--vp-card-border);
  border-radius: 14px; padding: 1.5rem 1.25rem; text-align: center;
  box-shadow: var(--vp-shadow); display: flex; flex-direction: column; align-items: center;
  transition: transform .18s, box-shadow .18s;
}
.vp-service-card:hover { transform: translateY(-4px); box-shadow: var(--vp-shadow-lg); }
.vp-service-img  { margin-bottom: .85rem; }
.vp-service-icon { font-size: 2.75rem; }
.ssh-icon        { color: #2563eb; }
.openvpn-icon    { color: #ea580c; }
.v2ray-icon      { color: #7c3aed; }
.shadowsocks-icon { color: #0d9488; }
.zivpn-icon, .Zivpn-icon { color: #f59e0b !important; }
.wireguard-icon, .WireGuard-icon { color: #ef4444 !important; }
.vp-service-card h5 { font-size: 1.05rem; font-weight: 700; margin-bottom: .2rem; color: var(--vp-text); }
.vp-service-card > p { font-size: .8rem; color: var(--vp-muted); margin-bottom: 1rem; }
.vp-service-list {
  list-style: none; text-align: left; width: 100%; margin-bottom: 1.2rem; padding: 0;
}
.vp-service-list li {
  display: flex; align-items: center; gap: .4rem; padding: .28rem 0;
  font-size: .8rem; border-bottom: 1px solid var(--vp-card-border); color: var(--vp-text);
}
.vp-service-list li:last-child { border-bottom: none; }
.vp-service-list .fas { color: var(--vp-success); font-size: .75rem; }
.vp-service-card .vp-btn { width: 100%; justify-content: center; }

/* ── Create page ─────────────────────────────────────────── */
.vp-create-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }

.vp-form-card {
  background: var(--vp-card); border: 1.5px solid var(--vp-card-border);
  border-radius: 14px; box-shadow: var(--vp-shadow); overflow: hidden;
}
.vp-form-card-header {
  background: var(--vp-primary); color: #fff;
  padding: .75rem 1.15rem; font-weight: 700; font-size: .9rem;
  display: flex; align-items: center; gap: .45rem;
}
.vp-form-card-body { padding: 1.15rem; }
.vp-field { margin-bottom: .95rem; }
.vp-field label { display: block; font-size: .82rem; font-weight: 600; color: var(--vp-text); margin-bottom: .38rem; }
.vp-field label small { font-weight: 400; color: var(--vp-muted); }
.vp-field input[type=text],
.vp-field input[type=password] {
  width: 100%; padding: .58rem .82rem; border: 1.5px solid var(--vp-card-border);
  border-radius: 8px; font-size: .87rem; font-family: inherit;
  color: var(--vp-text); background: var(--vp-card);
  transition: border-color .14s, box-shadow .14s; outline: none;
}
.vp-field input:focus { border-color: var(--vp-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.vp-field input:disabled { opacity: .52; cursor: not-allowed; }
.vp-captcha-img img { border-radius: 6px; border: 1px solid var(--vp-card-border); }

.vp-result-card {
  background: var(--vp-card); border: 1.5px solid #6ee7b7;
  border-radius: 14px; box-shadow: var(--vp-shadow); overflow: hidden;
}
[data-bs-theme="dark"] .vp-result-card { border-color: #065f46; }
.vp-result-header {
  background: var(--vp-success); color: #fff; padding: .75rem 1.15rem;
  font-weight: 700; font-size: .9rem; display: flex; align-items: center; gap: .45rem;
}
.vp-result-body { padding: .6rem 1.15rem; }
.vp-result-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .45rem 0; font-size: .84rem;
  border-bottom: 1px solid var(--vp-card-border); color: var(--vp-text);
}
.vp-result-row:last-child { border-bottom: none; }
.vp-result-row > span:first-child { color: var(--vp-muted); font-weight: 500; flex-shrink: 0; margin-right: .5rem; }
.vp-result-row code { background: var(--vp-bg); padding: .15rem .42rem; border-radius: 4px; font-size: .76rem; color: var(--vp-primary); word-break: break-all; }
.vp-result-action { padding: .55rem 1.15rem .95rem; }

.vp-copy-row { display: flex; align-items: center; gap: .38rem; }
.vp-copy-btn {
  background: var(--vp-bg); border: 1.5px solid var(--vp-card-border); border-radius: 6px;
  width: 30px; height: 30px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--vp-muted); font-size: .78rem; transition: background .14s, color .14s, border-color .14s;
}
.vp-copy-btn:hover { background: var(--vp-primary); border-color: var(--vp-primary); color: #fff; }
.vp-link-block { background: var(--vp-bg); border: 1px solid var(--vp-card-border); border-radius: 8px; padding: .65rem .85rem; }
.vp-link-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: .38rem; font-size: .78rem; font-weight: 600; color: var(--vp-muted); }
.vp-link-input { flex: 1; border: 1.5px solid var(--vp-card-border); border-radius: 6px; padding: .38rem .62rem; font-size: .72rem; font-family: monospace; background: var(--vp-card); color: var(--vp-text); outline: none; min-width: 0; }
.vp-link-hint  { font-size: .73rem; color: var(--vp-muted); margin: 0; }
.vp-result-placeholder {
  background: var(--vp-card); border: 2px dashed var(--vp-card-border);
  border-radius: 14px; padding: 2.25rem; text-align: center; color: var(--vp-muted);
}
.vp-result-placeholder .fas { font-size: 2rem; margin-bottom: .75rem; display: block; color: var(--vp-card-border); }

.vp-toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
  background: #0f172a; color: #fff; padding: .6rem 1.2rem; border-radius: 8px;
  font-size: .87rem; font-weight: 500; box-shadow: 0 4px 16px rgba(0,0,0,.3);
  animation: slideUp .2s ease;
}
@keyframes slideUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ── Sneat Demo Fixes ────────────────────────────────────── */
.menu .app-brand.demo {
  height: 64px;
}
.app-brand-logo.demo svg {
  width: 34px;
  height: 24px;
}
.app-brand-text.demo {
  font-size: 1.375rem;
}

/* ── Fixed Navbar Padding Fix ───────────────────────────── */
/* Memberikan jarak agar konten tidak tertutup navbar fixed */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 100px !important;
}
.content-wrapper {
  margin-top: 1.5rem !important;
}
@media (max-width: 1199.98px) {
  .layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
    padding-top: 90px !important;
  }
}

/* ── Footer ──────────────────────────────────────────────── */
.vp-footer-new {
  background: var(--vp-footer-bg);
  color: var(--vp-footer-text);
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: 3rem;
  padding-top: 2rem;
}
.vp-footer-body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2.5rem; padding: .25rem 0 1.75rem; align-items: start;
}
.vp-footer-logo {
  display: flex; align-items: center; gap: .55rem;
  font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: .6rem;
}
.vp-footer-desc { font-size: .82rem; color: var(--vp-footer-text); margin-bottom: .75rem; line-height: 1.65; max-width: 360px; }
.vp-footer-socials { display: flex; gap: .4rem; flex-wrap: wrap; }
.vp-footer-socials a {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.62); font-size: .82rem;
  transition: background .14s, color .14s;
}
.vp-footer-socials a:hover { background: var(--vp-primary); color: #fff; }
.vp-footer-stats-col h6 {
  color: #fff; font-weight: 700; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: .75rem;
}
.vp-footer-stat { display: flex; align-items: center; gap: .6rem; margin-bottom: .58rem; }
.vp-footer-stat .ti { font-size: 1.1rem; color: var(--vp-primary); flex-shrink: 0; }
.vp-footer-stat strong { display: block; font-size: .88rem; color: #fff; font-weight: 700; line-height: 1.1; }
.vp-footer-stat span   { font-size: .7rem; color: var(--vp-footer-text); }
.vp-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.06);
  padding: .8rem 0; text-align: center;
  font-size: .77rem; color: rgba(255,255,255,.32);
}
.vp-footer-bottom strong { color: rgba(255,255,255,.58); }

/* ── Admin Dashboard Icons ──────────────────────────────── */
.stat-icon-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.stat-icon-circle i {
  font-size: 1.6rem;
}

.proto-icon-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
  margin-bottom: 1rem;
}
.proto-icon-circle.ssh { background: rgba(37, 99, 235, 0.1); color: #2563eb; }
.proto-icon-circle.openvpn { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.proto-icon-circle.v2ray { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.proto-icon-circle.shadowsocks { background: rgba(0, 191, 242, 0.1); color: #0061f2; }
.proto-icon-circle.zivpn { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.proto-icon-circle.wireguard { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .vp-service-grid { grid-template-columns: repeat(2,1fr); }
  .vp-stat-cards   { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
  .vp-hero-inline      { flex-direction: column; padding: 1.4rem; }
  .vp-hero-inline-card { min-width: unset; }
  .vp-why-grid         { grid-template-columns: repeat(2,1fr); }
  .vp-list-banner      { margin-top: 0; }
  .vp-create-layout    { grid-template-columns: 1fr; }
  .vp-footer-body      { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 640px) {
  .vp-server-grid   { grid-template-columns: 1fr; }
  .vp-service-grid  { grid-template-columns: 1fr; }
  .vp-why-grid      { grid-template-columns: 1fr; }
  .vp-stat-cards    { grid-template-columns: repeat(2,1fr); gap: .65rem; }
  .vp-stat-card     { padding: .85rem .75rem; }
  .vp-stat-card-value  { font-size: 1rem; }
  .vp-stat-card-label  { font-size: .68rem; }
  .vp-stat-card-icon   { width: 36px; height: 36px; font-size: 1rem; }
  .vp-inline-title  { font-size: 1.35rem; }
  .vp-list-banner-top h4 { font-size: .9rem; }
}