/* ==========================================================================
   VPNXHUB Client Premium — Enterprise SaaS UI (client-dashboard-page only)
   Visual redesign: layout, colors, typography, cards, tables, forms.
   No functional changes — scoped exclusively to .client-dashboard-page:not(.admin-page)
   ========================================================================== */

.client-dashboard-page:not(.admin-page) {
  --client-sidebar-w: 340px;
  --client-header-offset: 92px;
  /* Professional control-panel palette (HostBrr-style) */
  --client-accent: #2563eb;
  --client-accent-soft: rgba(37, 99, 235, 0.18);
  --client-highlight: #2563eb;
  --client-highlight-soft: rgba(37, 99, 235, 0.12);
  --client-success: #10b981;
  --client-warn: #f59e0b;
  --client-danger: #ef4444;
  --client-surface-0: var(--bg-0);
  --client-surface-1: var(--bg-1);
  --client-surface-2: var(--bg-2);
  --client-surface-3: #111111;
  --client-border: rgba(255, 255, 255, 0.08);
  --client-border-hover: rgba(37, 99, 235, 0.35);
  --client-text: #ffffff;
  --client-muted: #9ca3af;
  --client-radius: 10px;
  --client-radius-lg: 12px;
  --client-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  --client-shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.45);
  --client-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --ctx-accent: #60a5fa;
  --ctx-accent-rgb: 96, 165, 250;
  --ctx-accent-deep-rgb: 37, 99, 235;
}

/* --- Background: flat, follows active theme --- */
.client-dashboard-page:not(.admin-page) {
  background: var(--client-surface-0);
}

html[data-theme='dark-black'] body.client-dashboard-page:not(.admin-page) {
  background: #000000;
}

html[data-theme='dark-black'] .client-dashboard-page:not(.admin-page) {
  --client-surface-0: #000000;
  --client-surface-1: #050505;
  --client-surface-2: #0a0a0a;
  --client-surface-3: #111111;
  --client-border: rgba(255, 255, 255, 0.1);
}

.client-dashboard-page:not(.admin-page)::before {
  display: none;
}

.client-dashboard-page:not(.admin-page) .bg-bubbles {
  display: none;
}

/* --- Header (keep fixed positioning from styles.css; only restyle) --- */
.client-dashboard-page:not(.admin-page) .site-header.auth-header {
  z-index: 1000;
  background: var(--client-surface-0);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--client-border);
  box-shadow: none;
}

.client-dashboard-page:not(.admin-page) .site-header .container {
  width: 100%;
  max-width: none;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1025px) {
  .client-dashboard-page:not(.admin-page) .site-header .container {
    padding-left: calc(var(--client-sidebar-w) + 28px);
  }
}

.client-dashboard-page:not(.admin-page) .auth-header .nav-shell {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 10px 0;
  border-radius: 0;
}

.client-dashboard-page:not(.admin-page) .brand-mark {
  border: 1px solid rgba(37, 99, 235, 0.35);
  background: var(--client-accent);
  color: #ffffff;
  text-shadow: none;
  box-shadow: none;
}

/* --- Main layout: fixed left sidebar + full content --- */
@media (min-width: 1025px) {
  .client-dashboard-page:not(.admin-page) .client-dashboard {
    padding-left: var(--client-sidebar-w);
    min-height: calc(100vh - var(--header-height));
  }

  .client-dashboard-page:not(.admin-page) .dash-shell {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 28px 32px;
    gap: 0;
  }

  .client-dashboard-page:not(.admin-page) .dash-sidebar {
    position: fixed;
    left: 0;
    top: var(--client-header-offset);
    bottom: auto;
    width: var(--client-sidebar-w);
    height: calc(100dvh - var(--client-header-offset));
    max-height: calc(100dvh - var(--client-header-offset));
    margin: 0;
    padding: 16px 12px 20px;
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--client-border);
    background: var(--client-surface-1);
    box-shadow: none;
    z-index: 150;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(37, 99, 235, 0.25) transparent;
  }

  .client-dashboard-page:not(.admin-page) .dash-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(37, 99, 235, 0.25) transparent;
  }

  .client-dashboard-page:not(.admin-page) .dash-content {
    max-width: none;
    width: 100%;
  }
}

/* --- Sidebar branding block --- */
.client-dashboard-page:not(.admin-page) .dash-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.client-dashboard-page:not(.admin-page) .dash-sidebar-title {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--client-border);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--client-text);
  position: relative;
}

.client-dashboard-page:not(.admin-page) .dash-sidebar-title .dash-sidebar-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  animation: dash-sidebar-online-pulse 2s ease-in-out infinite;
}

.client-dashboard-page:not(.admin-page) .dash-sidebar-online {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4ade80;
}

@keyframes dash-sidebar-online-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45);
  }

  50% {
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0);
  }
}

/* Sidebar group titles — uniform muted gray */
.client-dashboard-page:not(.admin-page) .dash-nav-group:nth-child(1) .dash-nav-group-title,
.client-dashboard-page:not(.admin-page) .dash-nav-group:nth-child(2) .dash-nav-group-title,
.client-dashboard-page:not(.admin-page) .dash-nav-group:nth-child(3) .dash-nav-group-title {
  color: var(--client-muted);
}

/* --- Sidebar navigation --- */
.client-dashboard-page:not(.admin-page) .dash-nav {
  flex: 1 1 auto;
  min-height: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  gap: 8px;
}

.client-dashboard-page:not(.admin-page) .dash-nav-group {
  gap: 8px;
}

.client-dashboard-page:not(.admin-page) .dash-nav-group-title {
  padding: 12px 12px 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #64748b;
}

.client-dashboard-page:not(.admin-page) .dash-nav .dashboard-menu-item {
  min-height: 56px;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--client-muted);
  gap: 14px;
  --nav-accent: #60a5fa;
  --nav-accent-rgb: 96, 165, 250;
  --nav-accent-deep-rgb: 37, 99, 235;
  transition:
    color var(--client-transition),
    background-color var(--client-transition),
    border-color var(--client-transition);
}

.client-dashboard-page:not(.admin-page) .dash-nav .dashboard-menu-item .dash-nav-ico {
  width: 24px;
  height: 24px;
  color: #64748b;
  transition: color var(--client-transition);
}

.client-dashboard-page:not(.admin-page) .dash-nav .dashboard-menu-item:hover,
.client-dashboard-page:not(.admin-page) .dash-nav .dashboard-menu-item:focus-visible {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.2);
  color: var(--client-text);
  outline: none;
}

.client-dashboard-page:not(.admin-page) .dash-nav .dashboard-menu-item:hover .dash-nav-ico,
.client-dashboard-page:not(.admin-page) .dash-nav .dashboard-menu-item:focus-visible .dash-nav-ico {
  color: var(--nav-accent);
  opacity: 1;
}

.client-dashboard-page:not(.admin-page) .dash-nav .dashboard-menu-item.is-active {
  background: var(--client-accent);
  border-color: var(--client-accent);
  color: #ffffff;
  font-weight: 600;
  box-shadow: none;
}

.client-dashboard-page:not(.admin-page) .dash-nav .dashboard-menu-item.is-active::before {
  display: none;
}

.client-dashboard-page:not(.admin-page) .dash-nav .dashboard-menu-item.is-active .dash-nav-ico {
  color: #ffffff;
  opacity: 1;
}

