html {
  background: linear-gradient(135deg, #080612 0%, #11082a 45%, #080e24 100%) fixed;
  min-height: 100%;
}
body, .layout-wrapper, .layout-container, .layout-page, .content-wrapper {
  background: transparent !important;
}
.card {
  background: linear-gradient(135deg, rgba(140,90,255,0.22) 0%, rgba(100,60,200,0.18) 50%, rgba(60,30,140,0.25) 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(180,140,255,0.35) !important;
  border-top: 1px solid rgba(220,190,255,0.5) !important;
  box-shadow: 0 4px 24px rgba(80,40,180,0.25), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}
#layout-menu {
  background: linear-gradient(180deg, #1e0a42 0%, #130d35 30%, #0d1030 65%, #080e22 100%) !important;
  border-right: 1px solid rgba(124,77,232,0.25) !important;
}
.menu-header-text {
  background: linear-gradient(90deg, #a78bfa, #22d3ee) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 600 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.08em !important;
}
.menu-item.active > .menu-link {
  background: linear-gradient(90deg, rgba(124,77,232,0.3), rgba(0,200,200,0.08)) !important;
  border-left: 3px solid #a78bfa !important;
  border-radius: 0 6px 6px 0 !important;
}
#layout-navbar {
  background: rgba(8,6,18,0.8) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(124,77,232,0.2) !important;
}
.card-title { color: #e8d8ff !important; }
.dashboard-main-title {
  text-align: center !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  background: linear-gradient(90deg, #a78bfa, #60c8ff, #a78bfa) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-bottom: 1rem !important;
  text-transform: uppercase !important;
}
.card, .card p, .card span, .card div, .card li { color: #d0c8f0 !important; }
.card .text-muted { color: #9080c0 !important; }
.text-black { color: #e8e0ff !important; }
.card h1,.card h2,.card h3,.card h4,.card h5,.card h6 { color: #f0ebff !important; }
.list-group-item { background: transparent !important; border-color: rgba(167,139,250,0.15) !important; color: #d0c8f0 !important; }
.col-lg-4 { display: flex !important; flex-direction: column !important; }
.col-lg-4 .card { flex: 1 !important; overflow: hidden !important; }
.col-lg-8 .card { overflow: hidden !important; height: auto !important; }
.col-lg-8 .card-body { padding-bottom: 0 !important; }
.menu-inner .menu-item .menu-link { color: #b0a0d8 !important; }
.menu-inner .menu-item.active .menu-link { color: #e8e0ff !important; }
.checkout-page, .checkout-page p, .checkout-page span, .checkout-page label, .checkout-page div { color: #d0c8f0 !important; }
.checkout-page h1, .checkout-page h2, .checkout-page h3, .checkout-page h4, .checkout-page h5 { color: #f0ebff !important; }
.checkout-container, .checkout-container p, .checkout-container span,
.checkout-container label, .checkout-container div, .checkout-container small,
#checkout-page, #checkout-page p, #checkout-page span, #checkout-page label {
  color: #d0c8f0 !important;
}
.cart-item-title, .cart-item-name { color: #e8e0ff !important; }
.form-check-label { color: #d0c8f0 !important; }
.text-muted { color: #9080c0 !important; }
.card p, .card small, .card label, .card .form-check-label { color: #d0c8f0 !important; }
.card h4 { color: #f0ebff !important; }
.card .text-muted { color: #9080c0 !important; }
.text-heading {
  background: linear-gradient(90deg, #a78bfa, #60c8ff) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* DDX LIGHT BASELINE V2 — START */

:root {
  --ddx-bg: #f7f7f7;
  --ddx-surface: #ffffff;
  --ddx-surface-muted: #fafafa;
  --ddx-surface-hover: #f5f5f5;
  --ddx-text: #111111;
  --ddx-text-soft: #404040;
  --ddx-muted: #737373;
  --ddx-border: #e5e5e5;
  --ddx-border-strong: #d4d4d4;
  --ddx-primary: #111111;
  --ddx-primary-hover: #292929;
  --ddx-primary-soft: #f1f1f1;
  --ddx-focus: rgba(17, 17, 17, 0.14);
  --ddx-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --ddx-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);

  --bs-primary: #111111;
  --bs-primary-rgb: 17, 17, 17;
  --bs-link-color: #111111;
  --bs-link-color-rgb: 17, 17, 17;
  --bs-link-hover-color: #404040;
  --bs-link-hover-color-rgb: 64, 64, 64;
  --bs-body-color: #404040;
  --bs-body-color-rgb: 64, 64, 64;
  --bs-body-bg: #f7f7f7;
  --bs-body-bg-rgb: 247, 247, 247;
  --bs-border-color: #e5e5e5;
}

/* Base shell */

html.light-style,
html.light-style body,
.light-style .layout-wrapper,
.light-style .layout-container,
.light-style .layout-page,
.light-style .content-wrapper {
  color-scheme: light;
  color: var(--ddx-text-soft);
  background: var(--ddx-bg) !important;
}

.light-style h1,
.light-style h2,
.light-style h3,
.light-style h4,
.light-style h5,
.light-style h6,
.light-style .h1,
.light-style .h2,
.light-style .h3,
.light-style .h4,
.light-style .h5,
.light-style .h6,
.light-style .card-title,
.light-style .text-heading {
  color: var(--ddx-text) !important;
}

.light-style .text-body {
  color: var(--ddx-text-soft) !important;
}

.light-style .text-muted,
.light-style small.text-muted,
.light-style .form-text {
  color: var(--ddx-muted) !important;
}

/* Navigation */

.light-style .layout-menu,
.light-style .menu-vertical,
.light-style .menu-inner,
.light-style .layout-navbar,
.light-style .navbar,
.light-style .footer,
.light-style .content-footer {
  background: var(--ddx-surface) !important;
}

.light-style .layout-menu {
  border-right: 1px solid var(--ddx-border);
  box-shadow: none !important;
}

.light-style .layout-navbar {
  border: 1px solid var(--ddx-border);
  box-shadow: var(--ddx-shadow-sm) !important;
}

.light-style .menu-link,
.light-style .menu-toggle,
.light-style .menu-toggle::after {
  color: var(--ddx-text-soft) !important;
}

.light-style .menu-item .menu-link:hover,
.light-style .menu-item.open > .menu-link,
.light-style .menu-item.open > .menu-toggle {
  color: var(--ddx-text) !important;
  background: var(--ddx-surface-hover) !important;
}

.light-style .menu-item.active > .menu-link {
  color: #ffffff !important;
  background: var(--ddx-primary) !important;
  box-shadow: none !important;
}

.light-style .menu-item.active > .menu-link *,
.light-style .menu-item.active > .menu-link::after {
  color: #ffffff !important;
}

.light-style .menu-header .menu-header-text {
  color: var(--ddx-muted) !important;
}

/* Cards, dropdowns and overlays */

.light-style .card,
.light-style .accordion-item,
.light-style .modal-content,
.light-style .offcanvas,
.light-style .dropdown-menu,
.light-style .list-group-item {
  background: var(--ddx-surface) !important;
  border-color: var(--ddx-border) !important;
}

.light-style .card {
  border: 1px solid var(--ddx-border) !important;
  border-radius: 12px;
  box-shadow: var(--ddx-shadow-sm) !important;
}

.light-style .card-header,
.light-style .card-footer,
.light-style .modal-header,
.light-style .modal-footer {
  background: transparent !important;
  border-color: var(--ddx-border) !important;
}

.light-style .modal-content,
.light-style .offcanvas {
  box-shadow: var(--ddx-shadow) !important;
}

/* Primary color */

.light-style .btn-primary,
.light-style .btn.btn-primary {
  color: #ffffff !important;
  background: var(--ddx-primary) !important;
  border-color: var(--ddx-primary) !important;
  box-shadow: none !important;
}

.light-style .btn-primary:hover,
.light-style .btn-primary:focus,
.light-style .btn-primary:active {
  color: #ffffff !important;
  background: var(--ddx-primary-hover) !important;
  border-color: var(--ddx-primary-hover) !important;
  box-shadow: 0 0 0 0.2rem var(--ddx-focus) !important;
}

.light-style .btn-outline-primary {
  color: var(--ddx-primary) !important;
  background: transparent !important;
  border-color: var(--ddx-border-strong) !important;
  box-shadow: none !important;
}

.light-style .btn-outline-primary:hover,
.light-style .btn-outline-primary:focus,
.light-style .btn-outline-primary:active {
  color: #ffffff !important;
  background: var(--ddx-primary) !important;
  border-color: var(--ddx-primary) !important;
}

.light-style .bg-primary,
.light-style .badge.bg-primary {
  background-color: var(--ddx-primary) !important;
}

.light-style .bg-label-primary {
  color: var(--ddx-primary) !important;
  background: var(--ddx-primary-soft) !important;
}

.light-style .text-primary {
  color: var(--ddx-primary) !important;
}

.light-style .border-primary {
  border-color: var(--ddx-primary) !important;
}

/* Forms */

.light-style .form-label,
.light-style .col-form-label {
  color: var(--ddx-text-soft) !important;
  font-weight: 500;
}

.light-style .form-control,
.light-style .form-select,
.light-style .input-group-text,
.light-style .select2-container--default .select2-selection {
  color: var(--ddx-text) !important;
  background: var(--ddx-surface) !important;
  border-color: var(--ddx-border-strong) !important;
  box-shadow: none !important;
}

.light-style .form-control::placeholder {
  color: #a3a3a3 !important;
}

.light-style .form-control:hover,
.light-style .form-select:hover {
  border-color: #a3a3a3 !important;
}

.light-style .form-control:focus,
.light-style .form-select:focus,
.light-style .form-check-input:focus {
  border-color: var(--ddx-primary) !important;
  box-shadow: 0 0 0 0.2rem var(--ddx-focus) !important;
}

.light-style .form-check-input:checked,
.light-style .form-switch .form-check-input:checked {
  background-color: var(--ddx-primary) !important;
  border-color: var(--ddx-primary) !important;
}

/* Tables */

.light-style .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ddx-text-soft);
  --bs-table-border-color: var(--ddx-border);
  color: var(--ddx-text-soft) !important;
}

.light-style .table > thead > tr > th {
  color: var(--ddx-text);
  background: var(--ddx-surface-muted);
  border-color: var(--ddx-border) !important;
  font-weight: 600;
}

.light-style .table > tbody > tr > td,
.light-style .table > tbody > tr > th {
  border-color: var(--ddx-border) !important;
}

.light-style .table-hover > tbody > tr:hover > * {
  background: var(--ddx-surface-hover) !important;
}

/* Tabs and dropdowns */

.light-style .nav-tabs {
  border-color: var(--ddx-border) !important;
}

.light-style .nav-tabs .nav-link {
  color: var(--ddx-muted);
}

.light-style .nav-tabs .nav-link:hover {
  color: var(--ddx-text);
  border-color: transparent;
}

.light-style .nav-tabs .nav-link.active {
  color: var(--ddx-text) !important;
  background: var(--ddx-surface) !important;
  border-color: transparent transparent var(--ddx-primary) !important;
}

.light-style .dropdown-item {
  color: var(--ddx-text-soft);
}

.light-style .dropdown-item:hover,
.light-style .dropdown-item:focus {
  color: var(--ddx-text);
  background: var(--ddx-surface-hover) !important;
}

.light-style .dropdown-item.active,
.light-style .dropdown-item:active {
  color: #ffffff !important;
  background: var(--ddx-primary) !important;
}

.light-style .page-item.active .page-link {
  color: #ffffff !important;
  background: var(--ddx-primary) !important;
  border-color: var(--ddx-primary) !important;
}

.light-style .page-link {
  color: var(--ddx-text-soft) !important;
}

/* Layout spacing */

.light-style .container-p-y {
  padding-top: 1.25rem;
  padding-bottom: 1.5rem;
}

.light-style .content-wrapper {
  min-height: calc(100vh - 64px);
}

/* Checkout */

.light-style #checkout-form .card {
  overflow: hidden;
}

.light-style #checkout-form .card-header {
  padding: 1rem 1.25rem;
}

.light-style #checkout-form .card-body {
  padding: 1.25rem;
}

.light-style #checkout-form h1,
.light-style #checkout-form h2,
.light-style #checkout-form h3,
.light-style #checkout-form h4,
.light-style #checkout-form h5,
.light-style #checkout-form h6 {
  letter-spacing: -0.015em;
}

.light-style #checkout-form .custom-option {
  background: var(--ddx-surface) !important;
  border: 1px solid var(--ddx-border) !important;
  border-radius: 10px;
  box-shadow: none !important;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.light-style #checkout-form .custom-option:hover {
  background: var(--ddx-surface-muted) !important;
  border-color: var(--ddx-border-strong) !important;
}

.light-style #checkout-form .custom-option.checked,
.light-style #checkout-form .custom-option:has(.form-check-input:checked) {
  background: #ffffff !important;
  border: 2px solid var(--ddx-primary) !important;
}

.light-style #checkout-form hr {
  border-color: var(--ddx-border);
  opacity: 1;
}

.light-style #checkout-form .list-group-item {
  padding: 0.875rem 0;
  border-left: 0 !important;
  border-right: 0 !important;
}

.light-style #checkout-form .ddx-pay-btn,
.light-style #checkout-form #checkout-btn {
  width: 100%;
  min-height: 48px;
  color: #ffffff !important;
  background: var(--ddx-primary) !important;
  border-color: var(--ddx-primary) !important;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: none !important;
}

.light-style #checkout-form .ddx-pay-btn:hover,
.light-style #checkout-form #checkout-btn:hover {
  background: var(--ddx-primary-hover) !important;
  border-color: var(--ddx-primary-hover) !important;
}

.light-style #checkout-form .ddx-pay-btn.disabled,
.light-style #checkout-form .ddx-pay-btn:disabled,
.light-style #checkout-form #checkout-btn.disabled,
.light-style #checkout-form #checkout-btn:disabled {
  color: #a3a3a3 !important;
  background: #e5e5e5 !important;
  border-color: #e5e5e5 !important;
  opacity: 1;
}

.light-style #checkout-result,
.light-style #checkout-confirmation {
  color: var(--ddx-text-soft);
}

@media (max-width: 767.98px) {
  .light-style .container-p-y {
    padding-top: 0.875rem;
    padding-bottom: 1.25rem;
  }

  .light-style .layout-navbar {
    border-left: 0;
    border-right: 0;
    border-radius: 0 !important;
  }

  .light-style #checkout-form .card-header {
    padding: 0.875rem 1rem;
  }

  .light-style #checkout-form .card-body {
    padding: 1rem;
  }

  .light-style #checkout-form .ddx-pay-btn,
  .light-style #checkout-form #checkout-btn {
    min-height: 50px;
  }
}

/* DDX LIGHT BASELINE V2 — END */

/* DDX BLACK NAV AND TEXT V4 — START */

/*
 * COLOR-ONLY PATCH
 *
 * - Top navbar becomes black.
 * - Sidebar menu font colors remain untouched.
 * - Purple, lavender and low-contrast content text becomes black.
 * - No functionality, routes, forms, APIs or checkout behavior changed.
 */

/* ================================================================
   TOP HORIZONTAL MENU BAR
   ================================================================ */

html.light-style .layout-page > .layout-navbar,
html.light-style .layout-page > nav.layout-navbar,
html.light-style .layout-navbar.navbar,
html.light-style #layout-navbar {
  background: #000000 !important;
  background-image: none !important;
  border-color: #000000 !important;
  box-shadow: none !important;
}

/*
 * Keep navbar controls readable on the new black background.
 * This does not affect the vertical sidebar menu.
 */
html.light-style .layout-navbar .nav-link,
html.light-style .layout-navbar .btn,
html.light-style .layout-navbar i,
html.light-style .layout-navbar svg,
html.light-style .layout-navbar .navbar-nav > li > a {
  color: #ffffff !important;
}

html.light-style .layout-navbar svg {
  fill: currentColor;
}

/* ================================================================
   CONTENT TEXT — EXCLUDES THE VERTICAL SIDEBAR MENU
   ================================================================ */

/* Main headings and ordinary text inside page content */
html.light-style .content-wrapper h1,
html.light-style .content-wrapper h2,
html.light-style .content-wrapper h3,
html.light-style .content-wrapper h4,
html.light-style .content-wrapper h5,
html.light-style .content-wrapper h6,
html.light-style .content-wrapper .h1,
html.light-style .content-wrapper .h2,
html.light-style .content-wrapper .h3,
html.light-style .content-wrapper .h4,
html.light-style .content-wrapper .h5,
html.light-style .content-wrapper .h6,
html.light-style .content-wrapper .card-title,
html.light-style .content-wrapper .text-heading {
  color: #111111 !important;
  opacity: 1 !important;
}

/* Purple and primary utility text inside content */
html.light-style .content-wrapper .text-primary,
html.light-style .content-wrapper .text-purple,
html.light-style .content-wrapper .text-indigo,
html.light-style .content-wrapper .text-violet,
html.light-style .content-wrapper [class*="text-purple"],
html.light-style .content-wrapper [class*="text-violet"],
html.light-style .content-wrapper [class*="text-indigo"] {
  color: #111111 !important;
  opacity: 1 !important;
}

/* Muted and washed-out content labels */
html.light-style .content-wrapper .text-muted,
html.light-style .content-wrapper small,
html.light-style .content-wrapper small.text-muted,
html.light-style .content-wrapper .form-text,
html.light-style .content-wrapper .breadcrumb-item,
html.light-style .content-wrapper .breadcrumb-item a {
  color: #444444 !important;
  opacity: 1 !important;
}

/* Card copy, labels and dashboard details */
html.light-style .content-wrapper .card p,
html.light-style .content-wrapper .card label,
html.light-style .content-wrapper .card .form-label,
html.light-style .content-wrapper .card .col-form-label,
html.light-style .content-wrapper .card-body > span:not(.badge),
html.light-style .content-wrapper .card-body > small,
html.light-style .content-wrapper .card-body > div:not(.progress):not(.progress-bar) {
  color: #222222;
}

/* Links in the page content */
html.light-style .content-wrapper a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: #111111 !important;
}

