/* CSS Variables for Dark Mode */
html[data-user-theme="dark"] {
  color-scheme: dark;
  --dm-bg-primary: #0f1419;
  --dm-bg-secondary: #1a1f2e;
  --dm-bg-tertiary: #141820;
  --dm-bg-card: #1a1f2e;
  --dm-bg-hover: #252a35;
  --dm-bg-overlay: rgba(15, 20, 25, 0.75);
  
  --dm-text-primary: #e4e6eb;
  --dm-text-secondary: #e8e8e8;
  --dm-text-muted: #8a8d94;
  
  --dm-border-color: #3a3f4d;
  --dm-border-hover: #4a5562;
  
  --dm-primary: #2269FF;
  --dm-primary-hover: #4a8aff;
  --dm-primary-light: #6ba0ff;
  
  --dm-success: #26AB8D;
  --dm-warning: #FFC107;
  --dm-danger: #E94D4D;
  
  --dm-shadow: rgba(0, 0, 0, 0.4);
  --dm-shadow-light: rgba(0, 0, 0, 0.25);
  
  --dm-gradient-yellow: linear-gradient(120deg, #2a2415 0%, #2a2415 100%);
  --dm-bg-features: #141820;
  
   --clr-background: #454a50;
    --clr-foreground: white;
}

/* Base Styles */
html[data-user-theme="dark"] body {
  background-color: var(--dm-bg-primary);
  color: var(--dm-text-primary);
}

html[data-user-theme="dark"] ::-moz-selection {
  color: #fff;
  background-color: var(--dm-primary);
}

html[data-user-theme="dark"] ::selection {
  color: #fff;
  background-color: var(--dm-primary);
}

html[data-user-theme="dark"] .slide:after {
	content: inherit;
}

/* Header */
html[data-user-theme="dark"] .header {
  background-color: var(--dm-bg-secondary);
  border-bottom-color: var(--dm-border-color);
}

html[data-user-theme="dark"] .header .nav-link {
  color: var(--dm-text-primary);
}

html[data-user-theme="dark"] .header .nav-link:hover {
  color: var(--dm-primary-hover) !important;
}

/* Footer */
html[data-user-theme="dark"] .footer {
  background-color: #0d1520;
  color: var(--dm-text-primary);
}

html[data-user-theme="dark"] .footer .nav-link {
  color: var(--dm-text-secondary);
}

html[data-user-theme="dark"] .footer .nav-link:hover {
  color: #c2c8d0;
}

html[data-user-theme="dark"] .footer .copyrights {
  color: var(--dm-text-secondary);
  opacity: 0.75;
}

/* Buttons */
html[data-user-theme="dark"] .btn.btn-primary,
html[data-user-theme="dark"] .btn.btn-primary:visited {
  color: #fff;
  background-color: var(--dm-primary);
  border-color: var(--dm-primary);
}

html[data-user-theme="dark"] .btn.btn-primary:hover {
  color: #fff;
  background-color: var(--dm-primary-hover);
  border-color: var(--dm-primary-hover);
}

html[data-user-theme="dark"] .btn.border {
  border-color: var(--dm-border-color) !important;
  color: var(--dm-text-primary);
}

html[data-user-theme="dark"] .btn.border:hover,
html[data-user-theme="dark"] .btn.border:focus {
  border-color: var(--dm-border-hover) !important;
  background-color: var(--dm-bg-hover);
}

html[data-user-theme="dark"] .login-btn {
  background-color: transparent;
  border-color: var(--dm-border-color);
  color: var(--dm-text-primary);
}

html[data-user-theme="dark"] .login-btn:hover {
  background-color: var(--dm-bg-hover);
  border-color: var(--dm-border-hover);
}

/* Forms */
html[data-user-theme="dark"] .form-control,
html[data-user-theme="dark"] .custom-select {
  background-color: var(--dm-bg-secondary);
  border-color: var(--dm-border-color) !important;
  color: var(--dm-text-primary);
}

html[data-user-theme="dark"] .form-control:focus,
html[data-user-theme="dark"] .custom-select:focus {
  background-color: var(--dm-bg-secondary);
  border-color: var(--dm-primary) !important;
  color: var(--dm-text-primary);
}

html[data-user-theme="dark"] .form-control:disabled,
html[data-user-theme="dark"] .form-control[readonly] {
  background-color: var(--dm-bg-tertiary);
  color: var(--dm-text-muted);
}

html[data-user-theme="dark"] .input-group-prepend > .input-group-text {
  background-color: var(--dm-bg-secondary);
  border-color: var(--dm-border-color);
  color: var(--dm-text-primary);
}

html[data-user-theme="dark"] .input-group.disabled .input-group-prepend > .input-group-text {
  background-color: var(--dm-bg-tertiary);
}

/* Borders */
html[data-user-theme="dark"] .border {
  border-color: var(--dm-border-color) !important;
}

html[data-user-theme="dark"] .border-bottom {
  border-bottom-color: var(--dm-border-color) !important;
}

/* Links */
html[data-user-theme="dark"] a {
  color: var(--dm-primary-hover);
}

html[data-user-theme="dark"] a:hover {
  color: var(--dm-primary-light);
}

/* Text Colors */
html[data-user-theme="dark"] .text-primary {
  color: var(--dm-primary-hover) !important;
}

html[data-user-theme="dark"] .text-dark {
  color: var(--dm-text-primary) !important;
}

html[data-user-theme="dark"] .text-muted {
  color: var(--dm-text-secondary) !important;
}

html[data-user-theme="dark"] h1,
html[data-user-theme="dark"] h2,
html[data-user-theme="dark"] h3,
html[data-user-theme="dark"] h4,
html[data-user-theme="dark"] h5,
html[data-user-theme="dark"] h6,
html[data-user-theme="dark"] .h1,
html[data-user-theme="dark"] .h2,
html[data-user-theme="dark"] .h3,
html[data-user-theme="dark"] .h4,
html[data-user-theme="dark"] .h5,
html[data-user-theme="dark"] .h6 {
  color: var(--dm-text-primary);
}

/* Background Colors */
html[data-user-theme="dark"] .bg-white {
  background-color: var(--dm-bg-secondary) !important;
}

html[data-user-theme="dark"] [style*="background-color: #f9fafb"],
html[data-user-theme="dark"] [style*="background-color:#f9fafb"] {
  background-color: var(--dm-bg-features) !important;
}

/* Slide Section (Hero) */
html[data-user-theme="dark"] .slide {
  background-image: linear-gradient(to bottom, var(--dm-bg-secondary) 80%, var(--dm-bg-tertiary) 100%);
}

html[data-user-theme="dark"] .slide-title {
  color: var(--dm-text-primary);
}

html[data-user-theme="dark"] .slide-text {
  color: var(--dm-text-secondary);
}

html[data-user-theme="dark"] .slide-options span {
  color: var(--dm-text-primary);
}

/* 3 Steps Section */
html[data-user-theme="dark"] .py-5.bg-white {
  background-color: var(--dm-bg-secondary) !important;
}

html[data-user-theme="dark"] section.py-5.bg-white h2,
html[data-user-theme="dark"] section.py-5.bg-white h5 {
  color: var(--dm-text-primary) !important;
}

html[data-user-theme="dark"] section.py-5.bg-white p {
  color: var(--dm-text-secondary) !important;
}

html[data-user-theme="dark"] section.py-5.bg-white .h3 {
  color: var(--dm-primary-hover) !important;
}

/* Yellow Highlight Background */
html[data-user-theme="dark"] [style*="background: linear-gradient(120deg, #ffe7b4"],
html[data-user-theme="dark"] [style*="background:linear-gradient(120deg, #ffe7b4"] {
  background: var(--dm-gradient-yellow) !important;
}

html[data-user-theme="dark"] [style*="background: linear-gradient(120deg, #ffe7b4"] span,
html[data-user-theme="dark"] [style*="background:linear-gradient(120deg, #ffe7b4"] span {
  color: var(--dm-text-primary) !important;
}

/* Premium Access Features Section */
html[data-user-theme="dark"] section[style*="background-color: #f9fafb"] {
  background-color: var(--dm-bg-features) !important;
}

html[data-user-theme="dark"] section[style*="background-color: #f9fafb"] h2,
html[data-user-theme="dark"] section[style*="background-color:#f9fafb"] h2 {
  color: var(--dm-text-primary) !important;
}

html[data-user-theme="dark"] section[style*="background-color: #f9fafb"] p,
html[data-user-theme="dark"] section[style*="background-color:#f9fafb"] p {
  color: var(--dm-text-secondary) !important;
}

/* Feature Cards */
html[data-user-theme="dark"] .bg-white.rounded.shadow-sm {
  background-color: var(--dm-bg-card) !important;
  box-shadow: 0 0.125rem 0.25rem var(--dm-shadow) !important;
  border: 1px solid var(--dm-border-color) !important;
}

html[data-user-theme="dark"] .bg-white.rounded.shadow-sm h5 {
  color: var(--dm-text-primary) !important;
}

html[data-user-theme="dark"] .bg-white.rounded.shadow-sm p {
  color: var(--dm-text-secondary) !important;
}

/* Ready to Start Earning Section */
html[data-user-theme="dark"] section.py-5.bg-white h2 span[style*="background: linear-gradient"],
html[data-user-theme="dark"] section.py-5.bg-white h2 span[style*="background:linear-gradient"] {
  background: var(--dm-gradient-yellow) !important;
}

html[data-user-theme="dark"] section.py-5.bg-white h2 span[style*="background: linear-gradient"] span,
html[data-user-theme="dark"] section.py-5.bg-white h2 span[style*="background:linear-gradient"] span {
  color: var(--dm-text-primary) !important;
}

html[data-user-theme="dark"] section.py-5.bg-white [style*="background-color: #2563eb"],
html[data-user-theme="dark"] section.py-5.bg-white [style*="background-color:#2563eb"] {
  background-color: var(--dm-primary) !important;
}

html[data-user-theme="dark"] section.py-5.bg-white [style*="background-color: #2563eb"]:hover,
html[data-user-theme="dark"] section.py-5.bg-white [style*="background-color:#2563eb"]:hover {
  background-color: var(--dm-primary-hover) !important;
}

/* Tables */
html[data-user-theme="dark"] .table {
  color: var(--dm-text-primary);
}

html[data-user-theme="dark"] .table td,
html[data-user-theme="dark"] .table th,
html[data-user-theme="dark"] .table thead th {
  border-top-color: var(--dm-border-color);
}

html[data-user-theme="dark"] .border-top {
	border-color: var(--dm-border-color) !important;
}

html[data-user-theme="dark"] .table thead th {
  border-bottom-color: var(--dm-border-color);
}

html[data-user-theme="dark"] .table-hover tbody tr:hover {
  color: var(--dm-text-primary);
  background-color: var(--dm-bg-hover);
}

html[data-user-theme="dark"] .custom-table {
  border-color: var(--dm-border-color);
  background-color: var(--dm-bg-secondary);
}

html[data-user-theme="dark"] .custom-table thead {
  background-color: var(--dm-bg-tertiary);
  color: var(--dm-text-primary);
}

html[data-user-theme="dark"] .custom-table thead th {
  color: var(--dm-text-secondary);
}

html[data-user-theme="dark"] .table-files {
  border-color: var(--dm-border-color);
  background-color: var(--dm-bg-secondary);
}

html[data-user-theme="dark"] .table-files thead {
  background-color: var(--dm-bg-tertiary);
  color: var(--dm-text-primary);
}

html[data-user-theme="dark"] .table-files thead th {
  color: var(--dm-text-secondary);
}

html[data-user-theme="dark"] .table-files thead th a {
  color: var(--dm-text-secondary);
}

html[data-user-theme="dark"] .table-files .control .btn {
  background-color: var(--dm-bg-secondary);
  border-color: var(--dm-border-color);
  color: var(--dm-text-primary);
}

/* Cards and Blocks */
html[data-user-theme="dark"] .widgetblock {
  background-color: var(--dm-bg-card);
  border-color: var(--dm-border-color);
}

html[data-user-theme="dark"] .greyblock {
  background-color: var(--dm-bg-tertiary);
  border-color: var(--dm-border-color);
  color: var(--dm-text-primary);
}

html[data-user-theme="dark"] .shadowblock {
  background-color: var(--dm-bg-card);
  box-shadow: 0 10px 48px var(--dm-shadow);
}

html[data-user-theme="dark"] .premiumBlock {
  background-color: var(--dm-bg-card);
  box-shadow: 0 10px 48px var(--dm-shadow);
}

html[data-user-theme="dark"] .bstats {
  background-color: var(--dm-bg-card);
  border-color: var(--dm-border-color);
  color: var(--dm-text-primary);
}

html[data-user-theme="dark"] .infoblock {
  background-color: var(--dm-bg-card);
  border-color: var(--dm-border-color);
  color: var(--dm-text-primary);
}

/* Dashboard */
html[data-user-theme="dark"] .dashboard-content {
  background-color: var(--dm-bg-primary);
}

html[data-user-theme="dark"] .dashboard-header {
  background-color: var(--dm-bg-secondary);
}

/* Alerts */
html[data-user-theme="dark"] .alert {
  background-color: var(--dm-bg-card);
  border-color: var(--dm-border-color);
  color: var(--dm-text-primary);
}

/* Dropdown */
html[data-user-theme="dark"] .dropdown-menu {
  background-color: var(--dm-bg-card);
  border-color: var(--dm-border-color);
  box-shadow: 0px 18px 54px 0px var(--dm-shadow);
}

html[data-user-theme="dark"] .dropdown-menu .dropdown-item {
  color: var(--dm-text-primary);
}

html[data-user-theme="dark"] .dropdown-menu .dropdown-item:hover {
  background-color: var(--dm-bg-hover);
  color: var(--dm-primary-hover);
}

/* Tabs */
html[data-user-theme="dark"] .tab-panel {
  background-color: var(--dm-bg-card);
  border-color: var(--dm-border-color);
}

html[data-user-theme="dark"] .tab-panel .nav-link {
  color: var(--dm-text-secondary);
}

html[data-user-theme="dark"] .tab-panel .nav-link.active {
  background-color: var(--dm-primary);
  color: #fff;
}

html[data-user-theme="dark"] .nav.nav-pills .nav-link.active {
  background: var(--dm-primary);
  border-color: var(--dm-primary);
  color: #fff;
}

html[data-user-theme="dark"] .dashnav a {
  color: var(--dm-text-secondary);
}

html[data-user-theme="dark"] .dashnav a:hover,
html[data-user-theme="dark"] .dashnav a.active {
  color: var(--dm-primary-hover);
  background-color: rgba(74, 138, 255, 0.15);
}

/* Advantages Items */
html[data-user-theme="dark"] .advantages-item {
  background-color: var(--dm-bg-card);
  border-color: var(--dm-border-color);
  color: var(--dm-text-primary);
}

html[data-user-theme="dark"] .advantages-item:hover {
  background: var(--dm-primary);
  border-color: var(--dm-primary);
  color: #fff;
}

html[data-user-theme="dark"] .advantages-icon {
  background: var(--dm-bg-card);
  border-color: var(--dm-primary);
}

html[data-user-theme="dark"] .advantages-item:hover .advantages-icon {
  background: #fff;
  border-color: #fff;
}

/* Premium Section */
html[data-user-theme="dark"] .premium-expire {
  background-color: #0d2e1f;
  border-color: var(--dm-success);
  color: var(--dm-success);
}

html[data-user-theme="dark"] .premiumTable {
  background: var(--dm-bg-card);
  color: var(--dm-text-primary);
}

html[data-user-theme="dark"] .premiumTable .border-bottom {
  border-color: var(--dm-border-color) !important;
}

html[data-user-theme="dark"] .premiumTable .col.premium {
  border-left-color: var(--dm-warning);
  border-right-color: var(--dm-warning);
  background-color: #2a2415;
}

html[data-user-theme="dark"] .premiumTable .col:first-child {
  background-color: var(--dm-bg-card);
}

/* Start Earn Section */
html[data-user-theme="dark"] .startEarn {
  background: var(--dm-bg-secondary);
  color: #fff;
}

html[data-user-theme="dark"] .startEarn-pps {
  background-color: var(--dm-bg-card);
  color: var(--dm-text-primary);
  box-shadow: 0 10px 48px var(--dm-shadow);
}

html[data-user-theme="dark"] .startEarn-pps span {
  border-bottom-color: var(--dm-border-color);
  color: var(--dm-primary-hover);
}

html[data-user-theme="dark"] .earn-table th,
html[data-user-theme="dark"] .earn-table td {
  border-right-color: var(--dm-border-color) !important;
  color: var(--dm-text-primary);
}

/* Tiers */
html[data-user-theme="dark"] .tier {
  border-color: var(--dm-border-color);
  background-color: var(--dm-bg-card);
  color: var(--dm-text-primary);
}

html[data-user-theme="dark"] .tier.tier-1 {
  border-color: var(--dm-primary);
  background-color: #0d1a2e;
}

html[data-user-theme="dark"] .tier.tier-2 {
  border-color: #3DB298;
  background-color: #0d1f1a;
}

html[data-user-theme="dark"] .tier.tier-3 {
  border-color: var(--dm-warning);
  background-color: #2a2415;
}

html[data-user-theme="dark"] .tier.tier-4 {
  border-color: var(--dm-danger);
  background-color: #2a0d0d;
}

/* Earn Rules */
html[data-user-theme="dark"] .earnRules {
  background-color: #2a0d0d;
  border-color: #E03E1A;
  color: var(--dm-text-primary);
}

html[data-user-theme="dark"] .earnRules .btn {
  color: #ff6b6b;
}

/* Paging */
html[data-user-theme="dark"] .paging a,
html[data-user-theme="dark"] .paging span {
  background-color: var(--dm-bg-card);
  border-color: var(--dm-border-color);
  color: var(--dm-text-primary);
}

html[data-user-theme="dark"] .paging span,
html[data-user-theme="dark"] .paging a:hover {
  color: #fff;
  background-color: var(--dm-primary);
}

/* Modal */
html[data-user-theme="dark"] .modal-content {
  background-color: var(--dm-bg-card);
  color: var(--dm-text-primary);
  box-shadow: 0 10px 24px var(--dm-shadow);
}

html[data-user-theme="dark"] .modal-header {
  border-bottom-color: var(--dm-border-color);
}

html[data-user-theme="dark"] .modal-footer {
  border-top-color: var(--dm-border-color);
}

/* Custom Controls */
html[data-user-theme="dark"] .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--dm-success);
  border-color: var(--dm-success);
}