.client-dashboard-page:not(.admin-page) .dash-nav .dashboard-menu-item .menu-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: auto;
  border-radius: 999px;
  background: var(--client-danger);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

/* --- Page intro / header banner --- */
.client-dashboard-page:not(.admin-page) .dashboard-intro {
  width: auto;
  max-width: none;
  margin: 24px 28px 20px;
  padding: 24px 28px;
  border-radius: var(--client-radius-lg);
  border: 1px solid var(--client-border);
  background: var(--client-surface-2);
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

.client-dashboard-page:not(.admin-page) .dashboard-intro::before,
.client-dashboard-page:not(.admin-page) .dashboard-intro::after {
  display: none;
}

.client-dashboard-page:not(.admin-page) .dashboard-intro .eyebrow {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.25);
  color: #93c5fd;
  font-size: 0.78rem;
  padding: 6px 12px;
  margin-bottom: 12px;
}

.client-dashboard-page:not(.admin-page) .dashboard-intro .eyebrow::before {
  background: var(--client-accent);
  box-shadow: none;
}

.client-dashboard-page:not(.admin-page) .dashboard-intro h1 {
  font-size: clamp(1.5rem, 2.5vw, 1.85rem);
  font-weight: 700;
  color: var(--client-text);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.client-dashboard-page:not(.admin-page) .dashboard-intro p {
  color: var(--client-muted);
  font-size: 0.92rem;
  margin: 0;
  max-width: 640px;
  line-height: 1.55;
}

/* --- Content panels & cards --- */
.client-dashboard-page:not(.admin-page) .admin-panels {
  margin-top: 0;
  gap: 0;
}

.client-dashboard-page:not(.admin-page) .dashboard-card {
  padding: 28px;
  border-radius: var(--client-radius-lg);
  border: 1px solid var(--client-border);
  background: var(--client-surface-2);
  box-shadow: none;
}

.client-dashboard-page:not(.admin-page) .admin-panel.dashboard-card {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.client-dashboard-page:not(.admin-page) .admin-panel.dashboard-card[hidden] {
  display: none !important;
}

.client-dashboard-page:not(.admin-page) .admin-panel.dashboard-card > :where(
  .card-note,
  .subsection-title,
  .dashboard-form,
  .linode-manager-toolbar,
  .admin-client-toolbar,
  .signup-client-toolbar,
  .admin-form-actions,
  .linode-key-list,
  .linode-instance-list,
  .linode-assign-vps-list,
  .admin-grid-2,
  .admin-overview,
  .admin-summary,
  .admin-client-section,
  .table-wrap,
  .settings-fieldset,
  section
) {
  margin-top: 0;
  margin-bottom: 0;
}

@media (hover: hover) {
  .client-dashboard-page:not(.admin-page) .dashboard-card:not(:has(.dashboard-form)):hover {
    border-color: var(--client-border-hover);
  }
}

.client-dashboard-page:not(.admin-page) .dashboard-card h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--client-text);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.client-dashboard-page:not(.admin-page) .dashboard-card h3,
.client-dashboard-page:not(.admin-page) .subsection-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #e2e8f0;
  margin: 0 0 12px;
}

.client-dashboard-page:not(.admin-page) .card-note {
  color: var(--client-muted);
  font-size: 0.88rem;
  line-height: 1.55;
  margin-bottom: 20px;
}

/* --- Forms --- */
.client-dashboard-page:not(.admin-page) .dashboard-form {
  display: grid;
  gap: 20px;
}

.client-dashboard-page:not(.admin-page) .dashboard-form label,
.client-dashboard-page:not(.admin-page) .settings-fieldset label {
  font-size: 0.82rem;
  font-weight: 500;
  color: #cbd5e1;
  letter-spacing: 0.01em;
  margin-bottom: -10px;
}

.client-dashboard-page:not(.admin-page) .dashboard-form input,
.client-dashboard-page:not(.admin-page) .dashboard-form select,
.client-dashboard-page:not(.admin-page) .dashboard-form textarea,
.client-dashboard-page:not(.admin-page) .settings-fieldset input,
.client-dashboard-page:not(.admin-page) .settings-fieldset select,
.client-dashboard-page:not(.admin-page) .admin-client-search:not(.signup-client-search),
.client-dashboard-page:not(.admin-page) .topups-toolbar select,
.client-dashboard-page:not(.admin-page) .linode-manager-toolbar select,
.client-dashboard-page:not(.admin-page) .linode-config-row input,
.client-dashboard-page:not(.admin-page) .linode-config-row select {
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--client-border);
  background: var(--client-surface-1);
  color: var(--client-text);
  font-size: 0.9rem;
  transition:
    border-color var(--client-transition),
    box-shadow var(--client-transition),
    background-color var(--client-transition);
}

.client-dashboard-page:not(.admin-page) .dashboard-form input:hover,
.client-dashboard-page:not(.admin-page) .dashboard-form select:hover,
.client-dashboard-page:not(.admin-page) .dashboard-form textarea:hover,
.client-dashboard-page:not(.admin-page) .settings-fieldset input:hover {
  border-color: rgba(37, 99, 235, 0.3);
  background: var(--client-surface-3);
}

.client-dashboard-page:not(.admin-page) .dashboard-form input:focus-visible,
.client-dashboard-page:not(.admin-page) .dashboard-form select:focus-visible,
.client-dashboard-page:not(.admin-page) .dashboard-form textarea:focus-visible,
.client-dashboard-page:not(.admin-page) .settings-fieldset input:focus-visible,
.client-dashboard-page:not(.admin-page) .admin-client-search:not(.signup-client-search):focus-visible {
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  outline: none;
}

/* Dashboard forms: stop hover lift/shadow jitter on fields, buttons, and lists */
.client-dashboard-page:not(.admin-page) .dashboard-card:has(.dashboard-form) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
}

.client-dashboard-page:not(.admin-page) .dashboard-form .linode-create-checkbox-label,
.client-dashboard-page:not(.admin-page) .dashboard-form label:has(> input[type="checkbox"]),
.client-dashboard-page:not(.admin-page) .dashboard-form label:has(> input[type="radio"]) {
  margin-bottom: 0;
}

.client-dashboard-page:not(.admin-page) .dashboard-form input[type="checkbox"],
.client-dashboard-page:not(.admin-page) .dashboard-form input[type="radio"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  padding: 0;
  flex: 0 0 16px;
  transition: none;
}

.client-dashboard-page:not(.admin-page) .dashboard-form input[type="checkbox"]:hover,
.client-dashboard-page:not(.admin-page) .dashboard-form input[type="radio"]:hover,
.client-dashboard-page:not(.admin-page) .dashboard-form input[type="checkbox"]:focus-visible,
.client-dashboard-page:not(.admin-page) .dashboard-form input[type="radio"]:focus-visible {
  border-color: var(--client-border);
  background: var(--client-surface-1);
  box-shadow: none;
}

.client-dashboard-page:not(.admin-page) .dashboard-form .btn,
.client-dashboard-page:not(.admin-page) .dashboard-card:has(.dashboard-form) .admin-form-actions .btn {
  box-shadow: none !important;
  transition-property: background-color, border-color, color !important;
}

.client-dashboard-page:not(.admin-page) .dashboard-form .btn:hover:not(:disabled),
.client-dashboard-page:not(.admin-page) .dashboard-form .btn:focus-visible,
.client-dashboard-page:not(.admin-page) .dashboard-card:has(.dashboard-form) .admin-form-actions .btn:hover:not(:disabled),
.client-dashboard-page:not(.admin-page) .dashboard-card:has(.dashboard-form) .admin-form-actions .btn:focus-visible {
  transform: none !important;
  box-shadow: none !important;
}