html.light-style .content-wrapper a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
  color: #000000 !important;
}

/* ================================================================
   INLINE PURPLE COLORS USED BY INDIVIDUAL DASHBOARD WIDGETS
   ================================================================ */

html.light-style .content-wrapper [style*="#7c4de8" i],
html.light-style .content-wrapper [style*="#7367f0" i],
html.light-style .content-wrapper [style*="#666cff" i],
html.light-style .content-wrapper [style*="#8b5cf6" i],
html.light-style .content-wrapper [style*="#9333ea" i],
html.light-style .content-wrapper [style*="#a78bfa" i],
html.light-style .content-wrapper [style*="#c4b5fd" i],
html.light-style .content-wrapper [style*="#ddd6fe" i] {
  color: #111111 !important;
}

/*
 * Progress bars should remain visible.
 * Only their purple fill changes to black; surrounding text becomes black.
 */
html.light-style .content-wrapper .progress {
  background-color: #e5e5e5 !important;
}

html.light-style .content-wrapper .progress-bar.bg-primary,
html.light-style .content-wrapper .progress-bar[style*="#7c4de8" i],
html.light-style .content-wrapper .progress-bar[style*="#7367f0" i],
html.light-style .content-wrapper .progress-bar[style*="#666cff" i],
html.light-style .content-wrapper .progress-bar[style*="#8b5cf6" i] {
  color: #ffffff !important;
  background: #111111 !important;
  background-image: none !important;
}

