:root {
  color-scheme:dark;
  --bg:#07101e;
  --sidebar:#091321;
  --panel:#101d30;
  --input:#0b1627;
  --line:#22344c;
  --line-soft:rgba(112,153,199,.13);
  --ink:#e8f0fa;
  --muted:#93a8bf;
  --subtle:#687e99;
  --cyan:#43caff;
  --purple:#a094f8;
  --green:#64dbba;
  --danger:#ff8c9b;
  --amber:#f3c979;
  --sans:'Segoe UI Variable','Segoe UI','Microsoft YaHei UI','Microsoft YaHei',sans-serif;
  --mono:'Cascadia Code',Consolas,'SFMono-Regular',monospace;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:90px;
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:14px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea {
  font:inherit;
}
a {
  color:inherit;
  text-decoration:none;
}
button,select,summary {
  cursor:pointer;
}
button {
  color:inherit;
}
button:disabled {
  cursor:not-allowed;
}
h1,h2,h3,p {
  margin-top:0;
}
h1,h2,h3 {
  font-weight:600;
  line-height:1.35;
  letter-spacing:-.025em;
}
h1 {
  margin-bottom:8px;
  font-size:29px;
}
h2 {
  margin-bottom:8px;
  font-size:19px;
}
h3 {
  margin-bottom:7px;
  font-size:16px;
}
p {
  margin-bottom:12px;
}
::selection {
  background:#2278a4;
  color:#fff;
}
:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:4px;
}
.icon {
  flex:0 0 auto;
  width:20px;
  height:20px;
}
.mono {
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
}
.muted {
  color:var(--muted);
}
.small {
  font-size:12px;
}
.break {
  overflow-wrap:anywhere;
}
.danger-text {
  color:var(--danger)!important;
}
.kicker {
  display:none;
}
.section-label {
  display:block;
  margin-bottom:8px;
  color:var(--cyan);
  font-size:12px;
  font-weight:600;
}
.skip-link {
  position:fixed;
  top:-60px;
  left:16px;
  z-index:100;
  padding:10px 18px;
  background:var(--cyan);
  color:#031527;
}
.skip-link:focus {
  top:8px;
}
.sidebar {
  position:fixed;
  z-index:30;
  inset:0 auto 0 0;
  width:228px;
  display:flex;
  flex-direction:column;
  padding:31px 18px 22px;
  background:var(--sidebar);
  border-right:1px solid var(--line);
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:11px;
  width:fit-content;
}
.sidebar .brand {
  padding:0 8px;
}
.brand-mark {
  display:grid;
  width:37px;
  height:40px;
  place-items:center;
  border:1px solid #2e6a8c;
  border-radius:10px;
  color:var(--cyan);
  background:linear-gradient(145deg,#153248,#101c31);
}
.brand-mark .icon {
  width:23px;
  height:23px;
}
.brand-word {
  display:grid;
  font-size:20px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:.02em;
}
.main-nav {
  margin-top:37px;
  display:grid;
  gap:7px;
}
.nav-section-label {
  padding:0 14px;
  margin:24px 0 5px;
  color:var(--subtle);
  font-size:11px;
}
.nav-section-label:first-child {
  margin-top:0;
}
.nav-link {
  display:flex;
  align-items:center;
  gap:13px;
  position:relative;
  padding:12px 14px;
  min-height:46px;
  color:#9fb1c7;
  border:1px solid transparent;
  border-radius:7px;
  font-size:13px;
}
.nav-link:hover {
  background:#102139;
  color:var(--ink);
}
.nav-link.is-active {
  background:#122c44;
  color:#72d7ff;
  border-color:#244862;
}
.nav-link.is-active:before {
  position:absolute;
  content:'';
  inset:11px auto 11px -19px;
  width:3px;
  background:var(--cyan);
  border-radius:0 2px 2px 0;
}
.sidebar-bottom {
  margin-top:auto;
  padding-top:36px;
}
.workspace-note {
  display:flex;
  gap:10px;
  padding:15px 10px 22px;
  align-items:center;
  border-bottom:1px solid var(--line);
  color:var(--subtle);
}
.workspace-note>.icon {
  color:var(--purple);
}
.workspace-note strong {
  display:block;
  color:#b0bfd2;
  font-size:11px;
  font-weight:500;
}
.workspace-note span {
  display:block;
  margin-top:3px;
  font-size:10px;
}
.logout-link {
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:12px;
  padding:11px 13px;
  color:var(--muted);
  font-size:12px;
}
.logout-link:hover {
  color:var(--ink);
}
.workspace {
  margin-left:228px;
  min-width:0;
}
.topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  height:76px;
  padding:0 38px;
  border-bottom:1px solid var(--line);
  background:rgba(9,19,33,.8);
}
.breadcrumb {
  display:flex;
  align-items:center;
  gap:14px;
  font-size:12px;
  color:var(--subtle);
}
.breadcrumb strong {
  color:#c5d5e7;
  font-weight:500;
}
.breadcrumb-divider {
  color:#39506c;
}
.account {
  display:flex;
  gap:13px;
  align-items:center;
  min-width:0;
}
.account-email {
  color:#a6b7cd;
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:250px;
}
.role-tag {
  color:var(--purple);
  background:rgba(160,148,248,.08);
  border:1px solid rgba(160,148,248,.18);
  border-radius:4px;
  padding:2px 7px;
  font-size:10px;
  white-space:nowrap;
}
.account-avatar {
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  background:#26304e;
  border:1px solid #414966;
  border-radius:50%;
  color:#c5bdff;
  font-size:12px;
  font-weight:600;
}
.nav-toggle {
  display:none;
  border:0;
  background:transparent;
  padding:8px;
}
.page {
  max-width:1580px;
  margin:0 auto;
  padding:35px 38px 36px;
}
.page-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px;
}
.page-head h1 {
  margin-bottom:6px;
}
.page-desc {
  color:var(--muted);
  font-size:13px;
  margin-bottom:0;
}
.page-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.footer {
  display:flex;
  justify-content:space-between;
  gap:14px;
  max-width:1580px;
  margin:0 auto;
  padding:0 38px 24px;
  color:var(--subtle);
  font-size:10px;
}
.footer>span:first-child {
  letter-spacing:.12em;
}
.btn {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  min-height:39px;
  padding:8px 14px;
  border:1px solid #304760;
  border-radius:6px;
  background:#14263c;
  color:#d9e8f6;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  transition:border-color .15s,background .15s;
}
.btn:hover {
  background:#1b334d;
  border-color:#466884;
}
.btn .icon {
  width:16px;
  height:16px;
}
.btn-primary {
  color:#052238;
  background:#50ccfa;
  border-color:#50ccfa;
}
.btn-primary:hover {
  color:#031728;
  background:#84dfff;
  border-color:#84dfff;
}
.btn-ghost {
  background:transparent;
  border-color:transparent;
  color:#9eb4cd;
}
.btn-ghost:hover {
  background:#192b42;
  border-color:transparent;
  color:var(--ink);
}
.btn-danger {
  color:#ffc3cc;
  background:#3a2335;
  border-color:#5c3143;
}
.btn-danger:hover {
  background:#4a283a;
  border-color:#945060;
}
.btn-block {
  width:100%;
}
.btn-small {
  min-height:31px;
  padding:5px 9px;
  font-size:11px;
}
.btn:disabled {
  opacity:.42;
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--cyan);
  font-weight:500;
  font-size:12px;
}
.text-link:hover {
  color:#9ae4ff;
}
.text-link .icon {
  width:16px;
  height:16px;
}
.inline-form {
  margin:0;
  display:inline-flex;
}
.stack-form {
  display:grid;
  gap:17px;
}
.field {
  display:grid;
  gap:8px;
  min-width:0;
  font-size:12px;
}
.field>span {
  color:#c0cee0;
  font-weight:500;
}
input,select,textarea {
  min-width:0;
  width:100%;
  border:1px solid #2d415c;
  border-radius:6px;
  padding:10px 12px;
  color:#e5edf9;
  background:var(--input);
  font-size:13px;
  outline:none;
  transition:border-color .15s;
}
input,select {
  height:42px;
}
input::placeholder {
  color:#6c829e;
}
input:focus,select:focus,textarea:focus {
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(67,202,255,.07);
}
input:user-invalid {
  border-color:var(--danger);
}
.form-hint {
  color:var(--muted);
  font-size:11px;
  line-height:1.7;
  margin:0;
}
.flash {
  display:flex;
  align-items:center;
  padding:13px 17px;
  margin-bottom:20px;
  border:1px solid #2a6156;
  border-radius:7px;
  background:#0d2b28;
  color:#9de4d3;
  font-size:13px;
  overflow-wrap:anywhere;
}
.flash-err {
  border-color:#693b50;
  color:#ffbdc8;
  background:#2d1c2c;
}
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:16px;
}
.section-head h2,.section-head h3 {
  margin:0;
}
.section-head p {
  margin:5px 0 0;
  color:var(--muted);
  font-size:12px;
}
.section-head>.icon {
  color:var(--subtle);
}
.count-badge {
  display:inline-grid;
  place-items:center;
  min-width:23px;
  height:21px;
  margin-left:6px;
  padding:0 6px;
  border:1px solid #324960;
  border-radius:4px;
  font-size:11px;
  color:#a9c1d8;
  vertical-align:2px;
}
.network-overview {
  display:grid;
  grid-template-columns:.85fr 1.55fr;
  gap:20px;
  min-height:248px;
  overflow:hidden;
  margin-bottom:20px;
  border:1px solid #254661;
  border-radius:10px;
  background:radial-gradient(ellipse at 76% 60%,rgba(31,96,153,.13),transparent 65%),#0c1c30;
}
.network-copy {
  padding:30px;
}
.network-copy h2 {
  margin:10px 0 13px;
  font-size:29px;
  line-height:1.4;
}
.network-copy p {
  max-width:31em;
  color:#9ab1ca;
  font-size:12px;
  margin-bottom:16px;
}
.network-visual {
  position:relative;
  min-width:0;
  height:300px;
  isolation:isolate;
  background-image:radial-gradient(#27435e 1px,transparent 1px);
  background-size:23px 23px;
}
.network-visual:before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(ellipse at center,rgba(35,120,180,.14),transparent 60%);
}
.network-wires {
  position:absolute;
  width:100%;
  height:100%;
  inset:0;
  overflow:visible;
}
.network-wires path {
  stroke:url(#wire-gradient);
  stroke-width:1;
  fill:none;
}
.network-wires .wire-secondary {
  opacity:.25;
}
.network-wires .wire-main {
  stroke-width:1.4;
}
.network-wires circle {
  fill:#4ba5d5;
}
.visual-node {
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  width:124px;
  display:flex;
  align-items:center;
  flex-direction:column;
  text-align:center;
  color:#c3d5e9;
}
.visual-node>.icon {
  width:27px;
  height:27px;
  color:#87c9ec;
  margin-bottom:11px;
}
.visual-node strong {
  font-size:12px;
  font-weight:600;
}
.visual-node span {
  display:block;
  color:#7897b7;
  font-size:10px;
  margin-top:4px;
}
.device-node {
  left:15%;
  background:#10253a;
  border:1px solid #264b66;
  padding:16px 7px;
  border-radius:8px;
}
.public-node {
  left:85%;
  background:#1a2240;
  border:1px solid #3a4264;
  padding:16px 7px;
  border-radius:8px;
}
.public-node>.icon {
  color:#b1a5ef;
}
.gateway-node {
  left:50%;
  width:160px;
  padding-top:70px;
  z-index:1;
}
.gateway-node strong {
  margin-top:9px;
  font-size:13px;
  color:#d5f1ff;
}
.gateway-node span {
  color:#74b7d9;
}
.gateway-symbol {
  position:absolute;
  width:70px;
  height:70px;
  top:0;
  left:45px;
  display:grid;
  place-items:center;
  border:1px solid #48a3d6;
  border-radius:17px;
  background:linear-gradient(150deg,#19486b,#0c233d);
  box-shadow:0 0 42px rgba(67,202,255,.11),inset 0 1px 0 rgba(255,255,255,.1);
  transform:rotate(-8deg);
}
.gateway-symbol>.icon {
  width:34px;
  height:34px;
  color:#83d9ff;
  transform:rotate(8deg);
}
.gateway-rings {
  position:absolute;
  top:-20px;
  left:25px;
  width:110px;
  height:110px;
  border:1px solid rgba(67,202,255,.14);
  border-radius:50%;
  box-shadow:0 0 0 18px rgba(67,202,255,.025),0 0 0 19px rgba(67,202,255,.045);
}
.network-caption {
  position:absolute;
  inset:auto 24px 15px;
  display:flex;
  gap:7px;
  align-items:center;
  color:#6e8aa7;
  font-size:10px;
}
.legend-dot {
  width:5px;
  height:5px;
  background:#4b9cc7;
  border-radius:50%;
}
.protocol-tag {
  margin-left:auto;
  padding:1px 6px;
  border:1px solid #263b53;
  border-radius:3px;
  font:10px var(--mono);
}
.network-visual.is-compact {
  height:auto;
  min-height:248px;
  margin-right:18px;
}
.stats-row {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-bottom:26px;
}
.stat-card {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
  min-height:112px;
  padding:19px 23px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel);
}
.stat-label {
  color:#a9bdd3;
  font-size:12px;
}
.stat-value {
  display:block;
  font-size:27px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  line-height:1.2;
  letter-spacing:-.02em;
}
.stat-sub {
  color:var(--subtle);
  font-size:11px;
}
.stat-accent .stat-value {
  color:#77daff;
}
.stat-accent:after {
  content:'';
  position:absolute;
  width:6px;
  height:6px;
  right:23px;
  top:25px;
  border-radius:50%;
  background:#51c6f6;
}
.stats-row-admin {
  grid-template-columns:repeat(5,minmax(0,1fr));
}
.stats-row-admin .stat-card {
  padding:20px;
}
.content-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:23px;
  align-items:start;
}
.main-column,.side-column {
  min-width:0;
}
.side-column {
  display:grid;
  gap:20px;
}
.subscription-panel {
  margin-bottom:27px;
  padding:22px 24px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel);
}
.subscription-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.subscription-title .section-label {
  color:var(--muted);
  font-size:11px;
  margin-bottom:3px;
}
.subscription-title h2 {
  margin-bottom:0;
  font-size:18px;
}
.sub-limits {
  display:grid;
  grid-template-columns:.8fr .9fr 1fr;
  gap:15px;
  margin:22px 0;
}
.sub-limits>div+div {
  padding-left:20px;
  border-left:1px solid var(--line);
}
.mini-label {
  display:block;
  font-size:11px;
  color:#8ca3bd;
  margin-bottom:7px;
}
.sub-limits strong {
  font-size:18px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
.sub-limits strong small {
  color:var(--muted);
  font-size:13px;
}
.sub-limits .sub-expiry {
  font-size:15px;
}
.sub-quota {
  padding-top:16px;
  border-top:1px solid var(--line-soft);
}
.quota-top {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:9px;
  color:#a9bdd3;
  font-size:11px;
}
.quota-bonus {
  color:var(--purple);
  text-align:right;
}
.quota-bar {
  height:5px;
  border-radius:3px;
  overflow:hidden;
  background:#24344c;
}
.quota-fill {
  display:block;
  height:100%;
  min-width:0;
  border-radius:3px;
  background:linear-gradient(90deg,#2286bf,#55cefc);
}
.quota-fill.is-warning {
  background:var(--amber);
}
.quota-fill.is-danger {
  background:var(--danger);
}
.quota-caption {
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
  color:var(--muted);
  font-size:11px;
  font-variant-numeric:tabular-nums;
}
.subscription-panel.is-empty {
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:14px;
  align-items:start;
}
.subscription-panel.is-empty h2 {
  font-size:17px;
}
.subscription-panel.is-empty p {
  font-size:12px;
  margin:0;
}
.subscription-panel.is-empty>.btn {
  grid-column:2;
  justify-self:start;
}
.side-panel {
  padding:23px;
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:8px;
}
.side-panel h2 {
  font-size:17px;
}
.side-panel .stack-form {
  gap:14px;
}
.side-panel-note {
  margin-top:17px;
  padding-top:14px;
  border-top:1px solid var(--line-soft);
  color:var(--subtle);
  font-size:11px;
  line-height:1.75;
}
.tunnel-list {
  display:grid;
  gap:14px;
}
.tunnel-card {
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel);
  overflow:hidden;
}
.tunnels-panel > .section-head {
  border-bottom:1px solid var(--line);
}
.tunnels-panel .tunnel-list {
  gap:0;
}
.tunnels-panel .tunnel-card,.tunnels-panel .empty-state {
  border:0;
  border-radius:0;
  background:transparent;
}
.tunnels-panel .tunnel-card + .tunnel-card {
  border-top:1px solid var(--line);
}
.tunnel-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:19px 22px;
}
.tunnel-identity {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.tunnel-protocol {
  display:grid;
  place-items:center;
  width:39px;
  height:39px;
  border:1px solid #2b4c68;
  border-radius:8px;
  color:#76c8ef;
  background:#153149;
  font:10px var(--mono);
}
.tunnel-head h3 {
  font:600 14px var(--mono);
  margin-bottom:5px;
}
.tunnel-name {
  color:var(--subtle);
  font-size:10px;
  overflow-wrap:anywhere;
}
.route-map {
  display:grid;
  grid-template-columns:minmax(0,1fr) 55px minmax(0,1fr);
  gap:14px;
  margin:0 22px 18px;
  align-items:center;
  padding:14px 17px;
  background:#0c1829;
  border:1px solid #1c3047;
  border-radius:6px;
}
.route-node {
  min-width:0;
}
.route-node .mini-label {
  margin-bottom:3px;
  font-size:10px;
}
.route-node strong {
  display:block;
  font-size:12px;
  font-weight:500;
  overflow-wrap:anywhere;
}
.route-line {
  height:23px;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#3e799d;
}
.route-line .icon {
  width:30px;
}
.tunnel-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 17px 12px 22px;
  border-top:1px solid var(--line-soft);
}
.tunnel-meta {
  display:grid;
  gap:3px;
  font-size:10px;
  color:var(--subtle);
}
.tunnel-meta strong {
  color:#afc2d8;
  font-weight:500;
}
.tunnel-actions {
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap;
}
.status {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  white-space:nowrap;
}
.status i {
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor;
}
.status-active,.status-paid,.status-unused {
  color:var(--green);
}
.status-suspended,.status-cancelled,.status-deleted,.status-disabled,.status-used {
  color:var(--muted);
}
.status-quota_exceeded,.status-expired,.status-refunded {
  color:var(--danger);
}
.status-pending {
  color:var(--amber);
}
.empty-state {
  display:flex;
  align-items:center;
  flex-direction:column;
  padding:43px 25px;
  border:1px dashed #2b415b;
  border-radius:8px;
  background:#0b1829;
  text-align:center;
}
.empty-icon {
  display:grid;
  place-items:center;
  width:43px;
  height:43px;
  border:1px solid #2c4662;
  border-radius:10px;
  color:#6fb8e2;
  background:#10273e;
}
.empty-state .empty-icon {
  margin-bottom:16px;
}
.empty-state p {
  color:var(--muted);
  font-size:12px;
  max-width:33em;
}
.token-copy {
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin-bottom:14px;
}
.token-copy h3 {
  margin:0;
  font-size:13px;
}
.token-copy p {
  margin:3px 0 0;
  font-size:11px;
}
.token-icon {
  color:var(--cyan);
  flex-shrink:0;
}
.token-value-wrap {
  display:grid;
  gap:8px;
}
.token-actions {
  display:flex;
  align-items:center;
  gap:4px;
}
.token-actions .inline-form {
  margin-left:auto;
}
.token-value {
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
  white-space:normal;
  padding:11px 12px;
  background:#0b192a;
  border:1px solid #233a53;
  border-radius:5px;
  color:#90accb;
  font:12px/1.6 var(--mono);
}
.balance-panel,.token-panel {
  padding:22px;
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:8px;
}
.balance-head h2 {
  font-size:12px;
  font-weight:500;
  margin-bottom:8px;
  color:var(--muted);
}
.balance-number {
  display:block;
  margin-top:4px;
  color:var(--ink);
  font-family:var(--sans);
  font-size:25px;
  font-weight:600;
}
.balance-head p {
  color:var(--subtle);
  font-size:11px;
}
.redeem-form {
  display:flex;
  gap:7px;
  margin-top:17px;
}
.redeem-form input {
  flex:1;
  height:39px;
  font-size:11px;
  padding:8px;
}
.redeem-form .btn {
  flex:0 0 auto;
  padding:8px 12px;
}
.balance-history {
  margin-top:17px;
  padding-top:13px;
  border-top:1px solid var(--line-soft);
}
.balance-history summary {
  color:#99b7d7;
  font-size:11px;
}
.balance-history .table-wrap {
  margin-top:10px;
}
.balance-history table {
  min-width:350px;
}
.balance-history td,.balance-history th {
  padding:9px 8px;
}
.amount-positive {
  color:var(--green);
}
.amount-negative {
  color:#c4b4ff;
}
.plans-grid {
  margin-bottom:30px;
}
.plan-card {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  max-width:1150px;
  margin:0 auto;
  border:1px solid #2c4663;
  border-radius:10px;
  overflow:hidden;
  background:var(--panel);
}
.plan-summary {
  position:relative;
  padding:34px;
  background:radial-gradient(ellipse at 20% 10%,#153450,transparent 75%),#0d1d30;
  border-right:1px solid #284058;
}
.plan-symbol {
  display:grid;
  place-items:center;
  width:45px;
  height:45px;
  background:#15364f;
  border:1px solid #2c5e7d;
  color:#78d3fb;
  border-radius:11px;
  margin-bottom:22px;
}
.plan-symbol .icon {
  width:25px;
  height:25px;
}
.plan-summary h2 {
  font-size:25px;
  margin-bottom:10px;
}
.plan-summary>p {
  font-size:12px;
}
.price {
  display:flex;
  gap:9px;
  align-items:baseline;
  margin:24px 0 23px;
}
.price strong {
  font-size:40px;
  line-height:1;
  font-weight:600;
  letter-spacing:-.04em;
}
.price span {
  color:var(--muted);
  font-size:12px;
}
.plan-features {
  padding:0;
  margin:0;
  list-style:none;
}
.plan-features li {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 0;
  border-bottom:1px solid var(--line-soft);
  font-size:12px;
}
.plan-features span {
  color:var(--muted);
}
.plan-features strong {
  font-weight:500;
  color:#c3d8ec;
}
.billing-rules {
  margin-top:26px;
  color:#7e99b5;
  font-size:11px;
  line-height:1.8;
}
.billing-rules>strong {
  color:#a5bed7;
  font-size:12px;
  font-weight:500;
}
.billing-rules p {
  margin:8px 0 0;
}
.plan-buy {
  padding:33px;
}
.plan-buy .section-head {
  margin-bottom:20px;
}
.plan-buy h3 {
  font-size:18px;
}
.addon-grid {
  display:grid;
  gap:0;
  margin-bottom:23px;
}
.addon-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:15px 0;
  border-bottom:1px solid var(--line-soft);
}
.addon-row strong {
  display:block;
  color:#c5d5e9;
  font-size:13px;
  font-weight:500;
}
.addon-row small {
  display:block;
  color:var(--subtle);
  font-size:11px;
  margin-top:3px;
}
.addon-control input {
  width:85px;
  height:38px;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.months-field {
  margin-bottom:22px;
}
.quote-lines {
  display:grid;
  gap:9px;
  padding:15px 0;
  border-top:1px solid var(--line);
}
.quote-lines>div {
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:12px;
  color:var(--muted);
}
.quote-lines strong {
  color:#c6d8eb;
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
.plan-order-total {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px 18px;
  margin:0 -2px 10px;
  background:#112e43;
  border:1px solid #28506c;
  border-radius:7px;
}
.plan-order-total>span {
  color:#b1c8df;
  font-size:13px;
}
.plan-order-total strong {
  color:#7fddff;
  font-size:25px;
  line-height:1.1;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.quote-status {
  min-height:18px;
  font-size:11px;
  margin:10px 0 15px;
  color:var(--subtle);
}
.quote-status.is-error {
  color:var(--danger);
}
.table-panel {
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel);
  overflow:hidden;
  margin-bottom:25px;
}
.table-panel>.section-head {
  padding:20px 23px 16px;
  margin:0;
}
.table-panel>.section-head h2 {
  font-size:16px;
}
.table-wrap {
  width:100%;
  overflow-x:auto;
  scrollbar-color:#304660 #0e1b2e;
  scrollbar-width:thin;
}
table {
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
th {
  padding:12px 20px;
  text-align:left;
  font-size:11px;
  font-weight:500;
  color:#829bb7;
  white-space:nowrap;
  background:#0d1a2c;
  border-block:1px solid var(--line);
}
td {
  padding:17px 20px;
  border-bottom:1px solid var(--line-soft);
  vertical-align:middle;
}
tbody tr:last-child td {
  border-bottom:0;
}
tbody tr:hover {
  background:#14253a;
}
.table-empty {
  padding:36px!important;
  text-align:center;
  color:var(--subtle);
}
.row-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
}
.table-panel td strong {
  font-weight:500;
}
.subnav {
  display:flex;
  gap:24px;
  margin-bottom:24px;
  border-bottom:1px solid var(--line);
}
.subnav-link {
  padding:0 2px 12px;
  font-size:12px;
  color:var(--muted);
}
.subnav-link.is-active {
  color:var(--cyan);
  border-bottom:2px solid var(--cyan);
}
.info-strip {
  display:grid;
  grid-template-columns:210px 1fr;
  gap:24px;
  align-items:start;
  padding:23px 25px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#0b192b;
}
.info-strip h3 {
  margin:0;
  font-size:14px;
}
.info-strip p {
  color:var(--muted);
  font-size:12px;
  margin:0;
  line-height:1.85;
}
.tool-panel,.detail-panel {
  padding:25px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel);
}
.card-generator {
  margin-bottom:25px;
  max-width:800px;
}
.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.card-code {
  white-space:nowrap;
  font-size:12px;
}
.copy-code {
  background:transparent;
  border:0;
  margin-left:12px;
  padding:5px;
  color:var(--cyan);
  font:10px var(--sans);
}
.detail-grid {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:22px;
  margin-bottom:25px;
}
.detail-list {
  display:grid;
  grid-template-columns:95px minmax(0,1fr);
  gap:16px 18px;
  margin:23px 0 0;
  font-size:12px;
}
.detail-list dt {
  color:var(--muted);
}
.detail-list dd {
  margin:0;
}
.detail-panel .inline-form {
  width:100%;
  margin-top:12px;
}
.detail-panel form:last-child {
  display:grid;
  gap:12px;
  padding-top:17px;
  margin-top:18px;
  border-top:1px solid var(--line);
}
.detail-panel h2 {
  font-size:17px;
}
.error-state {
  max-width:600px;
  margin:12vh auto;
  padding:45px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  text-align:center;
}
.error-code {
  color:var(--cyan);
  font-size:65px;
  font-weight:600;
  line-height:1.2;
  margin-bottom:14px;
}
.error-state h1 {
  font-size:25px;
}
.error-state p {
  color:var(--muted);
}
.copy-feedback {
  position:fixed;
  z-index:100;
  bottom:26px;
  left:50%;
  transform:translate(-50%,12px);
  padding:10px 18px;
  border:1px solid #3c6e81;
  border-radius:7px;
  background:#163346;
  color:#ceefff;
  font-size:12px;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s,transform .15s;
}
.copy-feedback.is-visible {
  opacity:1;
  transform:translate(-50%,0);
}
.auth-shell .workspace {
  margin-left:0;
}
.auth-shell .page {
  max-width:none;
  padding:0;
}
.auth-shell .footer {
  padding:18px 40px;
  max-width:none;
  border-top:1px solid #17283d;
  background:#07101e;
}
.login-shell {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  min-height:calc(100vh - 55px);
}
.login-brand {
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:50px max(45px,7vw);
  border-right:1px solid #213d57;
  background:radial-gradient(ellipse at 50% 55%,rgba(18,64,103,.2),transparent 70%),#0a182a;
  overflow:hidden;
}
.brand-large {
  margin-bottom:65px;
}
.brand-large .brand-mark {
  width:40px;
  height:43px;
}
.auth-intro .section-label {
  color:#62bde7;
  font-size:12px;
}
.auth-intro h1 {
  font-size:clamp(30px,2.65vw,48px);
  line-height:1.5;
  margin:15px 0 17px;
  letter-spacing:-.04em;
}
.auth-intro .lead {
  color:#8fa9c7;
  font-size:13px;
  line-height:1.9;
  max-width:36em;
}
.login-brand .network-visual {
  flex:0 0 260px;
  height:260px;
  margin:22px -28px 0;
}
.login-brand .network-caption {
  bottom:3px;
}
.auth-features {
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-top:20px;
  padding-top:25px;
  border-top:1px solid #21364d;
}
.auth-features span {
  display:flex;
  align-items:center;
  gap:8px;
  color:#8ba6c4;
  font-size:11px;
}
.auth-features .icon {
  color:#4e8eae;
  width:16px;
  height:16px;
}
.login-form-wrap {
  display:grid;
  place-items:center;
  padding:50px 45px;
  background:#081221;
}
.login-form-inner {
  width:100%;
  max-width:370px;
}
.auth-form-symbol {
  display:grid;
  place-items:center;
  width:47px;
  height:47px;
  border-radius:12px;
  border:1px solid #294b64;
  background:#112b42;
  color:var(--cyan);
  margin-bottom:25px;
}
.auth-form-symbol .icon {
  width:24px;
  height:24px;
}
.login-form-inner h2 {
  font-size:27px;
  margin-bottom:9px;
}
.login-form-inner>.muted {
  font-size:13px;
  margin-bottom:32px;
}
.login-form-inner .stack-form {
  gap:21px;
}
.login-form-inner .field {
  gap:9px;
}
.login-form-inner input {
  height:46px;
}
.login-form-inner .btn {
  height:45px;
  margin-top:4px;
}
.login-note {
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:27px;
  padding-top:24px;
  border-top:1px solid #1b2e43;
  color:var(--muted);
  font-size:12px;
}
.auth-help {
  color:var(--subtle);
  font-size:11px;
  text-align:center;
  margin-top:21px;
  line-height:1.8;
}
@media(min-width:1700px) {
  .page {
    padding-top:40px;
  }
  .network-overview {
    grid-template-columns:1fr 1.75fr;
  }
  .network-visual.is-compact {
    margin-right:35px;
  }
  .content-grid {
    grid-template-columns:minmax(0,1fr) 345px;
    gap:25px;
  }
}
@media(max-width:1270px) {
  .sidebar {
    width:204px;
    padding-inline:13px;
  }
  .workspace {
    margin-left:204px;
  }
  .page {
    padding:28px;
  }
  .topbar {
    padding-inline:28px;
  }
  .network-overview {
    grid-template-columns:.9fr 1.3fr;
  }
  .network-copy {
    padding:24px;
  }
  .network-copy h2 {
    font-size:26px;
  }
  .network-visual.is-compact .visual-node {
    width:92px;
  }
  .network-visual.is-compact .gateway-node {
    width:140px;
  }
  .network-visual.is-compact .gateway-symbol {
    left:35px;
  }
  .network-visual.is-compact .gateway-rings {
    left:15px;
  }
  .content-grid {
    grid-template-columns:minmax(0,1fr) 285px;
    gap:18px;
  }
  .tunnel-foot {
    align-items:flex-start;
    flex-direction:column;
  }
  .tunnel-meta {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .stats-row-admin {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .sub-limits {
    gap:10px;
  }
  .sub-limits>div+div {
    padding-left:12px;
  }
  .sub-limits .sub-expiry {
    font-size:13px;
  }
  .login-brand {
    padding-inline:42px;
  }
  .login-brand .visual-node {
    width:105px;
  }
  .login-brand .gateway-node {
    width:160px;
  }
  .auth-features {
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:15px 23px;
  }
}
@media(max-width:1020px) {
  .content-grid {
    grid-template-columns:minmax(0,1fr);
  }
  .side-column {
    grid-template-columns:1fr 1fr;
    align-items:start;
  }
  .network-overview {
    grid-template-columns:1fr;
    gap:0;
  }
  .network-copy {
    padding-bottom:10px;
  }
  .network-copy h2 br {
    display:none;
  }
  .network-copy h2 {
    font-size:24px;
  }
  .network-visual.is-compact {
    min-height:215px;
    margin:0 20px;
  }
  .network-copy p {
    margin-bottom:8px;
  }
  .network-copy .text-link {
    display:none;
  }
  .detail-grid {
    grid-template-columns:1fr;
  }
  .plan-card {
    grid-template-columns:1fr;
  }
  .plan-summary {
    border-right:0;
    border-bottom:1px solid #284058;
    padding:25px;
  }
  .plan-symbol {
    float:right;
    margin-bottom:0;
  }
  .plan-features {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 25px;
  }
  .billing-rules {
    margin-top:17px;
  }
  .info-strip {
    grid-template-columns:1fr;
    gap:10px;
  }
  .login-shell {
    grid-template-columns:1fr 1fr;
  }
  .login-brand {
    padding-inline:30px;
  }
  .login-brand .network-visual {
    margin-inline:-15px;
  }
  .login-brand .visual-node {
    width:88px;
  }
  .login-brand .gateway-node {
    width:140px;
  }
  .login-brand .gateway-symbol {
    left:35px;
  }
  .login-brand .gateway-rings {
    left:15px;
  }
  .login-form-wrap {
    padding:35px;
  }
}
@media(max-width:760px) {
  .sidebar {
    transform:translateX(-100%);
    width:228px;
    transition:transform .18s ease;
    box-shadow:20px 0 50px #0006;
  }
  .nav-open .sidebar {
    transform:translateX(0);
  }
  .workspace {
    margin-left:0;
  }
  .topbar {
    height:64px;
    padding:0 17px;
    gap:12px;
  }
  .nav-toggle {
    display:grid;
    place-items:center;
    margin-left:-8px;
  }
  .breadcrumb {
    margin-right:auto;
    gap:9px;
  }
  .breadcrumb>span:first-child,.breadcrumb-divider {
    display:none;
  }
  .account-email {
    display:none;
  }
  .account {
    gap:8px;
  }
  .page {
    padding:25px 19px;
  }
  .page-head {
    margin-bottom:22px;
    gap:12px;
    align-items:flex-start;
  }
  .page-head h1 {
    font-size:24px;
  }
  .page-desc {
    font-size:12px;
  }
  .page-actions>.btn {
    padding:8px 11px;
  }
  .page-actions .btn .icon {
    display:none;
  }
  .network-overview {
    border-radius:8px;
  }
  .network-copy {
    padding:23px 22px 5px;
  }
  .network-copy h2 {
    font-size:23px;
    margin:6px 0 10px;
  }
  .network-copy h2 br {
    display:none;
  }
  .network-visual.is-compact {
    margin:0 12px;
    min-height:220px;
  }
  .stats-row,.stats-row-admin {
    gap:10px;
    margin-bottom:22px;
  }
  .stat-card,.stats-row-admin .stat-card {
    padding:15px 13px;
    min-height:106px;
  }
  .stat-value {
    font-size:23px;
  }
  .stat-label {
    font-size:11px;
  }
  .stat-sub {
    font-size:10px;
  }
  .stat-accent:after {
    display:none;
  }
  .subscription-panel {
    padding:20px;
  }
  .sub-limits {
    grid-template-columns:.7fr .9fr 1fr;
  }
  .sub-limits strong {
    font-size:16px;
  }
  .side-column {
    grid-template-columns:1fr;
  }
  .side-panel {
    padding:21px;
  }
  .tunnel-head {
    padding:17px;
  }
  .tunnel-head h3 {
    font-size:12px;
  }
  .tunnel-protocol {
    width:33px;
    height:35px;
    font-size:9px;
  }
  .tunnel-identity {
    gap:9px;
  }
  .route-map {
    margin:0 17px 15px;
    padding:12px;
    gap:8px;
    grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);
  }
  .route-node strong {
    font-size:10px;
  }
  .route-line .icon {
    width:20px;
  }
  .tunnel-foot {
    padding:12px 14px 12px 17px;
  }
  .tunnel-actions {
    width:100%;
    justify-content:flex-end;
  }
  .stats-row-admin {
    grid-template-columns:1fr 1fr;
  }
  .stats-row-admin .stat-card:first-child {
    grid-column:1/-1;
  }
  td,th {
    padding:13px 15px;
    white-space:nowrap;
  }
  .table-panel>.section-head {
    padding:18px 17px;
  }
  .tool-panel,.detail-panel {
    padding:21px;
  }
  .form-row {
    grid-template-columns:1fr;
  }
  .detail-list {
    grid-template-columns:72px minmax(0,1fr);
    gap:14px 12px;
  }
  .footer {
    padding-inline:19px;
  }
  .plan-summary,.plan-buy {
    padding:23px;
  }
  .plan-summary h2 {
    font-size:23px;
  }
  .quote-lines>div {
    font-size:11px;
  }
  .info-strip {
    padding:20px;
  }
  .login-shell {
    display:block;
    min-height:calc(100vh - 55px);
  }
  .login-brand {
    padding:28px 25px 24px;
    border-right:0;
    border-bottom:1px solid #203b55;
  }
  .brand-large {
    margin-bottom:28px;
  }
  .auth-intro h1 {
    font-size:28px;
    line-height:1.45;
    margin-top:8px;
  }
  .auth-intro .lead {
    margin-bottom:0;
    font-size:12px;
  }
  .auth-intro .section-label {
    display:none;
  }
  .login-brand .network-visual,.auth-features {
    display:none;
  }
  .login-form-wrap {
    padding:32px 25px 40px;
  }
  .login-form-inner {
    max-width:430px;
  }
  .auth-form-symbol {
    display:none;
  }
  .login-form-inner h2 {
    font-size:23px;
  }
  .login-form-inner>.muted {
    margin-bottom:23px;
  }
  .auth-shell .footer {
    padding:18px 25px;
  }
}
@media(max-width:390px) {
  .page {
    padding-inline:14px;
  }
  .page-head {
    flex-direction:column;
  }
  .page-head .page-actions {
    align-self:flex-end;
    margin-top:-3px;
  }
  .network-copy {
    padding-inline:18px;
  }
  .visual-node.device-node,.visual-node.public-node {
    width:78px!important;
    padding-block:12px;
  }
  .visual-node span {
    font-size:9px;
  }
  .network-visual.is-compact .gateway-node {
    width:120px;
  }
  .network-visual.is-compact .gateway-symbol {
    left:31px;
    width:58px;
    height:58px;
  }
  .network-visual.is-compact .gateway-rings {
    left:13px;
    top:-18px;
    width:94px;
    height:94px;
  }
  .stat-value {
    font-size:21px;
  }
  .stat-sub {
    font-size:9px;
  }
  .sub-limits .sub-expiry {
    font-size:11px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
  }
}
.sidebar-close {
  display:none;
}
@media(max-width:760px) {
  .sidebar {
    visibility:hidden;
  }
  .nav-open .sidebar {
    visibility:visible;
  }
  .sidebar-close {
    display:grid;
    place-items:center;
    position:absolute;
    right:12px;
    top:36px;
    padding:7px;
    border:0;
    border-radius:5px;
    background:transparent;
    color:var(--muted);
  }
  .sidebar-close .icon {
    width:18px;
    height:18px;
  }
  .stat-value {
    font-size:20px;
  }
}

.traffic-pack-panel {
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(240px,1fr);
  gap:40px;
  padding:32px;
  margin:0 0 28px;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(115deg,rgba(67,202,255,.07),transparent 65%),var(--panel);
}
.pack-price {
  margin:12px 0;
  color:var(--cyan);
  font-size:30px;
  font-weight:650;
}
.pack-price span { color:var(--muted); font-size:14px; font-weight:400; }
.pack-total { display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-top:1px solid var(--line); }
.pack-total strong { color:var(--cyan); font-size:23px; }
[data-discount-total] { color:var(--green); }
@media(max-width:760px) {
  .traffic-pack-panel { grid-template-columns:minmax(0,1fr); gap:20px; padding:22px; }
}

body.dialog-open { overflow:hidden; }
.tunnel-dialog {
  width:min(480px,calc(100% - 32px));
  max-height:calc(100dvh - 32px);
  margin:auto;
  padding:0;
  color:var(--ink);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 24px 80px rgba(0,0,0,.45);
}
.tunnel-dialog::backdrop { background:rgba(3,9,18,.76); backdrop-filter:blur(4px); }
.dialog-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:24px 24px 18px; border-bottom:1px solid var(--line-soft); }
.dialog-header h2 { margin-bottom:6px; }
.dialog-header p { margin:0; color:var(--muted); font-size:13px; }
.dialog-header .btn { width:36px; height:36px; padding:8px; }
.dialog-body { padding:22px 24px 24px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:6px; }
@media(max-width:480px) {
  .dialog-header { padding:20px; }
  .dialog-body { padding:20px; }
  .dialog-actions .btn { flex:1; }
}

.plan-card + .plan-card { margin-top: 28px; }
.quote-lines[hidden] { display: none; }

/* Workspace: live network and illustrated customer guide. */
.map-panel,.guide-hero,.guide-step,.guide-faq,.guide-flow { border:1px solid var(--line); background:var(--panel); border-radius:12px; }
.map-panel { padding:28px; margin-bottom:24px; }
.map-panel h2 { font-size:24px; }
.map-live { color:#69d9bd; font-size:12px; white-space:nowrap; }
.map-canvas { position:relative; max-width:920px; margin:0 auto; background:radial-gradient(ellipse at 60% 50%,#102f4533,transparent 70%); }
.map-canvas svg { display:block; width:100%; max-height:530px; }
.map-route { fill:none; stroke:currentColor; stroke-width:1; opacity:.28; }
.map-route.is-selected { stroke-width:2; opacity:1; }
.map-dot { fill:currentColor; stroke:#0b1a29; stroke-width:2; cursor:pointer; }
.map-dot:focus { outline:none; stroke:#fff; stroke-width:3; }
.latency-good { color:#63d7bb; }.latency-medium { color:#69cafa; }.latency-slow { color:#f3bc69; }.latency-offline { color:#718395; }
.map-server { fill:#fff; }.map-server-halo { fill:#54d1fa44; stroke:#54d1fa; }.map-server-label { fill:#a6dffa; font-size:14px; font-weight:600; }
.map-server,.map-server-halo,.map-server-label { pointer-events:none; }
.map-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; font-size:12px; color:var(--muted); }
.map-legend span { display:flex; gap:7px; align-items:center; }.map-legend i { width:7px; height:7px; border-radius:50%; background:currentColor; }
.map-selection { min-height:24px; margin:12px 0 0; color:#a6dffa; font-size:13px; }
.guide-hero { display:grid; grid-template-columns:1.2fr 1fr; align-items:center; padding:42px 48px; overflow:hidden; background:radial-gradient(ellipse at 80% 40%,#164c4b66,transparent 65%),#0e1d2e; }
.guide-hero h2 { font-size:44px; line-height:1.2; letter-spacing:-1px; margin:14px 0 20px; }.guide-hero p { max-width:520px; color:var(--muted); line-height:1.9; margin-bottom:24px; }.voxel-world { width:100%; max-height:320px; }
.guide-steps-nav { display:flex; flex-wrap:wrap; gap:12px 24px; padding:24px 4px; font-size:13px; color:var(--muted); }.guide-steps-nav a:hover { color:var(--cyan); }
.guide-flow { display:flex; align-items:center; justify-content:space-around; padding:28px 20px; margin-bottom:28px; }.guide-flow>div { display:grid; justify-items:center; gap:8px; }.guide-flow .icon { color:#72d6ee; width:26px; height:26px; }.guide-flow small { color:var(--muted); }.guide-flow>span { color:#426a84; }
.guide-step { display:grid; grid-template-columns:1.05fr 1fr; padding:32px; gap:40px; margin-bottom:24px; scroll-margin-top:30px; }.guide-number { color:#6fd9d2; font-size:12px; font-weight:700; letter-spacing:3px; }.guide-step h2 { margin:10px 0 20px; font-size:25px; }.guide-step-copy p { color:var(--muted); line-height:1.9; margin-bottom:16px; }.guide-step-copy a:not(.btn) { color:#72d6ee; }.guide-step code { font-size:13px; color:#b7dcf4; overflow-wrap:anywhere; }
.guide-figure { margin:0; align-self:center; min-width:0; }.guide-figure figcaption { font-size:11px; letter-spacing:1px; color:#6c87a0; margin-bottom:12px; }
.guide-terminal,.guide-form-preview,.guide-folder,.guide-account,.guide-game { padding:24px; border:1px solid #2a455b; border-radius:8px; background:#07121f; box-shadow:0 15px 35px #0002; min-width:0; }
.terminal-title { display:flex; align-items:center; gap:6px; padding-bottom:20px; color:#8eaac1; font-size:12px; }.terminal-title i { width:6px; height:6px; background:#395b73; border-radius:50%; }.terminal-title span { margin-left:8px; }.guide-terminal pre { white-space:pre-wrap; overflow-wrap:anywhere; color:#a4c7da; font-size:12px; line-height:2; margin:0; }.guide-terminal-success { color:#6fd9b2; margin:20px 0 12px; font-size:12px; }
.guide-form-preview h3 { margin:0 0 20px; }.guide-form-preview>span,.guide-game>span { display:block; font-size:12px; color:var(--muted); margin-bottom:7px; }.guide-form-preview>div,.guide-game>div { background:#0c1b2b; border:1px solid #2c455e; padding:12px 14px; margin-bottom:16px; border-radius:5px; font-size:14px; }.guide-form-preview b { float:right; color:#7894ab; }.guide-form-preview .guide-highlight,.guide-game .guide-highlight { border-color:#51c8d0; color:#b4f5eb; }.guide-form-preview .guide-mock-button { background:#49c2ea; text-align:center; color:#04223a; padding:12px; margin:0; border-radius:5px; font-weight:600; }
.guide-folder { padding:36px 24px; }.guide-folder>div { margin-top:24px; font-family:monospace; color:#4d718b; }.guide-folder span { color:#d6e6ee; }.guide-folder small { display:block; color:var(--muted); margin:5px 0 0 28px; }
.guide-account h3 { font-size:22px; margin:14px 0 24px; }.guide-account>div { display:flex; justify-content:space-between; border-top:1px solid #20344a; padding:12px 0; font-size:13px; }.guide-account>div span { color:var(--muted); }
.guide-command { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 14px; border:1px solid #29455d; border-radius:6px; margin-bottom:16px; background:#081523; }.guide-command code { min-width:0; }.guide-game h3 { text-align:center; margin:0 0 24px; }.guide-game .guide-game-button { border:2px solid #7f929b; background:#354751; text-align:center; padding:10px; color:#dce9ef; margin:20px 0 0; }
.guide-faq { padding:28px 32px; margin-top:24px; }.guide-faq details { padding:18px 0; border-top:1px solid var(--line); }.guide-faq summary,.guide-step summary { cursor:pointer; font-size:14px; }.guide-faq p { color:var(--muted); line-height:1.9; max-width:900px; margin:14px 0 0; }
@media(max-width:900px) { .guide-hero { padding:30px; }.guide-hero h2 { font-size:36px; }.guide-step { gap:24px; padding:24px; } }
@media(max-width:680px) { .map-panel { padding:20px 14px; }.map-panel h2 { font-size:19px; }.map-live { display:none; }.map-legend { gap:12px; font-size:10px; }.map-selection { font-size:12px; }.guide-hero { grid-template-columns:1fr; padding:28px 24px; }.voxel-world { max-height:230px; }.guide-hero h2 { font-size:36px; }.guide-step { grid-template-columns:1fr; padding:24px 20px; gap:20px; }.guide-step h2 { font-size:23px; }.guide-flow { padding:22px 10px; }.guide-flow strong { font-size:11px; }.guide-flow small { font-size:10px; }.guide-steps-nav { gap:14px 18px; font-size:12px; }.guide-faq { padding:24px 20px; }.guide-command { flex-wrap:wrap; } }

.traffic-filters { display:grid; grid-template-columns:160px 160px minmax(180px,1fr) auto; gap:18px; align-items:end; margin:26px 0; }
.traffic-filters .field { margin:0; }.traffic-filters .btn { min-height:46px; }
.traffic-up { color:#6cdbb7; }.traffic-down { color:#6dc9fa; }
.traffic-chart { display:flex; align-items:flex-end; gap:10px; overflow-x:auto; padding:16px 4px 10px; min-height:190px; }
.traffic-day { flex:1; min-width:32px; text-align:center; color:var(--muted); font-size:10px; }
.traffic-day-bars { height:145px; display:flex; justify-content:center; align-items:flex-end; gap:3px; margin-bottom:8px; }
.traffic-day-bars>span { width:13px; min-height:1px; border-radius:3px 3px 0 0; }.traffic-day-up { background:#6cdbb7; }.traffic-day-down { background:#54bdf2; }
.client-download-panel { display:flex; align-items:center; gap:32px; justify-content:space-between; border:1px solid #2b586f; border-radius:12px; background:#102637; padding:26px 30px; margin:24px 0; }
.client-download-panel p { color:var(--muted); margin:10px 0 0; line-height:1.85; }.client-download-panel .btn { flex-shrink:0; }
@media(max-width:760px) { .traffic-filters { grid-template-columns:1fr 1fr; gap:12px; }.traffic-filters .field:nth-child(3) { grid-column:1 / -1; }.traffic-filters .btn { grid-column:1 / -1; }.client-download-panel { flex-direction:column; align-items:stretch; padding:24px; } }

.token-panel > .btn { width:100%; margin-top:16px; }
.guide-dns-record { padding:20px; margin-bottom:14px; border:1px solid #2a455b; border-radius:8px; background:#07121f; }
.guide-dns-record dl { display:grid; grid-template-columns:110px minmax(0,1fr); gap:12px; margin:12px 0 0; font-size:12px; }
.guide-dns-record dt { color:var(--muted); }.guide-dns-record dd { margin:0; overflow-wrap:anywhere; font-family:var(--mono); }
.guide-dns-arrow { color:var(--cyan); font-size:26px; text-align:center; margin:10px 0; }
.dashboard-layout {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-template-areas:"stats-a stats-a stats-b stats-b stats-c stats-c" "subscription subscription subscription subscription balance balance" "tunnels tunnels tunnels tunnels token token";
  gap:24px;
}
.dashboard-layout .stats-row,.dashboard-layout .content-grid,.dashboard-layout .main-column,.dashboard-layout .side-column { display:contents; }
.dashboard-layout .stats-row > :nth-child(1) { grid-area:stats-a; }
.dashboard-layout .stats-row > :nth-child(2) { grid-area:stats-b; }
.dashboard-layout .stats-row > :nth-child(3) { grid-area:stats-c; }
.dashboard-layout .subscription-panel { grid-area:subscription; margin:0; }
.dashboard-layout .balance-panel { grid-area:balance; }
.dashboard-layout .tunnels-panel { grid-area:tunnels; margin:0; align-self:start; }
.dashboard-layout .token-panel { grid-area:token; align-self:start; }
@media(max-width:1020px) {
  .dashboard-layout { grid-template-areas:"stats-a stats-a stats-b stats-b stats-c stats-c" "subscription subscription subscription subscription subscription subscription" "tunnels tunnels tunnels tunnels tunnels tunnels" "balance balance balance token token token"; }
}
@media(max-width:760px) {
  .dashboard-layout { gap:16px; grid-template-areas:"stats-a stats-a stats-b stats-b stats-c stats-c" "subscription subscription subscription subscription subscription subscription" "tunnels tunnels tunnels tunnels tunnels tunnels" "balance balance balance balance balance balance" "token token token token token token"; }
}

.client-linux-downloads { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:14px; font-size:12px; }
.client-linux-buttons { display:flex; flex-direction:column; gap:12px; flex-shrink:0; }

.cards-tools { padding:24px 28px; border-bottom:1px solid var(--line); }
.cards-filters { display:flex; flex-wrap:wrap; gap:14px; align-items:end; }
.cards-filters .field { margin:0; flex:1 1 180px; }
.cards-exports { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.cards-pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:12px; padding:20px 28px; border-top:1px solid var(--line); }
@media(max-width:760px) { .cards-tools { padding:20px; }.cards-filters .field { flex-basis:100%; }.cards-exports .btn { flex:1 1 100%; }.cards-pagination { justify-content:center; padding:18px; } }