.client-dashboard-page:not(.admin-page) .dashboard-card:has(.dashboard-form) .service-item,
.client-dashboard-page:not(.admin-page) .dashboard-card:has(.dashboard-form) .linode-instance-card {
  transition: border-color var(--client-transition), background-color var(--client-transition);
}

.client-dashboard-page:not(.admin-page) .dashboard-card:has(.dashboard-form) .service-item:hover,
.client-dashboard-page:not(.admin-page) .dashboard-card:has(.dashboard-form) .linode-instance-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--client-border-hover);
}

.client-dashboard-page:not(.admin-page) .payment-review-form input[type="text"],
.client-dashboard-page:not(.admin-page) .payment-review-form textarea {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: var(--client-text);
}

.client-dashboard-page:not(.admin-page) .payment-review-form input[type="text"]::placeholder,
.client-dashboard-page:not(.admin-page) .payment-review-form textarea::placeholder {
  color: rgba(148, 163, 184, 0.72);
}

.client-dashboard-page:not(.admin-page) .payment-review-form input[type="text"]:hover,
.client-dashboard-page:not(.admin-page) .payment-review-form textarea:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
}

.client-dashboard-page:not(.admin-page) .payment-review-form input[type="text"]:focus-visible,
.client-dashboard-page:not(.admin-page) .payment-review-form textarea:focus-visible {
  border-color: rgba(37, 99, 235, 0.55);
  background: rgba(37, 99, 235, 0.08);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  outline: none;
}

.client-dashboard-page:not(.admin-page) .signup-client-search-wrap {
  position: relative;
  flex: 1 1 420px;
}

.client-dashboard-page:not(.admin-page) .signup-client-search {
  width: 100%;
  max-width: none;
  min-height: 46px;
  padding: 11px 14px 11px 42px;
  border-color: rgba(180, 223, 255, 0.24);
  background: rgba(5, 16, 30, 0.52);
}

.client-dashboard-page:not(.admin-page) .signup-client-search::placeholder {
  color: rgba(196, 223, 248, 0.76);
}

.client-dashboard-page:not(.admin-page) .signup-client-search:focus-visible {
  border-color: rgba(6, 182, 212, 0.48);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.12), 0 0 24px rgba(37, 99, 235, 0.1);
  outline: none;
}

.client-dashboard-page:not(.admin-page) .settings-fieldset {
  border: 1px solid var(--client-border);
  border-radius: var(--client-radius);
  padding: 20px 22px;
  background: var(--client-surface-1);
  margin-bottom: 20px;
}

.client-dashboard-page:not(.admin-page) .settings-fieldset legend {
  color: #93c5fd;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* --- Tables --- */
.client-dashboard-page:not(.admin-page) .data-table,
.client-dashboard-page:not(.admin-page) .invoice-table,
.client-dashboard-page:not(.admin-page) .orders-table {
  border-radius: var(--client-radius);
  overflow: hidden;
  border: 1px solid var(--client-border);
}

.client-dashboard-page:not(.admin-page) .table-wrap {
  border-radius: var(--client-radius);
  border: 1px solid var(--client-border);
  background: var(--client-surface-1);
  overflow: auto;
}

.client-dashboard-page:not(.admin-page) .table-wrap .data-table,
.client-dashboard-page:not(.admin-page) .table-wrap .invoice-table,
.client-dashboard-page:not(.admin-page) .table-wrap .orders-table {
  border: none;
  border-radius: 0;
}

.client-dashboard-page:not(.admin-page) .data-table th,
.client-dashboard-page:not(.admin-page) .invoice-table th,
.client-dashboard-page:not(.admin-page) .orders-table th {
  padding: 12px 16px;
  background: rgba(37, 99, 235, 0.08);
  color: #93c5fd;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--client-border);
}

.client-dashboard-page:not(.admin-page) .data-table td,
.client-dashboard-page:not(.admin-page) .invoice-table td,
.client-dashboard-page:not(.admin-page) .orders-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.06);
  color: #e2e8f0;
  font-size: 0.88rem;
  vertical-align: middle;
}

.client-dashboard-page:not(.admin-page) .data-table tbody tr,
.client-dashboard-page:not(.admin-page) .invoice-table tbody tr,
.client-dashboard-page:not(.admin-page) .orders-table tbody tr {
  transition: background-color var(--client-transition);
}

.client-dashboard-page:not(.admin-page) .data-table tbody tr:hover,
.client-dashboard-page:not(.admin-page) .invoice-table tbody tr:hover,
.client-dashboard-page:not(.admin-page) .orders-table tbody tr:hover {
  background: rgba(37, 99, 235, 0.05);
}

.client-dashboard-page:not(.admin-page) .data-table td.empty-state {
  color: var(--client-muted);
  padding: 40px 16px;
}

/* --- Buttons: inherit site blue→cyan primary; refine secondary/actions --- */
.client-dashboard-page:not(.admin-page) .btn {
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.88rem;
  transition:
    transform var(--client-transition),
    box-shadow var(--client-transition),
    background-color var(--client-transition),
    border-color var(--client-transition);
}

.client-dashboard-page:not(.admin-page) .btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.client-dashboard-page:not(.admin-page) .btn-secondary:hover:not(:disabled) {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.3);
  color: #fff;
}

.client-dashboard-page:not(.admin-page) .table-action {
  border-radius: 8px;
  font-size: 0.8rem;
  padding: 6px 12px;
  transition: all var(--client-transition);
}

.client-dashboard-page:not(.admin-page) .table-action:hover,
.client-dashboard-page:not(.admin-page) .table-action:focus-visible {
  background: rgba(37, 99, 235, 0.14);
  border-color: rgba(37, 99, 235, 0.32);
  color: #93c5fd;
}

.client-dashboard-page:not(.admin-page) #xuiCredentialList .service-item-actions {
  flex-wrap: wrap;
  gap: 10px;
}

.client-dashboard-page:not(.admin-page) #xuiCredentialList .service-item-actions .table-action {
  font-size: 0.875rem;
  font-weight: 700;
  padding: 8px 14px;
  min-height: 36px;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

.client-dashboard-page:not(.admin-page) #xuiCredentialList .service-item-actions .table-action.success {
  background: linear-gradient(135deg, #16a34a, #059669);
  border-color: rgba(74, 222, 128, 0.5);
}

.client-dashboard-page:not(.admin-page) #xuiCredentialList .service-item-actions .table-action.success:hover,
.client-dashboard-page:not(.admin-page) #xuiCredentialList .service-item-actions .table-action.success:focus-visible {
  background: linear-gradient(135deg, #22c55e, #10b981);
  border-color: rgba(134, 239, 172, 0.7);
  color: #fff;
}

.client-dashboard-page:not(.admin-page) #xuiCredentialList .service-item-actions .table-action.secondary {
  background: linear-gradient(135deg, var(--client-accent), #06b6d4);
  border-color: rgba(125, 211, 252, 0.45);
}

.client-dashboard-page:not(.admin-page) #xuiCredentialList .service-item-actions .table-action.secondary:hover,
.client-dashboard-page:not(.admin-page) #xuiCredentialList .service-item-actions .table-action.secondary:focus-visible {
  background: linear-gradient(135deg, #3b82f6, #22d3ee);
  border-color: rgba(186, 230, 253, 0.6);
  color: #fff;
}