/* ================================================================
   PRIMARY/LAVENDER LABELS AND OUTLINES
   ================================================================ */

html.light-style .content-wrapper .bg-label-primary,
html.light-style .content-wrapper .bg-label-purple,
html.light-style .content-wrapper .badge.bg-label-primary,
html.light-style .content-wrapper .badge.bg-label-purple {
  color: #111111 !important;
  background: #eeeeee !important;
  background-image: none !important;
}

html.light-style .content-wrapper .border-primary,
html.light-style .content-wrapper .border-purple {
  border-color: #bdbdbd !important;
}

/* Neutral content buttons */
html.light-style .content-wrapper .btn-primary {
  color: #ffffff !important;
  background: #111111 !important;
  background-image: none !important;
  border-color: #111111 !important;
}

html.light-style .content-wrapper .btn-primary:hover,
html.light-style .content-wrapper .btn-primary:focus,
html.light-style .content-wrapper .btn-primary:active {
  color: #ffffff !important;
  background: #292929 !important;
  border-color: #292929 !important;
}

html.light-style .content-wrapper .btn-outline-primary,
html.light-style .content-wrapper .btn-outline-purple {
  color: #111111 !important;
  background: #ffffff !important;
  background-image: none !important;
  border-color: #bdbdbd !important;
}

html.light-style .content-wrapper .btn-outline-primary:hover,
html.light-style .content-wrapper .btn-outline-purple:hover {
  color: #ffffff !important;
  background: #111111 !important;
  border-color: #111111 !important;
}

/* ================================================================
   DASHBOARD-SPECIFIC CONTRAST
   ================================================================ */

/* Greeting and dashboard widget text */
html.light-style .content-wrapper [class*="welcome"],
html.light-style .content-wrapper [class*="greeting"],
html.light-style .content-wrapper [class*="status"] {
  --bs-heading-color: #111111;
}

/* Keep semantic success, warning and danger colors available */
html.light-style .content-wrapper .text-success {
  color: #2e7d32 !important;
}

html.light-style .content-wrapper .text-warning {
  color: #9a6200 !important;
}

html.light-style .content-wrapper .text-danger {
  color: #c62828 !important;
}

html.light-style .content-wrapper .text-info {
  color: #245b78 !important;
}

/* ================================================================
   SIDEBAR MENU PROTECTION
   ================================================================ */

/*
 * Do not recolor the vertical sidebar text or icons.
 * Existing sidebar menu colors remain exactly as supplied by its theme.
 */
html.light-style #layout-menu .menu-link,
html.light-style #layout-menu .menu-link div,
html.light-style #layout-menu .menu-link span,
html.light-style #layout-menu .menu-link i,
html.light-style #layout-menu .menu-toggle,
html.light-style #layout-menu .menu-toggle::after {
  opacity: 1;
}

/* DDX BLACK NAV AND TEXT V4 — END */

/* DDX DASHBOARD CONTRAST V5 — START */

/*
 * Dashboard-only visual contrast patch.
 * No controllers, routes, redirects, forms, APIs, payment services,
 * keys, environment variables or JavaScript behavior are changed.
 */

/* Main dashboard content only */
html.light-style .content-wrapper .card,
html.light-style .content-wrapper .card-body,
html.light-style .content-wrapper .card-header {
  color: #222222;
}

/* Remaining lavender headings and labels */
html.light-style .content-wrapper .card h1,
html.light-style .content-wrapper .card h2,
html.light-style .content-wrapper .card h3,
html.light-style .content-wrapper .card h4,
html.light-style .content-wrapper .card h5,
html.light-style .content-wrapper .card h6,
html.light-style .content-wrapper .card .h1,
html.light-style .content-wrapper .card .h2,
html.light-style .content-wrapper .card .h3,
html.light-style .content-wrapper .card .h4,
html.light-style .content-wrapper .card .h5,
html.light-style .content-wrapper .card .h6,
html.light-style .content-wrapper .card .card-title,
html.light-style .content-wrapper .card .text-primary,
html.light-style .content-wrapper .card .text-purple,
html.light-style .content-wrapper .card .text-violet,
html.light-style .content-wrapper .card .text-indigo {
  color: #111111 !important;
  opacity: 1 !important;
}

/* Dashboard values, captions and helper copy */
html.light-style .content-wrapper .card p,
html.light-style .content-wrapper .card small,
html.light-style .content-wrapper .card label,
html.light-style .content-wrapper .card span:not(.badge):not(.avatar-initial),
html.light-style .content-wrapper .card div:not(.progress):not(.progress-bar) {
  opacity: 1;
}

html.light-style .content-wrapper .card small,
html.light-style .content-wrapper .card .text-muted,
html.light-style .content-wrapper .card .form-text {
  color: #555555 !important;
}

/* Catch inline lavender text used by dashboard widgets */
html.light-style .content-wrapper .card [style*="color:#7c4de8" i],
html.light-style .content-wrapper .card [style*="color: #7c4de8" i],
html.light-style .content-wrapper .card [style*="color:#7367f0" i],
html.light-style .content-wrapper .card [style*="color: #7367f0" i],
html.light-style .content-wrapper .card [style*="color:#666cff" i],
html.light-style .content-wrapper .card [style*="color: #666cff" i],
html.light-style .content-wrapper .card [style*="color:#8b5cf6" i],
html.light-style .content-wrapper .card [style*="color: #8b5cf6" i],
html.light-style .content-wrapper .card [style*="color:#a78bfa" i],
html.light-style .content-wrapper .card [style*="color: #a78bfa" i],
html.light-style .content-wrapper .card [style*="color:#c4b5fd" i],
html.light-style .content-wrapper .card [style*="color: #c4b5fd" i] {
  color: #111111 !important;
}

/* Remove pale-purple borders from dashboard cards and panels */
html.light-style .content-wrapper .card,
html.light-style .content-wrapper .border-primary,
html.light-style .content-wrapper [style*="border-color:#7c4de8" i],
html.light-style .content-wrapper [style*="border-color: #7c4de8" i],
html.light-style .content-wrapper [style*="border-color:#7367f0" i],
html.light-style .content-wrapper [style*="border-color: #7367f0" i],
html.light-style .content-wrapper [style*="border-color:#c4b5fd" i],
html.light-style .content-wrapper [style*="border-color: #c4b5fd" i] {
  border-color: #dddddd !important;
}

/* Latest-post panel and empty-state box */
html.light-style .content-wrapper .card .list-group-item,
html.light-style .content-wrapper .card .alert,
html.light-style .content-wrapper .card [class*="empty"],
html.light-style .content-wrapper .card [class*="latest"] {
  color: #222222 !important;
  background: #ffffff !important;
  background-image: none !important;
  border-color: #dddddd !important;
}

/* Community button at the bottom right */
html.light-style .content-wrapper .btn-outline-primary,
html.light-style .content-wrapper .btn-outline-purple {
  color: #111111 !important;
  background: #ffffff !important;
  border-color: #bdbdbd !important;
  box-shadow: none !important;
}