html[data-user-theme="dark"] .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
html[data-user-theme="dark"] .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--dm-primary);
  border-color: var(--dm-primary);
}

html[data-user-theme="dark"] .custom-control-label {
  color: var(--dm-text-primary);
}

/* Country */
html[data-user-theme="dark"] .country-name {
  color: var(--dm-text-primary);
}

/* Section Get Start */
html[data-user-theme="dark"] .section-getstart {
  background: linear-gradient(to bottom, #1E68FF 0%, #1852CD 100%);
  color: #fff;
}

html[data-user-theme="dark"] .section-getstart .btn {
  background-color: #fff;
  color: var(--dm-primary);
}

/* Start Premium */
html[data-user-theme="dark"] .startPremium {
  background: linear-gradient(to bottom, #1E68FF 0%, #1852CD 100%);
  color: #fff;
}

/* Text Content */
html[data-user-theme="dark"] .text-content {
  color: var(--dm-text-primary);
}

html[data-user-theme="dark"] .text-content ul li {
  color: var(--dm-text-primary);
}

html[data-user-theme="dark"] .startEarn-text {
  color: var(--dm-text-secondary);
}

html[data-user-theme="dark"] .startPremium-text {
  color: var(--dm-text-primary);
}

/* Upload Block */
html[data-user-theme="dark"] .uploadblock {
  background-color: var(--dm-bg-card);
}

/* Files Header */
html[data-user-theme="dark"] .files-header {
  color: var(--dm-text-secondary);
}

/* Badge adjustments for dark mode */
html[data-user-theme="dark"] .badge {
  color: #fff;
}

/* Lead text */
html[data-user-theme="dark"] .lead {
  color: var(--dm-text-secondary) !important;
}

/* Font weight classes */
html[data-user-theme="dark"] .fw-bold,
html[data-user-theme="dark"] .fw-semibold {
  color: var(--dm-text-primary);
}

/* Scrollbar styling for dark mode */
html[data-user-theme="dark"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html[data-user-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--dm-bg-tertiary);
}

html[data-user-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--dm-border-color);
  border-radius: 5px;
}

html[data-user-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--dm-border-hover);
}