.client-dashboard-page:not(.admin-page) #xuiCredentialList .service-item-actions .table-action.danger {
  background: #dc2626;
  border-color: rgba(248, 113, 113, 0.5);
}

.client-dashboard-page:not(.admin-page) #xuiCredentialList .service-item-actions .table-action.danger:hover,
.client-dashboard-page:not(.admin-page) #xuiCredentialList .service-item-actions .table-action.danger:focus-visible {
  background: #ef4444;
  border-color: rgba(252, 165, 165, 0.7);
  color: #fff;
}

.client-dashboard-page:not(.admin-page) .client-vps-manage-action,
.client-dashboard-page:not(.admin-page) .client-vps-manage-action:hover,
.client-dashboard-page:not(.admin-page) .client-vps-manage-action:focus-visible {
  background: linear-gradient(135deg, var(--client-accent), #06b6d4);
  border-color: rgba(125, 211, 252, 0.45);
  color: #fff;
}

/* --- List items & cards --- */
.client-dashboard-page:not(.admin-page) .admin-client-item,
.client-dashboard-page:not(.admin-page) .linode-key-item,
.client-dashboard-page:not(.admin-page) .linode-assign-vps-item,
.client-dashboard-page:not(.admin-page) .linode-instance-card,
.client-dashboard-page:not(.admin-page) .signup-summary-card,
.client-dashboard-page:not(.admin-page) .ops-metric-card,
.client-dashboard-page:not(.admin-page) .kpi-card {
  border-radius: var(--client-radius);
  border: 1px solid var(--client-border);
  background: var(--client-surface-3);
  transition:
    border-color var(--client-transition),
    box-shadow var(--client-transition),
    transform var(--client-transition);
}

.client-dashboard-page:not(.admin-page) .admin-client-item:hover,
.client-dashboard-page:not(.admin-page) .linode-key-item:hover,
.client-dashboard-page:not(.admin-page) .linode-assign-vps-item:hover,
.client-dashboard-page:not(.admin-page) .linode-instance-card:hover {
  border-color: var(--client-border-hover);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}

.client-dashboard-page:not(.admin-page) .admin-client-item.selected {
  border-color: rgba(37, 99, 235, 0.42);
  background: rgba(37, 99, 235, 0.12);
  box-shadow: none;
}

/* --- Status pills & badges --- */
.client-dashboard-page:not(.admin-page) .status-pill,
.client-dashboard-page:not(.admin-page) .risk-pill {
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.client-dashboard-page:not(.admin-page) .signup-client-hero {
  border-radius: var(--client-radius-lg);
  border-color: var(--client-border);
  background: var(--client-surface-2);
}

/* --- Toolbars --- */
.client-dashboard-page:not(.admin-page) .admin-client-toolbar,
.client-dashboard-page:not(.admin-page) .topups-toolbar,
.client-dashboard-page:not(.admin-page) .linode-manager-toolbar,
.client-dashboard-page:not(.admin-page) .signup-client-toolbar,
.client-dashboard-page:not(.admin-page) .admin-form-actions {
  gap: 12px;
}

/* --- Terminal & code output --- */
.client-dashboard-page:not(.admin-page) .linode-output,
.client-dashboard-page:not(.admin-page) .linode-instance-output,
.client-dashboard-page:not(.admin-page) .vps-terminal-output {
  border-radius: var(--client-radius);
  border: 1px solid var(--client-border);
  background: #050505;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

/* --- Modal --- */
.client-dashboard-page:not(.admin-page) .confirm-modal {
  border-radius: var(--client-radius-lg);
  border: 1px solid var(--client-border);
  background: linear-gradient(180deg, var(--client-surface-2), var(--client-surface-1));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

.client-dashboard-page:not(.admin-page) .confirm-modal h3 {
  color: var(--client-text);
  font-size: 1.15rem;
}

/* --- Status bar --- */
.client-dashboard-page:not(.admin-page) .client-status {
  margin: 16px 28px 28px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.88rem;
}

/* --- Panel animation removed: caused flash on load and re-fired every panel switch --- */

/* --- Scrollbar (sidebar) --- */
.client-dashboard-page:not(.admin-page) .dash-sidebar::-webkit-scrollbar,
.client-dashboard-page:not(.admin-page) .dash-nav::-webkit-scrollbar {
  width: 5px;
}

.client-dashboard-page:not(.admin-page) .dash-sidebar::-webkit-scrollbar-thumb,
.client-dashboard-page:not(.admin-page) .dash-nav::-webkit-scrollbar-thumb {
  background: rgba(37, 99, 235, 0.28);
  border-radius: 999px;
}

.client-dashboard-page:not(.admin-page) .dash-sidebar::-webkit-scrollbar-track,
.client-dashboard-page:not(.admin-page) .dash-nav::-webkit-scrollbar-track {
  background: transparent;
}

/* --- Bright theme overrides --- */
html[data-theme='bright'] .client-dashboard-page:not(.admin-page) {
  --client-surface-0: #f8fafc;
  --client-surface-1: #ffffff;
  --client-surface-2: #f1f5f9;
  --client-surface-3: #e2e8f0;
  --client-border: rgba(15, 23, 42, 0.1);
  --client-text: #0f172a;
  --client-muted: #64748b;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .dash-sidebar {
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border-right-color: rgba(15, 23, 42, 0.08);
}

html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .dash-nav .dashboard-menu-item.is-active {
  background: var(--client-accent);
  color: #ffffff;
}

html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .site-header.auth-header {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}

html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .auth-header .nav-shell {
  background: transparent;
  border: none;
  box-shadow: none;
}

html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .brand-mark {
  border-color: rgba(0, 126, 184, 0.18);
  background: rgba(6, 182, 212, 0.09);
  color: #006ea6;
  text-shadow: none;
  box-shadow: none;
}

html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .dash-sidebar-online {
  color: #16a34a;
}

html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .brand-text,
html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .brand-text strong {
  color: #071326;
}

html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .account-menu-toggle:hover {
  background: rgba(37, 99, 235, 0.08);
}

html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .bg-bubbles {
  opacity: 0.08;
}

/* Beat theme-toggle.css intro/card overrides on client */
html[data-theme] .client-dashboard-page:not(.admin-page) .dashboard-intro {
  background: var(--client-surface-2);
  border-color: var(--client-border);
  box-shadow: none;
}

html[data-theme] .client-dashboard-page:not(.admin-page) .dashboard-card {
  background: var(--client-surface-2);
  border-color: var(--client-border);
  box-shadow: none;
}

html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .dashboard-intro {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .dashboard-card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}

/* --- Tablet: stacked layout with scrollable admin menu --- */
@media (max-width: 1024px) {
  .client-dashboard-page:not(.admin-page) .client-dashboard {
    padding-left: 0;
  }

  .client-dashboard-page:not(.admin-page) .dashboard-intro {
    width: min(100% - 32px, var(--max-width));
    margin-left: auto;
    margin-right: auto;
  }

  .client-dashboard-page:not(.admin-page) .dash-sidebar {
    position: static;
    width: 100%;
    max-height: min(56vh, calc(100dvh - 220px));
    overflow: hidden;
    border-radius: var(--client-radius-lg);
    border: 1px solid var(--client-border);
    background: linear-gradient(180deg, var(--client-surface-1), var(--client-surface-0));
    box-shadow: var(--client-shadow);
  }

  .client-dashboard-page:not(.admin-page) .dash-nav {
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-x: hidden;
    overflow-y: auto;
    gap: 8px;
    padding-bottom: 8px;
  }

  .client-dashboard-page:not(.admin-page) .dash-nav-group {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
  }

  .client-dashboard-page:not(.admin-page) .dash-nav-group + .dash-nav-group {
    margin-top: 0;
  }

  .client-dashboard-page:not(.admin-page) .dash-nav-group-title {
    display: block;
    width: 100%;
    padding: 10px 10px 4px;
  }

  .client-dashboard-page:not(.admin-page) .dash-nav .dashboard-menu-item {
    width: 100%;
    flex: 0 0 auto;
    white-space: normal;
    transform: none;
  }

  .client-dashboard-page:not(.admin-page) .dash-nav .dashboard-menu-item:hover,
  .client-dashboard-page:not(.admin-page) .dash-nav .dashboard-menu-item:focus-visible {
    transform: none;
  }

  .client-dashboard-page:not(.admin-page) .dash-nav .dashboard-menu-item.is-active::before {
    display: none;
  }
}

/* --- Mobile: vertical scrollable nav (admin has 26 items — horizontal rail is unusable) --- */
@media (max-width: 768px) {
  .client-dashboard-page:not(.admin-page) .dashboard-intro {
    margin: 16px;
    padding: 20px;
  }

  .client-dashboard-page:not(.admin-page) .dashboard-card {
    padding: 20px 16px;
    border-radius: var(--client-radius);
  }

  .client-dashboard-page:not(.admin-page) .dash-sidebar {
    max-height: min(62vh, calc(100dvh - 200px));
    overflow: hidden;
  }

  .client-dashboard-page:not(.admin-page) .dash-sidebar-title {
    display: flex;
    padding: 8px 10px 12px;
  }

  .client-dashboard-page:not(.admin-page) .dash-nav {
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: none;
    gap: 8px;
    padding-bottom: 8px;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: touch;
  }

  .client-dashboard-page:not(.admin-page) .dash-nav-group {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
  }

  .client-dashboard-page:not(.admin-page) .dash-nav-group-title {
    display: block;
    padding: 10px 10px 4px;
  }

  .client-dashboard-page:not(.admin-page) .dash-nav .dashboard-menu-item {
    width: 100%;
    flex: 0 0 auto;
    white-space: normal;
    scroll-snap-align: none;
    transform: none;
  }

  .client-dashboard-page:not(.admin-page) .dash-nav .dashboard-menu-item:hover,
  .client-dashboard-page:not(.admin-page) .dash-nav .dashboard-menu-item:focus-visible {
    transform: none;
  }

  .client-dashboard-page:not(.admin-page) .dash-nav .dashboard-menu-item.is-active::before {
    display: block;
  }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .client-dashboard-page:not(.admin-page) .btn,
  .client-dashboard-page:not(.admin-page) .dash-nav .dashboard-menu-item,
  .client-dashboard-page:not(.admin-page) .admin-client-item {
    transition: none;
  }
}

/* --- Extended component polish --- */

.client-dashboard-page:not(.admin-page) .glass {
  background: var(--client-surface-2);
  border-color: var(--client-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.client-dashboard-page:not(.admin-page) .signup-client-card,
.client-dashboard-page:not(.admin-page) .linode-config-panel,
.client-dashboard-page:not(.admin-page) .linode-create-section,
.client-dashboard-page:not(.admin-page) .linode-instance-config,
.client-dashboard-page:not(.admin-page) .service-stock-toggle,
.client-dashboard-page:not(.admin-page) .payment-method-card,
.client-dashboard-page:not(.admin-page) .summary-chip {
  border-radius: var(--client-radius);
  border: 1px solid var(--client-border);
  background: var(--client-surface-3);
  transition: border-color var(--client-transition), box-shadow var(--client-transition);
}

.client-dashboard-page:not(.admin-page) .signup-client-card:hover,
.client-dashboard-page:not(.admin-page) .service-stock-toggle:hover {
  border-color: var(--client-border-hover);
}

.client-dashboard-page:not(.admin-page) .signup-summary-card strong,
.client-dashboard-page:not(.admin-page) .ops-metric-card strong,
.client-dashboard-page:not(.admin-page) .kpi-card strong,
.client-dashboard-page:not(.admin-page) .metric-value {
  color: var(--client-text);
  text-shadow: none;
}

.client-dashboard-page:not(.admin-page) .signup-client-avatar {
  background: var(--client-accent);
  box-shadow: none;
}

.client-dashboard-page:not(.admin-page) .admin-summary:not(.signup-client-summary) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.client-dashboard-page:not(.admin-page) .signup-client-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.client-dashboard-page:not(.admin-page) .summary-chip:not(.signup-summary-card) {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.84rem;
}

.client-dashboard-page:not(.admin-page) .summary-chip:not(.signup-summary-card) strong {
  color: var(--client-text);
}

.client-dashboard-page:not(.admin-page) .signup-summary-card {
  position: relative;
  overflow: hidden;
  min-height: 86px;
  padding: 14px 14px 14px 44px;
  font-size: 0.84rem;
}

.client-dashboard-page:not(.admin-page) .signup-summary-card::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 18px;
  width: 16px;
  height: 16px;
  border-radius: 6px;
  background: var(--client-accent);
  box-shadow: none;
}

.client-dashboard-page:not(.admin-page) .ticket-list li,
.client-dashboard-page:not(.admin-page) .message-bubble {
  border-radius: var(--client-radius);
  border: 1px solid var(--client-border);
  background: rgba(14, 14, 26, 0.7);
}

.client-dashboard-page:not(.admin-page) .message-bubble.outgoing {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.25);
}

.client-dashboard-page:not(.admin-page) .ticket-item.active {
  border-color: rgba(37, 99, 235, 0.35);
  background: rgba(37, 99, 235, 0.08);
}

.client-dashboard-page:not(.admin-page) .linode-manager-toolbar,
.client-dashboard-page:not(.admin-page) .linode-assignment-toolbar {
  padding: 12px 0;
  border-bottom: 1px solid var(--client-border);
  margin-bottom: 16px;
}

.client-dashboard-page:not(.admin-page) .service-stock-toggle.is-off {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.06);
}

.client-dashboard-page:not(.admin-page) .admin-client-item.is-banned {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.05);
}

.client-dashboard-page:not(.admin-page) .admin-client-item.is-suspended {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.05);
}

.client-dashboard-page:not(.admin-page) .admin-grid-2 {
  gap: 16px;
}

.client-dashboard-page:not(.admin-page) .ops-table-grid {
  gap: 20px;
}

.client-dashboard-page:not(.admin-page) select option {
  background: var(--client-surface-1);
  color: var(--client-text);
}

.client-dashboard-page:not(.admin-page) .container:has(#clientStatus) {
  width: 100%;
  max-width: none;
  padding: 0 28px;
}

.client-dashboard-page:not(.admin-page) .account-menu-toggle {
  border-radius: 10px;
  transition: background-color var(--client-transition);
}

.client-dashboard-page:not(.admin-page) .client-header-wallet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, 0.28);
  background: rgba(37, 99, 235, 0.12);
  color: var(--client-text, var(--text));
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--client-transition, 0.2s ease),
    border-color var(--client-transition, 0.2s ease),
    transform 0.2s ease;
}