html.light-style .content-wrapper .btn-outline-primary:hover,
html.light-style .content-wrapper .btn-outline-purple:hover {
  color: #ffffff !important;
  background: #111111 !important;
  border-color: #111111 !important;
}

/* Dashboard announcement heading */
html.light-style .content-wrapper [class*="shout"],
html.light-style .content-wrapper [class*="announcement"] {
  color: #111111 !important;
}

/* Preserve semantic progress colors except purple primary */
html.light-style .content-wrapper .progress {
  background: #e5e5e5 !important;
}

html.light-style .content-wrapper .progress-bar.bg-primary,
html.light-style .content-wrapper .progress-bar[style*="#7c4de8" i],
html.light-style .content-wrapper .progress-bar[style*="#7367f0" i],
html.light-style .content-wrapper .progress-bar[style*="#666cff" i] {
  background: #111111 !important;
  background-image: none !important;
}

/* Keep cyan TTAB bar and semantic colors intact */
html.light-style .content-wrapper .progress-bar.bg-info {
  background-color: #00a8d6 !important;
}

/* Do not alter the vertical sidebar menu */
html.light-style #layout-menu,
html.light-style #layout-menu .menu-link,
html.light-style #layout-menu .menu-link *,
html.light-style #layout-menu .menu-toggle,
html.light-style #layout-menu .menu-toggle::after {
  /* intentionally no color override */
}

/* DDX DASHBOARD CONTRAST V5 — END */

/* DDX MENU BLACK + DASH TEXT BLACK V8.1 — START */

/*
 * VISUAL-ONLY OVERRIDES
 * No routes, redirects, controllers, checkout logic, APIs,
 * payment credentials, environment variables or JavaScript behavior.
 */

/* Left sidebar background */

html.light-style #layout-menu,
html.light-style .layout-menu,
html.light-style aside.layout-menu,
html.light-style #layout-menu .app-brand,
html.light-style .layout-menu .app-brand,
html.light-style #layout-menu .menu-inner {
  background-color: #000000 !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

/*
 * No sidebar text or icon color declarations are included here.
 * Existing menu font colors remain controlled by the menu theme.
 */

/* Dashboard content text */

html.light-style .content-wrapper h1,
html.light-style .content-wrapper h2,
html.light-style .content-wrapper h3,
html.light-style .content-wrapper h4,
html.light-style .content-wrapper h5,
html.light-style .content-wrapper h6,
html.light-style .content-wrapper .h1,
html.light-style .content-wrapper .h2,
html.light-style .content-wrapper .h3,
html.light-style .content-wrapper .h4,
html.light-style .content-wrapper .h5,
html.light-style .content-wrapper .h6,
html.light-style .content-wrapper .card-title,
html.light-style .content-wrapper .text-heading,
html.light-style .content-wrapper .text-primary,
html.light-style .content-wrapper .text-purple,
html.light-style .content-wrapper .text-violet,
html.light-style .content-wrapper .text-indigo {
  color: #111111 !important;
  opacity: 1 !important;
}

html.light-style .content-wrapper p,
html.light-style .content-wrapper label,
html.light-style .content-wrapper li,
html.light-style .content-wrapper td,
html.light-style .content-wrapper th,
html.light-style .content-wrapper .small,
html.light-style .content-wrapper small,
html.light-style .content-wrapper .text-muted,
html.light-style .content-wrapper .form-text {
  color: #333333 !important;
  opacity: 1 !important;
}

/* Catch remaining inline font colors inside dashboard content */

html.light-style .content-wrapper [style*="color:#"],
html.light-style .content-wrapper [style*="color: #"] {
  color: #111111 !important;
}

/* Preserve white text on black primary buttons */

html.light-style .content-wrapper .btn-primary,
html.light-style .content-wrapper .btn-primary *,
html.light-style .content-wrapper button.btn-primary,
html.light-style .content-wrapper button.btn-primary * {
  color: #ffffff !important;
  background-color: #111111 !important;
  border-color: #111111 !important;
}

/* Neutral outline buttons */

html.light-style .content-wrapper .btn-outline-primary,
html.light-style .content-wrapper .btn-outline-primary *,
html.light-style .content-wrapper .btn-outline-secondary,
html.light-style .content-wrapper .btn-outline-secondary * {
  color: #111111 !important;
}

html.light-style .content-wrapper .btn-outline-primary,
html.light-style .content-wrapper .btn-outline-secondary {
  background-color: #ffffff !important;
  border-color: #bdbdbd !important;
}

/* Neutral dashboard cards and panels */

html.light-style .content-wrapper .card,
html.light-style .content-wrapper .list-group-item,
html.light-style .content-wrapper .alert {
  background-color: #ffffff !important;
  border-color: #dddddd !important;
}

/* Black PTAB progress; retain visible track */

html.light-style .content-wrapper .progress {
  background-color: #e5e5e5 !important;
}

html.light-style .content-wrapper .progress-bar.bg-primary,
html.light-style .content-wrapper .progress-bar[style*="#7c4de8"],
html.light-style .content-wrapper .progress-bar[style*="#7367f0"],
html.light-style .content-wrapper .progress-bar[style*="#666cff"] {
  background-color: #111111 !important;
  background-image: none !important;
}

/* Keep the blue TTAB progress distinguishable */

html.light-style .content-wrapper .progress-bar.bg-info,
html.light-style .content-wrapper .progress-bar[style*="#0ea5e9"] {
  background-color: #0ea5e9 !important;
}

/* DDX MENU BLACK + DASH TEXT BLACK V8.1 — END */

/* DDX DASHBOARD MODERN MOCKUP V9 — START */

/*
 * Dashboard mockup polish
 * - keep black / white palette
 * - keep video plugin intact
 * - premium card contrast / spacing / shadows
 * - black sidebar background, existing sidebar font colors preserved
 */

.ddx-dashboard-modern {
  --ddx-black: #0a0a0a;
  --ddx-charcoal: #141414;
  --ddx-gray-1: #f6f6f6;
  --ddx-gray-2: #ececec;
  --ddx-gray-3: #d9d9d9;
  --ddx-text: #111111;
  --ddx-subtext: #4a4a4a;
  --ddx-shadow: 0 12px 28px rgba(0,0,0,.07);
  --ddx-radius: 20px;
}

/* ===== layout shell ===== */

html.light-style #layout-menu,
html.light-style .layout-menu,
html.light-style aside.layout-menu,
html.light-style #layout-menu .app-brand,
html.light-style .layout-menu .app-brand,
html.light-style #layout-menu .menu-inner {
  background: #000000 !important;
  background-image: none !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
}

/* keep menu font colors under existing theme control */
html.light-style #layout-menu .menu-item.active > .menu-link {
  background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important;
  border-left: 3px solid #ffffff !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

html.light-style .layout-page > .layout-navbar,
html.light-style .layout-page > nav.layout-navbar,
html.light-style .layout-navbar.navbar,
html.light-style #layout-navbar {
  background: #000000 !important;
  background-image: none !important;
  border-color: #000000 !important;
  box-shadow: none !important;
}

/* ===== dashboard cards ===== */

.ddx-dashboard-modern .card {
  border: 1px solid #dddddd !important;
  border-radius: var(--ddx-radius) !important;
  background: #ffffff !important;
  box-shadow: var(--ddx-shadow) !important;
  overflow: hidden;
}

.ddx-dashboard-modern .card-header,
.ddx-dashboard-modern .card-footer {
  background: transparent !important;
  border-color: #ececec !important;
}

.ddx-dashboard-modern h1,
.ddx-dashboard-modern h2,
.ddx-dashboard-modern h3,
.ddx-dashboard-modern h4,
.ddx-dashboard-modern h5,
.ddx-dashboard-modern h6,
.ddx-dashboard-modern .card-title,
.ddx-dashboard-modern .text-heading {
  color: var(--ddx-text) !important;
  letter-spacing: -.02em;
}

.ddx-dashboard-modern p,
.ddx-dashboard-modern span,
.ddx-dashboard-modern small,
.ddx-dashboard-modern label,
.ddx-dashboard-modern li,
.ddx-dashboard-modern td,
.ddx-dashboard-modern th,
.ddx-dashboard-modern .small,
.ddx-dashboard-modern .text-muted,
.ddx-dashboard-modern .form-text {
  color: var(--ddx-subtext) !important;
  opacity: 1 !important;
}