html[data-user-theme="dark"] ::-webkit-scrollbar-corner {
  background: var(--dm-bg-tertiary);
}

/* Firefox scrollbar */
html[data-user-theme="dark"] * {
  scrollbar-width: thin;
  scrollbar-color: var(--dm-border-color) var(--dm-bg-tertiary);
}

/* Premium Pricing Section */
html[data-user-theme="dark"] #buypremiumdiv,
html[data-user-theme="dark"] .buypremdiv {
  background-color: var(--dm-bg-primary);
}

/* Premium Plan Cards */
html[data-user-theme="dark"] .card.border-0.shadow-sm.rounded-4 {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border-color) !important;
  box-shadow: 0 0.125rem 0.25rem var(--dm-shadow) !important;
}

html[data-user-theme="dark"] .card-body {
  background-color: transparent;
  color: var(--dm-text-primary);
}

/* Card Headings */
html[data-user-theme="dark"] .card h5.fw-bold.text-uppercase.text-secondary {
  color: var(--dm-text-secondary) !important;
}

html[data-user-theme="dark"] .card h2.text-dark.fw-bold {
  color: var(--dm-text-primary) !important;
}

html[data-user-theme="dark"] .card h2.text-dark.fw-bold small.text-muted {
  color: var(--dm-text-muted) !important;
}

