/*
   Cybaaspace / 1VPS strict dark-theme guard
   Loaded last in the document head so every public, client and admin page keeps
   the same production dark navy/blue appearance, including dynamic table tools
   and CMS templates.
*/
:root{
  color-scheme:dark!important;
  --bg:#050b13!important;
  --bg-2:#071426!important;
  --surface:rgba(10,24,45,.94)!important;
  --surface-strong:#0d1b3d!important;
  --line:rgba(112,184,255,.24)!important;
  --text:#f7fbff!important;
  --muted:#c3d4ec!important;
  --muted-2:#8fa8c9!important;
  --brand:#2f9cff!important;
  --brand-2:#2563ff!important;
  --ok:#38f078!important;
  --warn:#ffd166!important;
  --danger:#ff5c7a!important;
  --ui-bg:#050b13!important;
  --ui-bg-soft:#071426!important;
  --ui-panel:#0d1b3d!important;
  --ui-panel-soft:#0a1830!important;
  --ui-border:rgba(112,184,255,.24)!important;
  --ui-text:#f7fbff!important;
  --ui-muted:#c3d4ec!important;
  --ui-muted-soft:#8fa8c9!important;
  --ui-brand:#2f9cff!important;
  --ui-brand-dark:#2563ff!important;
  --ui-brand-soft:rgba(47,156,255,.14)!important;
  --control-bg:#071426!important;
  --control-bg-hover:#0d1b3d!important;
  --control-line:rgba(112,184,255,.28)!important;
  --control-line-strong:rgba(112,184,255,.52)!important;
  --panel-soft:rgba(10,24,45,.92)!important;
}
html,body{
  background:
    radial-gradient(circle at 10% -10%,rgba(37,99,255,.18),transparent 34rem),
    radial-gradient(circle at 92% 8%,rgba(0,229,255,.10),transparent 30rem),
    linear-gradient(135deg,#081426 0%,#050b13 58%,#02060d 100%)!important;
  color:#f7fbff!important;
}
body::selection{background:rgba(47,156,255,.35)!important;color:#fff!important;}

/* Keep all section wrappers transparent; the cards inside carry the panel styling. */
html body main,html body section,html body .container,html body .wrap,html body .page,html body .app-content{
  background:transparent!important;
  color:#f7fbff!important;
}

/* Universal dark cards/panels. */
html body :where(.card,.panel,.clean-panel,.auth-card,.status-card,.status-summary-card,.contact-form-card,.contact-side .card,
.one-plan-card,.featured-card,.payment-highlight-card,.payment-settlement-card,.payment-flow-section article,.coin-card,.hero-product-card,
.datacenter-map-card,.package-card-clean,.package-toggle-clean,.packages-page-panel,.packages-side-card,.provider-plan-card,.provider-spec-item,
.metric,.metric-card,.metric-chart-tile,.kpi,.mini-stat,.latency-panel,.side-card,.dashboard-sidebar,.admin-side,.admin-table-card,.admin-form-card,
.admin-toolbar,.admin-service-row,.private-vlan-card,.private-vlan-members,.private-vlan-note,.cloud-service-row,.clean-cloud-card,.service-card,
.service-row,.service-table-card,.compact-service-card,.compact-service-row,.expanded-panel,.usage-stat-box,.usage-network-card,.usage-row,
.ip-address-row,.ip-transfer-card,.transfer-card-main,.transfer-card-actions,.ticket-message,.bubble,.modal-content,.modal-card,.modal-panel,
.console-modal-panel,.dropdown-menu,.faq details,.notice,.alert,.success-box,.success-card,.confirm-summary,.resource-box,.read-field,.terminal,
.hero-terminal,.mini-chart,.package-tabs,.language-switcher,.payment-route-stats span,.hardware-item,.hardware-grid.slim>div,.homepage-spec-grid div,
.one-feature-strip article,.feature-list-clean>div,.one-plan-benefits>div,.one-summary-split>div,.one-packages-summary,.one-summary-note,
.cms-template-card,.cms-editor-card,.cms-footer-col-editor,.cms-block,.csp-table-controls,.api-docs-tools,.api-endpoint-head){
  background:linear-gradient(180deg,rgba(13,33,60,.97),rgba(7,18,35,.96))!important;
  background-color:#0b1b33!important;
  color:#f7fbff!important;
  border-color:rgba(112,184,255,.24)!important;
  box-shadow:0 20px 70px rgba(0,0,0,.34)!important;
}
html body :where(.card,.panel,.clean-panel,.status-card,.contact-form-card,.faq details,.private-vlan-card,.admin-table-card,.admin-form-card,.hero-product-card,.datacenter-map-card){
  border-radius:24px!important;
}

/* Homepage hero/product card fixes, including the white bar reported in screenshot. */
html body :where(.mini-dashboard-head,.card-head,.card-head-row,.clean-cloud-card .card-head,.service-table-card .card-head){
  background:rgba(5,16,31,.72)!important;
  color:#f7fbff!important;
  border:1px solid rgba(112,184,255,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
html body .mini-dashboard-head strong{color:#f7fbff!important;opacity:1!important;}
html body .hero-metric-grid>div,
html body .trust-row span,
html body .module-grid span{
  background:linear-gradient(180deg,rgba(10,24,45,.94),rgba(5,16,31,.94))!important;
  color:#f7fbff!important;
  border:1px solid rgba(112,184,255,.24)!important;
  box-shadow:none!important;
}
html body .hero-metric-grid strong,
html body .trust-row strong,
html body .feature-list-clean b,
html body .homepage-spec-grid b,
html body .price-line strong,
html body .one-plan-price strong,
html body .one-summary-price strong{
  color:#fff!important;
}
html body .hero-metric-grid span,
html body .hero-metric-grid small,
html body .feature-list-clean span,
html body .homepage-spec-grid span,
html body .trust-row span,
html body .price-line span,
html body .one-plan-price span,
html body .one-summary-price span,
html body .one-summary-price small{
  color:#c3d4ec!important;
}

/* Homepage map: fully dark card + dark sea/map + dark labels. */
html body :where(.datacenter-map-card,.dark-datacenter-map){
  background:radial-gradient(circle at 82% 16%,rgba(47,156,255,.20),transparent 34%),linear-gradient(180deg,rgba(13,33,60,.98),rgba(5,16,31,.98))!important;
  border-color:rgba(87,159,237,.30)!important;
}
html body :where(.dotted-world-map,.enhanced-map,.dark-datacenter-map .dotted-world-map){
  background:radial-gradient(circle at 53% 36%,rgba(47,156,255,.18),transparent 24%),linear-gradient(180deg,#071426,#0c203a)!important;
  border-color:rgba(112,184,255,.30)!important;
}
html body .dotted-world-map svg{background:#071426!important;border-radius:inherit!important;}
html body .dark-datacenter-map .map-card-head,
html body .map-card-head{
  background:transparent!important;background-color:transparent!important;border:0!important;box-shadow:none!important;
}
html body .map-card-head h3{color:#f5fbff!important;text-shadow:0 0 22px rgba(47,156,255,.20)!important;}
html body .map-card-head p{color:#bdd3ef!important;}
html body :where(.map-location-label,.map-location-label.enhanced){
  background:rgba(7,20,38,.90)!important;
  color:#f7fbff!important;
  border:1px solid rgba(112,184,255,.32)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.38)!important;
  backdrop-filter:blur(12px)!important;
}
html body .map-location-label strong{color:#fff!important;}
html body .map-location-label span{color:#aecaeb!important;}
html body .map-meta-row span{
  background:rgba(7,20,38,.88)!important;
  border-color:rgba(112,184,255,.28)!important;
  color:#cfe5ff!important;
  box-shadow:0 12px 32px rgba(0,0,0,.26)!important;
}

/* Text hierarchy and muted copy. */
html body :where(h1,h2,h3,h4,h5,h6,strong,b,label,summary,.dashboard-title,.service-title,.server-title,.billing-cell strong,.transfer-title strong){
  color:#f8fbff!important;
}
html body :where(p,small,li,.muted,.lead,.meta,.server-meta,.detail-lines,.billing-cell span,.billing-cell small,.location-cell,.features,.empty,.help-text,.field small){
  color:#c3d4ec!important;
}
html body a:not(.btn):not(.side-link):not(.top-link){color:#8fd3ff!important;}
html body hr{border-color:rgba(112,184,255,.24)!important;}

/* Forms, selects and placeholders. */
html body :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea,.compact-select,.read-field,input[type="search"]){
  background:#071426!important;
  color:#f7fbff!important;
  border:1px solid rgba(112,184,255,.30)!important;
  box-shadow:none!important;
}
html body :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea,input[type="search"]):focus{
  border-color:rgba(47,156,255,.78)!important;
  box-shadow:0 0 0 4px rgba(47,156,255,.14)!important;
  background:#081a31!important;
}
html body input::placeholder,html body textarea::placeholder{color:#8aa5c7!important;opacity:1!important;}
html body select option{background:#071426!important;color:#f7fbff!important;}
html body select{
  background-image:linear-gradient(45deg,transparent 50%,#8fd3ff 50%),linear-gradient(135deg,#8fd3ff 50%,transparent 50%)!important;
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%!important;
  background-size:5px 5px,5px 5px!important;
  background-repeat:no-repeat!important;
}

/* Native checkbox/radio dark theme. */
html body input[type="checkbox"],
html body input[type="radio"]{
  appearance:none!important;
  -webkit-appearance:none!important;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  min-height:18px!important;
  display:inline-grid!important;
  place-content:center!important;
  margin:0 8px 0 0!important;
  vertical-align:-3px!important;
  border:1px solid rgba(112,184,255,.44)!important;
  background:#071426!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
  cursor:pointer!important;
}
html body input[type="checkbox"]{border-radius:6px!important;}
html body input[type="radio"]{border-radius:999px!important;}
html body input[type="checkbox"]:checked,
html body input[type="radio"]:checked{
  background:linear-gradient(135deg,#2f9cff,#2563ff)!important;
  border-color:transparent!important;
  box-shadow:0 0 0 4px rgba(47,156,255,.14)!important;
}
html body input[type="checkbox"]:checked::after{
  content:""!important;
  width:9px!important;height:5px!important;
  border-left:2px solid #fff!important;border-bottom:2px solid #fff!important;
  transform:rotate(-45deg) translate(1px,-1px)!important;
}
html body input[type="radio"]:checked::after{
  content:""!important;
  width:7px!important;height:7px!important;border-radius:999px!important;background:#fff!important;
}
html body input[type="checkbox"]:disabled,
html body input[type="radio"]:disabled{opacity:.45!important;cursor:not-allowed!important;}
html body :where(.check-line,.check-row,label.check-line,label.check-row){
  background:rgba(7,20,38,.82)!important;
  color:#f7fbff!important;
  border:1px solid rgba(112,184,255,.26)!important;
  border-radius:16px!important;
}

/* Tables and global DataTable-like controls. */
html body :where(table,.table,.admin-modern-table,.cloud-table){
  background:transparent!important;
  color:#f7fbff!important;
}
html body :where(table th,.table th,.admin-modern-table th,.cloud-table th){
  background:rgba(5,16,31,.78)!important;
  color:#aecaeb!important;
  border-color:rgba(112,184,255,.18)!important;
}
html body :where(table td,.table td,.admin-modern-table td,.cloud-table td){
  background:rgba(10,24,45,.90)!important;
  color:#f7fbff!important;
  border-color:rgba(112,184,255,.20)!important;
}
html body :where(table tr:hover td,.table tr:hover td,.admin-modern-table tr:hover td,.cloud-table tr:hover td){
  background:rgba(13,33,60,.98)!important;
}
html body :where(.responsive-table,.table-scroll,.tw-table-wrap){max-width:100%!important;overflow-x:auto!important;}
html body :where(.csp-table-search input,.csp-table-page-size select,.api-docs-search-field input){
  background:#071426!important;color:#f7fbff!important;border-color:rgba(112,184,255,.30)!important;
}
html body :where(.csp-table-pagination button,.api-method-filter button){
  background:rgba(10,27,49,.90)!important;color:#d8ebff!important;border:1px solid rgba(112,184,255,.28)!important;
}
html body :where(.csp-table-pagination button.active,.api-method-filter button.active){
  background:linear-gradient(135deg,#2f9cff,#2563ff)!important;color:#fff!important;border-color:transparent!important;
}

/* Buttons, icons, tags and status pills. */
html body :where(.btn,.action-btn,.copy-btn,.row-expand-btn,.package-order,button:not(.plain),input[type="submit"]){
  background:rgba(10,24,45,.92)!important;
  color:#f7fbff!important;
  border:1px solid rgba(112,184,255,.30)!important;
  box-shadow:none!important;
}
html body :where(.btn.primary,button.primary,input[type="submit"].primary){background:linear-gradient(135deg,#2f9cff,#2563ff)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 16px 44px rgba(37,99,255,.26)!important;}
html body :where(.btn.ghost,a.btn.ghost){background:rgba(255,255,255,.04)!important;color:#cfeeff!important;border-color:rgba(112,184,255,.26)!important;}
html body :where(.btn.danger,button.danger,.action-btn.danger){background:linear-gradient(135deg,#ff4775,#ff7a59)!important;color:#fff!important;border-color:transparent!important;}
html body :where(.btn:hover,.action-btn:hover:not(:disabled),.copy-btn:hover,button:not(.plain):hover){background:linear-gradient(135deg,#2f9cff,#2563ff)!important;color:#fff!important;border-color:transparent!important;}
html body :where(.icon,.panel-icon,.server-os-icon,.one-feature-icon,.coin-logo-wrap,.kpi-icon,.nav-ico){background:linear-gradient(135deg,rgba(47,156,255,.24),rgba(13,92,255,.18))!important;color:#dff3ff!important;border:1px solid rgba(112,184,255,.22)!important;}
html body :where(.eyebrow,.tag,.pill,.badge,.status-pill,.status-badge,.invoice-status,.plan-tag,.soft-badge,.location-pill,.wallet-chip){background:rgba(47,156,255,.14)!important;color:#dff4ff!important;border:1px solid rgba(112,184,255,.30)!important;}
html body :where(.status-pill.success,.status-pill.active,.status-pill.online,.status-pill.available,.status-pill.applied,.status-pill.completed,.status-pill.accepted,.status-pill.paid,.status-pill.up,.status-pill.running,.status-pill.ready,.status-pill.synced,.status-pill.enabled,.status-pill.approved,.status-pill.delivered,.status-pill.sent,.status-pill.low,.badge.success,.badge.ok,.badge.online,.badge.ready,.status-badge.status-success,.invoice-status.paid){background:rgba(56,240,120,.13)!important;color:#8dffbd!important;border-color:rgba(56,240,120,.34)!important;}
html body :where(.status-pill.warn,.status-pill.pending,.status-pill.queued,.status-pill.processing,.status-pill.provisioning,.status-pill.creating,.status-pill.scheduled,.status-pill.unpaid,.status-pill.unknown,.status-pill.maintenance,.status-pill.degraded,.status-pill.investigating,.status-pill.action-required,.status-pill.manual,.status-pill.manual-required,.badge.pending,.badge.queued,.badge.running,.badge.manual,.badge.warn,.status-badge.status-pending,.invoice-status.open){background:rgba(255,209,102,.13)!important;color:#ffe199!important;border-color:rgba(255,209,102,.34)!important;}
html body :where(.status-pill.danger,.status-pill.failed,.status-pill.error,.status-pill.suspended,.status-pill.cancelled,.status-pill.canceled,.status-pill.void,.status-pill.terminated,.status-pill.deleted,.status-pill.banned,.status-pill.offline,.status-pill.rejected,.status-pill.disabled,.status-pill.down,.status-pill.blocked,.status-pill.high,.status-pill.critical,.badge.failed,.badge.error,.badge.danger,.badge.offline,.status-badge.status-error,.invoice-status.overdue){background:rgba(255,92,122,.13)!important;color:#ff9db0!important;border-color:rgba(255,92,122,.34)!important;}

/* Tailwind/bootstrap/light utility remnants, including inline white backgrounds. */
html body :where(.bg-white,.bg-light,.table-light,.white,.text-dark,.text-black,.text-slate-900,.text-gray-900,.text-neutral-900,
[class*="bg-white"],[class*="bg-light"],[class*="from-white"],[class*="to-white"],[class*="via-white"],
[style*="background:#fff"],[style*="background: #fff"],[style*="background:#ffffff"],[style*="background: #ffffff"],[style*="background:white"],[style*="background: white"],[style*="background-color:#fff"],[style*="background-color: #fff"],[style*="background-color:#ffffff"],[style*="background-color: #ffffff"],[style*="background-color:white"],[style*="background-color: white"]):not(img):not(svg):not(canvas):not(video){
  background:linear-gradient(180deg,rgba(13,33,60,.97),rgba(7,18,35,.96))!important;
  color:#f7fbff!important;
  border-color:rgba(112,184,255,.24)!important;
}
html body :where(.text-slate-500,.text-gray-500,.text-muted,.text-secondary,.text-neutral-500){color:#c3d4ec!important;}

/* Code blocks remain readable and never stretch cards. */
html body :where(code,pre,.mono,.secret,.code,.kbd){
  background:rgba(37,99,255,.12)!important;
  color:#eaf7ff!important;
  border-color:rgba(112,184,255,.25)!important;
}
html body pre{white-space:pre-wrap!important;overflow-wrap:anywhere!important;word-break:break-word!important;max-width:100%!important;overflow:auto!important;}
html body pre code{white-space:inherit!important;overflow-wrap:inherit!important;word-break:inherit!important;}

/* Keep media/brand images intact, but keep their surrounding frames dark. */
html body img{color:transparent;}
html body .coin-payment-logo,
html body img[src*="qr"],
html body img[alt*="QR"],
html body img[alt*="Payment QR"]{background:#fff!important;}
html body .cms-template-preview{background:#071426!important;border-color:rgba(112,184,255,.24)!important;}

@media(max-width:900px){
  html body .hero-product-card,html body .datacenter-map-card{border-radius:22px!important;padding:20px!important;}
}

/* === Service details + table alignment final pass ===
   This block intentionally sits at the end of the dark guard. It fixes pages
   that render dynamic canvases or old table markup after the main CSS. */
:root{
  --panel:#071426!important;
  --panel-2:#0b1b33!important;
  --border:rgba(112,184,255,.24)!important;
  --blue:#47b5ff!important;
  --purple:#8b7cff!important;
  --green:#38f078!important;
  --orange:#ffd166!important;
  --navy:#f7fbff!important;
}

/* Service detail live graphs: no more white stat boxes/canvases. */
html body :where(.service-metrics-panel,.resource-usage-panel,.metric-card,.metric-number-row span,.metric-chart-tile){
  background:linear-gradient(180deg,rgba(13,33,60,.96),rgba(7,18,35,.96))!important;
  background-color:#071426!important;
  color:#f7fbff!important;
  border-color:rgba(112,184,255,.24)!important;
  box-shadow:none!important;
}
html body .service-metrics-panel .metric-card{
  background:transparent!important;
  border:0!important;
  padding:0!important;
}
html body .metric-card-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:14px!important;
  margin-bottom:16px!important;
}
html body .metric-card-head strong,
html body .metric-number-row strong,
html body .tile-label{
  color:#f8fbff!important;
}
html body .metric-card-head small,
html body .metric-number-row span,
html body .tile-label .muted,
html body [data-metrics-updated]{
  color:#c3d4ec!important;
}
html body .metric-number-row{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  margin-bottom:16px!important;
}
html body .metric-number-row span{
  border-radius:16px!important;
  padding:12px 14px!important;
  min-width:0!important;
}
html body .metric-chart-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
}
html body .metric-chart-tile{
  border-radius:18px!important;
  padding:14px!important;
  min-width:0!important;
  overflow:hidden!important;
}
html body .metric-chart-tile.wide{grid-column:1/-1!important;}
html body .metric-chart-tile canvas,
html body canvas[data-chart]{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  background:#071426!important;
  border:1px solid rgba(112,184,255,.18)!important;
  border-radius:14px!important;
  filter:none!important;
  opacity:1!important;
}
html body .usage-bar{
  background:rgba(5,16,31,.84)!important;
  border:1px solid rgba(112,184,255,.20)!important;
}
html body .usage-bar span{
  background:linear-gradient(90deg,#47b5ff,#2563ff)!important;
}
html body .usage-bar.danger span{
  background:linear-gradient(90deg,#8b7cff,#47b5ff)!important;
}

/* Global table polish: headers align with row cards and wrappers do not overflow. */
html body :where(.responsive-table,.table-scroll,.tw-table-wrap,.csp-table-wrap){
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  border-radius:20px!important;
}
html body :where(table,.table,.admin-modern-table,.cloud-table,.csp-enhanced-table){
  width:100%!important;
  max-width:100%!important;
  border-collapse:separate!important;
  border-spacing:0 8px!important;
  background:transparent!important;
  color:#f7fbff!important;
}
html body :where(table tr:has(th),.csp-table-header-row){
  background:transparent!important;
}
html body :where(table th,.table th,.admin-modern-table th,.cloud-table th,.csp-enhanced-table th){
  background:rgba(13,33,60,.94)!important;
  color:#aecaeb!important;
  border-top:1px solid rgba(112,184,255,.22)!important;
  border-bottom:1px solid rgba(112,184,255,.22)!important;
  padding:12px 14px!important;
  vertical-align:middle!important;
  text-align:left!important;
  font-size:.78rem!important;
  font-weight:950!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
html body :where(table th:first-child,.table th:first-child,.admin-modern-table th:first-child,.cloud-table th:first-child,.csp-enhanced-table th:first-child){
  border-left:1px solid rgba(112,184,255,.22)!important;
  border-radius:14px 0 0 14px!important;
}
html body :where(table th:last-child,.table th:last-child,.admin-modern-table th:last-child,.cloud-table th:last-child,.csp-enhanced-table th:last-child){
  border-right:1px solid rgba(112,184,255,.22)!important;
  border-radius:0 14px 14px 0!important;
}
html body :where(table td,.table td,.admin-modern-table td,.cloud-table td,.csp-enhanced-table td){
  background:rgba(7,20,38,.88)!important;
  color:#eaf4ff!important;
  border-top:1px solid rgba(112,184,255,.18)!important;
  border-bottom:1px solid rgba(112,184,255,.18)!important;
  padding:14px!important;
  vertical-align:middle!important;
}
html body :where(table td:first-child,.table td:first-child,.admin-modern-table td:first-child,.cloud-table td:first-child,.csp-enhanced-table td:first-child){
  border-left:1px solid rgba(112,184,255,.18)!important;
  border-radius:14px 0 0 14px!important;
}
html body :where(table td:last-child,.table td:last-child,.admin-modern-table td:last-child,.cloud-table td:last-child,.csp-enhanced-table td:last-child){
  border-right:1px solid rgba(112,184,255,.18)!important;
  border-radius:0 14px 14px 0!important;
}
html body :where(table tr:hover td,.table tr:hover td,.admin-modern-table tr:hover td,.cloud-table tr:hover td,.csp-enhanced-table tr:hover td){
  background:rgba(13,33,60,.98)!important;
  border-color:rgba(112,184,255,.34)!important;
}
html body .csp-table-controls,
html body .csp-table-footer{
  margin-left:0!important;
  margin-right:0!important;
}
html body .csp-table-controls + :where(.responsive-table,.table-scroll,.tw-table-wrap,.csp-table-wrap,table){
  margin-top:12px!important;
}

@media(max-width:760px){
  html body .metric-number-row,
  html body .metric-chart-grid{grid-template-columns:1fr!important;}
  html body .metric-chart-tile.wide{grid-column:auto!important;}
  html body :where(table th,.table th,.admin-modern-table th,.cloud-table th,.csp-enhanced-table th),
  html body :where(table td,.table td,.admin-modern-table td,.cloud-table td,.csp-enhanced-table td){padding:12px!important;}
}

/* === Sortable table header final polish ===
   Loaded last so every public/admin/dashboard table has the same aligned,
   clickable and more prominent dark header. */
html body :where(table,.table,.admin-modern-table,.cloud-table,.csp-enhanced-table){
  border-spacing:0 10px!important;
}
html body :where(table th,.table th,.admin-modern-table th,.cloud-table th,.csp-enhanced-table th){
  position:relative!important;
  background:linear-gradient(180deg,rgba(17,43,78,.98),rgba(7,20,38,.96))!important;
  color:#cfe5ff!important;
  border-top:1px solid rgba(112,184,255,.34)!important;
  border-bottom:1px solid rgba(112,184,255,.26)!important;
  padding:15px 18px!important;
  min-height:48px!important;
  line-height:1.2!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 26px rgba(0,0,0,.18)!important;
}
html body :where(table th:first-child,.table th:first-child,.admin-modern-table th:first-child,.cloud-table th:first-child,.csp-enhanced-table th:first-child){
  padding-left:22px!important;
  border-left:1px solid rgba(112,184,255,.34)!important;
  border-radius:16px 0 0 16px!important;
}
html body :where(table th:last-child,.table th:last-child,.admin-modern-table th:last-child,.cloud-table th:last-child,.csp-enhanced-table th:last-child){
  padding-right:22px!important;
  border-right:1px solid rgba(112,184,255,.34)!important;
  border-radius:0 16px 16px 0!important;
}
html body .csp-sortable-th{
  cursor:pointer!important;
  user-select:none!important;
  transition:background .16s ease,border-color .16s ease,color .16s ease!important;
}
html body .csp-sortable-th:hover,
html body .csp-sortable-th:focus{
  background:linear-gradient(180deg,rgba(27,70,124,.98),rgba(10,32,60,.98))!important;
  color:#f5fbff!important;
  border-color:rgba(71,181,255,.56)!important;
  outline:none!important;
}
html body .csp-sortable-th:focus-visible{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 3px rgba(47,156,255,.22),0 10px 26px rgba(0,0,0,.18)!important;
}
html body .csp-sort-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:18px!important;
  height:18px!important;
  margin-left:8px!important;
  border-radius:999px!important;
  color:#6fbfff!important;
  background:rgba(47,156,255,.10)!important;
  border:1px solid rgba(112,184,255,.20)!important;
  font-size:.72rem!important;
  line-height:1!important;
  vertical-align:middle!important;
}
html body :where(th.is-sorted-asc,th.is-sorted-desc){
  color:#ffffff!important;
  background:linear-gradient(180deg,rgba(37,99,169,.98),rgba(10,35,70,.98))!important;
  border-color:rgba(71,181,255,.70)!important;
}
html body :where(th.is-sorted-asc,th.is-sorted-desc) .csp-sort-icon{
  color:#ffffff!important;
  background:linear-gradient(135deg,#2f9cff,#2563ff)!important;
  border-color:transparent!important;
}
html body .csp-table-controls{
  margin-bottom:16px!important;
}
html body .csp-table-wrap{
  padding-top:2px!important;
}
@media(max-width:760px){
  html body :where(table th,.table th,.admin-modern-table th,.cloud-table th,.csp-enhanced-table th){padding:13px 14px!important;}
  html body :where(table th:first-child,.table th:first-child,.admin-modern-table th:first-child,.cloud-table th:first-child,.csp-enhanced-table th:first-child){padding-left:16px!important;}
  html body :where(table th:last-child,.table th:last-child,.admin-modern-table th:last-child,.cloud-table th:last-child,.csp-enhanced-table th:last-child){padding-right:16px!important;}
}


/* === Final table head padding/alignment pass ===
   Keep all generated sortable headers visually centered and aligned with rows. */
html body :where(table,.table,.admin-modern-table,.cloud-table,.csp-enhanced-table){
  border-spacing:0 10px!important;
}
html body :where(table thead tr,table tr.csp-table-header-row){
  height:auto!important;
}
html body :where(table th,.table th,.admin-modern-table th,.cloud-table th,.csp-enhanced-table th){
  height:52px!important;
  min-height:52px!important;
  padding:15px 18px!important;
  line-height:1.25!important;
  vertical-align:middle!important;
  box-sizing:border-box!important;
  background:linear-gradient(180deg,rgba(18,47,84,.99),rgba(8,25,47,.98))!important;
  border-top:1px solid rgba(112,184,255,.40)!important;
  border-bottom:1px solid rgba(112,184,255,.30)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 28px rgba(0,0,0,.20)!important;
}
html body :where(table th:first-child,.table th:first-child,.admin-modern-table th:first-child,.cloud-table th:first-child,.csp-enhanced-table th:first-child){
  padding-left:22px!important;
  border-left:1px solid rgba(112,184,255,.40)!important;
  border-radius:17px 0 0 17px!important;
}
html body :where(table th:last-child,.table th:last-child,.admin-modern-table th:last-child,.cloud-table th:last-child,.csp-enhanced-table th:last-child){
  padding-right:22px!important;
  border-right:1px solid rgba(112,184,255,.40)!important;
  border-radius:0 17px 17px 0!important;
}
html body .csp-sortable-th{
  padding:0!important;
}
html body .csp-sortable-th .csp-th-inner{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  width:100%!important;
  min-height:52px!important;
  padding:0 18px!important;
  box-sizing:border-box!important;
}
html body .csp-sortable-th:first-child .csp-th-inner{padding-left:22px!important;}
html body .csp-sortable-th:last-child .csp-th-inner{padding-right:22px!important;}
html body .csp-th-label{
  display:block!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  line-height:1.25!important;
}
html body .csp-sort-icon{
  flex:0 0 20px!important;
  width:20px!important;
  height:20px!important;
  margin-left:auto!important;
}
html body :where(table td,.table td,.admin-modern-table td,.cloud-table td,.csp-enhanced-table td){
  padding:15px 18px!important;
  line-height:1.45!important;
  box-sizing:border-box!important;
}
html body :where(table td:first-child,.table td:first-child,.admin-modern-table td:first-child,.cloud-table td:first-child,.csp-enhanced-table td:first-child){padding-left:22px!important;}
html body :where(table td:last-child,.table td:last-child,.admin-modern-table td:last-child,.cloud-table td:last-child,.csp-enhanced-table td:last-child){padding-right:22px!important;}
@media(max-width:760px){
  html body :where(table th,.table th,.admin-modern-table th,.cloud-table th,.csp-enhanced-table th){height:48px!important;min-height:48px!important;padding:13px 14px!important;}
  html body .csp-sortable-th{padding:0!important;}
  html body .csp-sortable-th .csp-th-inner{min-height:48px!important;padding:0 14px!important;}
  html body .csp-sortable-th:first-child .csp-th-inner{padding-left:16px!important;}
  html body .csp-sortable-th:last-child .csp-th-inner{padding-right:16px!important;}
  html body :where(table td,.table td,.admin-modern-table td,.cloud-table td,.csp-enhanced-table td){padding:13px 14px!important;}
}


/* Final table overflow + header alignment guard
   Ensures wide admin/customer tables are never visually clipped and table heads line up cleanly. */
html body :where(.card,.panel,.service-table-card,.admin-card,.clean-panel,.table-panel,.csp-table-parent):has(.csp-enhanced-table),
html body :where(.card,.panel,.service-table-card,.admin-card,.clean-panel,.table-panel,.csp-table-parent):has(.csp-table-wrap){
  overflow:visible!important;
}

html body :where(.responsive-table,.table-scroll,.tw-table-wrap,.csp-table-wrap){
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-x:contain!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(71,181,255,.70) rgba(5,16,31,.70)!important;
  padding-bottom:8px!important;
}

html body :where(.responsive-table,.table-scroll,.tw-table-wrap,.csp-table-wrap)::-webkit-scrollbar{height:11px!important;}
html body :where(.responsive-table,.table-scroll,.tw-table-wrap,.csp-table-wrap)::-webkit-scrollbar-track{
  background:rgba(5,16,31,.72)!important;border-radius:999px!important;
}
html body :where(.responsive-table,.table-scroll,.tw-table-wrap,.csp-table-wrap)::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg,#2f9cff,#2563ff)!important;border-radius:999px!important;border:2px solid rgba(5,16,31,.72)!important;
}

html body table.csp-enhanced-table{
  width:max-content!important;
  min-width:100%!important;
  max-width:none!important;
  table-layout:auto!important;
  border-collapse:separate!important;
  border-spacing:0 10px!important;
}

html body table.csp-enhanced-table th,
html body table.csp-enhanced-table td{
  box-sizing:border-box!important;
  max-width:none!important;
}

html body table.csp-enhanced-table thead th,
html body table.csp-enhanced-table tr.csp-table-header-row th{
  position:relative!important;
  height:54px!important;
  min-height:54px!important;
  padding:0!important;
  vertical-align:middle!important;
  white-space:nowrap!important;
  overflow:visible!important;
  background:linear-gradient(180deg,rgba(11,28,52,.98),rgba(5,16,31,.98))!important;
  border-top:1px solid rgba(112,184,255,.28)!important;
  border-bottom:1px solid rgba(112,184,255,.18)!important;
  color:#d9eaff!important;
  text-shadow:0 1px 0 rgba(0,0,0,.35)!important;
}

html body table.csp-enhanced-table thead th:first-child,
html body table.csp-enhanced-table tr.csp-table-header-row th:first-child{
  border-left:1px solid rgba(112,184,255,.28)!important;
  border-radius:16px 0 0 16px!important;
}
html body table.csp-enhanced-table thead th:last-child,
html body table.csp-enhanced-table tr.csp-table-header-row th:last-child{
  border-right:1px solid rgba(112,184,255,.28)!important;
  border-radius:0 16px 16px 0!important;
  padding-right:12px!important;
}

html body table.csp-enhanced-table th .csp-th-inner{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  min-height:54px!important;
  width:100%!important;
  padding:0 18px!important;
  box-sizing:border-box!important;
}

html body table.csp-enhanced-table th .csp-th-label{
  display:block!important;
  min-width:max-content!important;
  overflow:visible!important;
  line-height:1.1!important;
  font-size:.78rem!important;
  font-weight:950!important;
  letter-spacing:.10em!important;
  text-transform:uppercase!important;
}

html body table.csp-enhanced-table th .csp-sort-icon{
  display:inline-grid!important;
  place-items:center!important;
  flex:0 0 20px!important;
  width:20px!important;
  height:20px!important;
  border-radius:999px!important;
  border:1px solid rgba(71,181,255,.55)!important;
  background:rgba(47,156,255,.13)!important;
  color:#8fd0ff!important;
  font-size:12px!important;
  line-height:1!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
  margin-left:2px!important;
}

html body table.csp-enhanced-table th.csp-sortable-th{
  cursor:pointer!important;
  user-select:none!important;
}
html body table.csp-enhanced-table th.csp-sortable-th:hover{
  background:linear-gradient(180deg,rgba(15,43,78,.98),rgba(7,22,42,.98))!important;
}
html body table.csp-enhanced-table th.is-sorted-asc .csp-sort-icon,
html body table.csp-enhanced-table th.is-sorted-desc .csp-sort-icon{
  background:linear-gradient(135deg,#2f9cff,#2563ff)!important;
  color:#fff!important;
  border-color:transparent!important;
}

html body table.csp-enhanced-table td{
  padding:14px 18px!important;
  white-space:nowrap!important;
  vertical-align:middle!important;
}

html body .csp-table-scroll-hint{
  display:none;
  width:max-content;
  max-width:100%;
  margin:2px 0 8px!important;
  padding:7px 11px!important;
  border:1px solid rgba(112,184,255,.22)!important;
  border-radius:999px!important;
  background:rgba(47,156,255,.10)!important;
  color:#aecaeb!important;
  font-size:.76rem!important;
  font-weight:850!important;
  letter-spacing:.02em!important;
}
html body .csp-table-scroll-hint:not([hidden]){display:block!important;}

@media(max-width:920px){
  html body table.csp-enhanced-table{
    width:100%!important;
    min-width:0!important;
    border-spacing:0 12px!important;
  }
  html body table.csp-enhanced-table thead,
  html body table.csp-enhanced-table tr.csp-table-header-row{
    display:none!important;
  }
  html body table.csp-enhanced-table td{
    white-space:normal!important;
  }
}


/* No-scroll table fit guard
   This supersedes the previous overflow guard: tables should fit neatly inside
   the card/page instead of adding an extra horizontal scrollbar. */
html body :where(.responsive-table,.table-scroll,.tw-table-wrap,.csp-table-wrap){
  overflow-x:visible!important;
  overflow-y:visible!important;
  padding-bottom:0!important;
  max-width:100%!important;
}
html body :where(.responsive-table,.table-scroll,.tw-table-wrap,.csp-table-wrap)::-webkit-scrollbar{display:none!important;height:0!important;}
html body :where(table,.table,.service-table,.tw-table,.admin-modern-table,.cloud-table,table.csp-enhanced-table){
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  table-layout:fixed!important;
  border-collapse:separate!important;
  border-spacing:0 10px!important;
}
html body table.csp-enhanced-table{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  table-layout:fixed!important;
}
html body :where(table th,.table th,.service-table th,.tw-table th,.admin-modern-table th,.cloud-table th,table.csp-enhanced-table th){
  min-width:0!important;
  max-width:none!important;
  overflow:visible!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:anywhere!important;
}
html body table.csp-enhanced-table thead th,
html body table.csp-enhanced-table tr.csp-table-header-row th{
  height:auto!important;
  min-height:52px!important;
  white-space:normal!important;
  overflow:visible!important;
}
html body table.csp-enhanced-table th .csp-th-inner{
  min-height:52px!important;
  height:auto!important;
  padding:10px 12px!important;
  gap:7px!important;
  justify-content:flex-start!important;
  align-items:center!important;
  min-width:0!important;
  max-width:100%!important;
}
html body table.csp-enhanced-table th:first-child .csp-th-inner{padding-left:16px!important;}
html body table.csp-enhanced-table th:last-child .csp-th-inner{padding-right:16px!important;}
html body table.csp-enhanced-table th .csp-th-label{
  min-width:0!important;
  max-width:100%!important;
  flex:1 1 auto!important;
  display:block!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  line-height:1.22!important;
  font-size:clamp(.66rem,.72vw,.78rem)!important;
  letter-spacing:.075em!important;
}
html body table.csp-enhanced-table th .csp-sort-icon{
  flex:0 0 18px!important;
  width:18px!important;
  height:18px!important;
  font-size:11px!important;
  margin-left:4px!important;
}
html body :where(table td,.table td,.service-table td,.tw-table td,.admin-modern-table td,.cloud-table td,table.csp-enhanced-table td){
  min-width:0!important;
  max-width:100%!important;
  padding:13px 12px!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:anywhere!important;
  vertical-align:middle!important;
}
html body :where(table td:first-child,.table td:first-child,.service-table td:first-child,.tw-table td:first-child,.admin-modern-table td:first-child,.cloud-table td:first-child,table.csp-enhanced-table td:first-child){padding-left:16px!important;}
html body :where(table td:last-child,.table td:last-child,.service-table td:last-child,.tw-table td:last-child,.admin-modern-table td:last-child,.cloud-table td:last-child,table.csp-enhanced-table td:last-child){padding-right:16px!important;}
html body .csp-table-scroll-hint{display:none!important;}
html body .server-actions,
html body .tw-actions-cell,
html body td .actions,
html body td form.actions{
  min-width:0!important;
  max-width:100%!important;
  white-space:normal!important;
  flex-wrap:wrap!important;
}
@media(max-width:1200px){
  html body table.csp-enhanced-table th .csp-th-inner{padding:9px 9px!important;gap:5px!important;}
  html body table.csp-enhanced-table th .csp-th-label{font-size:.66rem!important;letter-spacing:.055em!important;}
  html body table.csp-enhanced-table th .csp-sort-icon{width:16px!important;height:16px!important;flex-basis:16px!important;font-size:10px!important;}
  html body table.csp-enhanced-table td{padding:12px 9px!important;font-size:.9rem!important;}
}


/* Final no-overlap table text handling
   Keep tables fitted without horizontal scrollbars, but prevent long values from painting over other columns. */
html body table.csp-enhanced-table{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  table-layout:fixed!important;
}

html body table.csp-enhanced-table th,
html body table.csp-enhanced-table td{
  min-width:0!important;
  max-width:1px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

html body table.csp-enhanced-table th .csp-th-inner{
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
}

html body table.csp-enhanced-table th .csp-th-label{
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

html body table.csp-enhanced-table td :where(a,span,strong,small,code,.mono,.secret,.server-title,.service-title,.badge,.status-pill,.btn){
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  vertical-align:middle!important;
}

html body table.csp-enhanced-table td :where(a,span,strong,small,code,.mono,.secret,.server-title,.service-title){
  display:inline-block!important;
}

/* Keep action buttons usable; only text inside cells should truncate. */
html body table.csp-enhanced-table td :where(.actions,.server-actions,.tw-actions-cell,.action-buttons,.btn-group){
  display:flex!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:normal!important;
  flex-wrap:wrap!important;
  gap:6px!important;
}

html body table.csp-enhanced-table td :where(button,.btn,.action-btn){
  flex:0 0 auto!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
}

/* Details/summary payload cells: keep summary compact, but allow opened content to wrap. */
html body table.csp-enhanced-table td details{
  max-width:100%!important;
  overflow:hidden!important;
}
html body table.csp-enhanced-table td details > summary{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
html body table.csp-enhanced-table td details[open]{
  overflow:visible!important;
  white-space:normal!important;
}
html body table.csp-enhanced-table td details[open] :where(pre,code){
  display:block!important;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  max-width:100%!important;
  overflow:auto!important;
}

/* Column sizing for common admin/worker/action tables so IDs/status/actions stay readable. */
html body table.csp-enhanced-table th:nth-child(1),
html body table.csp-enhanced-table td:nth-child(1){width:9%!important;}
html body table.csp-enhanced-table th:nth-last-child(1),
html body table.csp-enhanced-table td:nth-last-child(1){width:14%!important;}
html body table.csp-enhanced-table th:nth-last-child(2),
html body table.csp-enhanced-table td:nth-last-child(2){width:18%!important;}

html body table.csp-enhanced-table td[title],
html body table.csp-enhanced-table th[title]{
  cursor:help!important;
}


/* Queue admin manual status actions */
html body .queue-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:6px!important;
  flex-wrap:wrap!important;
  min-width:190px!important;
  overflow:visible!important;
}
html body .queue-actions .btn{
  min-height:34px!important;
  padding:7px 10px!important;
  font-size:.78rem!important;
  line-height:1!important;
  flex:0 0 auto!important;
}
html body .btn.success{
  background:rgba(34,197,94,.14)!important;
  border-color:rgba(34,197,94,.38)!important;
  color:#9af7b8!important;
}
html body .btn.success:hover{
  background:rgba(34,197,94,.24)!important;
  border-color:rgba(34,197,94,.58)!important;
  color:#fff!important;
}
html body .queue-table td:last-child{
  overflow:visible!important;
  text-overflow:clip!important;
}


/* Public design refresh inspired by premium cloud hosts, adapted to cybaaspace. */
html body{
  background:
    radial-gradient(circle at 8% 12%, rgba(61,144,255,.10), transparent 26%),
    radial-gradient(circle at 88% 8%, rgba(122,92,255,.10), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(53,180,255,.07), transparent 30%),
    linear-gradient(180deg,#050d18 0%,#081321 32%,#09182b 100%)!important;
}
html body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(180deg, rgba(255,255,255,.24), transparent 82%);
  opacity:.28;
}
html body .topbar{
  background:rgba(6,15,29,.78)!important;
  border-bottom:1px solid rgba(115,167,230,.15)!important;
  box-shadow:0 10px 30px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(20px)!important;
}
html body .topbar:after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent, rgba(53,180,255,.55), rgba(122,92,255,.4), transparent);
}
html body .brand-link{position:relative!important;}
html body .brand-link:after{
  content:"cybaaspace";
  position:absolute;
  left:calc(100% + 12px);
  top:50%;
  transform:translateY(-50%);
  color:#d6e7ff;
  font-size:.76rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  opacity:.72;
  font-weight:800;
}
html body .public-nav{justify-content:flex-start!important;gap:8px!important;}
html body .top-link{
  background:rgba(255,255,255,.01)!important;
  border:1px solid transparent!important;
}
html body .top-link:hover,
html body .top-link.active{
  background:linear-gradient(135deg, rgba(53,180,255,.18), rgba(122,92,255,.15))!important;
  border-color:rgba(95,160,255,.22)!important;
  transform:translateY(-1px)!important;
}
html body .public-hero,
html body .home-hero,
html body .one-packages-hero,
html body .payment-hero,
html body .status-hero{
  position:relative!important;
  overflow:hidden!important;
  padding:58px!important;
  border-radius:38px!important;
  border:1px solid rgba(116,162,221,.18)!important;
  background:
    radial-gradient(circle at 0% 0%, rgba(70,128,255,.18), transparent 26%),
    radial-gradient(circle at 100% 0%, rgba(122,92,255,.18), transparent 28%),
    linear-gradient(180deg, rgba(8,19,35,.95), rgba(8,19,35,.86))!important;
  box-shadow:0 38px 100px rgba(0,0,0,.34)!important;
}
html body .public-hero:before,
html body .public-hero:after{
  content:""!important;
  position:absolute!important;
  border-radius:999px!important;
  pointer-events:none!important;
}
html body .public-hero:before{
  width:420px!important;
  height:420px!important;
  right:-150px!important;
  top:-110px!important;
  background:radial-gradient(circle, rgba(53,180,255,.22), transparent 65%)!important;
}
html body .public-hero:after{
  width:360px!important;
  height:360px!important;
  left:-140px!important;
  bottom:-160px!important;
  background:radial-gradient(circle, rgba(122,92,255,.18), transparent 66%)!important;
}
html body .hero-backdrop-art{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
html body .hero-backdrop-art .orb,
html body .hero-backdrop-art .beam{position:absolute;display:block;}
html body .hero-backdrop-art .orb{border-radius:999px;filter:blur(4px);opacity:.9;}
html body .hero-backdrop-art .orb-a{width:160px;height:160px;right:34%;top:8%;background:radial-gradient(circle, rgba(53,180,255,.40), transparent 72%);}
html body .hero-backdrop-art .orb-b{width:240px;height:240px;right:-40px;bottom:-70px;background:radial-gradient(circle, rgba(122,92,255,.34), transparent 70%);}
html body .hero-backdrop-art .orb-c{width:160px;height:160px;left:-50px;top:35%;background:radial-gradient(circle, rgba(33,92,179,.18), transparent 70%);}
html body .hero-backdrop-art .beam{height:1px;background:linear-gradient(90deg, transparent, rgba(95,196,255,.55), transparent);transform:rotate(-14deg);opacity:.7;}
html body .hero-backdrop-art .beam-a{width:300px;left:4%;top:18%;}
html body .hero-backdrop-art .beam-b{width:260px;right:10%;bottom:18%;transform:rotate(10deg);}
html body .hero-copy,
html body .hero-product-card{position:relative;z-index:1;}
html body .hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 18px;
  color:#91bff6;
  font-size:.88rem;
  font-weight:700;
  letter-spacing:.02em;
}
html body .hero-kicker:before{
  content:"";
  width:38px;
  height:1px;
  display:inline-block;
  background:linear-gradient(90deg, rgba(53,180,255,.9), rgba(122,92,255,.55));
}
html body .public-hero h1,
html body .home-hero h1,
html body .one-packages-hero h1,
html body .payment-hero h1,
html body .status-hero h1{
  max-width:10.4ch!important;
  letter-spacing:-.075em!important;
  font-size:clamp(3rem,6vw,5.7rem)!important;
}
html body .hero-copy .lead{max-width:760px!important;color:#b9cde8!important;font-size:1.08rem!important;line-height:1.78!important;}
html body .hero-note-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:0 0 26px;
}
html body .hero-note-grid > div{
  position:relative;
  padding:16px 16px 16px 18px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(11,29,53,.85), rgba(7,18,35,.88));
  border:1px solid rgba(110,170,255,.16);
  box-shadow:0 18px 40px rgba(0,0,0,.18);
}
html body .hero-note-grid > div:before{
  content:"";
  position:absolute;
  left:0;
  top:18px;
  bottom:18px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg,#35b4ff,#7a5cff);
}
html body .hero-note-grid small{display:block;color:#86afe2!important;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800;margin-bottom:8px;}
html body .hero-note-grid strong{display:block;color:#fff!important;font-size:1rem;margin-bottom:6px;}
html body .hero-note-grid span{display:block;color:#a8bedc!important;line-height:1.55;font-size:.9rem;}
html body .trust-row{gap:12px!important;}
html body .trust-row span{
  padding:10px 14px!important;
  background:rgba(7,20,38,.76)!important;
  border:1px solid rgba(112,184,255,.16)!important;
  color:#c9d8ef!important;
}
html body .trust-row strong{color:#fff!important;}
html body .hero-product-card-unique{
  padding:22px!important;
  border-radius:30px!important;
  border:1px solid rgba(111,166,230,.20)!important;
  background:linear-gradient(180deg, rgba(10,25,46,.92), rgba(6,15,28,.92))!important;
  box-shadow:0 34px 72px rgba(0,0,0,.3)!important;
}
html body .hero-orbit-board{
  position:relative;
  min-height:180px;
  margin-bottom:14px;
  border-radius:26px;
  overflow:hidden;
  border:1px solid rgba(112,184,255,.14);
  background:radial-gradient(circle at 50% 50%, rgba(53,180,255,.08), transparent 38%), linear-gradient(180deg, rgba(5,16,31,.92), rgba(7,20,38,.88));
}
html body .hero-orbit-board svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
html body .orbit-node{
  position:absolute;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  min-height:34px;
  border-radius:999px;
  background:rgba(7,20,38,.88);
  border:1px solid rgba(111,166,230,.22);
  color:#f4f8ff;
  font-size:.76rem;
  font-weight:800;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
html body .orbit-node:before{
  content:"";
  width:8px;
  height:8px;
  margin-right:8px;
  border-radius:999px;
  background:linear-gradient(135deg,#35b4ff,#7a5cff);
  box-shadow:0 0 12px rgba(53,180,255,.5);
}
html body .orbit-node-core{left:50%;top:50%;transform:translate(-50%,-50%);}
html body .orbit-node-api{left:22px;top:20px;}
html body .orbit-node-network{right:20px;top:16px;}
html body .orbit-node-vps{left:34px;bottom:18px;}
html body .orbit-node-billing{left:50%;bottom:12px;transform:translateX(-50%);}
html body .orbit-node-metal{right:18px;bottom:18px;}
html body .mini-dashboard-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:13px 14px!important;
  border-radius:18px!important;
  background:linear-gradient(180deg, rgba(12,31,57,.92), rgba(8,19,35,.94))!important;
}
html body .mini-dashboard-head em{
  margin-left:auto;
  color:#94b4da;
  font-size:.78rem;
  font-style:normal;
  line-height:1.4;
  text-align:right;
}
html body .hero-metric-grid{gap:14px!important;margin:16px 0 14px!important;}
html body .hero-metric-grid div{
  position:relative;
  padding:18px!important;
  border-radius:20px!important;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(12,31,57,.88), rgba(7,20,38,.92))!important;
  border:1px solid rgba(112,184,255,.16)!important;
}
html body .hero-metric-grid div:after{
  content:"";
  position:absolute;
  inset:auto -12px -34px auto;
  width:84px;
  height:84px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(53,180,255,.18), transparent 68%);
}
html body .hero-terminal{
  border:1px solid rgba(122,181,255,.18)!important;
  background:linear-gradient(180deg, rgba(6,16,30,.98), rgba(4,12,24,.98))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 16px 36px rgba(0,0,0,.24)!important;
}
html body .feature-section-head .section-chip-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}
html body .feature-section-head .section-chip-row span{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(8,21,40,.78);
  color:#cfe2fb;
  border:1px solid rgba(112,184,255,.14);
  font-size:.85rem;
  font-weight:700;
}
html body .featured-packages{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;
  gap:18px!important;
}
html body .featured-card{
  position:relative!important;
  overflow:hidden!important;
  min-height:100%!important;
  padding:24px!important;
  border-radius:26px!important;
  background:linear-gradient(180deg, rgba(10,24,45,.98), rgba(6,15,28,.98))!important;
  border:1px solid rgba(112,184,255,.16)!important;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease!important;
}
html body .featured-card:before{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  top:0;
  height:3px;
  border-radius:0 0 999px 999px;
  background:linear-gradient(90deg, rgba(53,180,255,.9), rgba(122,92,255,.7));
  opacity:.9;
}
html body .featured-card:after{
  content:"";
  position:absolute;
  right:-30px;
  top:-24px;
  width:130px;
  height:130px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(53,180,255,.14), transparent 72%);
}
html body .featured-card:hover{
  transform:translateY(-6px) rotate(-.15deg)!important;
  border-color:rgba(112,184,255,.28)!important;
  box-shadow:0 26px 70px rgba(0,0,0,.3)!important;
}
html body .featured-card.featured{
  transform:translateY(-10px) rotate(-.35deg)!important;
  border-color:rgba(95,178,255,.38)!important;
  box-shadow:0 32px 86px rgba(0,0,0,.34)!important;
}
html body .plan-tag,
html body .plan-kind{
  background:rgba(53,180,255,.12)!important;
  color:#9bd5ff!important;
  border:1px solid rgba(112,184,255,.16)!important;
}
html body .featured-card ul{gap:10px!important;}
html body .featured-card li{color:#d5e6fa!important;}
html body .featured-card li:before{color:#5de39f!important;}
html body .feature-list-clean{gap:16px!important;}
html body .feature-list-clean div{
  position:relative!important;
  padding:18px 20px 18px 58px!important;
  border-radius:22px!important;
  background:linear-gradient(180deg, rgba(10,24,45,.96), rgba(7,18,35,.98))!important;
  border:1px solid rgba(112,184,255,.16)!important;
}
html body .feature-list-clean div:before{
  content:"";
  position:absolute;
  left:20px;
  top:22px;
  width:22px;
  height:22px;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(53,180,255,.24), rgba(122,92,255,.22));
  border:1px solid rgba(112,184,255,.18);
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}
html body .feature-list-clean div:after{
  content:"";
  position:absolute;
  left:27px;
  top:29px;
  width:8px;
  height:8px;
  border-radius:999px;
  background:#6ee7ff;
  box-shadow:0 0 12px rgba(110,231,255,.5);
}
html body .datacenter-map-card,
html body .dark-datacenter-map{
  border-radius:30px!important;
  background:
    radial-gradient(circle at 18% 22%, rgba(53,180,255,.14), transparent 26%),
    radial-gradient(circle at 82% 10%, rgba(122,92,255,.14), transparent 24%),
    linear-gradient(180deg, rgba(8,19,35,.98), rgba(7,18,35,.98))!important;
}
html body .dotted-world-map,
html body .enhanced-map{
  background:linear-gradient(180deg,#071426,#091b32)!important;
  border-radius:26px!important;
  border:1px solid rgba(112,184,255,.14)!important;
}
html body .map-location-label{
  transform:translateY(-4px);
}
html body .cta-band{
  position:relative!important;
  overflow:hidden!important;
  border:1px solid rgba(112,184,255,.18)!important;
  border-radius:32px!important;
  background:
    radial-gradient(circle at 0% 50%, rgba(53,180,255,.18), transparent 28%),
    radial-gradient(circle at 90% 50%, rgba(122,92,255,.16), transparent 26%),
    linear-gradient(135deg, rgba(10,24,45,.98), rgba(7,18,35,.98))!important;
  box-shadow:0 28px 70px rgba(0,0,0,.28)!important;
}
html body .cta-band:before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg,#35b4ff,#7a5cff);
}
html body .footer{border-top-color:rgba(112,184,255,.12)!important;}
@media(max-width:1100px){
  html body .hero-note-grid{grid-template-columns:1fr!important;}
}
@media(max-width:900px){
  html body .brand-link:after{display:none!important;}
  html body .public-hero,
  html body .home-hero,
  html body .one-packages-hero,
  html body .payment-hero,
  html body .status-hero{padding:34px!important;}
}
@media(max-width:720px){
  html body .hero-orbit-board{min-height:220px!important;}
  html body .mini-dashboard-head{display:grid!important;justify-content:start!important;}
  html body .mini-dashboard-head em{text-align:left!important;margin-left:0!important;}
  html body .hero-note-grid{margin-bottom:18px!important;}
}