/*
 * SVR4U WHMCS Design System 2026-05-22 v1
 * Purpose: one late-loading visual layer for PHOX + WHMCS + PVEWHMCS.
 * Safe overlay: no business logic, no database work, no credentials.
 */

:root {
  --svr4u-blue: #245bff;
  --svr4u-blue-2: #5145ff;
  --svr4u-purple: #7c3cff;
  --svr4u-cyan: #14b8ff;
  --svr4u-green: #35d978;
  --svr4u-red: #ff5b6a;
  --svr4u-amber: #f8bd45;
  --svr4u-radius-sm: 12px;
  --svr4u-radius: 18px;
  --svr4u-radius-lg: 26px;
  --svr4u-shadow: 0 18px 50px rgba(15, 23, 42, .10);
  --svr4u-shadow-strong: 0 26px 80px rgba(0, 0, 0, .34);
  --svr4u-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html.svr4u-ui-system,
html.svr4u-ui-system body {
  font-family: var(--svr4u-font) !important;
  text-rendering: optimizeLegibility;
}

/* Light base polish */
html.svr4u-ui-system:not(.wdes-dark-mode) body {
  background: #f6f8fc !important;
  color: #111827 !important;
}

html.svr4u-ui-system:not(.wdes-dark-mode) .main-content,
html.svr4u-ui-system:not(.wdes-dark-mode) #main-body,
html.svr4u-ui-system:not(.wdes-dark-mode) .wdes-page-content {
  background: #f6f8fc !important;
}

/* Dark base tokens */
html.svr4u-ui-system.wdes-dark-mode {
  --svr4u-bg: #0c0d10;
  --svr4u-bg-2: #101116;
  --svr4u-panel: #1b1c21;
  --svr4u-panel-2: #222329;
  --svr4u-panel-3: #2b2d34;
  --svr4u-panel-hover: #30323a;
  --svr4u-border: rgba(255,255,255,.10);
  --svr4u-border-2: rgba(255,255,255,.16);
  --svr4u-text: #f8fafc;
  --svr4u-text-2: #e5e7eb;
  --svr4u-muted: #aeb7c7;
  --svr4u-muted-2: #7f899b;
  --svr4u-input: #121318;
  --svr4u-input-border: rgba(255,255,255,.18);
  --svr4u-soft-blue: rgba(36,91,255,.16);
}

html.svr4u-ui-system.wdes-dark-mode body,
html.svr4u-ui-system.wdes-dark-mode #main-body,
html.svr4u-ui-system.wdes-dark-mode .main-content,
html.svr4u-ui-system.wdes-dark-mode .wdes-page-content,
html.svr4u-ui-system.wdes-dark-mode .site-content,
html.svr4u-ui-system.wdes-dark-mode #Primary_Navbar-Home,
html.svr4u-ui-system.wdes-dark-mode .clientarea-page {
  background: radial-gradient(circle at 42% 0%, rgba(55,83,255,.08), transparent 34%), var(--svr4u-bg) !important;
  color: var(--svr4u-text) !important;
}

html.svr4u-ui-system.wdes-dark-mode h1,
html.svr4u-ui-system.wdes-dark-mode h2,
html.svr4u-ui-system.wdes-dark-mode h3,
html.svr4u-ui-system.wdes-dark-mode h4,
html.svr4u-ui-system.wdes-dark-mode h5,
html.svr4u-ui-system.wdes-dark-mode h6,
html.svr4u-ui-system.wdes-dark-mode .page-title,
html.svr4u-ui-system.wdes-dark-mode .product-title,
html.svr4u-ui-system.wdes-dark-mode .section-title,
html.svr4u-ui-system.wdes-dark-mode .panel-title,
html.svr4u-ui-system.wdes-dark-mode .card-title {
  color: var(--svr4u-text) !important;
  text-shadow: none !important;
}

html.svr4u-ui-system.wdes-dark-mode p,
html.svr4u-ui-system.wdes-dark-mode li,
html.svr4u-ui-system.wdes-dark-mode small,
html.svr4u-ui-system.wdes-dark-mode label,
html.svr4u-ui-system.wdes-dark-mode .text-muted,
html.svr4u-ui-system.wdes-dark-mode .help-block,
html.svr4u-ui-system.wdes-dark-mode .breadcrumb,
html.svr4u-ui-system.wdes-dark-mode .breadcrumb a {
  color: var(--svr4u-text-2) !important;
}

html.svr4u-ui-system.wdes-dark-mode a {
  color: #9db8ff;
}

html.svr4u-ui-system.wdes-dark-mode a:hover {
  color: #ffffff;
}

/* Generic cards/forms/tables in dark mode */
html.svr4u-ui-system.wdes-dark-mode .panel,
html.svr4u-ui-system.wdes-dark-mode .card,
html.svr4u-ui-system.wdes-dark-mode .well,
html.svr4u-ui-system.wdes-dark-mode .tile,
html.svr4u-ui-system.wdes-dark-mode .box,
html.svr4u-ui-system.wdes-dark-mode .service-box,
html.svr4u-ui-system.wdes-dark-mode .product-box,
html.svr4u-ui-system.wdes-dark-mode .summary-container,
html.svr4u-ui-system.wdes-dark-mode .logincontainer,
html.svr4u-ui-system.wdes-dark-mode .client-home-panels .panel {
  background: linear-gradient(180deg, var(--svr4u-panel-2), var(--svr4u-panel)) !important;
  border: 1px solid var(--svr4u-border) !important;
  color: var(--svr4u-text) !important;
  box-shadow: var(--svr4u-shadow-strong) !important;
}

html.svr4u-ui-system.wdes-dark-mode .panel-heading,
html.svr4u-ui-system.wdes-dark-mode .card-header,
html.svr4u-ui-system.wdes-dark-mode .panel-footer,
html.svr4u-ui-system.wdes-dark-mode .card-footer {
  background: rgba(255,255,255,.025) !important;
  border-color: var(--svr4u-border) !important;
  color: var(--svr4u-text) !important;
}

html.svr4u-ui-system.wdes-dark-mode input,
html.svr4u-ui-system.wdes-dark-mode select,
html.svr4u-ui-system.wdes-dark-mode textarea,
html.svr4u-ui-system.wdes-dark-mode .form-control,
html.svr4u-ui-system.wdes-dark-mode .field,
html.svr4u-ui-system.wdes-dark-mode .input-group-addon,
html.svr4u-ui-system.wdes-dark-mode .select2-container .select2-selection,
html.svr4u-ui-system.wdes-dark-mode .bootstrap-select .dropdown-toggle {
  background: var(--svr4u-input) !important;
  border: 1px solid var(--svr4u-input-border) !important;
  color: var(--svr4u-text) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

html.svr4u-ui-system.wdes-dark-mode input::placeholder,
html.svr4u-ui-system.wdes-dark-mode textarea::placeholder {
  color: #778196 !important;
  opacity: 1 !important;
}

html.svr4u-ui-system.wdes-dark-mode option,
html.svr4u-ui-system.wdes-dark-mode optgroup {
  background: #121318 !important;
  color: var(--svr4u-text) !important;
}

html.svr4u-ui-system.wdes-dark-mode .table,
html.svr4u-ui-system.wdes-dark-mode table {
  color: var(--svr4u-text-2) !important;
  background: transparent !important;
}

html.svr4u-ui-system.wdes-dark-mode .table > thead > tr > th,
html.svr4u-ui-system.wdes-dark-mode .table > tbody > tr > th,
html.svr4u-ui-system.wdes-dark-mode .table > tbody > tr > td,
html.svr4u-ui-system.wdes-dark-mode table th,
html.svr4u-ui-system.wdes-dark-mode table td {
  background: rgba(255,255,255,.025) !important;
  border-color: var(--svr4u-border) !important;
  color: var(--svr4u-text-2) !important;
}

html.svr4u-ui-system.wdes-dark-mode .alert,
html.svr4u-ui-system.wdes-dark-mode .info-box,
html.svr4u-ui-system.wdes-dark-mode .message,
html.svr4u-ui-system.wdes-dark-mode .notice,
html.svr4u-ui-system.wdes-dark-mode .callout {
  background: rgba(36,91,255,.12) !important;
  border: 1px solid rgba(84,122,255,.28) !important;
  color: var(--svr4u-text-2) !important;
  border-radius: 16px !important;
}

html.svr4u-ui-system.wdes-dark-mode .alert-warning,
html.svr4u-ui-system.wdes-dark-mode .warning {
  background: rgba(248,189,69,.13) !important;
  border-color: rgba(248,189,69,.34) !important;
  color: #ffe8ad !important;
}

html.svr4u-ui-system.wdes-dark-mode .alert-danger,
html.svr4u-ui-system.wdes-dark-mode .danger,
html.svr4u-ui-system.wdes-dark-mode .errorbox {
  background: rgba(255,91,106,.12) !important;
  border-color: rgba(255,91,106,.32) !important;
  color: #ffc3ca !important;
}

html.svr4u-ui-system.wdes-dark-mode .alert-success,
html.svr4u-ui-system.wdes-dark-mode .successbox {
  background: rgba(53,217,120,.12) !important;
  border-color: rgba(53,217,120,.32) !important;
  color: #bbf7d0 !important;
}

/* Buttons */
html.svr4u-ui-system .btn,
html.svr4u-ui-system button,
html.svr4u-ui-system .button,
html.svr4u-ui-system input[type="submit"] {
  border-radius: 12px;
  font-weight: 700;
}

html.svr4u-ui-system.wdes-dark-mode .btn-default,
html.svr4u-ui-system.wdes-dark-mode .btn-light,
html.svr4u-ui-system.wdes-dark-mode .btn-secondary,
html.svr4u-ui-system.wdes-dark-mode .btn-outline,
html.svr4u-ui-system.wdes-dark-mode .button-secondary {
  background: var(--svr4u-panel-3) !important;
  border: 1px solid var(--svr4u-border-2) !important;
  color: var(--svr4u-text) !important;
}

html.svr4u-ui-system.wdes-dark-mode .btn-primary,
html.svr4u-ui-system.wdes-dark-mode .btn-success,
html.svr4u-ui-system.wdes-dark-mode .button-primary,
html.svr4u-ui-system.wdes-dark-mode input[type="submit"] {
  background: linear-gradient(135deg, var(--svr4u-blue), var(--svr4u-purple)) !important;
  border: 0 !important;
  color: #ffffff !important;
  box-shadow: 0 14px 32px rgba(65, 76, 255, .28) !important;
}

/* Status badges */
html.svr4u-ui-system .svr4u-status-running,
html.svr4u-ui-system .svr4u-status-enabled,
html.svr4u-ui-system .status-active,
html.svr4u-ui-system .label-success,
html.svr4u-ui-system .badge-success {
  background: rgba(53,217,120,.15) !important;
  border: 1px solid rgba(53,217,120,.35) !important;
  color: #47e681 !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
}

html.svr4u-ui-system .svr4u-status-unknown,
html.svr4u-ui-system .status-unknown {
  background: rgba(255,91,106,.15) !important;
  border: 1px solid rgba(255,91,106,.40) !important;
  color: #ff6f7b !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
}

html.svr4u-ui-system .svr4u-status-disabled,
html.svr4u-ui-system .svr4u-status-offline,
html.svr4u-ui-system .status-suspended,
html.svr4u-ui-system .status-terminated {
  background: rgba(148,163,184,.16) !important;
  border: 1px solid rgba(148,163,184,.28) !important;
  color: #cbd5e1 !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
}

/* PHOX left application sidebar polish */
html.svr4u-ui-system .wdes-menu-sidebar,
html.svr4u-ui-system .app-sidebar,
html.svr4u-ui-system .main-sidebar {
  box-shadow: 8px 0 30px rgba(0,0,0,.14);
}

/* Product details layout: non-PVE and PVE spacing */
html.svr4u-ui-system.svr4u-page-productdetails #main-body,
html.svr4u-ui-system.svr4u-page-productdetails .main-content {
  overflow-x: hidden !important;
}

html.svr4u-ui-system.svr4u-page-productdetails .svr4u-phox-nonpve-layout,
html.svr4u-ui-system.svr4u-page-productdetails .svr4u-standard-product-layout,
html.svr4u-ui-system.svr4u-page-productdetails .svr4u-nonpve-product-layout {
  gap: 34px !important;
}

html.svr4u-ui-system.svr4u-page-productdetails:not(.svr4u-pve-service) .main-content .container,
html.svr4u-ui-system.svr4u-page-productdetails:not(.svr4u-pve-service) #main-body .container {
  max-width: 1320px !important;
}

html.svr4u-ui-system.wdes-dark-mode.svr4u-page-productdetails:not(.svr4u-pve-service) .panel-sidebar,
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-productdetails:not(.svr4u-pve-service) .sidebar .panel,
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-productdetails:not(.svr4u-pve-service) .list-group-item {
  background: linear-gradient(180deg, #222328, #1b1c20) !important;
  border-color: var(--svr4u-border) !important;
  color: var(--svr4u-text-2) !important;
}

html.svr4u-ui-system.wdes-dark-mode.svr4u-page-productdetails:not(.svr4u-pve-service) .list-group-item.active,
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-productdetails:not(.svr4u-pve-service) .list-group-item.active:hover,
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-productdetails:not(.svr4u-pve-service) .nav-tabs > li.active > a {
  background: linear-gradient(135deg, var(--svr4u-blue), var(--svr4u-purple)) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* PVEWHMCS cards and content */
html.svr4u-ui-system.wdes-dark-mode .pve-modern,
html.svr4u-ui-system.wdes-dark-mode .pvewhmcs-clean-wrap,
html.svr4u-ui-system.wdes-dark-mode .pvewhmcs-action-direct,
html.svr4u-ui-system.wdes-dark-mode .moduleoutput {
  color: var(--svr4u-text) !important;
}

html.svr4u-ui-system.wdes-dark-mode .pve-modern .svr4u-vps-summary-card,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .svr4u-vps-hero-lite,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .svr4u-management-card,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .pve-card,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .pve-gauge-card,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .svr4u-tab-card,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .svr4u-info-card,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .svr4u-bandwidth-card,
html.svr4u-ui-system.wdes-dark-mode .moduleoutput .pve-card,
html.svr4u-ui-system.wdes-dark-mode .pvewhmcs-clean-wrap > .pve-card,
html.svr4u-ui-system.wdes-dark-mode .pvewhmcs-action-direct > .pve-card,
html.svr4u-ui-system.wdes-dark-mode .pvewhmcs-fp-relocated > .pve-card,
html.svr4u-ui-system.wdes-dark-mode [class*="pve-"][class*="card"],
html.svr4u-ui-system.wdes-dark-mode [class*="svr4u-"][class*="card"] {
  background: linear-gradient(180deg, #24252a, #1b1c21) !important;
  border: 1px solid var(--svr4u-border) !important;
  color: var(--svr4u-text) !important;
  box-shadow: var(--svr4u-shadow-strong) !important;
}

html.svr4u-ui-system.wdes-dark-mode .svr4u-vps-summary-card .svr4u-vps-title,
html.svr4u-ui-system.wdes-dark-mode .svr4u-vps-hero-lite .svr4u-vps-title,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .pve-card-title,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .pve-section-header,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .svr4u-tab-title,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .svr4u-card-title,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .svr4u-bandwidth-title,
html.svr4u-ui-system.wdes-dark-mode .pve-modern h1,
html.svr4u-ui-system.wdes-dark-mode .pve-modern h2,
html.svr4u-ui-system.wdes-dark-mode .pve-modern h3,
html.svr4u-ui-system.wdes-dark-mode .pve-modern h4,
html.svr4u-ui-system.wdes-dark-mode .pve-modern strong,
html.svr4u-ui-system.wdes-dark-mode .moduleoutput h1,
html.svr4u-ui-system.wdes-dark-mode .moduleoutput h2,
html.svr4u-ui-system.wdes-dark-mode .moduleoutput h3,
html.svr4u-ui-system.wdes-dark-mode .moduleoutput h4,
html.svr4u-ui-system.wdes-dark-mode .moduleoutput strong {
  color: var(--svr4u-text) !important;
  opacity: 1 !important;
}

html.svr4u-ui-system.wdes-dark-mode .svr4u-vps-summary-card .svr4u-vps-subtitle,
html.svr4u-ui-system.wdes-dark-mode .svr4u-vps-hero-lite .svr4u-vps-subtitle,
html.svr4u-ui-system.wdes-dark-mode .svr4u-management-card .svr4u-section-subtitle,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .pve-info-label,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .pve-gauge-subtitle,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .svr4u-tab-subtitle,
html.svr4u-ui-system.wdes-dark-mode .pve-modern p,
html.svr4u-ui-system.wdes-dark-mode .pve-modern li,
html.svr4u-ui-system.wdes-dark-mode .pve-modern small,
html.svr4u-ui-system.wdes-dark-mode .moduleoutput p,
html.svr4u-ui-system.wdes-dark-mode .moduleoutput li,
html.svr4u-ui-system.wdes-dark-mode .moduleoutput small {
  color: var(--svr4u-text-2) !important;
  opacity: 1 !important;
}

html.svr4u-ui-system.wdes-dark-mode .svr4u-vps-summary-card .svr4u-hero-metric,
html.svr4u-ui-system.wdes-dark-mode .svr4u-vps-hero-lite .svr4u-hero-metric,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .pve-info-row,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .pve-info-block,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .panel-body,
html.svr4u-ui-system.wdes-dark-mode .moduleoutput .panel-body,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .well,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .alert,
html.svr4u-ui-system.wdes-dark-mode .moduleoutput .well,
html.svr4u-ui-system.wdes-dark-mode .moduleoutput .alert {
  background: #2a2b31 !important;
  border-color: var(--svr4u-border) !important;
  color: var(--svr4u-text-2) !important;
}

html.svr4u-ui-system.wdes-dark-mode .pve-modern .pve-info-row,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .pve-info-block {
  min-height: auto !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

html.svr4u-ui-system.wdes-dark-mode .pve-modern input[readonly],
html.svr4u-ui-system.wdes-dark-mode .pve-modern .ip-address,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .badge,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .label,
html.svr4u-ui-system.wdes-dark-mode .moduleoutput .badge,
html.svr4u-ui-system.wdes-dark-mode .moduleoutput .label {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid var(--svr4u-border) !important;
  color: var(--svr4u-text) !important;
}

html.svr4u-ui-system.wdes-dark-mode .pve-action-btn-outline,
html.svr4u-ui-system.wdes-dark-mode .svr4u-vps-action,
html.svr4u-ui-system.wdes-dark-mode .svr4u-action-btn,
html.svr4u-ui-system.wdes-dark-mode .pve-modern a.btn,
html.svr4u-ui-system.wdes-dark-mode .pve-modern button {
  background: linear-gradient(180deg, #30323a, #25262c) !important;
  border: 1px solid var(--svr4u-border-2) !important;
  color: #ffffff !important;
}

html.svr4u-ui-system.wdes-dark-mode .pve-modern a.btn-primary,
html.svr4u-ui-system.wdes-dark-mode .pve-modern button.btn-primary,
html.svr4u-ui-system.wdes-dark-mode .svr4u-vps-action-primary,
html.svr4u-ui-system.wdes-dark-mode .svr4u-action-btn-primary {
  background: linear-gradient(135deg, var(--svr4u-blue), var(--svr4u-purple)) !important;
  border-color: transparent !important;
}

/* PVE status pill specifics */
html.svr4u-ui-system.wdes-dark-mode .svr4u-vps-control-panel-pill,
html.svr4u-ui-system.wdes-dark-mode .svr4u-vps-pill,
html.svr4u-ui-system.wdes-dark-mode .pve-modern [class*="control"][class*="panel"],
html.svr4u-ui-system.wdes-dark-mode .pve-modern [class*="pill"] {
  background: rgba(255,255,255,.08) !important;
  color: #dce7ff !important;
  border: 1px solid rgba(157,184,255,.30) !important;
}

/* noVNC quick-note cards, backups/snapshots/firewall nested white boxes */
html.svr4u-ui-system.wdes-dark-mode .pve-modern .row > [class*="col-"] > .well,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .row > [class*="col-"] > .panel,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .row > [class*="col-"] > .card,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .note-card,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .quick-notes,
html.svr4u-ui-system.wdes-dark-mode .pve-modern [class*="note"],
html.svr4u-ui-system.wdes-dark-mode .pve-modern [class*="backup"],
html.svr4u-ui-system.wdes-dark-mode .pve-modern [class*="snapshot"],
html.svr4u-ui-system.wdes-dark-mode .pve-modern [class*="firewall"] {
  color: var(--svr4u-text-2) !important;
}

html.svr4u-ui-system.wdes-dark-mode .pve-modern .quick-notes,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .before-continue,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .note-card,
html.svr4u-ui-system.wdes-dark-mode .pve-modern [class*="note-card"],
html.svr4u-ui-system.wdes-dark-mode .pve-modern [class*="quick"],
html.svr4u-ui-system.wdes-dark-mode .pve-modern [class*="before"] {
  background: #24252a !important;
  border-color: var(--svr4u-border) !important;
  color: var(--svr4u-text-2) !important;
}

/* Reduce bright stat graphs in dark mode without hiding the data */
html.svr4u-ui-system.wdes-dark-mode.svr4u-pve-service img[src*="rrd"],
html.svr4u-ui-system.wdes-dark-mode.svr4u-pve-service img[src*="graph"],
html.svr4u-ui-system.wdes-dark-mode .pve-modern img[src*="rrd"],
html.svr4u-ui-system.wdes-dark-mode .pve-modern img[src*="graph"] {
  filter: brightness(.82) contrast(1.06) saturate(.90) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

/* Progress bars / bandwidth cards */
html.svr4u-ui-system.wdes-dark-mode .progress,
html.svr4u-ui-system.wdes-dark-mode .progress-bar-wrapper,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .progress {
  background: #16171c !important;
  border: 1px solid var(--svr4u-border) !important;
  border-radius: 999px !important;
}

html.svr4u-ui-system.wdes-dark-mode .progress-bar,
html.svr4u-ui-system.wdes-dark-mode .pve-modern .progress-bar {
  background: linear-gradient(90deg, var(--svr4u-blue), var(--svr4u-cyan)) !important;
}

/* PHOX order/store/cart design system */
html.svr4u-ui-system.wdes-dark-mode #order-phox,
html.svr4u-ui-system.wdes-dark-mode #order-standard_cart,
html.svr4u-ui-system.wdes-dark-mode .orderform-template,
html.svr4u-ui-system.wdes-dark-mode .cart-body,
html.svr4u-ui-system.wdes-dark-mode #frmConfigureProduct,
html.svr4u-ui-system.wdes-dark-mode .wdes-orderform,
html.svr4u-ui-system.wdes-dark-mode .wdes-store {
  background: var(--svr4u-bg) !important;
  color: var(--svr4u-text) !important;
}

/* Store category sidebar - professional compact nav instead of large boxed tiles */
html.svr4u-ui-system.wdes-dark-mode #order-phox .cart-sidebar,
html.svr4u-ui-system.wdes-dark-mode #order-standard_cart .cart-sidebar,
html.svr4u-ui-system.wdes-dark-mode .secondary-cart-sidebar {
  padding-right: 30px !important;
}

html.svr4u-ui-system.wdes-dark-mode #order-phox .cart-sidebar .panel,
html.svr4u-ui-system.wdes-dark-mode #order-phox .cart-sidebar .card,
html.svr4u-ui-system.wdes-dark-mode #order-standard_cart .cart-sidebar .panel,
html.svr4u-ui-system.wdes-dark-mode .secondary-cart-sidebar .panel,
html.svr4u-ui-system.wdes-dark-mode .secondary-cart-sidebar .card {
  background: linear-gradient(180deg, rgba(35,36,42,.94), rgba(25,26,31,.94)) !important;
  border: 1px solid var(--svr4u-border) !important;
  border-radius: 22px !important;
  box-shadow: var(--svr4u-shadow-strong) !important;
  overflow: hidden !important;
}

html.svr4u-ui-system.wdes-dark-mode #order-phox .cart-sidebar .panel-heading,
html.svr4u-ui-system.wdes-dark-mode #order-standard_cart .cart-sidebar .panel-heading,
html.svr4u-ui-system.wdes-dark-mode .secondary-cart-sidebar .panel-heading,
html.svr4u-ui-system.wdes-dark-mode .secondary-cart-sidebar .card-header {
  padding: 18px 20px 8px !important;
  background: transparent !important;
  border: 0 !important;
}

html.svr4u-ui-system.wdes-dark-mode #order-phox .cart-sidebar .list-group,
html.svr4u-ui-system.wdes-dark-mode #order-standard_cart .cart-sidebar .list-group,
html.svr4u-ui-system.wdes-dark-mode .secondary-cart-sidebar .list-group {
  padding: 8px 12px 14px !important;
  background: transparent !important;
  border: 0 !important;
}

html.svr4u-ui-system.wdes-dark-mode #order-phox .cart-sidebar .list-group-item,
html.svr4u-ui-system.wdes-dark-mode #order-phox .cart-sidebar a.list-group-item,
html.svr4u-ui-system.wdes-dark-mode #order-standard_cart .cart-sidebar .list-group-item,
html.svr4u-ui-system.wdes-dark-mode #order-standard_cart .cart-sidebar a.list-group-item,
html.svr4u-ui-system.wdes-dark-mode .secondary-cart-sidebar .list-group-item,
html.svr4u-ui-system.wdes-dark-mode .secondary-cart-sidebar a.list-group-item {
  display: flex !important;
  align-items: center !important;
  min-height: 46px !important;
  margin: 4px 0 !important;
  padding: 12px 16px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  color: var(--svr4u-text-2) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: background .18s ease, border-color .18s ease, transform .18s ease !important;
}

html.svr4u-ui-system.wdes-dark-mode #order-phox .cart-sidebar .list-group-item:hover,
html.svr4u-ui-system.wdes-dark-mode #order-standard_cart .cart-sidebar .list-group-item:hover,
html.svr4u-ui-system.wdes-dark-mode .secondary-cart-sidebar .list-group-item:hover {
  background: rgba(255,255,255,.05) !important;
  border-color: var(--svr4u-border) !important;
  transform: translateX(2px);
}

html.svr4u-ui-system.wdes-dark-mode #order-phox .cart-sidebar .list-group-item.active,
html.svr4u-ui-system.wdes-dark-mode #order-phox .cart-sidebar .list-group-item.selected,
html.svr4u-ui-system.wdes-dark-mode #order-standard_cart .cart-sidebar .list-group-item.active,
html.svr4u-ui-system.wdes-dark-mode .secondary-cart-sidebar .list-group-item.active,
html.svr4u-ui-system.wdes-dark-mode .secondary-cart-sidebar .list-group-item.selected {
  background: linear-gradient(135deg, var(--svr4u-blue), var(--svr4u-purple)) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(68, 73, 255, .32) !important;
}

/* Product/store cards */
html.svr4u-ui-system.wdes-dark-mode #order-phox .product,
html.svr4u-ui-system.wdes-dark-mode #order-phox .product-box,
html.svr4u-ui-system.wdes-dark-mode #order-phox .products .card,
html.svr4u-ui-system.wdes-dark-mode #order-phox .package,
html.svr4u-ui-system.wdes-dark-mode #order-phox .wdes-card,
html.svr4u-ui-system.wdes-dark-mode #order-standard_cart .product,
html.svr4u-ui-system.wdes-dark-mode .store-product-card,
html.svr4u-ui-system.wdes-dark-mode .package-card {
  background: linear-gradient(180deg, #222329, #1b1c21) !important;
  border: 1px solid var(--svr4u-border) !important;
  border-radius: 22px !important;
  color: var(--svr4u-text) !important;
  box-shadow: var(--svr4u-shadow-strong) !important;
}

html.svr4u-ui-system.wdes-dark-mode #order-phox .product:hover,
html.svr4u-ui-system.wdes-dark-mode #order-phox .product-box:hover,
html.svr4u-ui-system.wdes-dark-mode #order-phox .package:hover,
html.svr4u-ui-system.wdes-dark-mode .store-product-card:hover,
html.svr4u-ui-system.wdes-dark-mode .package-card:hover {
  border-color: rgba(84,122,255,.42) !important;
  transform: translateY(-2px);
}

/* Billing cycles - remove nested ugly mini boxes */
html.svr4u-ui-system.wdes-dark-mode #order-phox .billingcycle,
html.svr4u-ui-system.wdes-dark-mode #order-phox .billing-cycle,
html.svr4u-ui-system.wdes-dark-mode #order-phox .billing-cycle-item,
html.svr4u-ui-system.wdes-dark-mode #order-phox .cycle,
html.svr4u-ui-system.wdes-dark-mode #order-standard_cart .billingcycle,
html.svr4u-ui-system.wdes-dark-mode #order-standard_cart .billing-cycle,
html.svr4u-ui-system.wdes-dark-mode #order-standard_cart .billing-cycle-item,
html.svr4u-ui-system.wdes-dark-mode .billing-cycle-card,
html.svr4u-ui-system.wdes-dark-mode [class*="billing"][class*="cycle"] {
  background: linear-gradient(180deg, #222329, #1b1c21) !important;
  border: 1px solid var(--svr4u-border) !important;
  border-radius: 20px !important;
  color: var(--svr4u-text) !important;
  box-shadow: none !important;
}

html.svr4u-ui-system.wdes-dark-mode #order-phox .billingcycle .price,
html.svr4u-ui-system.wdes-dark-mode #order-phox .billing-cycle .price,
html.svr4u-ui-system.wdes-dark-mode #order-phox .cycle .price,
html.svr4u-ui-system.wdes-dark-mode #order-standard_cart .billingcycle .price,
html.svr4u-ui-system.wdes-dark-mode #order-standard_cart .billing-cycle .price {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--svr4u-text) !important;
}

html.svr4u-ui-system.wdes-dark-mode #order-phox .billingcycle.active,
html.svr4u-ui-system.wdes-dark-mode #order-phox .billing-cycle.active,
html.svr4u-ui-system.wdes-dark-mode #order-phox .billing-cycle-item.active,
html.svr4u-ui-system.wdes-dark-mode #order-phox .cycle.active,
html.svr4u-ui-system.wdes-dark-mode #order-standard_cart .billingcycle.active,
html.svr4u-ui-system.wdes-dark-mode .billing-cycle-card.active,
html.svr4u-ui-system.wdes-dark-mode [class*="billing"][class*="cycle"].active {
  border-color: rgba(84,122,255,.65) !important;
  box-shadow: 0 0 0 1px rgba(84,122,255,.30), 0 18px 44px rgba(36,91,255,.18) !important;
}

/* Configure server / configurable option cards */
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct #frmConfigureProduct .panel,
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct #frmConfigureProduct .card,
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct #frmConfigureProduct .form-group,
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct #frmConfigureProduct .config-option,
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct #frmConfigureProduct .configurable-option,
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct #frmConfigureProduct .configurable-options .row > div,
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct #order-phox .configurable-options .panel,
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct #order-phox .configurable-options .card,
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct #order-phox .field-container,
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct #order-phox .option,
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct [class*="configurable"] [class*="option"],
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct [class*="configure"] [class*="server"] {
  background: linear-gradient(180deg, #222329, #1b1c21) !important;
  border: 1px solid var(--svr4u-border) !important;
  border-radius: 18px !important;
  color: var(--svr4u-text) !important;
  box-shadow: var(--svr4u-shadow-strong) !important;
}

html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct #frmConfigureProduct .form-group label,
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct #order-phox .configurable-options label,
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct #order-phox .field-container label,
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct #order-phox legend,
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct #order-phox .section-title {
  color: var(--svr4u-text) !important;
  opacity: 1 !important;
}

html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct #frmConfigureProduct .configurable-option label,
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct #frmConfigureProduct .option label,
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct #frmConfigureProduct .form-group .control-label,
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct #order-phox .configurable-options .control-label {
  color: var(--svr4u-text-2) !important;
}

html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct #order-phox .sub-heading,
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct #order-standard_cart .sub-heading,
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct .sub-heading {
  background: linear-gradient(135deg, var(--svr4u-blue), var(--svr4u-purple)) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 10px 24px !important;
  box-shadow: 0 14px 34px rgba(64,75,255,.28) !important;
}

html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct .sub-heading span,
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct .sub-heading-borderless,
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct .sub-heading-text {
  color: #fff !important;
}

html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct .customfield,
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct .additional-info,
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct .additional-information,
html.svr4u-ui-system.wdes-dark-mode.svr4u-page-confproduct #order-phox .custom-fields {
  background: linear-gradient(180deg, #222329, #1b1c21) !important;
  border: 1px solid var(--svr4u-border) !important;
  border-radius: 18px !important;
  color: var(--svr4u-text) !important;
}

/* Order summary: keep polished but align with design system */
html.svr4u-ui-system.wdes-dark-mode .order-summary,
html.svr4u-ui-system.wdes-dark-mode #orderSummary,
html.svr4u-ui-system.wdes-dark-mode .summary-container,
html.svr4u-ui-system.wdes-dark-mode .cart-summary,
html.svr4u-ui-system.wdes-dark-mode .view-cart-tabs .tab-content {
  background: linear-gradient(180deg, #2831a5, #232783) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 24px !important;
  color: #fff !important;
  box-shadow: 0 28px 80px rgba(28,35,130,.32) !important;
}

html.svr4u-ui-system.wdes-dark-mode .order-summary *,
html.svr4u-ui-system.wdes-dark-mode #orderSummary *,
html.svr4u-ui-system.wdes-dark-mode .summary-container * {
  color: inherit;
}

/* Account/dashboard/ticket/invoice polish */
html.svr4u-ui-system.wdes-dark-mode .client-home-panels .panel,
html.svr4u-ui-system.wdes-dark-mode .tiles .tile,
html.svr4u-ui-system.wdes-dark-mode .home-kb-search,
html.svr4u-ui-system.wdes-dark-mode .ticket-reply,
html.svr4u-ui-system.wdes-dark-mode .ticket-message,
html.svr4u-ui-system.wdes-dark-mode .invoice-container,
html.svr4u-ui-system.wdes-dark-mode .kb-article,
html.svr4u-ui-system.wdes-dark-mode .announcement-single {
  background: linear-gradient(180deg, var(--svr4u-panel-2), var(--svr4u-panel)) !important;
  border: 1px solid var(--svr4u-border) !important;
  border-radius: 20px !important;
  color: var(--svr4u-text) !important;
  box-shadow: var(--svr4u-shadow-strong) !important;
}

/* Mobile / narrow layout */
@media (max-width: 991px) {
  html.svr4u-ui-system .pve-modern .row,
  html.svr4u-ui-system .pve-modern .svr4u-grid,
  html.svr4u-ui-system.svr4u-page-productdetails .row {
    gap: 18px;
  }
  html.svr4u-ui-system.wdes-dark-mode #order-phox .cart-sidebar,
  html.svr4u-ui-system.wdes-dark-mode #order-standard_cart .cart-sidebar,
  html.svr4u-ui-system.wdes-dark-mode .secondary-cart-sidebar {
    padding-right: 0 !important;
    margin-bottom: 22px !important;
  }
}