/* Card Lists */
html[data-user-theme="dark"] .card .list-unstyled {
  color: var(--dm-text-primary);
}

html[data-user-theme="dark"] .card .list-unstyled li {
  color: var(--dm-text-primary);
}

html[data-user-theme="dark"] .card .list-unstyled li i {
  color: var(--dm-success);
}

html[data-user-theme="dark"] .card .list-unstyled li b {
  color: var(--dm-text-primary);
  font-weight: 600;
}

html[data-user-theme="dark"] .card .list-unstyled li i.fa-clock.text-primary {
  color: var(--dm-primary-hover) !important;
}

/* Form Groups in Cards */
html[data-user-theme="dark"] .card .form-group {
  background-color: transparent;
}

html[data-user-theme="dark"] .card .form-group label.h1.text-dark {
  color: var(--dm-text-primary) !important;
}

html[data-user-theme="dark"] .card .form-group .form-control {
  background-color: var(--dm-bg-tertiary) !important;
  border-color: var(--dm-border-color) !important;
  color: var(--dm-text-primary) !important;
}

html[data-user-theme="dark"] .card .form-group .form-control:focus {
  background-color: var(--dm-bg-tertiary) !important;
  border-color: var(--dm-primary) !important;
  color: var(--dm-text-primary) !important;
}