.client-dashboard-page:not(.admin-page) .client-header-wallet:hover,
.client-dashboard-page:not(.admin-page) .client-header-wallet:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.45);
  background: rgba(37, 99, 235, 0.2);
  outline: none;
}

.client-dashboard-page:not(.admin-page) .client-header-wallet-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.client-dashboard-page:not(.admin-page) .client-header-wallet-amount {
  font-size: 0.88rem;
  font-weight: 800;
  color: #93c5fd;
  line-height: 1;
}

html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .client-header-wallet {
  border-color: rgba(37, 99, 235, 0.22);
  background: rgba(37, 99, 235, 0.08);
}

html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .client-header-wallet-amount {
  color: #1d4ed8;
}

@media (max-width: 820px) {
  .client-dashboard-page:not(.admin-page) .client-header-wallet {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
    min-height: 38px;
    justify-content: center;
    padding: 6px 10px;
  }

  .client-dashboard-page:not(.admin-page) .client-header-wallet-label {
    font-size: 0.68rem;
  }

  .client-dashboard-page:not(.admin-page) .client-header-wallet-amount {
    font-size: 0.8rem;
  }
}

.client-dashboard-page:not(.admin-page) .account-menu-toggle:hover {
  background: rgba(37, 99, 235, 0.12);
}