.ddx-dashboard-modern .btn-primary,
.ddx-dashboard-modern .btn-primary * {
  background: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.ddx-dashboard-modern .btn-outline-primary,
.ddx-dashboard-modern .btn-outline-primary *,
.ddx-dashboard-modern .btn-outline-secondary,
.ddx-dashboard-modern .btn-outline-secondary * {
  color: #111111 !important;
}

.ddx-dashboard-modern .btn-outline-primary,
.ddx-dashboard-modern .btn-outline-secondary {
  background: #ffffff !important;
  border-color: #bfbfbf !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.ddx-dashboard-modern .form-control,
.ddx-dashboard-modern .form-select,
.ddx-dashboard-modern .input-group-text {
  background: #ffffff !important;
  border-color: #d5d5d5 !important;
  color: #111111 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

/* ===== top left welcome card ===== */

.ddx-dashboard-modern .card .form-control[readonly] {
  min-height: 44px;
  font-weight: 500;
}

.ddx-dashboard-modern .card .btn.btn-sm.btn-primary.px-4 {
  min-height: 40px;
  border-radius: 10px !important;
}

/* ===== trading status card ===== */

.ddx-dashboard-modern .card:has(.progress-bar) {
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.06), transparent 34%),
    linear-gradient(135deg, #050505 0%, #111111 58%, #171717 100%) !important;
  border-color: #1a1a1a !important;
  box-shadow: 0 18px 32px rgba(0,0,0,.18) !important;
}

.ddx-dashboard-modern .card:has(.progress-bar) h1,
.ddx-dashboard-modern .card:has(.progress-bar) h2,
.ddx-dashboard-modern .card:has(.progress-bar) h3,
.ddx-dashboard-modern .card:has(.progress-bar) h4,
.ddx-dashboard-modern .card:has(.progress-bar) h5,
.ddx-dashboard-modern .card:has(.progress-bar) h6,
.ddx-dashboard-modern .card:has(.progress-bar) .fw-semibold,
.ddx-dashboard-modern .card:has(.progress-bar) .fw-bold,
.ddx-dashboard-modern .card:has(.progress-bar) [style*="color:#111111"],
.ddx-dashboard-modern .card:has(.progress-bar) [style*="color: #111111"] {
  color: #ffffff !important;
}

.ddx-dashboard-modern .card:has(.progress-bar) p,
.ddx-dashboard-modern .card:has(.progress-bar) span,
.ddx-dashboard-modern .card:has(.progress-bar) small,
.ddx-dashboard-modern .card:has(.progress-bar) .small,
.ddx-dashboard-modern .card:has(.progress-bar) .text-muted,
.ddx-dashboard-modern .card:has(.progress-bar) .form-text {
  color: rgba(255,255,255,.80) !important;
}

.ddx-dashboard-modern .card:has(.progress-bar) .progress {
  height: 10px !important;
  background: rgba(255,255,255,.14) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.ddx-dashboard-modern .card:has(.progress-bar) .progress-bar {
  background: #ffffff !important;
  background-image: none !important;
  border-radius: 999px !important;
}

.ddx-dashboard-modern .card:has(.progress-bar) [style*="$1,562.10 away"],
.ddx-dashboard-modern .card:has(.progress-bar) .text-warning {
  color: #f3c15b !important;
}

/* ===== shoutout area ===== */

.ddx-dashboard-modern .ddx-shoutout-head {
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
  letter-spacing: .13em !important;
  color: #111111 !important;
  margin: 2px 0 12px !important;
}

.ddx-dashboard-modern .ddx-shoutout-wrap {
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

.ddx-dashboard-modern .ddx-shoutout-strip {
  background: linear-gradient(90deg, #0b0b0b 0%, #111111 50%, #0b0b0b 100%) !important;
  padding: 11px 0 !important;
}

.ddx-dashboard-modern .ddx-shoutout-strip span {
  color: #ffffff !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
}

/* ===== large video section wrapper only — leave video plugin alone ===== */

.ddx-dashboard-modern .card iframe,
.ddx-dashboard-modern .card video,
.ddx-dashboard-modern .card .plyr,
.ddx-dashboard-modern .card .video-js {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* give the hero card stronger presentation, not the plugin itself */
.ddx-dashboard-modern .card:has(iframe),
.ddx-dashboard-modern .card:has(video),
.ddx-dashboard-modern .card:has(.plyr),
.ddx-dashboard-modern .card:has(.video-js) {
  padding-top: 2px;
}

.ddx-dashboard-modern .card:has(iframe) .card-title,
.ddx-dashboard-modern .card:has(video) .card-title,
.ddx-dashboard-modern .card:has(.plyr) .card-title,
.ddx-dashboard-modern .card:has(.video-js) .card-title {
  color: #111111 !important;
  font-size: 15px !important;
  letter-spacing: .16em !important;
  font-weight: 900 !important;
}

/* ===== latest panel ===== */

.ddx-dashboard-modern .ddx-latest-card {
  background: #ffffff !important;
}

.ddx-dashboard-modern .ddx-latest-card .btn,
.ddx-dashboard-modern .ddx-latest-card a.btn {
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid #cfcfcf !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.ddx-dashboard-modern .ddx-latest-card .btn:hover,
.ddx-dashboard-modern .ddx-latest-card a.btn:hover {
  background: #111111 !important;
  color: #ffffff !important;
  border-color: #111111 !important;
}

/* ===== section headings ===== */

.ddx-dashboard-modern [style*="WELCOME TO DIAMOND DISTRICT X"],
.ddx-dashboard-modern .section-title {
  color: #111111 !important;
}

.ddx-dashboard-modern [style*="color:#111111"] {
  color: #111111 !important;
}

/* ===== mobile polish ===== */

@media (max-width: 991.98px) {
  .ddx-dashboard-modern .card {
    border-radius: 18px !important;
  }

  .ddx-dashboard-modern .ddx-shoutout-head {
    font-size: 13px !important;
    letter-spacing: .09em !important;
  }
}

/* DDX DASHBOARD MODERN MOCKUP V9 — END */

/* DDX MARQUEE TEXT WHITE V10.1 — START */

/* Scrolling community marquee text only */
.ddx-dashboard-modern .ddx-shoutout-strip,
.ddx-dashboard-modern .ddx-shoutout-strip *,
.ddx-dashboard-modern .ddx-shoutout-strip span,
.ddx-dashboard-modern .ddx-shoutout-strip div,
.ddx-dashboard-modern .ddx-shoutout-strip a,
.ddx-dashboard-modern .ddx-shoutout-strip marquee,
.ddx-dashboard-modern .ddx-shoutout-strip strong,
.ddx-dashboard-modern .ddx-shoutout-strip small,
.ddx-dashboard-modern [class*="marquee"],
.ddx-dashboard-modern [class*="marquee"] *,
.ddx-dashboard-modern [class*="ticker"],
.ddx-dashboard-modern [class*="ticker"] * {
  color: #ffffff !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}

/* DDX MARQUEE TEXT WHITE V10.1 — END */

/* DDX FIX MENU EXCEPTIONS V10.3 — START */

/* Dashboard action buttons remain black */
.ddx-dashboard-modern .btn-outline-primary,
.ddx-dashboard-modern .btn-outline-secondary {
  background: #111111 !important;
  background-image: none !important;
  border-color: #111111 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.ddx-dashboard-modern .btn-outline-primary *,
.ddx-dashboard-modern .btn-outline-secondary * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.ddx-dashboard-modern .btn-outline-primary:hover,
.ddx-dashboard-modern .btn-outline-secondary:hover {
  background: #2a2a2a !important;
  border-color: #2a2a2a !important;
  color: #ffffff !important;
}

/* Normal menu links and icons */
html.light-style #layout-menu .menu-item > .menu-link,
html.light-style #layout-menu .menu-item > .menu-link > div,
html.light-style #layout-menu .menu-item > .menu-link > span,
html.light-style #layout-menu .menu-item > .menu-link i,
html.light-style #layout-menu .menu-item > .menu-link svg,
html.light-style #layout-menu .menu-item > .menu-toggle,
html.light-style #layout-menu .menu-item > .menu-toggle > div,
html.light-style #layout-menu .menu-item > .menu-toggle > span,
html.light-style #layout-menu .menu-item > .menu-toggle i,
html.light-style #layout-menu .menu-item > .menu-toggle svg,
html.light-style #layout-menu .menu-toggle::after {
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Restore Leaderboard gold/yellow */
html.light-style #layout-menu a[href*="leaderboard"],
html.light-style #layout-menu a[href*="leaderboard"] *,
html.light-style #layout-menu .menu-link[href*="leaderboard"],
html.light-style #layout-menu .menu-link[href*="leaderboard"] *,
html.light-style #layout-menu [class*="leaderboard"],
html.light-style #layout-menu [class*="leaderboard"] *,
html.light-style #layout-menu [id*="leaderboard"],
html.light-style #layout-menu [id*="leaderboard"] * {
  color: #d7dd3f !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  -webkit-text-fill-color: #d7dd3f !important;
}

/* Restore category / section headings */
html.light-style #layout-menu .menu-header,
html.light-style #layout-menu .menu-header *,
html.light-style #layout-menu .menu-header-text,
html.light-style #layout-menu .menu-divider,
html.light-style #layout-menu .menu-divider * {
  color: #62558f !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  -webkit-text-fill-color: #62558f !important;
  opacity: 1 !important;
}

/* Active Dashboard remains white */
html.light-style #layout-menu .menu-item.active > .menu-link,
html.light-style #layout-menu .menu-item.active > .menu-link * {
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* DDX FIX MENU EXCEPTIONS V10.3 — END */

/* DDX GOLD LEADERBOARD + GRADIENT CATEGORIES V10.4 — START */

/* ================================================================
   SHINY METALLIC GOLD LEADERBOARD
   ================================================================ */

/* Leaderboard title text */
html.light-style #layout-menu a[href*="leaderboard"] > div,
html.light-style #layout-menu a[href*="leaderboard"] > span,
html.light-style #layout-menu .menu-link[href*="leaderboard"] > div,
html.light-style #layout-menu .menu-link[href*="leaderboard"] > span,
html.light-style #layout-menu [class*="leaderboard"] .menu-link > div,
html.light-style #layout-menu [class*="leaderboard"] .menu-link > span {
  background: linear-gradient(
    110deg,
    #8a5a00 0%,
    #d79b16 18%,
    #fff3a6 38%,
    #ffffff 48%,
    #ffd85a 58%,
    #b97800 78%,
    #fff0a0 100%
  ) !important;

  background-size: 220% 100% !important;
  background-position: 0% 50% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;

  text-shadow:
    0 0 5px rgba(255, 215, 80, .28),
    0 0 12px rgba(255, 187, 35, .15) !important;

  font-weight: 700 !important;
  animation: ddxGoldShine 4.5s linear infinite;
}

/* Leaderboard icon remains rich gold and readable */
html.light-style #layout-menu a[href*="leaderboard"] i,
html.light-style #layout-menu a[href*="leaderboard"] svg,
html.light-style #layout-menu a[href*="leaderboard"] svg *,
html.light-style #layout-menu .menu-link[href*="leaderboard"] i,
html.light-style #layout-menu .menu-link[href*="leaderboard"] svg,
html.light-style #layout-menu .menu-link[href*="leaderboard"] svg * {
  color: #ffd84d !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  -webkit-text-fill-color: #ffd84d !important;
  filter:
    drop-shadow(0 0 3px rgba(255, 216, 77, .55))
    drop-shadow(0 0 7px rgba(255, 177, 0, .25));
}

@keyframes ddxGoldShine {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: -120% 50%;
  }
}

/* ================================================================
   CYAN → WHITE → LIGHT PURPLE CATEGORY TITLES
   ================================================================ */

html.light-style #layout-menu .menu-header,
html.light-style #layout-menu .menu-header-text,
html.light-style #layout-menu .menu-header > div,
html.light-style #layout-menu .menu-header > span {
  background: linear-gradient(
    90deg,
    #42e8ff 0%,
    #dffcff 30%,
    #ffffff 50%,
    #e9dcff 72%,
    #c6a7ff 100%
  ) !important;

  background-size: 160% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;

  opacity: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;

  text-shadow:
    0 0 5px rgba(66, 232, 255, .13),
    0 0 9px rgba(198, 167, 255, .12) !important;
}

/*
 * Some menu templates place the label inside nested elements.
 * Apply the same gradient without affecting divider lines.
 */
html.light-style #layout-menu .menu-header * {
  background: inherit !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  opacity: 1 !important;
}

/* Keep category divider lines neutral and subtle */
html.light-style #layout-menu .menu-header::before,
html.light-style #layout-menu .menu-header::after,
html.light-style #layout-menu .menu-divider,
html.light-style #layout-menu .menu-divider::before,
html.light-style #layout-menu .menu-divider::after {
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  box-shadow: none !important;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  html.light-style #layout-menu a[href*="leaderboard"] > div,
  html.light-style #layout-menu a[href*="leaderboard"] > span,
  html.light-style #layout-menu .menu-link[href*="leaderboard"] > div,
  html.light-style #layout-menu .menu-link[href*="leaderboard"] > span {
    animation: none !important;
    background-position: 50% 50% !important;
  }
}