html[data-user-theme="dark"] .card .form-group select.form-control option {
  background-color: var(--dm-bg-tertiary) !important;
  color: var(--dm-text-primary) !important;
}

/* Popular Badge */
html[data-user-theme="dark"] .popular-badge {
  background-color: transparent;
}

html[data-user-theme="dark"] .popular-badge .badge {
  background-color: var(--dm-warning) !important;
  color: #212529 !important;
}

html[data-user-theme="dark"] .popular-badge .badge.bg-warning {
  background-color: var(--dm-warning) !important;
  color: #212529 !important;
}

html[data-user-theme="dark"] .popular-badge .badge.badge-success {
  background-color: var(--dm-success) !important;
  color: #fff !important;
}

/* Payment Modal */
html[data-user-theme="dark"] .modal-content {
  background-color: var(--dm-bg-card) !important;
  color: var(--dm-text-primary) !important;
}

html[data-user-theme="dark"] .modal-header {
  background-color: var(--dm-bg-card) !important;
  border-bottom-color: var(--dm-border-color) !important;
}

html[data-user-theme="dark"] .modal-header .modal-title {
  color: var(--dm-text-primary) !important;
}

html[data-user-theme="dark"] .modal-header .close {
  color: var(--dm-text-primary) !important;
  opacity: 0.75;
}

html[data-user-theme="dark"] .modal-header .close:hover {
  opacity: 1;
}

html[data-user-theme="dark"] .modal-body {
  background-color: var(--dm-bg-card) !important;
  color: var(--dm-text-primary) !important;
}

html[data-user-theme="dark"] .modal-body small.text-muted {
  color: var(--dm-text-secondary) !important;
}

html[data-user-theme="dark"] .modal-body p {
  color: var(--dm-text-primary) !important;
}

html[data-user-theme="dark"] .modal-body p .font-weight-bold {
  color: var(--dm-text-primary) !important;
}

html[data-user-theme="dark"] .modal-body span.font-weight-bold {
  color: var(--dm-text-primary) !important;
}

html[data-user-theme="dark"] .modal-body .border-top.border-light {
  border-color: var(--dm-border-color) !important;
}

html[data-user-theme="dark"] .modal-footer {
  background-color: var(--dm-bg-card) !important;
  border-top-color: var(--dm-border-color) !important;
}

/* Payment Method Links */
html[data-user-theme="dark"] .paymethods a.bg-light {
  background-color: var(--dm-bg-tertiary) !important;
  border-color: var(--dm-border-color) !important;
}

html[data-user-theme="dark"] .paymethods a.bg-light:hover {
  background-color: var(--dm-bg-hover) !important;
  border-color: var(--dm-border-hover) !important;
}

html[data-user-theme="dark"] .paymethods a.ask_email {
  background-color: var(--dm-bg-tertiary) !important;
  border-color: var(--dm-border-color) !important;
}

html[data-user-theme="dark"] .paymethods a.ask_email:hover {
  background-color: var(--dm-bg-hover) !important;
  border-color: var(--dm-border-hover) !important;
}

/* Badge Labels */
html[data-user-theme="dark"] .badge-label {
  background-color: var(--dm-danger) !important;
  color: #fff !important;
}

html[data-user-theme="dark"] .badge-label[style*="background-color: red"] {
  background-color: var(--dm-danger) !important;
}

/* Payment Method Number Badges */
html[data-user-theme="dark"] .paymethods a span[style*="background: rgb(217, 34, 42)"] {
  background-color: var(--dm-danger) !important;
  color: #fff !important;
}

html[data-user-theme="dark"] .paymethods a span[style*="background: rgb(0, 112, 186)"] {
  background-color: #0070ba !important;
  color: #fff !important;
}

html[data-user-theme="dark"] .paymethods a span[style*="background: #0070ba"] {
  background-color: #0070ba !important;
  color: #fff !important;
}

html[data-user-theme="dark"] .paymethods a span[style*="background: #d9222a"] {
  background-color: var(--dm-danger) !important;
  color: #fff !important;
}