.client-dashboard-page:not(.admin-page) .account-menu-panel {
  border-radius: var(--client-radius);
  border: 1px solid var(--client-border);
  background: var(--client-surface-2);
  box-shadow: var(--client-shadow-lg);
}

.client-dashboard-page:not(.admin-page) .theme-choice-btn.is-active,
.client-dashboard-page:not(.admin-page) .theme-choice-btn[aria-pressed='true'] {
  border-color: rgba(37, 99, 235, 0.42);
  background: rgba(37, 99, 235, 0.12);
  color: #93c5fd;
}

/* --- Client panel layout (mirrors admin-panels / admin-panel) --- */
.client-dashboard-page:not(.admin-page) .dashboard-menu-panels {
  margin-top: 0;
  gap: 0;
}

.client-dashboard-page:not(.admin-page) .dashboard-panel.dashboard-card {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.client-dashboard-page:not(.admin-page) .dashboard-panel.dashboard-card[hidden] {
  display: none !important;
}

.client-dashboard-page:not(.admin-page) .client-home-panel {
  background: var(--client-surface-2);
  border-color: var(--client-border);
  box-shadow: none;
}

/* --- Client home dashboard cards --- */
.client-dashboard-page:not(.admin-page) .client-home-card,
.client-dashboard-page:not(.admin-page) .client-home-server-card,
.client-dashboard-page:not(.admin-page) .client-home-tasks {
  border-radius: var(--client-radius);
  border: 1px solid var(--client-border);
  background: var(--client-surface-3);
  box-shadow: none;
  transition: border-color var(--client-transition), box-shadow var(--client-transition);
}

.client-dashboard-page:not(.admin-page) .client-home-card:hover,
.client-dashboard-page:not(.admin-page) .client-home-tasks:hover {
  border-color: var(--client-border-hover);
}

.client-dashboard-page:not(.admin-page) .client-home-server-card {
  border-color: rgba(96, 165, 250, 0.32);
}

.client-dashboard-page:not(.admin-page) .client-home-server-card:hover {
  border-color: rgba(96, 165, 250, 0.55);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.14);
}

html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .client-home-server-card {
  border-color: rgba(37, 99, 235, 0.28);
}

html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .client-home-server-card:hover {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.1);
}

.client-dashboard-page:not(.admin-page) .client-home-tabs button {
  background: var(--client-surface-1);
  border-color: var(--client-border);
  color: var(--client-muted);
  transition: background-color var(--client-transition), border-color var(--client-transition), color var(--client-transition);
}

.client-dashboard-page:not(.admin-page) .client-home-tabs button.is-active,
.client-dashboard-page:not(.admin-page) .client-home-tabs button:hover,
.client-dashboard-page:not(.admin-page) .client-home-tabs button:focus-visible {
  background: var(--client-accent);
  border-color: var(--client-accent);
  color: #ffffff;
}

.client-dashboard-page:not(.admin-page) .client-home-link:hover,
.client-dashboard-page:not(.admin-page) .client-home-link:focus-visible {
  color: #93c5fd;
}

/* --- VPS / service detail cards --- */
.client-dashboard-page:not(.admin-page) .vps-side-card,
.client-dashboard-page:not(.admin-page) .vps-power-card,
.client-dashboard-page:not(.admin-page) .vps-resource-card,
.client-dashboard-page:not(.admin-page) .vps-network-panel,
.client-dashboard-page:not(.admin-page) .vps-tab-card,
.client-dashboard-page:not(.admin-page) .vps-credentials-panel,
.client-dashboard-page:not(.admin-page) .vps-storage-panel,
.client-dashboard-page:not(.admin-page) .vps-options-panel,
.client-dashboard-page:not(.admin-page) .service-server-card,
.client-dashboard-page:not(.admin-page) .service-detail-card {
  border-radius: var(--client-radius);
  border: 1px solid var(--client-border);
  background: var(--client-surface-3);
  transition: border-color var(--client-transition), box-shadow var(--client-transition);
}

.client-dashboard-page:not(.admin-page) .vps-tabs button.is-active,
.client-dashboard-page:not(.admin-page) .vps-tabs button:hover,
.client-dashboard-page:not(.admin-page) .vps-tabs button:focus-visible {
  background: var(--client-accent);
  border-color: var(--client-accent);
  color: #ffffff;
  box-shadow: none;
}

.client-dashboard-page:not(.admin-page) .vps-icon-actions button {
  border-color: var(--client-border);
  background: var(--client-surface-1);
  transition: border-color var(--client-transition), background-color var(--client-transition);
}

.client-dashboard-page:not(.admin-page) .vps-icon-actions button:hover,
.client-dashboard-page:not(.admin-page) .vps-icon-actions button:focus-visible {
  border-color: rgba(37, 99, 235, 0.32);
  background: rgba(37, 99, 235, 0.1);
}

.client-dashboard-page:not(.admin-page) .vps-side-card::before {
  background: linear-gradient(90deg, var(--client-accent), #60a5fa 55%, rgba(96, 165, 250, 0.15));
}

.client-dashboard-page:not(.admin-page) .vps-side-avatar {
  border-color: rgba(37, 99, 235, 0.28);
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.2), var(--client-surface-1));
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.16);
  color: #93c5fd;
}

.client-dashboard-page:not(.admin-page) .vps-side-ip-block {
  border-color: rgba(37, 99, 235, 0.24);
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.12), var(--client-surface-1));
}

.client-dashboard-page:not(.admin-page) .vps-side-detail-tile {
  border-color: var(--client-border);
  background: var(--client-surface-1);
  transition: border-color var(--client-transition), background-color var(--client-transition);
}

.client-dashboard-page:not(.admin-page) .vps-side-detail-tile:hover {
  border-color: var(--client-border-hover);
  background: rgba(37, 99, 235, 0.06);
}

.client-dashboard-page:not(.admin-page) .vps-side-detail-icon {
  border-color: rgba(37, 99, 235, 0.2);
  background: rgba(37, 99, 235, 0.1);
  color: #93c5fd;
}