/* DDX GOLD LEADERBOARD + GRADIENT CATEGORIES V10.4 — END */

/* DDX BUTTONS + MENU HOVER + MOBILE ICON V10.5 — START */

/* ================================================================
   TOP DASHBOARD ACTION BUTTONS
   ================================================================ */

/*
 * Targets the two action buttons in the first dashboard card.
 * Copy remains black as it already is.
 */
.ddx-dashboard-modern .row:first-child > [class*="col"]:first-child .card
.btn:not(.btn-primary),
.ddx-dashboard-modern .row:first-child > [class*="col"]:first-child .card
a.btn:not(.btn-primary),
.ddx-dashboard-modern .row:first-child > [class*="col"]:first-child .card
button.btn:not(.btn-primary),
.ddx-dashboard-modern a[href*="partner"],
.ddx-dashboard-modern a[href*="notification"],
.ddx-dashboard-modern a[href*="#notification"],
.ddx-dashboard-modern button[onclick*="partner"],
.ddx-dashboard-modern button[onclick*="notification"] {
  background: #0b0b0b !important;
  background-color: #0b0b0b !important;
  background-image: none !important;
  border-color: #0b0b0b !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: none !important;
}

.ddx-dashboard-modern .row:first-child > [class*="col"]:first-child .card
.btn:not(.btn-primary) *,
.ddx-dashboard-modern a[href*="partner"] *,
.ddx-dashboard-modern a[href*="notification"] *,
.ddx-dashboard-modern a[href*="#notification"] *,
.ddx-dashboard-modern button[onclick*="partner"] *,
.ddx-dashboard-modern button[onclick*="notification"] * {
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  -webkit-text-fill-color: #ffffff !important;
}

.ddx-dashboard-modern .row:first-child > [class*="col"]:first-child .card
.btn:not(.btn-primary):hover,
.ddx-dashboard-modern a[href*="partner"]:hover,
.ddx-dashboard-modern a[href*="notification"]:hover,
.ddx-dashboard-modern a[href*="#notification"]:hover,
.ddx-dashboard-modern button[onclick*="partner"]:hover,
.ddx-dashboard-modern button[onclick*="notification"]:hover {
  background: #272727 !important;
  background-color: #272727 !important;
  border-color: #272727 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ================================================================
   MENU HOVER — BLACK FONT AND ICONS
   ================================================================ */

html.light-style #layout-menu .menu-item > .menu-link:hover,
html.light-style #layout-menu .menu-item > .menu-toggle:hover {
  background: #f3f3f3 !important;
  background-image: none !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border-radius: 12px !important;
}

html.light-style #layout-menu .menu-item > .menu-link:hover *,
html.light-style #layout-menu .menu-item > .menu-toggle:hover *,
html.light-style #layout-menu .menu-item > .menu-link:hover i,
html.light-style #layout-menu .menu-item > .menu-link:hover svg,
html.light-style #layout-menu .menu-item > .menu-link:hover svg *,
html.light-style #layout-menu .menu-item > .menu-toggle:hover i,
html.light-style #layout-menu .menu-item > .menu-toggle:hover svg,
html.light-style #layout-menu .menu-item > .menu-toggle:hover svg * {
  color: #000000 !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Leaderboard becomes black only while hovered */
html.light-style #layout-menu a[href*="leaderboard"]:hover,
html.light-style #layout-menu a[href*="leaderboard"]:hover *,
html.light-style #layout-menu .menu-link[href*="leaderboard"]:hover,
html.light-style #layout-menu .menu-link[href*="leaderboard"]:hover * {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  text-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

/* ================================================================
   MOBILE MEMBERS ICON TILE
   ================================================================ */

/*
 * Fix the dark-on-dark member icon visible in the mobile welcome card.
 */
