:root{
  --brand:#4f46e5; --brand-d:#4338ca; --ink:#1e293b; --muted:#64748b;
  --line:#e9edf5; --bg:#f7f8fc;
}
*{ -webkit-font-smoothing:antialiased; }
body{ background:var(--bg); }

/* ---------- Sidebar ---------- */
.sidebar{
  background:linear-gradient(185deg,#2a2668 0%,#201d54 55%,#1a1746 100%);
  box-shadow:1px 0 0 rgba(255,255,255,.04);
}
.logo-mark{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#6366f1,#4338ca);
  box-shadow:0 6px 16px -4px rgba(79,70,229,.6);
}
.nav-group{
  padding:.85rem .85rem .35rem;font-size:10px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:#8b8fce;
}
.nav-link{
  display:flex;align-items:center;gap:.7rem;padding:.62rem .85rem;border-radius:.7rem;
  color:#c3c7ee;font-weight:500;transition:.16s;position:relative;
}
.nav-link svg{ color:#9ea3e0;transition:.16s;flex:none; }
.nav-link:hover{ background:rgba(255,255,255,.06);color:#fff; }
.nav-link:hover svg{ color:#c7cbff; }
.nav-active{
  background:linear-gradient(90deg,rgba(99,102,241,.28),rgba(99,102,241,.08));
  color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.nav-active svg{ color:#fff; }
.nav-active::before{
  content:"";position:absolute;left:-3px;top:50%;transform:translateY(-50%);
  width:4px;height:60%;border-radius:0 4px 4px 0;background:#818cf8;
}
.nav-danger:hover{ background:rgba(244,63,94,.14);color:#fecdd3; }
.nav-danger:hover svg{ color:#fda4af; }
.avatar{
  width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-weight:700;color:#fff;background:linear-gradient(135deg,#818cf8,#4f46e5);
}

/* ---------- Topbar ---------- */
.coin-chip{
  display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .8rem;border-radius:.65rem;
  background:#eef1ff;color:#4338ca;font-weight:700;font-size:.85rem;transition:.16s;
}
.coin-chip:hover{ background:#e0e5ff; }

/* ---------- Cards ---------- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:1rem;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.03);
}
.card-pad{ padding:1.35rem 1.5rem; }
.card-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 1.5rem;border-bottom:1px solid var(--line);
}
.card-title{ font-weight:700;color:var(--ink);font-size:.98rem;display:flex;align-items:center;gap:.55rem; }
.card-title svg{ color:var(--brand); }

/* Stat tiles */
.stat{
  border-radius:1rem;padding:1.3rem 1.4rem;color:#fff;position:relative;overflow:hidden;
  box-shadow:0 10px 24px -12px rgba(30,41,59,.5);
}
.stat .stat-ic{ position:absolute;right:-6px;bottom:-10px;opacity:.16; }
.stat .stat-ic svg{ width:96px;height:96px; }
.stat-label{ font-size:.8rem;opacity:.9;font-weight:500; }
.stat-value{ font-size:2.1rem;font-weight:800;margin-top:.35rem;line-height:1; }
.g-indigo{ background:linear-gradient(135deg,#6366f1,#4338ca); }
.g-teal{ background:linear-gradient(135deg,#14b8a6,#0d9488); }
.g-slate{ background:linear-gradient(135deg,#475569,#334155); }
.g-rose{ background:linear-gradient(135deg,#fb7185,#e11d48); }
.g-amber{ background:linear-gradient(135deg,#f59e0b,#d97706); }
.g-emerald{ background:linear-gradient(135deg,#34d399,#059669); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.6rem 1.05rem;border-radius:.65rem;font-weight:600;font-size:.88rem;
  transition:.16s;border:1px solid transparent;cursor:pointer;line-height:1;
}
.btn svg{ width:1rem;height:1rem; }
.btn-primary{ background:var(--brand);color:#fff;box-shadow:0 4px 12px -3px rgba(79,70,229,.5); }
.btn-primary:hover{ background:var(--brand-d); }
.btn-light{ background:#eef1ff;color:#4338ca; }
.btn-light:hover{ background:#e0e5ff; }
.btn-ghost{ background:#fff;color:var(--muted);border-color:var(--line); }
.btn-ghost:hover{ background:#f8fafc;color:var(--ink); }
.btn-danger{ background:#e11d48;color:#fff; }
.btn-danger:hover{ background:#be123c; }
.btn-xs{ padding:.4rem .6rem;font-size:.76rem;border-radius:.5rem; }

/* ---------- Forms ---------- */
.input,select.input{
  width:100%;border:1px solid #dbe0ea;border-radius:.65rem;padding:.62rem .8rem;
  font-size:.9rem;background:#fff;color:var(--ink);transition:.16s;
}
.input:focus{ outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(79,70,229,.13); }
.label{ display:block;font-size:.8rem;font-weight:600;color:#3f4759;margin-bottom:.4rem; }

/* ---------- Badges ---------- */
.badge{ display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:.5rem;font-size:.72rem;font-weight:700; }
.badge-dot{ width:6px;height:6px;border-radius:50%;background:currentColor; }
.b-green{ background:#dcfce7;color:#15803d; }
.b-amber{ background:#fef3c7;color:#b45309; }
.b-rose{ background:#ffe4e6;color:#be123c; }
.b-slate{ background:#eef2f7;color:#475569; }
.b-indigo{ background:#e0e5ff;color:#4338ca; }
.b-sky{ background:#e0f2fe;color:#0369a1; }

/* ---------- Tables ---------- */
table.tbl{ width:100%;border-collapse:separate;border-spacing:0;font-size:.86rem; }
table.tbl th{
  text-align:left;padding:.75rem 1rem;color:#7a869c;font-weight:600;font-size:.74rem;
  letter-spacing:.03em;text-transform:uppercase;background:#fafbfe;border-bottom:1px solid var(--line);
}
table.tbl th:first-child{ border-top-left-radius:.6rem; }
table.tbl th:last-child{ border-top-right-radius:.6rem; }
table.tbl td{ padding:.8rem 1rem;border-bottom:1px solid #f1f4f9;color:#3f4759; }
table.tbl tbody tr{ transition:.12s; }
table.tbl tbody tr:hover{ background:#fafbff; }
.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem; }

/* ---------- Flash ---------- */
.flash{ display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;padding:.8rem 1rem;
  border-radius:.7rem;font-size:.87rem;font-weight:500;border:1px solid; }
.flash-dot{ width:8px;height:8px;border-radius:50%;background:currentColor;flex:none; }
.flash-success{ background:#f0fdf4;border-color:#bbf7d0;color:#15803d; }
.flash-danger{ background:#fff1f2;border-color:#fecdd3;color:#be123c; }
.flash-warning{ background:#fffbeb;border-color:#fde68a;color:#b45309; }
.flash-info{ background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8; }

/* helpers */
.section-title{ font-size:1.5rem;font-weight:800;color:var(--ink);letter-spacing:-.01em; }
.muted{ color:var(--muted); }

/* ---------- VPN detail page (clean) ---------- */
.vd{ max-width:1100px; }
.vd-top{ display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.25rem; }
.vd-eyebrow{ font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8;margin:0 0 .35rem; }
.vd-title{ font-size:1.45rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin:0;line-height:1.25; }
.vd-sub{ margin:.4rem 0 0;font-size:.85rem;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:.4rem; }
.vd-cred{ display:grid;gap:.65rem;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:1.15rem; }
@media (min-width:768px){ .vd-cred{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1100px){ .vd-cred{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
.vd-cred > div{ background:#fff;border:1px solid var(--line);border-radius:.9rem;padding:.7rem .85rem;box-shadow:0 6px 18px -16px rgba(15,23,42,.35); }
.vd-cred span{ display:block;font-size:.65rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#94a3b8;margin-bottom:.25rem; }
.vd-cred b{ font-size:.88rem;font-weight:700;color:var(--ink);word-break:break-all; }
.vd-panel{ background:#fff;border:1px solid var(--line);border-radius:1.15rem;padding:1.1rem 1.15rem 1.25rem;margin-bottom:1.15rem;box-shadow:0 10px 28px -22px rgba(15,23,42,.35); }
.vd-panel-head{ margin-bottom:.9rem; }
.vd-panel-head-row{ display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:.75rem; }
.vd-port-quota{ display:inline-flex;align-items:center;padding:.35rem .75rem;border-radius:999px;background:linear-gradient(135deg,#eef2ff,#e0e7ff);color:#4338ca;font-size:.78rem;font-weight:800;white-space:nowrap; }
.vd-port-hint{ margin:.75rem 0 0;font-size:.8rem;color:#64748b; }
.vd-port-hint-full{ color:#b45309; }
.vd-td-actions{ display:flex;flex-wrap:wrap;gap:.35rem;align-items:center; }
.vd-act-form{ margin:0;display:inline; }
.vd-act-btn{ appearance:none;border:1px solid #e2e8f0;background:#fff;color:#334155;font-size:.72rem;font-weight:700;padding:.3rem .55rem;border-radius:.45rem;cursor:pointer;transition:.12s; }
.vd-act-btn:hover{ border-color:#cbd5e1;background:#f8fafc; }
.vd-act-del{ color:#be123c;border-color:#fecdd3; }
.vd-act-del:hover{ background:#fff1f2; }
.vd-modal-note{ margin:-.5rem 0 1rem;font-size:.78rem;color:#64748b;line-height:1.45; }
.vd-fn-btn:disabled{ opacity:.55;cursor:not-allowed;transform:none !important; }
.vd-panel-head h2{ margin:0;font-size:1.05rem;font-weight:800;color:var(--ink); }
.vd-panel-head p{ margin:.25rem 0 0;font-size:.8rem;color:var(--muted); }
.vd-portcards{ display:grid;grid-template-columns:1fr;gap:.9rem; }
@media (min-width:700px){ .vd-portcards{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .vd-portcards{ grid-template-columns:1fr 1fr 1fr; } }
.vd-portcard{ position:relative;padding:1rem;border:1px solid #e8eef5;border-radius:1rem;background:linear-gradient(180deg,#ffffff,#f8fafc);box-shadow:0 10px 24px -18px rgba(15,23,42,.28);overflow:hidden; }
.vd-portcard::before{ content:"";position:absolute;inset:auto -20% -35% auto;width:8rem;height:8rem;border-radius:999px;background:radial-gradient(circle,#c7d2fe 0%,rgba(199,210,254,0) 70%);opacity:.65;pointer-events:none; }
.vd-portcard-top{ display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.65rem; }
.vd-portcard-badge{ display:inline-flex;align-items:center;justify-content:center;padding:.25rem .6rem;border-radius:999px;background:linear-gradient(135deg,#4f46e5,#4338ca);color:#fff;font-size:.72rem;font-weight:800;box-shadow:0 8px 18px -10px rgba(79,70,229,.6); }
.vd-portcard-local{ font-size:.72rem;font-weight:700;color:#64748b;background:#eef2ff;padding:.22rem .5rem;border-radius:999px; }
.vd-portcard h3{ margin:0 0 .55rem;font-size:1rem;font-weight:800;color:var(--ink); }
.vd-portcard-public{ display:block;margin:0 0 .65rem;padding:.55rem .7rem;border-radius:.7rem;background:#0f172a;color:#a7f3d0;font-size:.78rem;word-break:break-all; }
.vd-portcard p{ margin:0;font-size:.8rem;color:#475569;line-height:1.45; }
.vd-portcards-foot{ margin:.9rem 0 0;font-size:.76rem;color:#64748b; }
.vd-portcards-empty{ padding:1rem;border:1px dashed #cbd5e1;border-radius:1rem;background:#f8fafc;color:#64748b;font-size:.84rem; }
.vd-table-wrap{ overflow-x:auto;border:1px solid #e8eef5;border-radius:.85rem; }
.vd-table{ width:100%;border-collapse:collapse;font-size:.82rem;min-width:640px; }
.vd-table th{ text-align:left;padding:.65rem .75rem;background:#f8fafc;color:#64748b;font-size:.68rem;letter-spacing:.04em;font-weight:800;border-bottom:1px solid #e8eef5;white-space:nowrap; }
.vd-table td{ padding:.7rem .75rem;border-bottom:1px solid #f1f5f9;vertical-align:top;color:var(--ink); }
.vd-table tr:last-child td{ border-bottom:0; }
.vd-table code{ font-size:.8rem;background:#f1f5f9;padding:.12rem .4rem;border-radius:.35rem; }
.vd-td-hint{ display:block;margin-top:.25rem;font-size:.72rem;color:#94a3b8;line-height:1.35;max-width:28rem; }
.vd-pill{ display:inline-block;font-size:.68rem;font-weight:700;padding:.15rem .45rem;border-radius:.4rem;background:#f1f5f9;color:#64748b; }
.vd-empty td{ text-align:center;color:#94a3b8;padding:1.5rem .75rem; }
.vd-table-foot{ margin:.55rem 0 0;font-size:.72rem;color:#94a3b8; }
.vd-fn{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem; }
@media (min-width:560px){ .vd-fn{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:900px){ .vd-fn{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.vd-fn-item{ margin:0; }
.vd-fn-btn{ appearance:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.65rem;width:100%;min-height:7.2rem;padding:1rem .75rem;border:1px solid #e8eef5;border-radius:1rem;background:linear-gradient(180deg,#fff,#f8fafc);cursor:pointer;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s,border-color .15s;box-shadow:0 8px 20px -18px rgba(15,23,42,.4); }
.vd-fn-btn:hover{ transform:translateY(-2px);border-color:#cbd5e1;box-shadow:0 14px 28px -18px rgba(15,23,42,.35); }
.vd-fn-label{ font-size:.78rem;font-weight:750;color:var(--ink);text-align:center;line-height:1.25; }
.vd-fn-soon{ font-size:.62rem;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;margin-top:-.25rem; }
/* JARVIS 3D icon tiles — original, not competitor clones */
.j3d{ position:relative;width:3.35rem;height:3.35rem;border-radius:1rem;display:grid;place-items:center;color:#fff;transform:perspective(420px) rotateX(10deg) rotateY(-8deg);transform-style:preserve-3d;box-shadow:
  inset 0 1px 0 rgba(255,255,255,.45),
  inset 0 -10px 18px rgba(0,0,0,.18),
  0 10px 0 rgba(0,0,0,.12),
  0 16px 22px -8px rgba(15,23,42,.35); }
.j3d::before{ content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(145deg,rgba(255,255,255,.38),transparent 42%,rgba(0,0,0,.12));pointer-events:none; }
.j3d::after{ content:"";position:absolute;left:12%;right:12%;top:8%;height:28%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.55),transparent);opacity:.7;pointer-events:none; }
.j3d svg{ width:1.55rem;height:1.55rem;position:relative;z-index:1;filter:drop-shadow(0 2px 1px rgba(0,0,0,.25)); }
.j3d-restart{ background:linear-gradient(160deg,#34d399,#059669 55%,#047857); }
.j3d-key{ background:linear-gradient(160deg,#fbbf24,#ea580c 55%,#c2410c); }
.j3d-port{ background:linear-gradient(160deg,#38bdf8,#0284c7 55%,#0369a1); }
.j3d-renew{ background:linear-gradient(160deg,#2dd4bf,#0d9488 55%,#0f766e); }
.j3d-up{ background:linear-gradient(160deg,#818cf8,#4f46e5 55%,#3730a3); }
.j3d-swap{ background:linear-gradient(160deg,#fb923c,#f97316 55%,#c2410c); }
.j3d-ovpn{ background:linear-gradient(160deg,#94a3b8,#475569 55%,#334155); }
.j3d-del{ background:linear-gradient(160deg,#fb7185,#e11d48 55%,#be123c); }
.j3d-book{ background:linear-gradient(160deg,#67e8f9,#0891b2 55%,#0e7490); }
.j3d-tool{ background:linear-gradient(160deg,#a5b4fc,#6366f1 55%,#4338ca); }
.vd-guide{ display:grid;gap:.75rem;grid-template-columns:1fr; }
@media (min-width:700px){ .vd-guide{ grid-template-columns:1fr 1fr; } }
.vd-guide-card{ display:flex;align-items:flex-start;gap:.9rem;padding:1rem;border:1px solid #e8eef5;border-radius:1rem;text-decoration:none;color:inherit;background:linear-gradient(180deg,#fff,#f8fafc);transition:.15s; }
.vd-guide-card:hover{ border-color:#cbd5e1;transform:translateY(-1px); }
.vd-guide-card strong{ display:block;font-size:.9rem;font-weight:800;color:var(--ink); }
.vd-guide-card span{ display:block;margin-top:.2rem;font-size:.78rem;color:var(--muted);line-height:1.4; }
.vd-tabs{ display:flex;flex-wrap:wrap;gap:.4rem;padding:.15rem 0 .75rem;border-bottom:1px solid var(--line);margin-bottom:.85rem; }
.vd-tab{ appearance:none;border:1px solid transparent;background:transparent;cursor:pointer;padding:.45rem .85rem;border-radius:999px;font-size:.78rem;font-weight:700;color:#64748b;transition:.15s; }
.vd-tab i{ font-style:normal;font-size:.62rem;margin-left:.2rem;opacity:.85;background:rgba(16,185,129,.15);color:#059669;padding:.05rem .3rem;border-radius:999px; }
.vd-tab:hover{ background:#f8fafc;color:var(--ink);border-color:var(--line); }
.vd-tab.is-on{ background:#0f766e;color:#fff;border-color:#0f766e;box-shadow:0 6px 14px -6px rgba(15,118,110,.55); }
.vd-tab.is-on i{ background:rgba(255,255,255,.2);color:#fff; }
.vd-body{ padding:0; }
.vd-pane[hidden]{ display:none !important; }
.vd-script-head{ margin-bottom:.75rem; }
.vd-script-head h3{ margin:0;font-size:.95rem;font-weight:800;color:var(--ink); }
.vd-script-head p{ margin:.2rem 0 0;font-size:.78rem;color:var(--muted); }
.vd-code{ margin:0 0 .85rem;padding:1rem 1.05rem;border-radius:.95rem;background:#0b1220;color:#a7f3d0;border:1px solid #1e293b;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.72rem;line-height:1.55;white-space:pre-wrap;overflow:auto;max-height:22rem; }
.vd-copy{ display:flex;align-items:center;justify-content:center;width:100%;padding:.85rem 1rem;border:0;border-radius:.9rem;cursor:pointer;font-size:.92rem;font-weight:800;color:#fff;background:linear-gradient(135deg,#14b8a6,#0d9488);box-shadow:0 10px 20px -10px rgba(13,148,136,.7);transition:.15s; }
.vd-copy:hover{ filter:brightness(1.05); }
.vd-copy.ok{ background:linear-gradient(135deg,#10b981,#059669); }
.vd-log{ margin-top:1rem;background:#f8fafc;border:1px solid #e8eef5;border-radius:.9rem;padding:.75rem 1rem; }
.vd-log summary{ cursor:pointer;font-size:.78rem;font-weight:700;color:var(--muted);list-style:none; }
.vd-log summary::-webkit-details-marker{ display:none; }
.vd-log[open] summary{ margin-bottom:.55rem;color:var(--ink); }
.vd-log pre{ margin:0;max-height:9rem;overflow:auto;padding:.75rem;border-radius:.75rem;background:#0f172a;color:#86efac;font-size:.68rem;line-height:1.45;white-space:pre-wrap; }
.vd-modal{ border:0;padding:0;background:transparent;max-width:calc(100vw - 2rem); }
.vd-modal::backdrop{ background:rgba(15,23,42,.45);backdrop-filter:blur(2px); }
.vd-modal-card{ width:min(420px,92vw);background:#fff;border-radius:1.1rem;padding:1.25rem 1.3rem;border:1px solid var(--line);box-shadow:0 24px 48px -24px rgba(15,23,42,.5); }
.vd-modal-card h3{ margin:0 0 .35rem;font-size:1.05rem;font-weight:800; }
.vd-modal-card > p{ margin:0 0 1rem;font-size:.85rem;color:var(--muted);line-height:1.45; }
.vd-field{ display:flex;flex-direction:column;gap:.35rem;font-size:.78rem;font-weight:700;color:#64748b;margin-bottom:1rem; }
.vd-field input,.vd-field select{ appearance:none;border:1px solid #e2e8f0;border-radius:.75rem;padding:.7rem .85rem;font-size:.9rem;font-weight:600;color:var(--ink);background:#fff; }
.vd-modal-actions{ display:flex;justify-content:flex-end;gap:.5rem; }