.client-dashboard-page:not(.admin-page) .vps-credential-card,
.client-dashboard-page:not(.admin-page) .vps-storage-tile,
.client-dashboard-page:not(.admin-page) .vps-options-card,
.client-dashboard-page:not(.admin-page) .vps-options-tip {
  border-color: var(--client-border);
  background: var(--client-surface-1);
  transition: border-color var(--client-transition), background-color var(--client-transition);
}

.client-dashboard-page:not(.admin-page) .vps-credential-card:hover {
  border-color: rgba(37, 99, 235, 0.28);
  background: rgba(37, 99, 235, 0.06);
}

.client-dashboard-page:not(.admin-page) .vps-credential-icon {
  border-color: rgba(37, 99, 235, 0.2);
  background: rgba(37, 99, 235, 0.1);
  color: #93c5fd;
}

.client-dashboard-page:not(.admin-page) .vps-credential-action {
  border-color: var(--client-border);
  background: var(--client-surface-1);
}

.client-dashboard-page:not(.admin-page) .vps-credentials-meta > span {
  border-color: var(--client-border);
  background: var(--client-surface-1);
  color: var(--client-muted);
}

.client-dashboard-page:not(.admin-page) .vps-options-meta > span {
  border-color: var(--client-border);
  background: var(--client-surface-1);
  color: var(--client-muted);
}

.client-dashboard-page:not(.admin-page) .vps-options-input-row input {
  border-color: var(--client-border);
  background: var(--client-surface-1);
}

.client-dashboard-page:not(.admin-page) .vps-side-provider {
  border-color: var(--client-border);
  background: var(--client-surface-1);
  color: var(--client-muted);
}

.client-dashboard-page:not(.admin-page) .vps-side-specs span:first-child {
  border-color: rgba(37, 99, 235, 0.35);
  color: #93c5fd;
}

.client-dashboard-page:not(.admin-page) .vps-power-card .table-action:not(.danger):not(.vps-management-action) {
  background: var(--client-accent);
  border-color: var(--client-accent);
}

.client-dashboard-page:not(.admin-page) .vps-terminal-open-btn {
  min-width: 168px;
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.2),
    0 10px 24px rgba(37, 99, 235, 0.28);
}

.client-dashboard-page:not(.admin-page) .vps-terminal-open-btn:hover,
.client-dashboard-page:not(.admin-page) .vps-terminal-open-btn:focus-visible {
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.35),
    0 14px 30px rgba(37, 99, 235, 0.34);
}

.client-dashboard-page:not(.admin-page) .vps-reset-password-btn {
  min-width: 168px;
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.2),
    0 10px 24px rgba(37, 99, 235, 0.28);
}

.client-dashboard-page:not(.admin-page) .vps-reset-password-btn:hover,
.client-dashboard-page:not(.admin-page) .vps-reset-password-btn:focus-visible {
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.35),
    0 14px 30px rgba(37, 99, 235, 0.34);
}

.client-dashboard-page:not(.admin-page) .vps-terminal-output,
.client-dashboard-page:not(.admin-page) .vps-terminal-shell {
  border-radius: var(--client-radius);
  border: 1px solid var(--client-border);
  background: #050505;
}

.client-dashboard-page:not(.admin-page) .vps-network-donut,
.client-dashboard-page:not(.admin-page) .vps-network-progress {
  border-color: var(--client-border);
}

.client-dashboard-page:not(.admin-page) .vps-resource-bar {
  background: var(--client-surface-1);
  border-color: var(--client-border);
}

.client-dashboard-page:not(.admin-page) .vps-resource-bar span {
  background: var(--client-accent);
}

/* --- Profile / billing / support --- */
.client-dashboard-page:not(.admin-page) .profile-insight-card,
.client-dashboard-page:not(.admin-page) .profile-action-card,
.client-dashboard-page:not(.admin-page) .profile-form-card,
.client-dashboard-page:not(.admin-page) .profile-settings-panel,
.client-dashboard-page:not(.admin-page) .profile-security-panel,
.client-dashboard-page:not(.admin-page) .profile-completion-panel,
.client-dashboard-page:not(.admin-page) .billing-summary {
  border-radius: var(--client-radius);
  border: 1px solid var(--client-border);
  background: var(--client-surface-3);
}

.client-dashboard-page:not(.admin-page) .wallet-balance-card {
  border-radius: var(--client-radius-lg);
  border: 1px solid rgba(37, 99, 235, 0.35);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.24), transparent 42%),
    linear-gradient(160deg, rgba(37, 99, 235, 0.18), var(--client-surface-3) 58%);
}

.client-dashboard-page:not(.admin-page) .wallet-panel,
.client-dashboard-page:not(.admin-page) .wallet-deposit-main,
.client-dashboard-page:not(.admin-page) .wallet-summary-card,
.client-dashboard-page:not(.admin-page) .wallet-pending-item,
.client-dashboard-page:not(.admin-page) .wallet-history-table {
  border-radius: var(--client-radius-lg);
  border: 1px solid var(--client-border);
  background: var(--client-surface-3);
}

.client-dashboard-page:not(.admin-page) .wallet-method-card,
.client-dashboard-page:not(.admin-page) .wallet-amount-chip,
.client-dashboard-page:not(.admin-page) .wallet-amount-input-shell,
.client-dashboard-page:not(.admin-page) .wallet-slip-drop {
  border-color: var(--client-border);
  background: rgba(255, 255, 255, 0.03);
}

.client-dashboard-page:not(.admin-page) .wallet-amount-chip:hover,
.client-dashboard-page:not(.admin-page) .wallet-amount-chip.is-active,
.client-dashboard-page:not(.admin-page) .wallet-method-card:hover:not(:disabled),
.client-dashboard-page:not(.admin-page) .wallet-method-card.active,
.client-dashboard-page:not(.admin-page) .wallet-slip-drop:hover,
.client-dashboard-page:not(.admin-page) .wallet-slip-drop.is-filled {
  border-color: rgba(37, 99, 235, 0.7);
  background: var(--client-accent-soft);
}

.client-dashboard-page:not(.admin-page) .wallet-crypto-note {
  border-color: rgba(16, 185, 129, 0.28);
  background: rgba(16, 185, 129, 0.08);
}

.client-dashboard-page:not(.admin-page) .wallet-manual-fields {
  border-color: rgba(245, 158, 11, 0.22);
  background: rgba(245, 158, 11, 0.05);
}

.client-dashboard-page:not(.admin-page) .service-item,
.client-dashboard-page:not(.admin-page) .service-server-card {
  border-radius: var(--client-radius);
  border: 1px solid var(--client-border);
  background: var(--client-surface-3);
  transition: border-color var(--client-transition), box-shadow var(--client-transition), transform var(--client-transition);
}

.client-dashboard-page:not(.admin-page) .service-item:hover,
.client-dashboard-page:not(.admin-page) .service-item.is-active,
.client-dashboard-page:not(.admin-page) .service-server-card:hover {
  border-color: var(--client-border-hover);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.client-dashboard-page:not(.admin-page) .service-item.is-active {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.35);
}

/* --- Cart panel (inline client dashboard) --- */
.client-dashboard-page:not(.admin-page) .cart-item {
  border-radius: var(--client-radius);
  border: 1px solid var(--client-border);
  background: var(--client-surface-3);
}

.client-dashboard-page:not(.admin-page) .cart-item-main .badge {
  background: rgba(37, 99, 235, 0.14);
  color: #93c5fd;
  border: 1px solid rgba(37, 99, 235, 0.22);
}