.ddx-dashboard-modern .row:first-child > [class*="col"]:first-child .card
.avatar,
.ddx-dashboard-modern .row:first-child > [class*="col"]:first-child .card
.avatar-initial,
.ddx-dashboard-modern .row:first-child > [class*="col"]:first-child .card
.bg-primary,
.ddx-dashboard-modern .row:first-child > [class*="col"]:first-child .card
.bg-label-primary {
  background: linear-gradient(145deg, #ffffff, #e8e8e8) !important;
  background-color: #eeeeee !important;
  background-image: linear-gradient(145deg, #ffffff, #e8e8e8) !important;
  border: 1px solid #d6d6d6 !important;
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
}

.ddx-dashboard-modern .row:first-child > [class*="col"]:first-child .card
.avatar *,
.ddx-dashboard-modern .row:first-child > [class*="col"]:first-child .card
.avatar-initial *,
.ddx-dashboard-modern .row:first-child > [class*="col"]:first-child .card
.bg-primary *,
.ddx-dashboard-modern .row:first-child > [class*="col"]:first-child .card
.bg-label-primary * {
  color: #111111 !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  -webkit-text-fill-color: #111111 !important;
  opacity: 1 !important;
  filter: none !important;
}

@media (max-width: 767.98px) {
  .ddx-dashboard-modern .row:first-child > [class*="col"]:first-child .card
  .avatar,
  .ddx-dashboard-modern .row:first-child > [class*="col"]:first-child .card
  .avatar-initial {
    background: linear-gradient(145deg, #ffffff, #e5e5e5) !important;
    color: #111111 !important;
  }
}

/* DDX BUTTONS + MENU HOVER + MOBILE ICON V10.5 — END */

/* DDX FORCE ACTION BUTTONS BLACK V10.6 — START */

/*
 * Force the two dashboard action buttons to remain black
 * before, during and after hover.
 *
 * Copy button is excluded because it uses .btn-primary.
 */

/* Primary structural target: welcome card containing readonly referral input */
.ddx-dashboard-modern .card:has(input[readonly])
.btn:not(.btn-primary):not([class*="copy"]),
.ddx-dashboard-modern .card:has(.form-control[readonly])
.btn:not(.btn-primary):not([class*="copy"]),

/* Common class targets used by these two buttons */
.ddx-dashboard-modern .card:has(input[readonly])
.btn-outline-primary,
.ddx-dashboard-modern .card:has(input[readonly])
.btn-outline-secondary,

/* Link and button fallback targets */
.ddx-dashboard-modern a[href*="partner-link"],
.ddx-dashboard-modern a[href*="partner_links"],
.ddx-dashboard-modern a[href*="partner"],
.ddx-dashboard-modern a[href*="notification"],
.ddx-dashboard-modern a[href*="#notification"],
.ddx-dashboard-modern button[onclick*="partner"],
.ddx-dashboard-modern button[onclick*="notification"] {
  background: #0b0b0b !important;
  background-color: #0b0b0b !important;
  background-image: none !important;
  border: 1px solid #0b0b0b !important;
  border-color: #0b0b0b !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* Text and icons inside both buttons */
.ddx-dashboard-modern .card:has(input[readonly])
.btn:not(.btn-primary):not([class*="copy"]) *,
.ddx-dashboard-modern .card:has(.form-control[readonly])
.btn:not(.btn-primary):not([class*="copy"]) *,
.ddx-dashboard-modern a[href*="partner"] *,
.ddx-dashboard-modern a[href*="notification"] *,
.ddx-dashboard-modern button[onclick*="partner"] *,
.ddx-dashboard-modern button[onclick*="notification"] * {
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

/* Keep black styling during hover, focus, active and visited states */
.ddx-dashboard-modern .card:has(input[readonly])
.btn:not(.btn-primary):not([class*="copy"]):hover,
.ddx-dashboard-modern .card:has(input[readonly])
.btn:not(.btn-primary):not([class*="copy"]):focus,
.ddx-dashboard-modern .card:has(input[readonly])
.btn:not(.btn-primary):not([class*="copy"]):active,
.ddx-dashboard-modern .card:has(.form-control[readonly])
.btn:not(.btn-primary):not([class*="copy"]):hover,
.ddx-dashboard-modern .card:has(.form-control[readonly])
.btn:not(.btn-primary):not([class*="copy"]):focus,
.ddx-dashboard-modern .card:has(.form-control[readonly])
.btn:not(.btn-primary):not([class*="copy"]):active {
  background: #252525 !important;
  background-color: #252525 !important;
  background-image: none !important;
  border-color: #252525 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Ensure disabled notification button stays visibly black */
.ddx-dashboard-modern .card:has(input[readonly])
.btn:not(.btn-primary):disabled,
.ddx-dashboard-modern .card:has(input[readonly])
.btn:not(.btn-primary).disabled {
  background: #0b0b0b !important;
  background-color: #0b0b0b !important;
  border-color: #0b0b0b !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: .72 !important;
}

/* DDX FORCE ACTION BUTTONS BLACK V10.6 — END */

/* DDX CHECKOUT + LEARN FINISHING V11.2 — START */

/* ================================================================
   CHECKOUT — ACCENT READABILITY
   ================================================================ */

:root{
  --ddx-checkout-accent: #5c4a86;
  --ddx-checkout-accent-2: #4e3d76;
  --ddx-checkout-text: #111111;
}

/* Dark purple for leftover light-purple checkout text */
.ddx-checkout-shell .text-primary,
.ddx-checkout-shell .text-info,
.ddx-checkout-shell a:not(.btn),
.ddx-checkout-shell .ddx-recurring-note,
.ddx-checkout-shell .ddx-summary-subnote,
.ddx-checkout-shell .bg-label-primary,
.ddx-checkout-shell .bg-label-info,
.ddx-checkout-shell small[style*="color"],
.ddx-checkout-shell span[style*="color:#c4b5fd"],
.ddx-checkout-shell span[style*="color:#a78bfa"],
.ddx-checkout-shell span[style*="color:#b9a7e8"] {
  color: var(--ddx-checkout-accent) !important;
  -webkit-text-fill-color: var(--ddx-checkout-accent) !important;
}

/* Secure checkout / Auto-renewal / Support pills */
.ddx-checkout-shell .ddx-security-pill,
.ddx-checkout-shell .ddx-security-pill *,
.ddx-checkout-shell .rounded-pill,
.ddx-checkout-shell .rounded-pill *,
.ddx-checkout-shell .badge.bg-label-primary,
.ddx-checkout-shell .badge.bg-label-primary *,
.ddx-checkout-shell .badge.bg-label-secondary,
.ddx-checkout-shell .badge.bg-label-secondary *,
.ddx-checkout-shell .badge.bg-label-info,
.ddx-checkout-shell .badge.bg-label-info * {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
}

.ddx-checkout-shell .ddx-security-pill i,
.ddx-checkout-shell .rounded-pill i,
.ddx-checkout-shell .badge i {
  color: #111111 !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* "You can manage payment methods..." line should be dark purple */
.ddx-checkout-shell .alert-info a,
.ddx-checkout-shell .alert-info .text-primary,
.ddx-checkout-shell .alert-info small,
.ddx-checkout-shell .alert-info small *,
.ddx-checkout-shell .alert-info .small,
.ddx-checkout-shell .alert-info .small * {
  color: var(--ddx-checkout-accent) !important;
  -webkit-text-fill-color: var(--ddx-checkout-accent) !important;
}

/* Checkout product title / recurring note / plan label */
.ddx-checkout-shell .badge,
.ddx-checkout-shell .list-group-item a,
.ddx-checkout-shell .list-group-item .text-primary,
.ddx-checkout-shell .list-group-item .text-info,
.ddx-checkout-shell .list-group-item small,
.ddx-checkout-shell .list-group-item small * {
  color: var(--ddx-checkout-accent) !important;
  -webkit-text-fill-color: var(--ddx-checkout-accent) !important;
}

/* Proceed With Payment — make the WHOLE button black and remove inner black box look */
.ddx-checkout-shell .ddx-pay-btn,
.ddx-checkout-shell button[type="submit"],
.ddx-checkout-shell .btn-success,
.ddx-checkout-shell .btn-success.btn,
.ddx-checkout-shell form button[type="submit"] {
  background: #111111 !important;
  background-color: #111111 !important;
  background-image: none !important;
  border: 1px solid #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.ddx-checkout-shell .ddx-pay-btn *,
.ddx-checkout-shell button[type="submit"] *,
.ddx-checkout-shell .btn-success *,
.ddx-checkout-shell form button[type="submit"] * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.ddx-checkout-shell .ddx-pay-btn:hover,
.ddx-checkout-shell button[type="submit"]:hover,
.ddx-checkout-shell .btn-success:hover,
.ddx-checkout-shell form button[type="submit"]:hover {
  background: #2a2a2a !important;
  border-color: #2a2a2a !important;
}

/* Disabled state still looks clean */
.ddx-checkout-shell .ddx-pay-btn:disabled,
.ddx-checkout-shell button[type="submit"]:disabled,
.ddx-checkout-shell .btn-success:disabled,
.ddx-checkout-shell .btn-success.disabled {
  background: #d8d8d8 !important;
  border-color: #d8d8d8 !important;
  color: #333333 !important;
  -webkit-text-fill-color: #333333 !important;
  opacity: 1 !important;
}

.ddx-checkout-shell .ddx-pay-btn:disabled *,
.ddx-checkout-shell button[type="submit"]:disabled *,
.ddx-checkout-shell .btn-success:disabled *,
.ddx-checkout-shell .btn-success.disabled * {
  color: #333333 !important;
  -webkit-text-fill-color: #333333 !important;
  background: transparent !important;
}

/* ================================================================
   LEARN PAGE — CTA / BADGE TEXT VISIBILITY
   ================================================================ */

/* Desktop Learn start/review buttons */
.lms-index-desktop-view a[style*="padding:6px 14px"],
.lms-index-desktop-view a[style*="padding:6px 14px"] *,
.lms-index-desktop-view a[style*="Start"],
.lms-index-desktop-view a[style*="Start"] * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background-image: none !important;
}

/* Mobile Learn CTA buttons */
.learn-app .course-cta,
.learn-app .course-cta * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Required badge / small pill text readability */
.learn-app .required-badge,
.learn-app .required-badge *,
.lms-index-desktop-view [style*="border-radius:999px"][style*="padding:4px 10px"],
.lms-index-desktop-view [style*="border-radius:999px"][style*="padding:4px 10px"] * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Review link should remain readable */
.lms-index-desktop-view a[href*="review"],
.lms-index-desktop-view a[href*="review"] *,
.learn-app a[href*="review"],
.learn-app a[href*="review"] * {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
}

/* DDX CHECKOUT + LEARN FINISHING V11.2 — END */

/* DDX LEARN REQUIRED BADGE TEXT V11.3 — START */

/* Desktop Required for RELAY pill */
.lms-index-desktop-view span[style*="Required for RELAY"],
.lms-index-desktop-view span[style*="top:10px"][style*="right:10px"],
.lms-index-desktop-view span[style*="border-radius:20px"] {
  background: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Any nested content inside the pill */
.lms-index-desktop-view span[style*="Required for RELAY"] *,
.lms-index-desktop-view span[style*="top:10px"][style*="right:10px"] *,
.lms-index-desktop-view span[style*="border-radius:20px"] * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Mobile required badge */
.learn-app .required-badge,
.learn-app .required-badge * {
  background: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

/* DDX LEARN REQUIRED BADGE TEXT V11.3 — END */

/* DDX MOBILE MEMBER ICON BLACK WHITE V11.6 — START */

/*
 * Mobile member-count icon tile:
 * black tile with white people icon.
 */

@media (max-width: 767.98px) {

  /* Tile */
  .ddx-dashboard-modern .row:first-child > [class*="col"]:first-child .card .avatar,
  .ddx-dashboard-modern .row:first-child > [class*="col"]:first-child .card .avatar-initial,
  .ddx-dashboard-modern .row:first-child > [class*="col"]:first-child .card .bg-primary,
  .ddx-dashboard-modern .row:first-child > [class*="col"]:first-child .card .bg-label-primary {
    background: #111111 !important;
    background-color: #111111 !important;
    background-image: none !important;
    border: 1px solid #2a2a2a !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow:
      0 10px 22px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.06) !important;
    opacity: 1 !important;
  }

  /* Icon */
  .ddx-dashboard-modern .row:first-child > [class*="col"]:first-child .card .avatar *,
  .ddx-dashboard-modern .row:first-child > [class*="col"]:first-child .card .avatar-initial *,
  .ddx-dashboard-modern .row:first-child > [class*="col"]:first-child .card .bg-primary *,
  .ddx-dashboard-modern .row:first-child > [class*="col"]:first-child .card .bg-label-primary *,
  .ddx-dashboard-modern .row:first-child > [class*="col"]:first-child .card .avatar i,
  .ddx-dashboard-modern .row:first-child > [class*="col"]:first-child .card .avatar svg,
  .ddx-dashboard-modern .row:first-child > [class*="col"]:first-child .card .avatar svg *,
  .ddx-dashboard-modern .row:first-child > [class*="col"]:first-child .card .avatar-initial i,
  .ddx-dashboard-modern .row:first-child > [class*="col"]:first-child .card .avatar-initial svg,
  .ddx-dashboard-modern .row:first-child > [class*="col"]:first-child .card .avatar-initial svg * {
    color: #ffffff !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

/* DDX MOBILE MEMBER ICON BLACK WHITE V11.6 — END */

/* DDX MOBILE MEMBER FILTERS ONE LINE V11.7 — START */

@media (max-width: 767.98px) {

  /* Four controls remain on one row */
  .ddx-member-filter-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 8px 0 !important;
  }

  /* Smaller individual cards/buttons */
  .ddx-member-filter-compact {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 58px !important;
    height: auto !important;
    padding: 7px 3px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    text-align: center !important;
  }

  .ddx-member-filter-compact,
  .ddx-member-filter-compact * {
    white-space: nowrap !important;
  }

  /* Large number */
  .ddx-member-filter-compact .h1,
  .ddx-member-filter-compact .h2,
  .ddx-member-filter-compact .h3,
  .ddx-member-filter-compact .h4,
  .ddx-member-filter-compact h1,
  .ddx-member-filter-compact h2,
  .ddx-member-filter-compact h3,
  .ddx-member-filter-compact h4,
  .ddx-member-filter-compact [class*="count"],
  .ddx-member-filter-compact [class*="number"],
  .ddx-member-filter-compact > div:first-child {
    font-size: 1.15rem !important;
    line-height: 1 !important;
    margin: 0 0 5px !important;
  }

  /* Labels: All / New 7D / New 30D / Active 48H */
  .ddx-member-filter-compact small,
  .ddx-member-filter-compact span,
  .ddx-member-filter-compact label,
  .ddx-member-filter-compact > div:last-child {
    font-size: 9px !important;
    line-height: 1 !important;
    letter-spacing: -.02em !important;
    white-space: nowrap !important;
  }
}

/* DDX MOBILE MEMBER FILTERS ONE LINE V11.7 — END */

/* DDX MOBILE MEMBER PEOPLE ICON WHITE V11.7 — START */

@media (max-width: 767.98px) {

  /*
   * Member-count tile only.
   * Keep the tile black and force the people glyph white.
   */

  .ddx-dashboard-modern .avatar:has(
    .ri-group-line,
    .ri-team-line,
    .ri-user-3-line,
    .ri-user-shared-line,
    .ri-user-community-line
  ),
  .ddx-dashboard-modern .avatar-initial:has(
    .ri-group-line,
    .ri-team-line,
    .ri-user-3-line,
    .ri-user-shared-line,
    .ri-user-community-line
  ) {
    background: #111111 !important;
    background-color: #111111 !important;
    background-image: none !important;
  }

  .ddx-dashboard-modern .ri-group-line,
  .ddx-dashboard-modern .ri-team-line,
  .ddx-dashboard-modern .ri-user-3-line,
  .ddx-dashboard-modern .ri-user-shared-line,
  .ddx-dashboard-modern .ri-user-community-line,
  .ddx-dashboard-modern .ri-group-line::before,
  .ddx-dashboard-modern .ri-team-line::before,
  .ddx-dashboard-modern .ri-user-3-line::before,
  .ddx-dashboard-modern .ri-user-shared-line::before,
  .ddx-dashboard-modern .ri-user-community-line::before {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    filter: brightness(0) invert(1) !important;
    text-shadow: none !important;
  }

  /*
   * Fallback for the member tile if its icon uses a different
   * Remix Icon people class.
   */
  .ddx-dashboard-modern .avatar-initial[class*="bg-"] i[class*="ri-user"],
  .ddx-dashboard-modern .avatar-initial[class*="bg-"] i[class*="ri-group"],
  .ddx-dashboard-modern .avatar-initial[class*="bg-"] i[class*="ri-team"],
  .ddx-dashboard-modern .avatar-initial[class*="bg-"] i[class*="ri-user"]::before,
  .ddx-dashboard-modern .avatar-initial[class*="bg-"] i[class*="ri-group"]::before,
  .ddx-dashboard-modern .avatar-initial[class*="bg-"] i[class*="ri-team"]::before {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    filter: brightness(0) invert(1) !important;
  }
}

/* DDX MOBILE MEMBER PEOPLE ICON WHITE V11.7 — END */

/* DDX PROFILE TAB TEXT BLACK V11.8 — START */

/*
 * Profile/account section tabs:
 * keep every tab title visible in black,
 * whether inactive, hovered, focused, or active.
 */

.nav-tabs .nav-link,
.nav-tabs .nav-link *,
.nav-pills .nav-link,
.nav-pills .nav-link *,
.profile-nav .nav-link,
.profile-nav .nav-link *,
.account-nav .nav-link,
.account-nav .nav-link *,
[role="tablist"] [role="tab"],
[role="tablist"] [role="tab"] * {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  opacity: 1 !important;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:hover *,
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:focus *,
.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active *,
.nav-pills .nav-link:hover,
.nav-pills .nav-link:hover *,
.nav-pills .nav-link:focus,
.nav-pills .nav-link:focus *,
.nav-pills .nav-link.active,
.nav-pills .nav-link.active *,
.profile-nav .nav-link:hover,
.profile-nav .nav-link:hover *,
.profile-nav .nav-link.active,
.profile-nav .nav-link.active *,
.account-nav .nav-link:hover,
.account-nav .nav-link:hover *,
.account-nav .nav-link.active,
.account-nav .nav-link.active *,
[role="tablist"] [role="tab"]:hover,
[role="tablist"] [role="tab"]:hover *,
[role="tablist"] [role="tab"][aria-selected="true"],
[role="tablist"] [role="tab"][aria-selected="true"] * {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  opacity: 1 !important;
}

/* DDX PROFILE TAB TEXT BLACK V11.8 — END */