/* "Already have a premium key?" Section */
html[data-user-theme="dark"] .modal-body .text-center span {
  color: var(--dm-text-primary) !important;
}

html[data-user-theme="dark"] .modal-body .text-center .btn-primary.btn-sm {
  background-color: var(--dm-primary) !important;
  border-color: var(--dm-primary) !important;
  color: #fff !important;
}

html[data-user-theme="dark"] .modal-body .text-center .btn-primary.btn-sm:hover {
  background-color: var(--dm-primary-hover) !important;
  border-color: var(--dm-primary-hover) !important;
}

/* Info Icons */
html[data-user-theme="dark"] .fa-info-circle.text-primary {
  color: var(--dm-primary-hover) !important;
}

/* All Resellers Link */
html[data-user-theme="dark"] .paymethods a:not([href*="javascript"]):not([href*="http"]) {
  color: var(--dm-text-primary) !important;
}

html[data-user-theme="dark"] .paymethods a:not([href*="javascript"]):not([href*="http"]):hover {
  color: var(--dm-primary-hover) !important;
  background-color: var(--dm-bg-hover) !important;
}


/* Login Form Section */
html[data-user-theme="dark"] .card {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border-color) !important;
  color: var(--dm-text-primary) !important;
}

html[data-user-theme="dark"] .card-body {
  background-color: transparent !important;
  color: var(--dm-text-primary) !important;
}

html[data-user-theme="dark"] .auth-form {
  background-color: transparent;
  color: var(--dm-text-primary);
}

html[data-user-theme="dark"] .card-title {
  color: var(--dm-text-primary) !important;
}

html[data-user-theme="dark"] .card-title.mb-4.mt-1 {
  color: var(--dm-text-primary) !important;
}

/* Sign Up Button */
html[data-user-theme="dark"] .btn.bg-white.text-primary {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-primary) !important;
  color: var(--dm-primary-hover) !important;
}

html[data-user-theme="dark"] .btn.bg-white.text-primary:hover {
  background-color: var(--dm-bg-hover) !important;
  border-color: var(--dm-primary-hover) !important;
  color: var(--dm-primary-light) !important;
}

html[data-user-theme="dark"] .btn.bg-white.text-primary.border.border-primary {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-primary) !important;
  color: var(--dm-primary-hover) !important;
}

html[data-user-theme="dark"] .btn.bg-white.text-primary.border.border-primary:hover {
  background-color: var(--dm-bg-hover) !important;
  border-color: var(--dm-primary-hover) !important;
  color: var(--dm-primary-light) !important;
}

/* Google Login Button */
html[data-user-theme="dark"] .btn.btn-outline-danger.border-danger {
  background-color: transparent !important;
  border-color: var(--dm-danger) !important;
  color: var(--dm-danger) !important;
}

html[data-user-theme="dark"] .btn.btn-outline-danger.border-danger:hover {
  background-color: var(--dm-danger) !important;
  border-color: var(--dm-danger) !important;
  color: #fff !important;
}

html[data-user-theme="dark"] .btn.btn-outline-danger.border-danger i {
  color: inherit;
}

/* Form Inputs in Login Form */
html[data-user-theme="dark"] .auth-form .form-control {
  background-color: var(--dm-bg-tertiary) !important;
  border-color: var(--dm-border-color) !important;
  color: var(--dm-text-primary) !important;
}

html[data-user-theme="dark"] .auth-form .form-control::placeholder {
  color: var(--dm-text-muted) !important;
  opacity: 0.7;
}