/* --- KPI cards in intro --- */
.client-dashboard-page:not(.admin-page) .dashboard-kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(540px, 100%);
  flex: 0 0 min(540px, 100%);
}

.client-dashboard-page:not(.admin-page) .dashboard-kpis .kpi-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 78px;
  padding: 14px 12px;
  text-align: center;
  border-radius: var(--client-radius);
  border: 1px solid var(--client-border);
  background: var(--client-surface-3);
}

.client-dashboard-page:not(.admin-page) .dashboard-kpis .kpi-card strong {
  color: var(--client-text);
  text-shadow: none;
  font-size: 1.15rem;
  line-height: 1.2;
  margin-bottom: 4px;
}

.client-dashboard-page:not(.admin-page) .dashboard-kpis .kpi-card span {
  font-size: 0.78rem;
  line-height: 1.3;
}

.client-dashboard-page:not(.admin-page) .summary-chip {
  border-radius: 10px;
  border: 1px solid var(--client-border);
  background: var(--client-surface-3);
}

.client-dashboard-page:not(.admin-page) .summary-chip strong {
  color: var(--client-text);
}

/* --- Bright theme: client-specific surfaces --- */
html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .client-home-card,
html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .client-home-tasks,
html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .vps-side-card,
html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .vps-power-card,
html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .vps-resource-card,
html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .vps-network-panel,
html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .vps-tab-card,
html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .vps-credentials-panel,
html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .vps-storage-panel,
html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .vps-options-panel,
html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .profile-insight-card,
html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .profile-action-card,
html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .profile-form-card,
html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .profile-settings-panel,
html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .profile-security-panel,
html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .profile-completion-panel,
html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .billing-summary,
html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .service-item,
html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .service-server-card,
html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .cart-item,
html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .dashboard-kpis .kpi-card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .client-home-panel {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.08);
}

html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .xui-backup-option-card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .xui-backup-option-card.is-active,
html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .xui-backup-option-card:has(.xui-backup-option-input:checked) {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(14, 165, 233, 0.05));
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .xui-backup-option-copy strong,
html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .xui-backup-upload-text strong {
  color: #0f172a;
}

html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .xui-backup-option-copy span,
html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .xui-backup-upload-text small,
html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .xui-backup-upload-label {
  color: rgba(15, 23, 42, 0.68);
}

html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .xui-backup-upload-box {
  background: rgba(37, 99, 235, 0.04);
  border-color: rgba(37, 99, 235, 0.18);
}

html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .dashboard-kpis .kpi-card strong {
  color: var(--client-accent);
  text-shadow: none;
}

html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .client-home-tabs button.is-active,
html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .vps-tabs button.is-active {
  color: #ffffff;
}

/* --- Unified professional accent (no per-panel rainbow) --- */
.client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .client-welcome-message {
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: none;
}

.client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .client-welcome-message strong {
  text-shadow: none;
}

.client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .dash-content .dashboard-panel:not([hidden]) {
  border-color: var(--client-border);
  background: var(--client-surface-2);
  box-shadow: none;
}

.client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .dash-content .dashboard-panel:not([hidden]) h2 {
  color: var(--client-text);
}

.client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .dash-content .dashboard-panel:not([hidden]) .subsection-title {
  color: #e2e8f0;
}

.client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .dash-content .dashboard-panel:not([hidden]) .btn-primary:not(.danger) {
  background: var(--client-accent);
  border-color: var(--client-accent);
  box-shadow: none;
}

.client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .dash-content .dashboard-panel:not([hidden]) .vps-terminal-toolbar .vps-terminal-connect-btn.is-connecting:disabled {
  background: rgba(37, 99, 235, 0.14) !important;
  border-color: rgba(96, 165, 250, 0.24) !important;
  color: rgba(147, 197, 253, 0.88) !important;
}

.client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .dash-content .dashboard-panel:not([hidden]) .vps-terminal-toolbar .vps-terminal-connect-btn.is-connected:disabled {
  background: rgba(15, 23, 42, 0.62) !important;
  border-color: rgba(52, 211, 153, 0.24) !important;
  color: rgba(110, 231, 183, 0.82) !important;
}

.client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .dash-content .dashboard-panel:not([hidden]) .client-home-tabs button.is-active,
.client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .dash-content .dashboard-panel:not([hidden]) .vps-tabs button.is-active,
.client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .dash-content .dashboard-panel:not([hidden]) .client-order-provider-tab.is-active {
  background: var(--client-accent);
  border-color: var(--client-accent);
  color: #ffffff;
}

.client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .dash-content .dashboard-panel:not([hidden]) .client-home-bars span:nth-child(odd) {
  background: var(--client-accent);
}

.client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .dash-content .dashboard-panel:not([hidden]) .client-home-bars span:nth-child(even) {
  background: var(--client-warn);
}

.client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .dash-content .dashboard-panel:not([hidden]) .client-home-card-head a,
.client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .dash-content .dashboard-panel:not([hidden]) .client-home-link:hover,
.client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .dash-content .dashboard-panel:not([hidden]) .client-home-link:focus-visible {
  color: #93c5fd;
}

.client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .dash-content .dashboard-panel:not([hidden]) .client-home-traffic-table strong {
  background: rgba(37, 99, 235, 0.25);
  color: #93c5fd;
}

.client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .dash-content .dashboard-panel:not([hidden]) .data-table th,
.client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .dash-content .dashboard-panel:not([hidden]) .invoice-table th,
.client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .dash-content .dashboard-panel:not([hidden]) .orders-table th {
  background: rgba(37, 99, 235, 0.08);
  color: #93c5fd;
}

.client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .dash-content .dashboard-panel:not([hidden]) .summary-chip strong,
.client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .dash-content .dashboard-panel:not([hidden]) .profile-insight-card strong,
.client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .dash-content .dashboard-panel:not([hidden]) .profile-action-card strong {
  color: var(--client-text);
}

.client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .dash-content .dashboard-panel:not([hidden]) .profile-progress-track span {
  background: var(--client-accent);
  box-shadow: none;
}

.client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .dash-content .dashboard-panel:not([hidden]) .ticket-item.active {
  border-color: rgba(37, 99, 235, 0.32);
  background: rgba(37, 99, 235, 0.08);
}

.client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .dash-content .dashboard-panel:not([hidden]) .order-progress-step.is-active .order-progress-marker {
  border-color: rgba(37, 99, 235, 0.45);
  background: rgba(37, 99, 235, 0.12);
  box-shadow: none;
}

.client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .dash-content .dashboard-panel:not([hidden]) .client-order-plan-badge,
.client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .dash-content .dashboard-panel:not([hidden]) .client-order-provider-pill {
  background: rgba(37, 99, 235, 0.14);
  color: #93c5fd;
}

html[data-theme='bright'] .client-dashboard-page:not(.admin-page) .client-dashboard[data-active-panel] .dash-content .dashboard-panel:not([hidden]) {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}

/* --- Status pills: professional semantic colors --- */
.client-dashboard-page:not(.admin-page) .status-active,
.client-dashboard-page:not(.admin-page) .status-pill.status-active {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.3);
}

.client-dashboard-page:not(.admin-page) .status-pending {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.28);
}

.client-dashboard-page:not(.admin-page) .status-paid {
  background: rgba(37, 99, 235, 0.12);
  color: #60a5fa;
  border-color: rgba(37, 99, 235, 0.28);
}