html[data-user-theme="dark"] .auth-form .form-control:focus {
  background-color: var(--dm-bg-tertiary) !important;
  border-color: var(--dm-primary) !important;
  color: var(--dm-text-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(34, 105, 255, 0.25) !important;
}

html[data-user-theme="dark"] .auth-form .form-control[type="password"] {
  background-color: var(--dm-bg-tertiary) !important;
  border-color: var(--dm-border-color) !important;
  color: var(--dm-text-primary) !important;
}

/* Form Groups */
html[data-user-theme="dark"] .auth-form .form-group {
  margin-bottom: 1rem;
}

html[data-user-theme="dark"] .auth-form .form-group label {
  color: var(--dm-text-primary) !important;
}

/* Horizontal Rule */
html[data-user-theme="dark"] .auth-form hr {
  border-top-color: var(--dm-border-color) !important;
  opacity: 0.5;
}

/* Login Button */
html[data-user-theme="dark"] .auth-form .btn.btn-primary.btn-block {
  background-color: var(--dm-primary) !important;
  border-color: var(--dm-primary) !important;
  color: #fff !important;
}

html[data-user-theme="dark"] .auth-form .btn.btn-primary.btn-block:hover {
  background-color: var(--dm-primary-hover) !important;
  border-color: var(--dm-primary-hover) !important;
  color: #fff !important;
}

/* Forgot Password Link */
html[data-user-theme="dark"] .auth-form .small {
  color: var(--dm-primary-hover) !important;
}

html[data-user-theme="dark"] .auth-form .small:hover {
  color: var(--dm-primary-light) !important;
  text-decoration: underline;
}

html[data-user-theme="dark"] .auth-form a.small {
  color: var(--dm-primary-hover) !important;
}

html[data-user-theme="dark"] .auth-form a.small:hover {
  color: var(--dm-primary-light) !important;
  text-decoration: underline;
}

/* Form Paragraphs */
html[data-user-theme="dark"] .auth-form p {
  color: var(--dm-text-primary);
  margin-bottom: 1rem;
}

/* Row and Column in Form */
html[data-user-theme="dark"] .auth-form .row {
  background-color: transparent;
}

html[data-user-theme="dark"] .auth-form .col-md-6 {
  background-color: transparent;
}

/* Border Top Card Body (Have an account? Log In section) */
html[data-user-theme="dark"] .border-top.card-body.text-center {
  border-top-color: var(--dm-border-color) !important;
  background-color: var(--dm-bg-card) !important;
  color: var(--dm-text-primary) !important;
}

html[data-user-theme="dark"] .border-top.card-body.text-center a {
  color: var(--dm-primary-hover) !important;
}

html[data-user-theme="dark"] .border-top.card-body.text-center a:hover {
  color: var(--dm-primary-light) !important;
  text-decoration: underline;
}


/* Accordion Group (API Documentation) */
html[data-user-theme="dark"] .accordion-group {
  background-color: var(--dm-bg-card);
  border: 1px solid var(--dm-border-color);
  border-radius: 8px;
  margin-bottom: 1rem;
  overflow: hidden;
}

html[data-user-theme="dark"] .btn-accordion {
  background-color: var(--dm-bg-secondary);
  color: var(--dm-text-primary);
  padding: 1rem;
  cursor: pointer;
  border: none;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  transition: background-color 0.2s ease;
}

html[data-user-theme="dark"] .btn-accordion:hover {
  background-color: var(--dm-bg-hover);
}

html[data-user-theme="dark"] .btn-accordion i {
  color: var(--dm-primary-hover);
  transition: transform 0.2s ease;
}

html[data-user-theme="dark"] .accordion-content {
  background-color: var(--dm-bg-tertiary);
  padding: 1.5rem;
  border-top: 1px solid var(--dm-border-color);
}

/* API Description */
html[data-user-theme="dark"] .api-desc {
  margin-bottom: 1.5rem;
}

html[data-user-theme="dark"] .api-desc:last-child {
  margin-bottom: 0;
}

html[data-user-theme="dark"] .api-desc-title {
  color: var(--dm-text-primary);
  font-weight: 600;
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

/* Code Blocks */
html[data-user-theme="dark"] pre {
  background-color: var(--dm-bg-primary);
  border: 1px solid var(--dm-border-color);
  border-radius: 6px;
  padding: 1rem;
  overflow-x: auto;
  color: var(--dm-text-primary);
  margin: 0;
}

html[data-user-theme="dark"] code {
  background-color: transparent;
  color: var(--dm-text-primary);
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.875rem;
  line-height: 1.6;
}

html[data-user-theme="dark"] pre code {
  color: var(--dm-text-primary);
  background-color: transparent;
  padding: 0;
  border: none;
}

/* Badge in Code */
html[data-user-theme="dark"] code .badge.badge-primary {
  background-color: var(--dm-primary) !important;
  color: #fff !important;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
}

html[data-user-theme="dark"] .badge.badge-primary {
  background-color: var(--dm-primary) !important;
  color: #fff !important;
}

/* API Parameters */
html[data-user-theme="dark"] .api-parameters {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
  align-items: start;
  margin-bottom: 0.5rem;
}

html[data-user-theme="dark"] .api-parameter {
  display: flex;
  align-items: center;
}

html[data-user-theme="dark"] .api-parameter .badge {
  background-color: var(--dm-primary) !important;
  color: #fff !important;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
}

html[data-user-theme="dark"] .api-type {
  color: var(--dm-text-secondary);
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.875rem;
}

html[data-user-theme="dark"] .api-example {
  grid-column: 1 / -1;
  color: var(--dm-text-secondary);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

html[data-user-theme="dark"] .api-example .mono {
  font-family: 'Courier New', Courier, monospace;
  color: var(--dm-text-primary);
  background-color: var(--dm-bg-primary);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  border: 1px solid var(--dm-border-color);
}

/* API Response */
html[data-user-theme="dark"] .api-response {
  margin-top: 0.5rem;
}

html[data-user-theme="dark"] .api-response pre {
  background-color: var(--dm-bg-primary);
  border: 1px solid var(--dm-border-color);
  border-radius: 6px;
  padding: 1rem;
}

html[data-user-theme="dark"] .api-response code {
  color: var(--dm-text-primary);
  background-color: transparent;
}

html[data-user-theme="dark"] .page-content ul li b{
	 color: var(--dm-text-primary);
}

/* Dashboard Block (Account Balance) */
html[data-user-theme="dark"] .dashblock {
  background-color: var(--dm-bg-card);
  border: 1px solid var(--dm-border-color);
  border-radius: 12px;
  padding: 1.5rem;
  color: var(--dm-text-primary);
}

/* Icon Circle (Wallet Icon) */
html[data-user-theme="dark"] .icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--dm-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dm-border-color);
}

/* Navigation Panel */
html[data-user-theme="dark"] .navigation-panel {
  background-color: var(--dm-bg-card) !important;
}

/* Navigation Panel Logo Section */
html[data-user-theme="dark"] .navigation-panel .p-4 {
  background-color: transparent;
  border-bottom: 1px solid var(--dm-border-color);
}

html[data-user-theme="dark"] .navigation-panel-nav a.nav-link:hover {
  color: var(--dm-primary-hover);
  background-color: rgba(74, 138, 255, 0.1);
}

html[data-user-theme="dark"] .navigation-panel-nav a.nav-link.active {
  color: var(--dm-primary-hover);
  background-color: rgba(74, 138, 255, 0.15);
}

html[data-user-theme="dark"] .navigation-panel-nav a.nav-link svg {
  color: inherit;
}

html[data-user-theme="dark"] .navigation-panel-nav a {
  color: var(--dm-text-secondary);
}

/** Progress Bar **/
/* Progress Bar */
html[data-user-theme="dark"] .progress {
  background-color: var(--dm-bg-tertiary);
  border: 1px solid var(--dm-border-color);
  border-radius: 8px;
  height: 1.5rem;
  overflow: hidden;
}

html[data-user-theme="dark"] .progress.mb-1 {
  margin-bottom: 0.25rem;
}

html[data-user-theme="dark"] .progress-bar {
  background-color: var(--dm-primary);
  background: linear-gradient(90deg, var(--dm-primary), var(--dm-primary-hover));
  border-radius: 8px;
  transition: width 0.6s ease;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

html[data-user-theme="dark"] .progress-bar[style*="background: linear-gradient(90deg, rgb(75, 146, 252), rgb(111, 177, 252))"] {
  background: linear-gradient(90deg, var(--dm-primary), var(--dm-primary-hover)) !important;
}

html[data-user-theme="dark"] .progress-bar[style*="background:linear-gradient(90deg, rgb(75, 146, 252), rgb(111, 177, 252))"] {
  background: linear-gradient(90deg, var(--dm-primary), var(--dm-primary-hover)) !important;
}

html[data-user-theme="dark"] #space-bar {
  background: linear-gradient(90deg, var(--dm-primary), var(--dm-primary-hover)) !important;
}

/* Add More Button Label */
html[data-user-theme="dark"] label.btn.border.w-100.bg-light {
  background-color: var(--dm-bg-tertiary) !important;
  border-color: var(--dm-border-color) !important;
  color: var(--dm-text-primary) !important;
  cursor: pointer;
  transition: all 0.2s ease;
}

html[data-user-theme="dark"] label.btn.border.w-100.bg-light:hover {
  background-color: var(--dm-bg-hover) !important;
  border-color: var(--dm-border-hover) !important;
  color: var(--dm-text-primary) !important;
}

html[data-user-theme=dark] .is-dashboard .dashboard-header {
  background-color: transparent;
}

.is-dashboard #theme-toggle {
border-radius: 0px;
}

.is-dashboard #theme-toggle svg {
  float: left;
  margin: 0px 18px;
}

.is-dashboard #theme-toggle {
  padding: 8px;
}

/* Nav Tabs */
html[data-user-theme="dark"] .nav-tabs {
  border-bottom-color: var(--dm-border-color);
}

html[data-user-theme="dark"] .nav-tabs .nav-link {
  color: var(--dm-text-secondary);
  background-color: transparent;
  border-color: transparent;
  border-bottom-color: var(--dm-border-color);
}

html[data-user-theme="dark"] .nav-tabs .nav-link:hover {
  color: var(--dm-text-primary);
  background-color: var(--dm-bg-hover);
  border-color: var(--dm-border-color);
  border-bottom-color: var(--dm-border-color);
}

html[data-user-theme="dark"] .nav-tabs .nav-item.show .nav-link,
html[data-user-theme="dark"] .nav-tabs .nav-link.active {
  color: var(--dm-text-primary) !important;
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border-color) var(--dm-border-color) var(--dm-bg-card) !important;
}

html[data-user-theme="dark"] .nav-tabs .nav-item.show .nav-link:hover,
html[data-user-theme="dark"] .nav-tabs .nav-link.active:hover {
  color: var(--dm-text-primary) !important;
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border-color) var(--dm-border-color) var(--dm-bg-card) !important;
}

























































/** Toggle Button **/


#theme-toggle {
    cursor: pointer;
    background: 0;
    border: 0;
    opacity: .8;
    padding: 8px 8px 4px 8px;
    vertical-align: middle;
    border-radius: 50%;
    position: relative;
    isolation: isolate
}

.toggle-circle {
    transition: transform 500ms ease-out
}

.toggle-sun {
    transform-origin: center center;
    transition: transform 750ms cubic-bezier(0.11,0.14,0.29,1.32)
}

@keyframes pulseToLight {
    0% {
        transform: scale(0);
        opacity: .5
    }

    10% {
        transform: scale(1)
    }

    75% {
        opacity: 1
    }

    100% {
        opacity: 0;
        transform: scale(1)
    }
}

@keyframes pulseToDark {
    0% {
        transform: scale(0);
        opacity: .5
    }

    10% {
        transform: scale(1)
    }

    75% {
        opacity: 1
    }

    100% {
        opacity: 0;
        transform: scale(1)
    }
}

#theme-toggle svg {
    fill: var(--clr-foreground);
    margin-top: -10px;
}

#theme-toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    background: hsl(0 0 50% / .2);
    border-radius: inherit;
    transform: scale(0);
    opacity: 0;
    z-index: -1
}

#theme-toggle:hover {
    outline: 0;
    opacity: 1;
    background: hsl(0 0 50% / .15)
}

.toggle-circle {
    transition: transform 500ms ease-out
}

.toggle-sun {
    transform-origin: center center;
    transition: transform 750ms cubic-bezier(0.11,0.14,0.29,1.32)
}

html[data-user-theme="light"] .toggle-circle {
    transform: translateX(-15%)
}

html[data-user-theme="light"] #theme-toggle::before {
    animation: pulseToLight 650ms ease-out
}

html[data-user-theme="dark"] #theme-toggle::before {
    animation: pulseToDark 650ms ease-out
}

html[data-user-theme="light"] .toggle-circle {
    transform: translateX(-15%)
}

html[data-user-theme="light"] .toggle-sun {
    transform: rotate(0.5turn)
}