/* ==========================================================================
   SUNIHOST CLIENT DASHBOARD - PURE BLACK (OLED / TRUE BLACK) DARK MODE
   Thiết kế đen thuần (#000000), sắc sảo, siêu tương phản & êm mắt ban đêm
   ========================================================================== */

/* 1. CSS TOKENS & VARIABLES */
html.dark,
body.dark-theme,
[data-theme="dark"] {
  --ant-primary: #3b82f6;
  --ant-primary-hover: #60a5fa;
  --ant-primary-active: #1d4ed8;
  --ant-primary-bg: rgba(59, 130, 246, 0.15);
  --ant-success: #10b981;
  --ant-warning: #f59e0b;
  --ant-error: #ef4444;
  --ant-info: #3b82f6;
  --ant-text: #ffffff;
  --ant-text-secondary: #a3a3a3;
  --ant-text-tertiary: #737373;
  --ant-border: #262626;
  --ant-border-light: #171717;
  --ant-bg-layout: #000000;
  --ant-bg-container: #0a0a0a;
  --ant-bg-elevated: #141414;
  --ant-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.8), 0 1px 2px -1px rgba(0, 0, 0, 0.8);
  --ant-shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.9), 0 8px 10px -6px rgba(0, 0, 0, 0.9);
  color-scheme: dark;
}

/* 2. BASE LAYOUT & BODY (ĐEN THUẦN) */
html.dark,
html.dark body.dashboard-layout {
  background: #000000 !important;
  color: #ffffff !important;
}

html.dark .ant-layout-main,
html.dark .ant-content {
  background: #000000 !important;
  color: #ffffff !important;
}

/* 3. HEADER BAR */
html.dark .ant-header {
  background: #000000 !important;
  border-bottom: 1px solid #1a1a1a !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
}

html.dark .ant-header-toggle {
  background: #0f0f0f !important;
  border: 1px solid #262626 !important;
  color: #d4d4d4 !important;
}
html.dark .ant-header-toggle:hover {
  background: #1a1a1a !important;
  border-color: #383838 !important;
  color: #60a5fa !important;
}

html.dark .ant-header-balance {
  background: #0a0a0a !important;
  border: 1px solid #262626 !important;
  color: #10b981 !important;
}

html.dark .ant-header-balance-text {
  color: #10b981 !important;
}

html.dark .ant-header-user {
  background: #0f0f0f !important;
  border: 1px solid #262626 !important;
  color: #ffffff !important;
}
html.dark .ant-header-user:hover {
  background: #1a1a1a !important;
  border-color: #383838 !important;
}

html.dark .ant-header-user-name {
  color: #ffffff !important;
}

html.dark .ant-header-lang-trigger {
  background: #0f0f0f !important;
  border: 1px solid #262626 !important;
}
html.dark .ant-header-lang-trigger:hover {
  background: #1a1a1a !important;
  border-color: #383838 !important;
}

/* 4. SIDEBAR (ĐEN THUẦN) */
html.dark .ant-sider {
  background: #000000 !important;
  border-right: 1px solid #1a1a1a !important;
}

html.dark .ant-sider-logo {
  border-bottom: 1px solid #1a1a1a !important;
  background: #000000 !important;
}

html.dark .sidebar-search-container input {
  background: #0d0d0d !important;
  border: 1px solid #262626 !important;
  color: #ffffff !important;
}
html.dark .sidebar-search-container input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
}

html.dark .sidebar-search-results {
  background: #0a0a0a !important;
  border: 1px solid #262626 !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.9) !important;
}

html.dark .sidebar-search-item {
  color: #d4d4d4 !important;
  border-bottom: 1px solid #171717 !important;
}
html.dark .sidebar-search-item:hover {
  background: #171717 !important;
  color: #60a5fa !important;
}

html.dark .ant-menu-item {
  color: #a3a3a3 !important;
}
html.dark .ant-menu-item:hover {
  background: #121212 !important;
  color: #ffffff !important;
}
html.dark .ant-menu-item.active {
  background: #2563eb !important;
  color: #ffffff !important;
}

html.dark .ant-menu-submenu-title {
  color: #a3a3a3 !important;
}
html.dark .ant-menu-submenu-title:hover {
  background: #121212 !important;
  color: #ffffff !important;
}

html.dark .ant-menu-group-label {
  color: #525252 !important;
}

/* 5. CARDS & CONTAINERS */
html.dark .ant-card {
  background: #0a0a0a !important;
  border: 1px solid #1f1f1f !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.6) !important;
}

html.dark .ant-card-head {
  background: #0a0a0a !important;
  border-bottom: 1px solid #1f1f1f !important;
  color: #ffffff !important;
}

html.dark .ant-card-title {
  color: #ffffff !important;
}

html.dark .ant-card-body {
  color: #e5e5e5 !important;
}

/* 6. HEADER CARDS (HISTORY & DASHBOARD) */
html.dark .host-history-header,
html.dark .vps-history-header,
html.dark .page-header-card {
  background: #0a0a0a !important;
  border: 1px solid #1f1f1f !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

html.dark .host-header-title,
html.dark .vps-header-title {
  color: #ffffff !important;
}

html.dark .host-header-subtitle,
html.dark .vps-header-subtitle {
  color: #a3a3a3 !important;
}

html.dark .host-header-icon {
  background: rgba(59, 130, 246, 0.12) !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
  color: #60a5fa !important;
}

/* 7. KPI / STAT TILES */
html.dark .hosting-stat-tile,
html.dark .vps-stat-tile {
  background: #0a0a0a !important;
  border: 1px solid #1f1f1f !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

html.dark .hosting-stat-tile:hover,
html.dark .vps-stat-tile:hover {
  background: #141414 !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8) !important;
}

html.dark .hosting-stat-tile.active-kpi,
html.dark .vps-stat-tile.active-kpi {
  background: #0d1a33 !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 1px #3b82f6 !important;
}

html.dark .hosting-stat-val {
  color: #ffffff !important;
}

html.dark .hosting-stat-lbl {
  color: #a3a3a3 !important;
}

/* 8. FILTERS & SEARCH CONTAINERS */
html.dark .host-filter-container,
html.dark .vps-filter-container {
  background: #080808 !important;
  border: 1px solid #1f1f1f !important;
}

html.dark .host-filter-label,
html.dark .vps-filter-label {
  color: #a3a3a3 !important;
}

html.dark .host-input-control,
html.dark .vps-input-control,
html.dark input.host-input-control,
html.dark select.host-input-control,
html.dark .ant-input {
  background: #0f0f0f !important;
  border: 1px solid #262626 !important;
  color: #ffffff !important;
}

html.dark .host-input-control:focus,
html.dark .vps-input-control:focus,
html.dark .ant-input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
}

html.dark select.host-input-control option {
  background: #0f0f0f;
  color: #ffffff;
}

/* 9. BULK ACTIONS TOOLBAR */
html.dark .host-bulk-toolbar {
  background: #0d1a33 !important;
  border: 1px solid #1d4ed8 !important;
}
html.dark .host-bulk-toolbar span {
  color: #e5e5e5 !important;
}

/* 10. TABLES */
html.dark .ant-table-wrapper {
  background: #0a0a0a !important;
  border: 1px solid #1f1f1f !important;
}

html.dark .ant-table {
  background: #0a0a0a !important;
  color: #e5e5e5 !important;
}

html.dark .ant-table th {
  background: #050505 !important;
  color: #a3a3a3 !important;
  border-bottom: 1px solid #1a1a1a !important;
}

html.dark .ant-table td {
  background: transparent !important;
  color: #d4d4d4 !important;
  border-bottom: 1px solid #171717 !important;
}

html.dark .ant-table tbody tr:hover td {
  background: #141414 !important;
}

html.dark .domain-link {
  color: #60a5fa !important;
}
html.dark .domain-link:hover {
  color: #93c5fd !important;
}

html.dark .copy-chip {
  background: #121212 !important;
  border: 1px solid #262626 !important;
  color: #d4d4d4 !important;
}
html.dark .copy-chip:hover {
  background: #1c1c1c !important;
  color: #ffffff !important;
  border-color: #383838 !important;
}

html.dark .btn-icon-action {
  background: #121212 !important;
  border: 1px solid #262626 !important;
  color: #d4d4d4 !important;
}
html.dark .btn-icon-action:hover {
  background: #1c1c1c !important;
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
}

html.dark .ant-switch:not(.active) {
  background: #262626 !important;
}

/* 11. BUTTONS */
html.dark .ant-btn:not(.ant-btn-primary):not(.btn-cpanel-login) {
  background: #121212 !important;
  border: 1px solid #262626 !important;
  color: #e5e5e5 !important;
}
html.dark .ant-btn:not(.ant-btn-primary):not(.btn-cpanel-login):hover {
  background: #1c1c1c !important;
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
}

/* 12. MODALS */
html.dark .custom-modal-backdrop {
  background: rgba(0, 0, 0, 0.88) !important;
}

html.dark .custom-modal-card {
  background: #0a0a0a !important;
  border: 1px solid #262626 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.95) !important;
  color: #ffffff !important;
}

html.dark .custom-modal-header {
  border-bottom: 1px solid #1a1a1a !important;
}
html.dark .custom-modal-header span,
html.dark .custom-modal-header div {
  color: #ffffff !important;
}

html.dark .custom-modal-footer {
  background: #050505 !important;
  border-top: 1px solid #1a1a1a !important;
}

html.dark .custom-modal-body {
  color: #e5e5e5 !important;
}

html.dark .custom-modal-body input {
  background: #0f0f0f !important;
  border: 1px solid #262626 !important;
  color: #ffffff !important;
}

html.dark .el-dialog {
  background: #0a0a0a !important;
  border: 1px solid #262626 !important;
  color: #ffffff !important;
}

/* 13. DROPDOWNS & MENUS */
html.dark .ant-dropdown-menu {
  background: #0a0a0a !important;
  border: 1px solid #262626 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.95) !important;
}

html.dark .ant-dropdown-item {
  color: #e5e5e5 !important;
}
html.dark .ant-dropdown-item:hover {
  background: #171717 !important;
  color: #60a5fa !important;
}

/* 14. BANNERS & NOTICES */
html.dark .smart-notice-banner {
  background: linear-gradient(135deg, #1c1006, #0d0803) !important;
  border: 1px solid #7c2d12 !important;
}
html.dark .smart-notice-banner strong {
  color: #fed7aa !important;
}
html.dark .smart-notice-banner div {
  color: #fed7aa !important;
}

/* 15. MOBILE CARDS & BOTTOM BAR */
html.dark .mobile-host-card {
  background: #0a0a0a !important;
  border: 1px solid #1f1f1f !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
}
html.dark .mobile-host-header {
  border-bottom: 1px solid #1f1f1f !important;
}
html.dark .mobile-host-actions {
  border-top: 1px solid #1f1f1f !important;
}

html.dark .mobile-bottom-nav {
  background: linear-gradient(135deg, rgba(20, 20, 26, 0.72) 0%, rgba(8, 8, 12, 0.85) 100%) !important;
  backdrop-filter: blur(32px) saturate(220%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(220%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: 
    0 24px 60px -10px rgba(0, 0, 0, 0.96),
    0 8px 24px -4px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1.5px 1.5px rgba(255, 255, 255, 0.3),
    inset 0 -1.5px 2px rgba(0, 0, 0, 0.6) !important;
}
html.dark .mobile-bottom-nav-item {
  color: #94a3b8 !important;
}
html.dark .mobile-bottom-nav-item i {
  color: #94a3b8 !important;
}
html.dark .mobile-bottom-nav-item:hover {
  color: #ffffff !important;
}
html.dark .mobile-bottom-nav-item:hover i {
  color: #ffffff !important;
}
html.dark .mobile-bottom-nav-item.active {
  background: rgba(37, 99, 235, 0.25) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(96, 165, 250, 0.42) !important;
  box-shadow: none !important;
}
html.dark .mobile-bottom-nav-item.active i {
  color: #60a5fa !important;
  transform: translateY(-2px) scale(1.1) !important;
  filter: none !important;
}

html.dark .mobile-popover-menu {
  background: rgba(14, 14, 18, 0.92) !important;
  backdrop-filter: blur(32px) saturate(220%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(220%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 22px !important;
  box-shadow: 
    0 28px 70px -12px rgba(0, 0, 0, 0.98),
    0 10px 25px -5px rgba(0, 0, 0, 0.85),
    inset 0 1.5px 1.5px rgba(255, 255, 255, 0.22) !important;
}
html.dark #mobileHistoryMenu::after,
html.dark #mobileServicesMenu::after {
  background: rgba(14, 14, 18, 0.92) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.85) !important;
}
html.dark .history-menu-item {
  color: #f1f5f9 !important;
  border-radius: 14px !important;
}
html.dark .history-menu-item i {
  color: #94a3b8 !important;
}
html.dark .history-menu-item:hover,
html.dark .history-menu-item:active {
  background: rgba(255, 255, 255, 0.09) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}
html.dark .history-menu-item:hover i,
html.dark .history-menu-item:active i {
  color: #60a5fa !important;
}
html.dark .mobile-history-backdrop {
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* 16. ENTERPRISE FOOTER */
html.dark .corp-enterprise-footer {
  background: #000000 !important;
  border-top: 1px solid #1a1a1a !important;
  color: #a3a3a3 !important;
}
html.dark .corp-company-name a {
  color: #ffffff !important;
}
html.dark .corp-section-title {
  color: #ffffff !important;
  border-bottom-color: #262626 !important;
}
html.dark .corp-menu-list a {
  color: #a3a3a3 !important;
}
html.dark .corp-menu-list a:hover {
  color: #60a5fa !important;
}
html.dark .corp-legal-item {
  color: #a3a3a3 !important;
}
html.dark .corp-legal-item strong {
  color: #d4d4d4 !important;
}
html.dark .corp-legal-item a {
  color: #e5e5e5 !important;
}
html.dark .corp-legal-item a:hover {
  color: #60a5fa !important;
}
html.dark .tech-badge {
  background: #0f0f0f !important;
  border: 1px solid #262626 !important;
  color: #d4d4d4 !important;
}
html.dark .corp-footer-divider {
  background: #1a1a1a !important;
}
html.dark .corp-footer-bottom {
  border-top-color: #1a1a1a !important;
  color: #737373 !important;
}
html.dark .pay-tag {
  background: #0f0f0f !important;
  border: 1px solid #262626 !important;
  color: #d4d4d4 !important;
}

/* 17. SWEETALERT2 IN DARK MODE */
html.dark .swal2-popup {
  background: #0a0a0a !important;
  color: #ffffff !important;
  border: 1px solid #262626 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.95) !important;
}
html.dark .swal2-title,
html.dark .swal2-html-container {
  color: #ffffff !important;
}

/* 18. FLATPICKR DATEPICKER IN DARK MODE */
html.dark .flatpickr-calendar {
  background: #0a0a0a !important;
  border: 1px solid #262626 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.95) !important;
  color: #ffffff !important;
}
html.dark .flatpickr-months,
html.dark .flatpickr-weekdays {
  background: #050505 !important;
}
html.dark .flatpickr-day {
  color: #e5e5e5 !important;
}
html.dark .flatpickr-day:hover {
  background: #1a1a1a !important;
}
html.dark .flatpickr-day.prevMonthDay,
html.dark .flatpickr-day.nextMonthDay {
  color: #525252 !important;
}
html.dark .flatpickr-day.selected,
html.dark .flatpickr-day.startRange,
html.dark .flatpickr-day.endRange {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}
html.dark .flatpickr-day.inRange {
  background: #0d1a33 !important;
  box-shadow: -5px 0 0 #0d1a33, 5px 0 0 #0d1a33 !important;
}

/* 19. THEME TOGGLE BUTTON IN HEADER */
.ant-header-theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 19px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  flex-shrink: 0;
}
.ant-header-theme-toggle:hover {
  background: #e2e8f0;
  color: #1e293b;
  transform: rotate(15deg) scale(1.06);
}

html.dark .ant-header-theme-toggle {
  background: #0f0f0f !important;
  border: 1px solid #262626 !important;
  color: #f59e0b !important;
}
html.dark .ant-header-theme-toggle:hover {
  background: #1a1a1a !important;
  border-color: #383838 !important;
  color: #fbbf24 !important;
  transform: rotate(-15deg) scale(1.06);
}

/* 20. CONTACT WIDGET & AI CHATBOX IN DARK MODE */
html.dark .contact-widget-panel {
  background: #0a0a0a !important;
  border: 1px solid #262626 !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.95) !important;
}
html.dark .cw-header {
  background: #050505 !important;
  border-bottom: 1px solid #1a1a1a !important;
}
html.dark .cw-header-title {
  color: #ffffff !important;
}
html.dark .cw-header-subtitle {
  color: #a3a3a3 !important;
}
html.dark .cw-channel {
  background: #0f0f0f !important;
  border: 1px solid #262626 !important;
}
html.dark .cw-channel:hover {
  background: #1a1a1a !important;
}
html.dark .cw-channel-name {
  color: #ffffff !important;
}
html.dark .cw-channel-desc {
  color: #a3a3a3 !important;
}
html.dark .cw-channel-arrow {
  color: #737373 !important;
}
html.dark .cw-footer {
  background: #050505 !important;
  border-top: 1px solid #1a1a1a !important;
  color: #737373 !important;
}
html.dark .cw-footer a {
  color: #60a5fa !important;
}
html.dark .contact-widget-trigger {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.9) !important;
}

/* AI Chatbox Dark Mode */
html.dark .ai-chat-trigger {
  background: #0f0f0f !important;
  color: #ffffff !important;
  background-image: linear-gradient(#0f0f0f, #0f0f0f), linear-gradient(135deg, #f97316, #ef4444, #ec4899, #8b5cf6, #3b82f6, #06b6d4, #10b981) !important;
}
html.dark .ai-chat-trigger i {
  color: #d4d4d4 !important;
}
html.dark .ai-chatbox-container {
  background: #0a0a0a !important;
  border: 1px solid #262626 !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.95) !important;
}
html.dark .ai-chatbox-body {
  background: #000000 !important;
}
html.dark .bot-message {
  background: #121212 !important;
  color: #ffffff !important;
  border: 1px solid #262626 !important;
}
html.dark .user-row .chat-avatar {
  background: #262626 !important;
  color: #d4d4d4 !important;
}
html.dark .ai-chatbox-footer {
  background: #050505 !important;
  border-top: 1px solid #1a1a1a !important;
}
html.dark .ai-chatbox-footer input {
  background: #0f0f0f !important;
  border: 1px solid #262626 !important;
  color: #ffffff !important;
}
html.dark .chat-typing {
  background: #121212 !important;
  border: 1px solid #262626 !important;
}
html.dark .typing-dot {
  background: #737373 !important;
}

/* 21. USER DROPDOWN BALANCE BOX */
html.dark .ant-dropdown-user-balance {
  background: #050505 !important;
  border: 1px solid #1a1a1a !important;
}

/* 22. PRICING & SERVICE CATALOG CARDS (ĐEN THUẦN) */
html.dark .ant-pricing-card {
  background: #0a0a0a !important;
  border: 1px solid #1f1f1f !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.7) !important;
}
html.dark .ant-pricing-card:hover {
  background: #121212 !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.95) !important;
}
html.dark .ant-pricing-card.featured {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
}
html.dark .ant-pricing-name {
  color: #ffffff !important;
}
html.dark .ant-pricing-price {
  color: #60a5fa !important;
}
html.dark .ant-pricing-period {
  color: #a3a3a3 !important;
}
html.dark .ant-pricing-features li {
  color: #d4d4d4 !important;
}
html.dark .ant-pricing-features li strong {
  color: #ffffff !important;
}
html.dark .server-tab-btn,
html.dark .server-tab-btn-vps {
  background: #0f0f0f !important;
  border: 1px solid #262626 !important;
  color: #d4d4d4 !important;
}
html.dark .server-tab-btn:hover,
html.dark .server-tab-btn-vps:hover {
  background: #171717 !important;
  border-color: #383838 !important;
  color: #ffffff !important;
}
html.dark .server-tab-btn.active,
html.dark .server-tab-btn-vps.active {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}

/* 23. ORDER PROCESS & CHECKOUT PAGES (HOSTING & CLOUD VPS) */
html.dark .host-order-container,
html.dark .vps-order-container {
  color: #ffffff !important;
}

html.dark .host-order-title,
html.dark .vps-order-header h2,
html.dark .breadcrumb-current {
  color: #ffffff !important;
}

html.dark .host-breadcrumbs,
html.dark .vps-breadcrumbs {
  color: #a3a3a3 !important;
}
html.dark .host-breadcrumbs a,
html.dark .vps-breadcrumbs a {
  color: #a3a3a3 !important;
}
html.dark .host-breadcrumbs a:hover,
html.dark .vps-breadcrumbs a:hover {
  color: #3b82f6 !important;
}

html.dark .order-card,
html.dark .vps-order-header {
  background: #0a0a0a !important;
  border: 1px solid #1f1f1f !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8) !important;
}

html.dark .order-card-head {
  background: #050505 !important;
  border-bottom: 1px solid #1a1a1a !important;
}

html.dark .order-card-title {
  color: #ffffff !important;
}

html.dark .order-card-head span {
  color: #737373 !important;
}

/* Spec Tiles */
html.dark .spec-tile,
html.dark .base-spec-card {
  background: #0d0d0d !important;
  border: 1px solid #1f1f1f !important;
}
html.dark .spec-tile:hover,
html.dark .base-spec-card:hover {
  background: #141414 !important;
  border-color: #383838 !important;
}
html.dark .spec-tile-num,
html.dark .base-spec-val {
  color: #ffffff !important;
}
html.dark .spec-tile-lbl,
html.dark .base-spec-lbl {
  color: #a3a3a3 !important;
}

/* Extra Features Grid */
html.dark .extra-feat-grid {
  background: #0d0d0d !important;
  border: 1px dashed #262626 !important;
  color: #d4d4d4 !important;
}
html.dark .feat-item span {
  color: #d4d4d4 !important;
}

/* Addon Config & Steppers */
html.dark #toggleConfigHeader {
  color: #ffffff !important;
}
html.dark .addon-stepper-card {
  background: #0d0d0d !important;
  border: 1px solid #1f1f1f !important;
}
html.dark .addon-stepper-card > div:first-child {
  color: #ffffff !important;
}
html.dark .stepper-control-wrap {
  border-color: #262626 !important;
  background: #050505 !important;
}
html.dark .stepper-btn {
  background: #141414 !important;
  color: #ffffff !important;
}
html.dark .stepper-btn:hover {
  background: #262626 !important;
}
html.dark .stepper-val-input {
  background: #050505 !important;
  color: #ffffff !important;
}

/* OS Selection Cards */
html.dark .os-tab-btn {
  background: #0f0f0f !important;
  border-color: #262626 !important;
  color: #a3a3a3 !important;
}
html.dark .os-tab-btn.active {
  background: #2563eb !important;
  color: #ffffff !important;
}
html.dark .os-search-input {
  background: #0f0f0f !important;
  border: 1px solid #262626 !important;
  color: #ffffff !important;
}
html.dark .os-card {
  background: #0d0d0d !important;
  border: 1.5px solid #1f1f1f !important;
}
html.dark .os-card:hover {
  border-color: #3b82f6 !important;
  background: #141414 !important;
}
html.dark .os-card.selected,
html.dark .os-card.active-select {
  border-color: #3b82f6 !important;
  background: #0d1a33 !important;
}
html.dark .os-title {
  color: #ffffff !important;
}

/* Input Fields & Buttons */
html.dark .vps-back-btn {
  background: #0f0f0f !important;
  border: 1px solid #262626 !important;
  color: #d4d4d4 !important;
}
html.dark .vps-back-btn:hover {
  background: #171717 !important;
  border-color: #383838 !important;
  color: #ffffff !important;
}
html.dark .config-accordion-wrapper {
  background: #0d0d0d !important;
  border: 1px solid #1f1f1f !important;
}
html.dark #configSection {
  border-top-color: #1f1f1f !important;
}
html.dark .addon-title {
  color: #ffffff !important;
}
html.dark .order-input-field,
html.dark input#domain,
html.dark input#coupon,
html.dark .coupon-input {
  background: #0f0f0f !important;
  border: 1px solid #262626 !important;
  color: #ffffff !important;
}
html.dark .order-input-field:focus,
html.dark input#domain:focus,
html.dark input#coupon:focus,
html.dark .coupon-input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
}
html.dark .coupon-wrap {
  border-top-color: #1a1a1a !important;
}
html.dark .coupon-label {
  color: #a3a3a3 !important;
}
html.dark .coupon-btn {
  background: #141414 !important;
  border-color: #262626 !important;
  color: #ffffff !important;
}
html.dark .coupon-btn:hover {
  background: #262626 !important;
}

/* Payment Cycles Grid */
html.dark .cycle-card {
  background: #0a0a0a !important;
  border: 1.5px solid #262626 !important;
}
html.dark .cycle-card:hover {
  border-color: #3b82f6 !important;
  background: #141414 !important;
}
html.dark .cycle-card.active-select {
  background: #0d1a33 !important;
  border-color: #3b82f6 !important;
}
html.dark .cycle-duration,
html.dark .cycle-name {
  color: #ffffff !important;
}
html.dark .cycle-strike-price {
  color: #737373 !important;
}
html.dark .cycle-price {
  color: #60a5fa !important;
}

/* Summary Sidebar & Rows */
html.dark .summary-sidebar {
  background: #0a0a0a !important;
  border: 1px solid #1f1f1f !important;
}
html.dark .summary-item-row {
  border-bottom: 1px dashed #1a1a1a !important;
}
html.dark .summary-item-lbl {
  color: #a3a3a3 !important;
}
html.dark .summary-item-val {
  color: #ffffff !important;
}
html.dark .summary-item-val.domain-entered {
  color: #ffffff !important;
}

/* Order Total Box */
html.dark .order-total-box {
  background: #0d1a33 !important;
  border: 1px solid #1d4ed8 !important;
}
html.dark .order-total-lbl {
  color: #93c5fd !important;
}
html.dark .order-total-val {
  color: #60a5fa !important;
}

/* Modals */
html.dark .host-modal-card,
html.dark .vps-modal-card {
  background: #0a0a0a !important;
  border: 1px solid #262626 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95) !important;
}
html.dark .modal-clean-header {
  background: #050505 !important;
  border-bottom: 1px solid #1a1a1a !important;
}
html.dark .modal-clean-title {
  color: #ffffff !important;
}
html.dark .modal-btn-cancel {
  background: #0f0f0f !important;
  border-color: #262626 !important;
  color: #d4d4d4 !important;
}
html.dark .modal-btn-cancel:hover {
  background: #171717 !important;
  border-color: #383838 !important;
  color: #ffffff !important;
}
html.dark .modal-clean-close {
  color: #a3a3a3 !important;
}
html.dark .modal-clean-close:hover {
  background: #1a1a1a !important;
  color: #ffffff !important;
}
html.dark .modal-clean-body {
  color: #e5e5e5 !important;
}
html.dark .modal-clean-body strong,
html.dark .modal-spec-val {
  color: #ffffff !important;
}
html.dark .modal-clean-body div[style*="border-bottom"] {
  border-bottom-color: #1a1a1a !important;
}
html.dark .modal-clean-footer {
  background: #050505 !important;
  border-top: 1px solid #1a1a1a !important;
}
html.dark .package-option-item {
  background: #0f0f0f !important;
  border: 1.5px solid #262626 !important;
}
html.dark .package-option-item:hover {
  background: #141414 !important;
  border-color: #3b82f6 !important;
}
html.dark .package-option-name {
  color: #ffffff !important;
}

/* 24. AUTH MODAL IN DARK MODE */
html.dark .btn-google-auth {
  background: #0f0f0f !important;
  border: 1px solid #262626 !important;
  color: #ffffff !important;
}
html.dark .btn-google-auth:hover {
  background: #1a1a1a !important;
  border-color: #383838 !important;
}

/* 25. DOMAIN SEARCH & ORDER PAGE (/domain) */
html.dark #domainApp {
  color: #ffffff;
}
html.dark .sunihost-domain-hero {
  background: #0a0a0a !important;
  border: 1px solid #1f1f1f !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8) !important;
}
html.dark .sunihost-domain-hero p {
  color: #a3a3a3 !important;
}
html.dark .sunihost-domain-search-box {
  background: #000000 !important;
  border-color: #262626 !important;
  box-shadow: 0 0 0 1px #262626 !important;
}
html.dark .sunihost-domain-input {
  background: transparent !important;
  color: #ffffff !important;
}
html.dark .sunihost-domain-input::placeholder {
  color: #737373 !important;
}
html.dark .sunihost-tld-badge {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #d4d4d4 !important;
  border: 1px solid #1f1f1f !important;
}
html.dark #whoisResultBox {
  background: #080808 !important;
  border: 1px solid #262626 !important;
}
html.dark #whoisResultBox > div:first-child {
  border-bottom-color: #1f1f1f !important;
}
html.dark #whoisResultBox .text-slate-300 {
  color: #d4d4d4 !important;
}
html.dark #whoisResultBox .text-slate-400 {
  color: #a3a3a3 !important;
}
html.dark #whoisResultBox strong {
  color: #ffffff !important;
}

/* Order Form & Cards */
html.dark #orderForm .ant-card,
html.dark #banggia.ant-card {
  background: #0a0a0a !important;
  border-color: #1f1f1f !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8) !important;
}
html.dark #orderForm h3,
html.dark #banggia h3 {
  color: #ffffff !important;
}
html.dark #orderForm label {
  color: #d4d4d4 !important;
}
html.dark .domain-selected-box {
  background: #0d1a33 !important;
  border: 1px solid #1d4ed8 !important;
}
html.dark .domain-selected-box .domain-name-val {
  color: #ffffff !important;
}
html.dark .domain-selected-box span.uppercase {
  color: #93c5fd !important;
}
html.dark .domain-summary-box {
  background: #0d0d0d !important;
  border: 1px solid #1f1f1f !important;
}
html.dark .domain-summary-box span {
  color: #a3a3a3 !important;
}
html.dark .domain-summary-box strong {
  color: #ffffff !important;
}
html.dark .domain-summary-box .border-t {
  border-top-color: #1f1f1f !important;
}
html.dark .domain-summary-box .total-lbl {
  color: #ffffff !important;
}
html.dark .domain-summary-box .total-val {
  color: #60a5fa !important;
}
html.dark .domain-input-field,
html.dark #orderForm .ant-input {
  background: #0f0f0f !important;
  border: 1px solid #262626 !important;
  color: #ffffff !important;
}
html.dark .domain-input-field:focus,
html.dark #orderForm .ant-input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
}

/* Table & Pricing Cards */
html.dark .domain-pricing-table thead tr {
  background: #050505 !important;
  border-bottom: 1px solid #1a1a1a !important;
}
html.dark .domain-pricing-table thead th {
  color: #a3a3a3 !important;
  border-bottom: 1px solid #1a1a1a !important;
}
html.dark .domain-pricing-table tbody tr {
  border-bottom: 1px solid #141414 !important;
  background: transparent !important;
}
html.dark .domain-pricing-table tbody tr:hover {
  background: #121212 !important;
}
html.dark .domain-pricing-table tbody td {
  border-bottom: 1px solid #141414 !important;
}
html.dark .domain-pricing-table .tld-price-reg {
  color: #ffffff !important;
}
html.dark .domain-pricing-table .tld-price-renew {
  color: #a3a3a3 !important;
}
html.dark .domain-pricing-cards .domain-card-item {
  background: #0d0d0d !important;
  border: 1px solid #1f1f1f !important;
}
html.dark .domain-pricing-cards .domain-card-item .border-t {
  border-top-color: #1a1a1a !important;
}
html.dark .domain-pricing-cards .tld-price-reg {
  color: #ffffff !important;
}
html.dark .domain-pricing-cards .tld-price-renew {
  color: #a3a3a3 !important;
}
html.dark .domain-pricing-cards .text-slate-400 {
  color: #737373 !important;
}

/* Element Plus Dialogs */
html.dark .el-dialog {
  background: #0a0a0a !important;
  border: 1px solid #262626 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95) !important;
}
html.dark .el-dialog__title {
  color: #ffffff !important;
  font-weight: 700 !important;
}
html.dark .el-dialog__header {
  border-bottom: 1px solid #1a1a1a !important;
  padding: 16px 20px !important;
  margin: 0 !important;
}
html.dark .el-dialog__headerbtn .el-dialog__close {
  color: #a3a3a3 !important;
}
html.dark .el-dialog__headerbtn:hover .el-dialog__close {
  color: #ffffff !important;
}
html.dark .el-dialog__body {
  padding: 20px !important;
  color: #e5e5e5 !important;
}
html.dark .modal-body-content {
  color: #d4d4d4 !important;
}
html.dark .modal-confirm-txt {
  color: #ffffff !important;
}
html.dark .modal-details-box {
  background: #0d0d0d !important;
  border: 1px solid #1f1f1f !important;
}
html.dark .modal-details-box span {
  color: #a3a3a3 !important;
}
html.dark .modal-details-box strong {
  color: #ffffff !important;
}
html.dark .modal-notice-box {
  background: #171202 !important;
  border: 1px solid #3d2b00 !important;
  color: #fcd34d !important;
}
html.dark .dialog-footer .btn-cancel {
  background: #0f0f0f !important;
  border: 1px solid #262626 !important;
  color: #d4d4d4 !important;
}
html.dark .dialog-footer .btn-cancel:hover {
  background: #171717 !important;
  border-color: #383838 !important;
  color: #ffffff !important;
}
html.dark .processing-icon-wrap {
  background: #0d1a33 !important;
  border: 1px solid #1d4ed8 !important;
  color: #3b82f6 !important;
}
html.dark .processing-title {
  color: #ffffff !important;
}
html.dark .processing-desc {
  color: #a3a3a3 !important;
}
html.dark .progress-bg {
  background: #1f1f1f !important;
}

/* 26. PROXY SERVICES (/proxy, /customer/history/proxy, /check-proxy) */
html.dark .proxy-package-card {
  background: #0a0a0a !important;
  border: 2px solid #1f1f1f !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}
html.dark .proxy-package-card:hover {
  background: #141414 !important;
  border-color: #3b82f6 !important;
}
html.dark .proxy-package-card.selected {
  background: #0d1a33 !important;
  border-color: #3b82f6 !important;
}
html.dark .proxy-package-card h3 {
  color: #ffffff !important;
}
html.dark .proxy-config-section,
html.dark .proxy-summary {
  background: #0a0a0a !important;
  border: 1px solid #1f1f1f !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8) !important;
}
html.dark .proxy-config-section h3,
html.dark .proxy-summary h3 {
  color: #ffffff !important;
}
html.dark .proxy-config-item {
  background: #0d0d0d !important;
  border: 1px solid #1f1f1f !important;
}
html.dark .proxy-input-group {
  border-color: #262626 !important;
}
html.dark .proxy-input-group button {
  background: #141414 !important;
  color: #ffffff !important;
}
html.dark .proxy-input-group button:hover {
  background: #262626 !important;
  color: #3b82f6 !important;
}
html.dark .proxy-input-group input {
  background: #050505 !important;
  color: #ffffff !important;
}
html.dark .protocol-btn {
  background: #0f0f0f !important;
  border-color: #262626 !important;
  color: #d4d4d4 !important;
}
html.dark .protocol-btn:hover {
  background: #171717 !important;
  border-color: #383838 !important;
  color: #ffffff !important;
}
html.dark .protocol-btn.active {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}
html.dark .proxy-filter-btn {
  background: #0f0f0f !important;
  border-color: #262626 !important;
  color: #d4d4d4 !important;
}
html.dark .proxy-filter-btn:hover {
  background: #171717 !important;
  border-color: #383838 !important;
  color: #ffffff !important;
}
html.dark .proxy-filter-btn.active {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}
html.dark .proxy-summary span[style*="color:var(--ant-text)"] {
  color: #ffffff !important;
}
html.dark .proxy-summary span[style*="color:var(--ant-text-secondary)"] {
  color: #a3a3a3 !important;
}
html.dark .proxy-summary div[style*="border-top"] {
  border-top-color: #1a1a1a !important;
}
html.dark #summaryTotal {
  color: #60a5fa !important;
}
html.dark .proxy-modal-card {
  background: #0a0a0a !important;
  border: 1px solid #262626 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95) !important;
}
html.dark .modal-icon-wrap {
  background: #0d1a33 !important;
  border-color: #1d4ed8 !important;
}
html.dark .modal-summary-box {
  background: #0d0d0d !important;
  border: 1px solid #1f1f1f !important;
}
html.dark .modal-summary-box span[style*="color:var(--ant-text-secondary)"] {
  color: #a3a3a3 !important;
}
html.dark .modal-summary-box span[style*="font-weight:600"] {
  color: #ffffff !important;
}
html.dark .modal-summary-box div[style*="border-top"] {
  border-top-color: #1a1a1a !important;
}
html.dark #modalTotal {
  color: #60a5fa !important;
}
html.dark .btn-modal-cancel {
  background: #0f0f0f !important;
  border-color: #262626 !important;
  color: #d4d4d4 !important;
}
html.dark .btn-modal-cancel:hover {
  background: #171717 !important;
  border-color: #383838 !important;
  color: #ffffff !important;
}
html.dark .progress-track {
  background: #1f1f1f !important;
}
html.dark .proxy-location-badge.residential {
  background: #064e3b !important;
  color: #6ee7b7 !important;
}
html.dark .proxy-location-badge.datacenter {
  background: #1e3a8a !important;
  color: #93c5fd !important;
}
html.dark .proxy-type-badge.private {
  background: #78350f !important;
  color: #fde68a !important;
}
html.dark .proxy-type-badge.share {
  background: #312e81 !important;
  color: #c7d2fe !important;
}

/* Proxy History & Modals */
html.dark .proxy-kpi-card {
  background: #0a0a0a !important;
  border: 1px solid #1f1f1f !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}
html.dark #renewModal > div:last-child,
html.dark #securityModal > div:last-child {
  background: #0a0a0a !important;
  border: 1px solid #262626 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95) !important;
  color: #e5e5e5 !important;
}
html.dark #renewModal h3,
html.dark #securityModal h3 {
  color: #ffffff !important;
}
html.dark #renewModalLoading,
html.dark #securityModalLoading {
  background: rgba(10, 10, 10, 0.88) !important;
}
html.dark #renewModal div[style*="background:var(--ant-bg-base)"] {
  background: #0d0d0d !important;
  border: 1px solid #1f1f1f !important;
}
html.dark #renewModal div[style*="background:var(--ant-bg-base)"] span:first-child {
  color: #a3a3a3 !important;
}
html.dark #renewModal label,
html.dark #securityModal label {
  color: #d4d4d4 !important;
}

/* Proxy Checker (/check-proxy) */
html.dark .check-panel,
html.dark .check-main {
  background: #0a0a0a !important;
  border: 1px solid #1f1f1f !important;
}
html.dark .check-main-header {
  border-bottom-color: #1a1a1a !important;
}
html.dark .check-panel .ant-input,
html.dark .check-panel .ant-select,
html.dark .check-panel textarea.ant-input,
html.dark .check-panel textarea.proxy-result-box {
  background: #0f0f0f !important;
  border-color: #262626 !important;
  color: #ffffff !important;
}
html.dark .check-table th {
  background: #050505 !important;
  color: #a3a3a3 !important;
  border-bottom: 2px solid #1a1a1a !important;
}
html.dark .check-table td {
  border-bottom: 1px solid #141414 !important;
  color: #ffffff !important;
}
html.dark .check-table tr:hover td {
  background: #121212 !important;
}
html.dark .check-table .ip-col {
  color: #a3a3a3 !important;
}
html.dark .check-pagination {
  border-top-color: #1a1a1a !important;
}
html.dark .check-pagination select {
  background: #0f0f0f !important;
  border-color: #262626 !important;
  color: #ffffff !important;
}
html.dark .check-page-btns button {
  background: #0f0f0f !important;
  border-color: #262626 !important;
  color: #d4d4d4 !important;
}
html.dark .check-page-btns button:hover {
  background: #171717 !important;
  border-color: #383838 !important;
  color: #ffffff !important;
}
html.dark .check-page-btns button.active {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}
html.dark .check-progress-bar {
  background: #1f1f1f !important;
}

/* 27. AI SERVICES (/ai, /customer/history/ai, Home .ai-list) */
/* Ordering /ai */
html.dark .ai-product-card {
  background: #0a0a0a !important;
  border: 1px solid #1f1f1f !important;
  box-shadow: none !important;
}
html.dark .ai-product-card:hover {
  border-color: #3b82f6 !important;
  background: #121212 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}
html.dark .ai-product-card.selected {
  background: #0d1a33 !important;
  border-color: #3b82f6 !important;
}
html.dark .ai-thumb {
  background: #141414 !important;
  border-color: #262626 !important;
}
html.dark .ai-stock-badge.in {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}
html.dark .ai-stock-badge.out {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}
html.dark .ai-config-section,
html.dark .ai-summary {
  background: #0a0a0a !important;
  border: 1px solid #1f1f1f !important;
  box-shadow: none !important;
}
html.dark .ai-config-box {
  background: #0d0d0d !important;
  border: 1px solid #1f1f1f !important;
}
html.dark .ai-input-group {
  border-color: #262626 !important;
}
html.dark .ai-input-group button {
  background: #141414 !important;
  color: #ffffff !important;
}
html.dark .ai-input-group button:hover {
  background: #2563eb !important;
  color: #ffffff !important;
}
html.dark .ai-input-group input {
  background: #0d0d0d !important;
  color: #ffffff !important;
}
html.dark #aiSummaryImageWrap {
  background: #0d0d0d !important;
  border: 1px solid #1f1f1f !important;
}
html.dark .ai-summary div[style*="border-top"] {
  border-top-color: #1f1f1f !important;
}
html.dark .ai-key-box {
  background: #050505 !important;
  border: 1px solid #1f1f1f !important;
  color: #4ade80 !important;
}
html.dark .ai-modal-backdrop {
  background: rgba(0, 0, 0, 0.8) !important;
}
html.dark .ai-modal-card {
  background: #0a0a0a !important;
  border: 1px solid #262626 !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9) !important;
}
html.dark .ai-modal-icon-wrap {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}
html.dark .ai-modal-summary-box {
  background: #0d0d0d !important;
  border: 1px solid #1f1f1f !important;
}
html.dark .ai-modal-summary-box span[style*="font-weight:600"] {
  color: #ffffff !important;
}
html.dark .ai-modal-summary-box div[style*="border-top"] {
  border-top-color: #1f1f1f !important;
}
html.dark .ai-modal-cancel-btn {
  background: #0d0d0d !important;
  border-color: #262626 !important;
  color: #d4d4d4 !important;
}
html.dark .ai-modal-cancel-btn:hover {
  background: #171717 !important;
  border-color: #383838 !important;
  color: #ffffff !important;
}
html.dark .ai-progress-track {
  background: #1f1f1f !important;
}

/* History /customer/history/ai */
html.dark .ai-docs-guide {
  background: #0d1a33 !important;
  border-color: #1d4ed8 !important;
}
html.dark .ai-docs-title {
  color: #ffffff !important;
}
html.dark .ai-docs-desc {
  color: #cbd5e1 !important;
}
html.dark .ai-docs-desc a {
  color: #60a5fa !important;
}
html.dark .ai-docs-steps span {
  color: #94a3b8 !important;
}
html.dark .ai-docs-steps b {
  background: #3b82f6 !important;
  color: #ffffff !important;
}
html.dark .ai-docs-btn-ghost {
  background: #0a0a0a !important;
  color: #60a5fa !important;
  border-color: #1e3a8a !important;
}
html.dark .ai-docs-btn-ghost:hover {
  background: #172554 !important;
  color: #93c5fd !important;
}
html.dark .ai-kpi-card {
  background: #0a0a0a !important;
  border: 1px solid #1f1f1f !important;
  box-shadow: none !important;
}
html.dark .ai-kpi-card .kpi-label {
  color: #a3a3a3 !important;
}
html.dark .ai-kpi-card .kpi-value {
  color: #ffffff !important;
}
html.dark .ai-kpi-card:nth-child(1) .ai-kpi-icon {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}
html.dark .ai-kpi-card:nth-child(2) .ai-kpi-icon {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}
html.dark .ai-kpi-card:nth-child(3) .ai-kpi-icon {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}
html.dark .ai-order-item-card {
  background: #0a0a0a !important;
  border: 1px solid #1f1f1f !important;
}
html.dark .ai-order-item-card:hover {
  border-color: #3b82f6 !important;
}
html.dark .ai-order-item-card .order-title {
  color: #ffffff !important;
}
html.dark .ai-badge-success {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}
html.dark .ai-badge-info {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}
html.dark .order-divider {
  border-top-color: #1f1f1f !important;
}
html.dark .ai-key-value {
  background: #050505 !important;
  border: 1px solid #1f1f1f !important;
  color: #4ade80 !important;
}
html.dark .ai-copy-btn {
  background: #141414 !important;
  border: 1px solid #262626 !important;
  color: #60a5fa !important;
}
html.dark .ai-copy-btn:hover {
  background: #1f1f1f !important;
  border-color: #3b82f6 !important;
  color: #93c5fd !important;
}
html.dark .ai-empty-circle {
  background: #141414 !important;
}

/* Home Page AI list (.ai-list) */
html.dark .ai-list-item {
  background: #0a0a0a !important;
  border-color: #1f1f1f !important;
  box-shadow: none !important;
}
html.dark .ai-list-item:hover {
  border-color: #3b82f6 !important;
  background: #0f0f0f !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}
html.dark .ai-list-thumb {
  background: #141414 !important;
  border-color: #262626 !important;
}
html.dark .ai-list-name {
  color: #ffffff !important;
}
html.dark .ai-list-meta {
  color: #a3a3a3 !important;
}
html.dark .ai-list-badge.hot {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}
html.dark .ai-list-badge.in {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}
html.dark .ai-list-badge.out {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

/* 28. RESELLER WHITELABEL WEBSITE (/reseller/website) */
html.dark .agency-breadcrumbs a {
  color: #a3a3a3 !important;
}
html.dark .agency-breadcrumbs a:hover {
  color: #60a5fa !important;
}
html.dark .agency-breadcrumbs span[style*="color: #1e293b"] {
  color: #ffffff !important;
}

/* Banner Header */
html.dark .agency-header {
  background: #0a0a0a !important;
  border-color: #1f1f1f !important;
  box-shadow: none !important;
}
html.dark .agency-header-title {
  color: #ffffff !important;
}
html.dark .agency-header-desc {
  color: #a3a3a3 !important;
}
html.dark .agency-header-desc strong {
  color: #ffffff !important;
}
html.dark .agency-header-icon {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

/* KPI Cards */
html.dark .agency-kpi-card {
  background: #0a0a0a !important;
  border-color: #1f1f1f !important;
  box-shadow: none !important;
}
html.dark .agency-kpi-title {
  color: #a3a3a3 !important;
}
html.dark .agency-kpi-val {
  color: #ffffff !important;
}
html.dark .agency-kpi-card:nth-child(1) .agency-kpi-icon {
  background: rgba(59, 130, 246, 0.15) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}
html.dark .agency-kpi-card:nth-child(2) .agency-kpi-icon {
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}
html.dark .agency-kpi-card:nth-child(3) .agency-kpi-icon {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

/* Eligibility Box */
html.dark .agency-eligibility-box.eligible {
  background: #061c12 !important;
  border-color: #047857 !important;
}
html.dark .agency-eligibility-box.eligible .eligibility-icon {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34d399 !important;
}
html.dark .agency-eligibility-box.eligible .eligibility-title {
  color: #34d399 !important;
}
html.dark .agency-eligibility-box.eligible .eligibility-sub {
  color: #a7f3d0 !important;
}
html.dark .agency-eligibility-box.locked {
  background: #1c1503 !important;
  border-color: #92400e !important;
  box-shadow: none !important;
}
html.dark .agency-eligibility-box.locked .eligibility-icon.locked-icon {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fbbf24 !important;
}
html.dark .agency-eligibility-box.locked .eligibility-title.locked-title {
  color: #fbbf24 !important;
}
html.dark .agency-eligibility-box.locked .eligibility-sub.locked-sub {
  color: #fde68a !important;
}
html.dark .agency-eligibility-box.locked .eligibility-progress-bar {
  background: #291d04 !important;
}
html.dark .agency-eligibility-box.locked .eligibility-progress-labels {
  color: #fbbf24 !important;
}

/* Common Card */
html.dark .agency-card {
  background: #0a0a0a !important;
  border-color: #1f1f1f !important;
  box-shadow: none !important;
}
html.dark .agency-card-head {
  border-bottom-color: #1a1a1a !important;
}
html.dark .agency-card-title {
  color: #ffffff !important;
}

/* Nameserver Section */
html.dark .ns-guide-box {
  background: #0d0d0d !important;
  border-color: #1f1f1f !important;
}
html.dark .ns-table th {
  background: #050505 !important;
  color: #a3a3a3 !important;
  border-color: #1a1a1a !important;
}
html.dark .ns-table td {
  background: #0a0a0a !important;
  border-color: #1a1a1a !important;
  color: #ffffff !important;
}
html.dark .ns-table td strong {
  color: #ffffff !important;
}
html.dark .ns-table td div {
  color: #a3a3a3 !important;
}
html.dark .ns-table code {
  color: #60a5fa !important;
}
html.dark .ns-mobile-card {
  background: #0d0d0d !important;
  border-color: #1f1f1f !important;
}
html.dark .ns-m-label {
  color: #ffffff !important;
}
html.dark .ns-m-sub {
  color: #a3a3a3 !important;
}
html.dark .ns-m-code-box {
  background: #050505 !important;
  border: 1px solid #1f1f1f !important;
}
html.dark .ns-m-code-box code {
  color: #60a5fa !important;
}
html.dark .btn-copy-chip {
  background: #0f172a !important;
  border-color: #1e3a8a !important;
  color: #60a5fa !important;
}
html.dark .btn-copy-chip:hover {
  background: #1e293b !important;
  color: #93c5fd !important;
}

/* Alert Boxes in Dark Mode */
html.dark .agency-alert-warn,
html.dark .alert.alert-warning {
  background: #1c1503 !important;
  border-color: #78350f !important;
  color: #fde68a !important;
}
html.dark .agency-alert-warn strong,
html.dark .alert.alert-warning strong {
  color: #fbbf24 !important;
}
html.dark .agency-alert-info {
  background: #0d1a33 !important;
  border-color: #1d4ed8 !important;
  color: #93c5fd !important;
}
html.dark .agency-alert-info strong {
  color: #ffffff !important;
}

/* Step 2 Inputs */
html.dark .agency-domain-card {
  background: #0d0d0d !important;
  border-color: #1f1f1f !important;
}
html.dark .agency-domain-card label {
  color: #ffffff !important;
}
html.dark .agency-extra-config-card {
  background: #0a0a0a !important;
  border-color: #1f1f1f !important;
}
html.dark .agency-extra-config-card div[style*="color: #334155"] {
  color: #ffffff !important;
}
html.dark .form-lbl {
  color: #d4d4d4 !important;
}
html.dark .form-control-input {
  background: #0f0f0f !important;
  border-color: #262626 !important;
  color: #ffffff !important;
}
html.dark .form-control-input:focus {
  border-color: #3b82f6 !important;
  background: #141414 !important;
}
html.dark .form-control-input::placeholder {
  color: #737373 !important;
}
html.dark .domain-main-input {
  color: #ffffff !important;
}

/* Step 3 Sites Table & Cards */
html.dark .sites-table th {
  background: #050505 !important;
  color: #a3a3a3 !important;
  border-bottom-color: #1a1a1a !important;
}
html.dark .sites-table td {
  border-bottom-color: #141414 !important;
  color: #ffffff !important;
}
html.dark .sites-table tr:hover td {
  background: #121212 !important;
}
html.dark .sites-table td strong {
  color: #ffffff !important;
}
html.dark .sites-table td div[style*="color: #1e293b"] {
  color: #ffffff !important;
}
html.dark .sites-table td div[style*="color: #64748b"] {
  color: #a3a3a3 !important;
}
html.dark .agency-site-card-item {
  background: #0a0a0a !important;
  border-color: #1f1f1f !important;
  box-shadow: none !important;
}
html.dark .site-card-m-head {
  border-bottom-color: #1a1a1a !important;
}
html.dark .site-card-m-idx {
  background: #141414 !important;
  color: #a3a3a3 !important;
}
html.dark .site-card-m-lbl {
  color: #a3a3a3 !important;
}
html.dark .site-card-m-val {
  color: #ffffff !important;
}
html.dark .site-card-m-actions {
  border-top-color: #1a1a1a !important;
}

/* Step 4 Policy & Rules */
html.dark .agency-policy-item {
  background: #0d0d0d !important;
  border-color: #1f1f1f !important;
}
html.dark .agency-policy-item:hover {
  background: #121212 !important;
  border-color: #262626 !important;
}
html.dark .agency-policy-title {
  color: #ffffff !important;
}
html.dark .agency-policy-list {
  color: #a3a3a3 !important;
}
html.dark .agency-policy-list strong {
  color: #ffffff !important;
}
html.dark .agency-policy-alert {
  background: #1c1503 !important;
  border-color: #78350f !important;
  color: #fde68a !important;
}
html.dark .agency-policy-alert strong {
  color: #fbbf24 !important;
}
html.dark .agency-policy-badge-warn {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fbbf24 !important;
}
html.dark .agency-policy-badge-danger {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
}
html.dark .agency-policy-badge-success {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34d399 !important;
}
html.dark .agency-policy-badge-info {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #60a5fa !important;
}
html.dark .agency-policy-footer {
  border-top-color: #1a1a1a !important;
  color: #a3a3a3 !important;
}

/* Modals in Dark Mode */
html.dark .agency-modal-overlay {
  background: rgba(0, 0, 0, 0.8) !important;
}
html.dark .agency-modal-card {
  background: #0a0a0a !important;
  border-color: #262626 !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9) !important;
}
html.dark .agency-modal-header {
  border-bottom-color: #1a1a1a !important;
}
html.dark .agency-modal-title {
  color: #ffffff !important;
}
html.dark .agency-modal-close {
  color: #737373 !important;
}
html.dark .agency-modal-close:hover {
  background: #171717 !important;
  color: #ffffff !important;
}
html.dark .modal-btn-row {
  border-top-color: #1a1a1a !important;
}
html.dark .agency-modal-body-pdf {
  background: #000000 !important;
}
html.dark .print-doc-paper {
  background: #0a0a0a !important;
  color: #ffffff !important;
  border-color: #1f1f1f !important;
  box-shadow: none !important;
}
html.dark .print-doc-top {
  border-bottom-color: #262626 !important;
}
html.dark .print-doc-top div[style*="color: #0f172a"],
html.dark .print-doc-top div[style*="color: #475569"],
html.dark .print-doc-top div[style*="color: #334155"] {
  color: #ffffff !important;
}
html.dark .print-doc-title h2 {
  color: #ffffff !important;
}
html.dark .print-partner-box {
  background: #0d0d0d !important;
  border-color: #1f1f1f !important;
  color: #d4d4d4 !important;
}
html.dark .print-partner-box div[style*="color: #0f172a"] {
  color: #ffffff !important;
}
html.dark .print-article-title {
  color: #ffffff !important;
  border-bottom-color: #262626 !important;
}
html.dark .print-article-content {
  color: #a3a3a3 !important;
}
html.dark .print-article-content strong {
  color: #ffffff !important;
}
html.dark .print-signatures {
  border-top-color: #1f1f1f !important;
}
html.dark .print-sig-title {
  color: #ffffff !important;
}

/* ==========================================================================
   29. API DOCUMENTATION (/reseller/api, /cloudvps/api, /proxy/api)
   ========================================================================== */
html.dark .api-sidebar {
  background: #0a0a0a !important;
  border: 1px solid #1f1f1f !important;
  box-shadow: none !important;
}
html.dark .api-nav li {
  color: #a3a3a3 !important;
  background: transparent;
}
html.dark .api-nav li:hover {
  background: #141414 !important;
  color: #ffffff !important;
}
html.dark .api-nav li.active {
  background: #0d1a33 !important;
  color: #60a5fa !important;
  border: 1px solid #1d4ed8 !important;
}
html.dark .api-nav li.active i {
  color: #60a5fa !important;
}
html.dark .api-nav li.nav-header {
  color: #737373 !important;
  background: transparent !important;
}
html.dark .api-doc-card {
  background: #0a0a0a !important;
  border: 1px solid #1f1f1f !important;
  box-shadow: none !important;
  color: #d4d4d4 !important;
}
html.dark .api-section-title {
  color: #ffffff !important;
}
html.dark .api-token-box {
  background: #0d0d0d !important;
  border: 1px solid #262626 !important;
}
html.dark .api-token-box input {
  color: #ffffff !important;
  background: transparent !important;
}
html.dark .api-token-box button[onclick*="toggleTokenVisibility"] {
  color: #a3a3a3 !important;
}
html.dark .api-token-box button[onclick*="toggleTokenVisibility"]:hover {
  color: #ffffff !important;
}
html.dark .api-token-box button[onclick*="regenerateToken"],
html.dark button[onclick*="regenerateToken"] {
  background: #141414 !important;
  border: 1px solid #262626 !important;
  color: #e5e5e5 !important;
}
html.dark .api-token-box button[onclick*="regenerateToken"]:hover,
html.dark button[onclick*="regenerateToken"]:hover {
  background: #1f1f1f !important;
  border-color: #404040 !important;
  color: #ffffff !important;
}
html.dark .api-url {
  background: #0d0d0d !important;
  color: #60a5fa !important;
  border: 1px solid #1f1f1f !important;
}
html.dark .api-method.get {
  background: rgba(37, 99, 235, 0.2) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(37, 99, 235, 0.35) !important;
}
html.dark .api-method.post {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}
html.dark .api-method.put {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
}
html.dark .api-method.delete {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
}
html.dark .api-param-table th {
  background: #050505 !important;
  color: #a3a3a3 !important;
  border-bottom: 1px solid #1f1f1f !important;
}
html.dark .api-param-table td {
  background: transparent !important;
  border-bottom: 1px solid #141414 !important;
  color: #d4d4d4 !important;
}
html.dark .api-param-table tr:hover td {
  background: rgba(255, 255, 255, 0.02) !important;
}
html.dark .api-param-table .param-name {
  color: #60a5fa !important;
}
html.dark .api-param-table .param-required.yes {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
}
html.dark .api-param-table .param-required.no {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
}
html.dark pre.api-code {
  background: #050505 !important;
  color: #e2e8f0 !important;
  border: 1px solid #1f1f1f !important;
}
html.dark pre.api-code .copy-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid #262626 !important;
  color: #a3a3a3 !important;
}
html.dark pre.api-code .copy-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border-color: #404040 !important;
}
html.dark .api-response-label {
  color: #a3a3a3 !important;
}
html.dark .api-doc-card code,
html.dark .api-param-table code {
  background: #141414 !important;
  color: #93c5fd !important;
  border: 1px solid #262626 !important;
  border-radius: 4px;
}
html.dark .api-doc-card .alert.alert-info,
html.dark .alert.alert-info {
  background: #0d1a33 !important;
  border: 1px solid #1d4ed8 !important;
  color: #93c5fd !important;
}
html.dark .alert.alert-info strong {
  color: #bfdbfe !important;
}
html.dark .alert.alert-info code {
  background: #14213d !important;
  color: #60a5fa !important;
  border: 1px solid #1e3a8a !important;
}

@media (max-width: 992px) {
  html.dark .api-sidebar {
    background: transparent !important;
    border: none !important;
  }
  html.dark .api-nav li {
    background: #0d0d0d !important;
    border: 1px solid #262626 !important;
    color: #a3a3a3 !important;
    box-shadow: none !important;
  }
  html.dark .api-nav li:hover {
    background: #141414 !important;
    color: #ffffff !important;
    border-color: #333333 !important;
  }
  html.dark .api-nav li.active {
    background: #1d4ed8 !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
  }
  html.dark .api-nav li.active i {
    color: #ffffff !important;
  }
}

/* ==========================================================================
   30. PROXY MANAGEMENT (/customer/history/proxy)
   ========================================================================== */
html.dark .proxy-kpi-card {
  background: #0a0a0a !important;
  border: 1px solid #1f1f1f !important;
  box-shadow: none !important;
}
html.dark .proxy-kpi-icon.total {
  background: rgba(13, 148, 136, 0.15) !important;
  color: #2dd4bf !important;
  border: 1px solid rgba(13, 148, 136, 0.25) !important;
}
html.dark .proxy-kpi-icon.active {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(34, 197, 94, 0.25) !important;
}
html.dark .proxy-kpi-icon.pending {
  background: rgba(217, 119, 6, 0.15) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(217, 119, 6, 0.25) !important;
}
html.dark .proxy-kpi-icon.expired {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

html.dark .proxy-item {
  background: #0a0a0a !important;
  border: 1px solid #1f1f1f !important;
  box-shadow: none !important;
}
html.dark .proxy-item:hover {
  background: #0f0f0f !important;
  border-color: #3b82f6 !important;
}
html.dark .proxy-copy-btn {
  background: #141414 !important;
  border: 1px solid #262626 !important;
  color: #60a5fa !important;
}
html.dark .proxy-copy-btn:hover {
  background: #1f1f1f !important;
  color: #93c5fd !important;
}
html.dark .proxy-code-val {
  color: #60a5fa !important;
  background: #050505 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  border: 1px solid #1f1f1f !important;
  display: inline-block !important;
}
html.dark .proxy-status-badge.status-active {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(34, 197, 94, 0.25) !important;
}
html.dark .proxy-status-badge.status-pending {
  background: rgba(217, 119, 6, 0.15) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(217, 119, 6, 0.25) !important;
}
html.dark .proxy-status-badge.status-expired {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
}
html.dark .proxy-proto-badge {
  background: rgba(37, 99, 235, 0.15) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(37, 99, 235, 0.25) !important;
}
html.dark .proxy-loc-badge {
  background: rgba(124, 58, 237, 0.15) !important;
  color: #a78bfa !important;
  border: 1px solid rgba(124, 58, 237, 0.25) !important;
}
html.dark .proxy-item .ant-btn {
  background: #141414 !important;
  border: 1px solid #262626 !important;
  color: #d4d4d4 !important;
}
html.dark .proxy-item .ant-btn:hover {
  background: #1f1f1f !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
}

/* Bulk actions bar in dark mode */
html.dark #bulkActions .ant-btn:not(.ant-btn-primary) {
  background: #0d0d0d !important;
  border: 1px solid #262626 !important;
}
html.dark #bulkActions .ant-btn:not(.ant-btn-primary):hover {
  background: #141414 !important;
  filter: brightness(1.2);
}

/* Filters & Pagination in dark mode */
html.dark .ant-filter-bar .ant-input {
  background-color: #0d0d0d !important;
  color: #ffffff !important;
  border: 1px solid #262626 !important;
}
html.dark .ant-filter-bar .ant-input option {
  background-color: #0d0d0d !important;
  color: #ffffff !important;
}
html.dark .ant-filter-actions .ant-btn:not(.ant-btn-primary) {
  background: #141414 !important;
  border: 1px solid #262626 !important;
  color: #a3a3a3 !important;
}
html.dark .ant-filter-actions .ant-btn:not(.ant-btn-primary):hover {
  background: #1f1f1f !important;
  color: #ffffff !important;
}
html.dark .ant-card-body .ant-btn:not(.ant-btn-primary) {
  background: #0d0d0d !important;
  border: 1px solid #262626 !important;
  color: #a3a3a3 !important;
}
html.dark .ant-card-body .ant-btn:not(.ant-btn-primary):hover {
  background: #171717 !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
}

/* Modals in dark mode */
html.dark .proxy-modal-card,
html.dark #renewModal > div:last-child,
html.dark #securityModal > div:last-child {
  background: #0a0a0a !important;
  border: 1px solid #262626 !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.95) !important;
  color: #e5e5e5 !important;
}
html.dark .proxy-modal-card h3,
html.dark #renewModal h3,
html.dark #securityModal h3 {
  color: #ffffff !important;
}
html.dark #renewModalLoading,
html.dark #securityModalLoading {
  background: rgba(0, 0, 0, 0.88) !important;
}
html.dark #renewModal div[style*="background:var(--ant-bg-base)"],
html.dark .proxy-modal-card div[style*="background:var(--ant-bg-base)"] {
  background: #0d0d0d !important;
  border: 1px solid #1f1f1f !important;
}
html.dark #renewModal div[style*="background:var(--ant-bg-base)"] span:first-child,
html.dark .proxy-modal-card div[style*="background:var(--ant-bg-base)"] span:first-child {
  color: #a3a3a3 !important;
}
html.dark .proxy-modal-card label,
html.dark #renewModal label,
html.dark #securityModal label {
  color: #d4d4d4 !important;
}
html.dark .proxy-modal-card .ant-input {
  background: #0d0d0d !important;
  border: 1px solid #262626 !important;
  color: #ffffff !important;
}
html.dark .proxy-modal-card .ant-input:focus {
  border-color: #3b82f6 !important;
}
html.dark .proxy-modal-card .ant-btn:not(.ant-btn-primary) {
  background: #141414 !important;
  border: 1px solid #262626 !important;
  color: #a3a3a3 !important;
}
html.dark .proxy-modal-card .ant-btn:not(.ant-btn-primary):hover {
  background: #1f1f1f !important;
  color: #ffffff !important;
}

/* Custom Checkbox */
html.dark .custom-checkbox {
  background-color: #0f0f0f !important;
  border-color: #262626 !important;
}

/* Swal bulk dialogs in dark mode */
html.dark #checkLog {
  background: #050505 !important;
  border: 1px solid #1f1f1f !important;
  color: #e2e8f0 !important;
}
html.dark .swal2-html div[style*="background:#e5e7eb"],
html.dark div[style*="background:#e5e7eb"] {
  background: #1f1f1f !important;
}
html.dark .swal2-popup .swal2-input {
  background: #0d0d0d !important;
  border: 1px solid #262626 !important;
  color: #ffffff !important;
}
html.dark .swal2-popup div[style*="background:var(--ant-bg-base)"] {
  background: #0d0d0d !important;
  border: 1px solid #1f1f1f !important;
  color: #ffffff !important;
}
html.dark .swal2-popup div[style*="background:var(--ant-bg-base)"] span:first-child {
  color: #a3a3a3 !important;
}

/* ==========================================================================
   31. CLOUD VPS HISTORY PAGE (/customer/history/vps) - PURE BLACK OLED
   ========================================================================== */

/* Notice Banner */
html.dark .smart-notice-banner {
  background: #1c1503 !important;
  border-color: #78350f !important;
}
html.dark .smart-notice-title {
  color: #fed7aa !important;
}
html.dark .smart-notice-desc {
  color: #d4d4d4 !important;
}
html.dark .smart-notice-deposit-btn {
  background: #141414 !important;
  border: 1px solid #262626 !important;
  color: #ffffff !important;
}
html.dark .smart-notice-deposit-btn:hover {
  background: #1f1f1f !important;
  border-color: #404040 !important;
  color: #ffffff !important;
}

/* 5 KPI Stat Tiles */
html.dark .vps-stat-tile {
  background: #0a0a0a !important;
  border-color: #1f1f1f !important;
  box-shadow: none !important;
}
html.dark .vps-stat-tile:hover {
  background: #0f0f0f !important;
  border-color: #262626 !important;
}
html.dark .vps-stat-tile.active-kpi {
  background: #0d1a33 !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 1px #2563eb !important;
}
html.dark .vps-stat-lbl {
  color: #a3a3a3 !important;
}
html.dark .vps-stat-icon-box.blue {
  background: rgba(37, 99, 235, 0.15) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(37, 99, 235, 0.25) !important;
}
html.dark .vps-stat-icon-box.green {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(34, 197, 94, 0.25) !important;
}
html.dark .vps-stat-icon-box.gray {
  background: rgba(148, 163, 184, 0.15) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
}
html.dark .vps-stat-icon-box.red {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
}
html.dark .vps-stat-icon-box.orange {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
}

/* Filter Box & Controls */
html.dark .vps-filter-container {
  background: #0a0a0a !important;
  border: 1px solid #1f1f1f !important;
}
html.dark .vps-filter-label {
  color: #a3a3a3 !important;
}
html.dark .vps-input-control {
  background: #0d0d0d !important;
  border: 1px solid #262626 !important;
  color: #ffffff !important;
}
html.dark .vps-input-control:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}
html.dark .vps-input-control option {
  background-color: #0d0d0d !important;
  color: #ffffff !important;
}
html.dark .vps-btn-reset {
  background: #141414 !important;
  border: 1px solid #262626 !important;
  color: #a3a3a3 !important;
}
html.dark .vps-btn-reset:hover {
  background: #1f1f1f !important;
  color: #ffffff !important;
}

/* VPS Table & Row Items */
html.dark .ant-table-wrapper {
  border-color: #1f1f1f !important;
}
html.dark .ant-table th {
  background: #050505 !important;
  border-bottom: 1px solid #1f1f1f !important;
  color: #a3a3a3 !important;
}
html.dark .ant-table td {
  border-bottom: 1px solid #141414 !important;
  background: transparent !important;
  color: #d4d4d4 !important;
}
html.dark .ant-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.02) !important;
}

html.dark .vps-item-name {
  color: #ffffff !important;
}
html.dark .vps-order-tag {
  background: #141414 !important;
  border: 1px solid #262626 !important;
  color: #a3a3a3 !important;
}
html.dark .vps-os-tag {
  background: rgba(37, 99, 235, 0.15) !important;
  border: 1px solid rgba(37, 99, 235, 0.3) !important;
  color: #60a5fa !important;
}
html.dark .vps-server-tag {
  background: rgba(59, 130, 246, 0.12) !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
  color: #60a5fa !important;
}
html.dark .vps-due-date {
  color: #ffffff !important;
}
html.dark .vps-user-val,
html.dark .vps-pass-val {
  color: #ffffff !important;
}
html.dark .vps-action-renew {
  background: #141414 !important;
  border: 1px solid #262626 !important;
  color: #d4d4d4 !important;
}
html.dark .vps-action-renew:hover {
  background: #1f1f1f !important;
  border-color: #52c41a !important;
}
html.dark .vps-action-renew i {
  color: #4ade80 !important;
}

/* Badges */
html.dark .ant-badge-status-off {
  background: rgba(148, 163, 184, 0.15) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
}
html.dark .ant-badge-status-expire {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
}
html.dark .ant-badge-status-rebuild {
  background: rgba(168, 85, 247, 0.15) !important;
  color: #c084fc !important;
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
}
html.dark .ant-badge-status-deleted {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
}
html.dark .ant-badge-status-overdue {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

/* Pagination */
html.dark .vps-pagination-container {
  border-top-color: #1a1a1a !important;
}
html.dark .ant-pagination-wrapper .el-pager li.number {
  background: #0d0d0d !important;
  border: 1px solid #262626 !important;
  color: #a3a3a3 !important;
}
html.dark .ant-pagination-wrapper .el-pager li.number:hover {
  background: #171717 !important;
  color: #ffffff !important;
  border-color: #3b82f6 !important;
}
html.dark .ant-pagination-wrapper .el-pager li.number.is-active {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
}
html.dark .ant-pagination-wrapper button.btn-prev,
html.dark .ant-pagination-wrapper button.btn-next {
  background: transparent !important;
  border: none !important;
  color: #a3a3a3 !important;
}
html.dark .ant-pagination-wrapper button.btn-prev:hover,
html.dark .ant-pagination-wrapper button.btn-next:hover {
  color: #ffffff !important;
}

/* ==========================================================================
   32. CLOUD VPS DASHBOARD (/customer/history/vps/dashboard/:id) - PURE BLACK OLED
   ========================================================================== */

/* Header & Breadcrumbs */
html.dark .vps-page-header {
  background: #0a0a0a !important;
  border-color: #1f1f1f !important;
  box-shadow: none !important;
}
html.dark .vps-breadcrumbs {
  color: #a3a3a3 !important;
}
html.dark .vps-breadcrumbs a {
  color: #a3a3a3 !important;
}
html.dark .vps-breadcrumbs a:hover {
  color: #60a5fa !important;
}
html.dark .vps-breadcrumb-active {
  color: #ffffff !important;
}
html.dark .vps-header-title {
  color: #ffffff !important;
}
html.dark .vps-header-btn {
  background: #141414 !important;
  border-color: #262626 !important;
  color: #ffffff !important;
}
html.dark .vps-header-btn:hover {
  background: #1f1f1f !important;
  border-color: #404040 !important;
  color: #ffffff !important;
}
html.dark .vps-notice-btn {
  background: #141414 !important;
  border-color: #262626 !important;
  color: #ffffff !important;
}
html.dark .vps-notice-btn:hover {
  background: #1f1f1f !important;
  color: #ffffff !important;
}

/* Status Condition Alerts */
html.dark .vps-notice-danger {
  background: #1c0a0a !important;
  border-color: #7f1d1d !important;
  color: #f87171 !important;
}
html.dark .vps-notice-danger div[style*="color: #820014"],
html.dark .vps-notice-danger div[style*="color:#820014"] {
  color: #fca5a5 !important;
}
html.dark .vps-notice-warning {
  background: #1c1503 !important;
  border-color: #78350f !important;
  color: #fbbf24 !important;
}
html.dark .vps-notice-info {
  background: #0d1a33 !important;
  border-color: #1e3a8a !important;
  color: #60a5fa !important;
}
html.dark .vps-notice-info div[style*="color: #003a8c"],
html.dark .vps-notice-info div[style*="color:#003a8c"] {
  color: #93c5fd !important;
}
html.dark .vps-notice-info button[onclick*="modalExtendDisk"] {
  color: #60a5fa !important;
}
html.dark .vps-notice-success {
  background: #052e16 !important;
  border-color: #14532d !important;
  color: #4ade80 !important;
}

/* Dash Cards */
html.dark .dash-card {
  background: #0a0a0a !important;
  border-color: #1f1f1f !important;
  box-shadow: none !important;
}
html.dark .dash-card-head {
  border-bottom-color: #141414 !important;
}
html.dark .dash-card-title {
  color: #ffffff !important;
}
html.dark .vps-card-subtitle {
  color: #a3a3a3 !important;
}

/* Connect Info Fields */
html.dark .connect-field-label {
  color: #a3a3a3 !important;
}
html.dark .connect-input-wrapper {
  background: #0d0d0d !important;
  border-color: #262626 !important;
}
html.dark .connect-input-wrapper:focus-within {
  border-color: #3b82f6 !important;
  background: #0d0d0d !important;
}
html.dark .connect-input-control {
  color: #ffffff !important;
}
html.dark .connect-copy-btn {
  color: #a3a3a3 !important;
}
html.dark .connect-copy-btn:hover {
  background: #1f1f1f !important;
  color: #60a5fa !important;
}

/* Order Details Tiles */
html.dark .vps-order-tile {
  background: #0d0d0d !important;
  border-color: #1f1f1f !important;
}
html.dark .vps-order-tile-label {
  color: #a3a3a3 !important;
}
html.dark .vps-order-tile-val {
  color: #ffffff !important;
}
html.dark .vps-order-tile-val.text-price {
  color: #f87171 !important;
}
html.dark .vps-order-tile-val.text-due {
  color: #60a5fa !important;
}
html.dark .vps-order-divider {
  border-top-color: #262626 !important;
}
html.dark .vps-order-divider span:first-child {
  color: #a3a3a3 !important;
}

/* Tabs */
html.dark .ant-tabs-nav {
  border-bottom-color: #1f1f1f !important;
}
html.dark .ant-tab-btn {
  color: #a3a3a3 !important;
}
html.dark .ant-tab-btn:hover {
  color: #ffffff !important;
}
html.dark .ant-tab-btn.active {
  color: #60a5fa !important;
  border-bottom-color: #3b82f6 !important;
}

/* Action Tiles Grid */
html.dark .action-tile-btn {
  background: #0d0d0d !important;
  border-color: #1f1f1f !important;
  box-shadow: none !important;
  color: #ffffff !important;
}
html.dark .action-tile-btn:hover:not(:disabled) {
  background: #141414 !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.6) !important;
}
html.dark .action-tile-btn:disabled {
  background: #080808 !important;
  border-color: #141414 !important;
  opacity: 0.35 !important;
}
html.dark .action-tile-lbl {
  color: #d4d4d4 !important;
}
html.dark .action-tile-btn:hover:not(:disabled) .action-tile-lbl {
  color: #60a5fa !important;
}

/* Tab OS Reinstall */
html.dark .vps-os-warning-banner {
  background: #1c1503 !important;
  border-color: #78350f !important;
  color: #fed7aa !important;
}
html.dark .vps-os-warning-banner strong {
  color: #fde047 !important;
}
html.dark .vps-os-grid-title {
  color: #ffffff !important;
}
html.dark .os-select-card {
  background: #0d0d0d !important;
  border-color: #1f1f1f !important;
}
html.dark .os-select-card:hover {
  background: #141414 !important;
  border-color: #2563eb !important;
}
html.dark .os-select-card.active-select {
  background: #0d1a33 !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 1px #3b82f6 !important;
}
html.dark .os-select-card div:last-child {
  color: #ffffff !important;
}

/* Modals */
html.dark .vps-modal-box {
  background: #0a0a0a !important;
  border-color: #262626 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95) !important;
  color: #e5e5e5 !important;
}
html.dark .vps-modal-box .bg-white {
  background: #0a0a0a !important;
  color: #e5e5e5 !important;
}
html.dark .vps-modal-box .bg-slate-50 {
  background: #080808 !important;
  border-color: #1f1f1f !important;
}
html.dark .vps-modal-box .border-b,
html.dark .vps-modal-box .border-t,
html.dark .vps-modal-box .border-r {
  border-color: #1f1f1f !important;
}
html.dark .vps-modal-box h3,
html.dark .vps-modal-box h4 {
  color: #ffffff !important;
}
html.dark .vps-modal-box label {
  color: #d4d4d4 !important;
}
html.dark .vps-modal-box p.text-slate-500,
html.dark .vps-modal-box p.text-slate-600 {
  color: #a3a3a3 !important;
}
html.dark .vps-modal-box input:not(.connect-input-control),
html.dark .vps-modal-box select {
  background: #0d0d0d !important;
  border: 1px solid #262626 !important;
  color: #ffffff !important;
}
html.dark .vps-modal-box input:focus,
html.dark .vps-modal-box select:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}
html.dark .vps-modal-box .ant-btn:not(.ant-btn-primary) {
  background: #141414 !important;
  border: 1px solid #262626 !important;
  color: #d4d4d4 !important;
}
html.dark .vps-modal-box .ant-btn:not(.ant-btn-primary):hover {
  background: #1f1f1f !important;
  color: #ffffff !important;
}
html.dark .vps-modal-box .bg-blue-50 {
  background: #0d1a33 !important;
  border-color: #1e3a8a !important;
}
html.dark .vps-modal-box .bg-blue-50 span.text-blue-900 {
  color: #93c5fd !important;
}
html.dark .vps-modal-box .bg-blue-50 span.text-blue-600 {
  color: #60a5fa !important;
}
html.dark #modalExtendDisk .bg-blue-50 {
  background: #0d1a33 !important;
  border-left-color: #2563eb !important;
  color: #93c5fd !important;
}
html.dark #modalBandwidth .bg-slate-50 {
  background: #0d0d0d !important;
  border-color: #1f1f1f !important;
}
html.dark #modalBandwidth strong {
  color: #ffffff !important;
}
html.dark #modalMonitor .bg-slate-50 {
  background: #050505 !important;
}
html.dark #modalMonitor .bg-white {
  background: #0a0a0a !important;
  border-color: #1f1f1f !important;
}
html.dark #modalMonitor .text-slate-800 {
  color: #ffffff !important;
}
html.dark #modalMonitor .text-slate-600 {
  color: #cbd5e1 !important;
}
html.dark #modalMonitor .text-slate-500 {
  color: #a3a3a3 !important;
}
html.dark #modalMonitor .bg-slate-100 {
  background: #1f1f1f !important;
}
html.dark #modalMonitor .border-slate-200 {
  border-color: #1f1f1f !important;
}

/* Floating Web Console */
html.dark #floatingConsole {
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95), 0 0 0 1px #1f1f1f !important;
}
html.dark #consoleHeader {
  background: #000000 !important;
  border-bottom-color: #1f1f1f !important;
}
html.dark #consoleBody,
html.dark #console-loading,
html.dark #console-placeholder {
  background: #000000 !important;
}

/* SweetAlert Cancel Box */
html.dark .swal2-html div[style*="background:#fef2f2"],
html.dark .swal2-html div[style*="background: #fef2f2"] {
  background: #1c0a0a !important;
  border-color: #7f1d1d !important;
  color: #f87171 !important;
}
html.dark .swal2-html div[style*="border-top:1px solid #fecaca"],
html.dark .swal2-html div[style*="border-top: 1px solid #fecaca"] {
  border-top-color: #7f1d1d !important;
  color: #4ade80 !important;
}

/* ==========================================================================
   33. HOSTING HISTORY PAGE (/customer/history/hosting) - PURE BLACK OLED
   ========================================================================== */

/* Breadcrumbs */
html.dark .host-breadcrumbs {
  color: #a3a3a3 !important;
}
html.dark .host-breadcrumbs a {
  color: #a3a3a3 !important;
}
html.dark .host-breadcrumbs a:hover {
  color: #60a5fa !important;
}
html.dark .host-breadcrumbs span {
  color: #525252 !important;
}
html.dark .host-breadcrumbs span.active-crumb,
html.dark .host-breadcrumbs span[style*="color: #1e293b"] {
  color: #ffffff !important;
}

/* Page Header */
html.dark .host-history-header {
  background: #000000 !important;
  border-color: #1f1f1f !important;
  box-shadow: none !important;
}
html.dark .host-header-icon {
  background: #071326 !important;
  border-color: #1e3a8a !important;
  color: #60a5fa !important;
}
html.dark .host-header-title {
  color: #ffffff !important;
}
html.dark .host-header-subtitle {
  color: #a3a3a3 !important;
}
html.dark .host-header-actions .ant-btn:not(.ant-btn-primary) {
  background: #0a0a0a !important;
  border-color: #262626 !important;
  color: #e5e5e5 !important;
}
html.dark .host-header-actions .ant-btn:not(.ant-btn-primary):hover {
  background: #141414 !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
}

/* Smart Notice Banner */
html.dark .smart-notice-banner {
  background: #120904 !important;
  border-color: #451a03 !important;
  box-shadow: none !important;
}
html.dark .smart-notice-banner .notice-icon {
  color: #f97316 !important;
}
html.dark .smart-notice-banner div[style*="color: #1e293b"],
html.dark .smart-notice-banner .host-notice-title {
  color: #fed7aa !important;
}
html.dark .smart-notice-banner div[style*="color: #64748b"],
html.dark .smart-notice-banner .host-notice-desc {
  color: #d4d4d4 !important;
}
html.dark .smart-notice-banner button,
html.dark .smart-notice-banner .host-notice-btn {
  background: #241106 !important;
  border-color: #7c2d12 !important;
  color: #fb923c !important;
}
html.dark .smart-notice-banner button:hover,
html.dark .smart-notice-banner .host-notice-btn:hover {
  background: #361708 !important;
  border-color: #ea580c !important;
  color: #fdba74 !important;
}

/* 5 KPI Stat Tiles */
html.dark .hosting-stat-tile {
  background: #000000 !important;
  border-color: #1f1f1f !important;
  box-shadow: none !important;
  color: #e5e5e5 !important;
}
html.dark .hosting-stat-tile:hover {
  background: #0a0a0a !important;
  border-color: #333333 !important;
}
html.dark .hosting-stat-tile.active-kpi {
  background: #061124 !important;
  border-color: #1d4ed8 !important;
  box-shadow: 0 0 0 1px #1d4ed8 !important;
}
html.dark .hosting-stat-lbl {
  color: #a3a3a3 !important;
}
html.dark .hosting-stat-val {
  color: #ffffff !important;
}
html.dark .hosting-stat-icon-box.blue {
  background: #071326 !important;
  border: 1px solid #1e3a8a !important;
  color: #60a5fa !important;
}
html.dark .hosting-stat-icon-box.green {
  background: #041c11 !important;
  border: 1px solid #065f46 !important;
  color: #34d399 !important;
}
html.dark .hosting-stat-icon-box.orange {
  background: #241106 !important;
  border: 1px solid #7c2d12 !important;
  color: #fb923c !important;
}
html.dark .hosting-stat-icon-box.red {
  background: #240a0a !important;
  border: 1px solid #7f1d1d !important;
  color: #f87171 !important;
}
html.dark .hosting-stat-icon-box.purple {
  background: #18092e !important;
  border: 1px solid #581c87 !important;
  color: #c084fc !important;
}

/* Ant Card Shell */
html.dark .host-history-container .ant-card {
  background: #000000 !important;
  border-color: #1f1f1f !important;
  box-shadow: none !important;
}
html.dark .host-history-container .ant-card-head {
  background: #000000 !important;
  border-bottom-color: #1f1f1f !important;
}
html.dark .host-history-container .ant-card-head-title,
html.dark .host-history-container .ant-card-title {
  color: #ffffff !important;
}

/* Filter Box */
html.dark .host-filter-container {
  background: #000000 !important;
  border-color: #1f1f1f !important;
}
html.dark .host-filter-label {
  color: #a3a3a3 !important;
}
html.dark .host-input-control {
  background: #0a0a0a !important;
  border: 1px solid #262626 !important;
  color: #f1f5f9 !important;
}
html.dark .host-input-control:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}
html.dark .host-input-control option {
  background: #0a0a0a !important;
  color: #f1f5f9 !important;
}
html.dark .host-input-control::placeholder {
  color: #64748b !important;
}
html.dark .host-filter-field .ant-btn:not(.ant-btn-primary) {
  background: #0a0a0a !important;
  border-color: #262626 !important;
  color: #cbd5e1 !important;
}
html.dark .host-filter-field .ant-btn:not(.ant-btn-primary):hover {
  background: #141414 !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
}

/* Bulk Toolbar */
html.dark .host-bulk-toolbar {
  background: #071326 !important;
  border-color: #1e3a8a !important;
}
html.dark .host-bulk-toolbar span {
  color: #e2e8f0 !important;
}
html.dark .host-bulk-toolbar .ant-btn {
  background: #0d1f3d !important;
  border-color: #1e3a8a !important;
  color: #cbd5e1 !important;
}
html.dark .host-bulk-toolbar .ant-btn:hover {
  background: #172d54 !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}

/* Table */
html.dark .ant-table-wrapper.host-history-table {
  border-color: #1f1f1f !important;
}
html.dark .ant-table {
  background: #000000 !important;
}
html.dark .ant-table th {
  background: #050505 !important;
  border-bottom: 1px solid #1f1f1f !important;
  color: #a3a3a3 !important;
}
html.dark .ant-table td {
  background: #000000 !important;
  border-bottom: 1px solid #141414 !important;
  color: #d4d4d4 !important;
}
html.dark .ant-table tbody tr:hover td {
  background: #0a0a0a !important;
}
html.dark .host-pkg-name,
html.dark .ant-table td div[style*="color: #1e293b"] {
  color: #ffffff !important;
}
html.dark .domain-link {
  color: #60a5fa !important;
}
html.dark .domain-link:hover {
  color: #93c5fd !important;
}
html.dark .copy-chip {
  background: #0d0d0d !important;
  border: 1px solid #262626 !important;
  color: #a3a3a3 !important;
}
html.dark .copy-chip:hover {
  background: #171717 !important;
  border-color: #3b82f6 !important;
  color: #f1f5f9 !important;
}
html.dark .days-badge.green {
  background: #052317 !important;
  color: #34d399 !important;
  border-color: #065f46 !important;
}
html.dark .days-badge.orange {
  background: #271308 !important;
  color: #fb923c !important;
  border-color: #7c2d12 !important;
}
html.dark .days-badge.red {
  background: #270b0b !important;
  color: #f87171 !important;
  border-color: #7f1d1d !important;
}
html.dark .btn-icon-action {
  background: #0a0a0a !important;
  border-color: #262626 !important;
  color: #cbd5e1 !important;
}
html.dark .btn-icon-action:hover {
  background: #141414 !important;
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
}
html.dark .btn-cpanel-login {
  background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(29, 78, 216, 0.4) !important;
}
html.dark .btn-cpanel-login:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
}
html.dark .ant-switch {
  background: #262626 !important;
}
html.dark .ant-switch.active {
  background: #10b981 !important;
}
html.dark .ant-switch::after {
  background: #ffffff !important;
}
html.dark .host-end-date,
html.dark .ant-table td span[style*="color: #334155"] {
  color: #e2e8f0 !important;
}

/* Mobile Cards */
html.dark .mobile-host-card {
  background: #000000 !important;
  border-color: #1f1f1f !important;
  box-shadow: none !important;
  color: #e5e5e5 !important;
}
html.dark .mobile-host-header {
  border-bottom-color: #1f1f1f !important;
}
html.dark .mobile-host-title,
html.dark .mobile-host-header div[style*="color: #1e293b"] {
  color: #ffffff !important;
}
html.dark .mobile-host-row {
  color: #e2e8f0 !important;
}
html.dark .mobile-host-row span[style*="color: #64748b"] {
  color: #a3a3a3 !important;
}
html.dark .mobile-auto-renew-row,
html.dark .mobile-host-row[style*="background: #f8fafc"],
html.dark .mobile-host-row[style*="background:#f8fafc"] {
  background: #0a0a0a !important;
  border: 1px solid #1f1f1f !important;
}
html.dark .mobile-host-row span[style*="color: #334155"] {
  color: #f1f5f9 !important;
}
html.dark .mobile-host-actions {
  border-top-color: #1f1f1f !important;
}
html.dark .mobile-host-actions .ant-btn:not(.ant-btn-primary) {
  background: #0a0a0a !important;
  border-color: #262626 !important;
  color: #cbd5e1 !important;
}
html.dark .mobile-host-actions .ant-btn:not(.ant-btn-primary):hover {
  background: #141414 !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
}

/* Modals */
html.dark .custom-modal-backdrop {
  background: rgba(0, 0, 0, 0.85) !important;
}
html.dark .custom-modal-card {
  background: #000000 !important;
  border: 1px solid #1f1f1f !important;
  color: #f1f5f9 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9) !important;
}
html.dark .custom-modal-header {
  border-bottom-color: #1f1f1f !important;
}
html.dark .custom-modal-title,
html.dark .custom-modal-header div[style*="color: #1e293b"] {
  color: #ffffff !important;
}
html.dark .custom-modal-header button {
  color: #a3a3a3 !important;
}
html.dark .custom-modal-header button:hover {
  color: #ffffff !important;
}
html.dark .custom-modal-body {
  color: #cbd5e1 !important;
}
html.dark .custom-modal-footer {
  background: #050505 !important;
  border-top-color: #1f1f1f !important;
}
html.dark .custom-modal-footer .ant-btn:not(.ant-btn-primary) {
  background: #0a0a0a !important;
  border-color: #262626 !important;
  color: #cbd5e1 !important;
}
html.dark .custom-modal-footer .ant-btn:not(.ant-btn-primary):hover {
  background: #141414 !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
}

/* Modal 1: Access modal */
html.dark #modalHostingAccess div[style*="background: #eff6ff"],
html.dark .host-modal-alert {
  background: #071326 !important;
  border: 1px solid #1e3a8a !important;
  color: #93c5fd !important;
}
html.dark #modalHostingAccess label {
  color: #a3a3a3 !important;
}
html.dark #modalHostingAccess input.host-input-control {
  background: #0a0a0a !important;
  border: 1px solid #262626 !important;
  color: #f1f5f9 !important;
}
html.dark #modalHostingAccess .ant-btn:not(.ant-btn-primary) {
  background: #0a0a0a !important;
  border-color: #262626 !important;
  color: #cbd5e1 !important;
}

/* Modal 2: DNS Guide modal */
html.dark #modalDnsGuide p[style*="color: #475569"] {
  color: #cbd5e1 !important;
}
html.dark #modalDnsGuide div[style*="border: 1px solid #e2e8f0"],
html.dark .dns-method-card {
  border-color: #1f1f1f !important;
  background: #080808 !important;
}
html.dark #modalDnsGuide div[style*="color: #1e293b"] {
  color: #ffffff !important;
}
html.dark #modalDnsGuide table tr[style*="background: #f8fafc"] th,
html.dark #modalDnsGuide table th {
  background: #050505 !important;
  color: #a3a3a3 !important;
  border: 1px solid #1f1f1f !important;
}
html.dark #modalDnsGuide table td {
  border: 1px solid #1f1f1f !important;
  color: #e2e8f0 !important;
}
html.dark #modalDnsGuide div[style*="background: #f8fafc"],
html.dark .dns-ns-box {
  background: #000000 !important;
  border-color: #1f1f1f !important;
  color: #cbd5e1 !important;
}
html.dark #modalDnsGuide div[style*="background: #f8fafc"] strong {
  color: #60a5fa !important;
}
html.dark #modalDnsGuide div[style*="color: #64748b"] {
  color: #a3a3a3 !important;
}

/* Modal 3: Quick Renew modal */
html.dark #modalQuickRenew div[style*="background: #f8fafc"],
html.dark .renew-summary-card {
  background: #080808 !important;
  border-color: #1f1f1f !important;
}
html.dark #modalQuickRenew #renew_domain {
  color: #60a5fa !important;
}
html.dark #modalQuickRenew #renew_pkg {
  color: #f1f5f9 !important;
}
html.dark #modalQuickRenew span[style*="color:#64748b"],
html.dark #modalQuickRenew span[style*="color: #64748b"] {
  color: #a3a3a3 !important;
}
html.dark #modalQuickRenew div[style*="border-top: 1px dashed"] {
  border-top-color: #262626 !important;
}
html.dark #modalQuickRenew span[style*="color:#1e293b"] {
  color: #ffffff !important;
}
html.dark #modalQuickRenew div[style*="background: #eff6ff"],
html.dark .renew-wallet-box {
  background: #071326 !important;
  border: 1px solid #1e3a8a !important;
  color: #93c5fd !important;
}
html.dark #modalQuickRenew div[style*="background: #eff6ff"] span {
  color: #93c5fd !important;
}

/* ==========================================================================
   34. HOSTING DASHBOARD PAGE (/customer/history/hosting/dashboard/:id) - PURE BLACK OLED
   ========================================================================== */

/* Container */
html.dark .host-dash-container {
  color: #e5e5e5;
}

/* Breadcrumbs */
html.dark .host-dash-container .host-breadcrumbs {
  color: #a3a3a3 !important;
}
html.dark .host-dash-container .host-breadcrumbs a {
  color: #a3a3a3 !important;
}
html.dark .host-dash-container .host-breadcrumbs a:hover {
  color: #60a5fa !important;
}
html.dark .host-dash-container .host-breadcrumbs span {
  color: #525252 !important;
}
html.dark .host-dash-container .host-breadcrumbs span.active-crumb,
html.dark .host-dash-container .host-breadcrumbs span[style*="color: #1e293b"] {
  color: #ffffff !important;
}

/* Header */
html.dark .host-dash-header {
  background: #000000 !important;
  border-color: #1f1f1f !important;
  box-shadow: none !important;
}
html.dark .host-dash-header .host-header-icon {
  background: #071326 !important;
  border-color: #1e3a8a !important;
  color: #60a5fa !important;
}
html.dark .host-dash-header .host-header-title {
  color: #ffffff !important;
}
html.dark .host-dash-header .host-header-title a,
html.dark .host-dash-header .host-header-title a[style*="color: #1e293b"] {
  color: #ffffff !important;
}
html.dark .host-dash-header .host-header-title a:hover {
  color: #60a5fa !important;
}
html.dark .host-dash-header .host-header-subtitle {
  color: #a3a3a3 !important;
}
html.dark .host-pkg-badge,
html.dark .host-dash-header .ant-badge[style*="background: #f1f5f9"] {
  background: #141414 !important;
  border: 1px solid #262626 !important;
  color: #cbd5e1 !important;
}
html.dark .host-dash-header .host-header-actions .ant-btn:not(.ant-btn-primary) {
  background: #0a0a0a !important;
  border-color: #262626 !important;
  color: #e5e5e5 !important;
}
html.dark .host-dash-header .host-header-actions .ant-btn:not(.ant-btn-primary):hover {
  background: #141414 !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
}

/* Reinstalling Banner */
html.dark .host-dash-container .dash-card[style*="border: 1px solid #bae6fd"] {
  background: #071326 !important;
  border-color: #1e3a8a !important;
}
html.dark .host-dash-container .dash-card[style*="border: 1px solid #bae6fd"] h3 {
  color: #7dd3fc !important;
}
html.dark .host-dash-container .dash-card[style*="border: 1px solid #bae6fd"] p {
  color: #bae6fd !important;
}
html.dark .host-dash-container .dash-card[style*="border: 1px solid #bae6fd"] a.ant-btn {
  background: #0a0a0a !important;
  border-color: #262626 !important;
  color: #e5e5e5 !important;
}

/* Cards */
html.dark .host-dash-container .dash-card {
  background: #000000 !important;
  border-color: #1f1f1f !important;
  box-shadow: none !important;
}
html.dark .host-dash-container .dash-card-head {
  background: #000000 !important;
  border-bottom-color: #141414 !important;
}
html.dark .host-dash-container .dash-card-title {
  color: #ffffff !important;
}
html.dark .host-dash-container .dash-card-head span[style*="color: #64748b"] {
  color: #a3a3a3 !important;
}

/* Connection Info Fields */
html.dark .connect-field-item {
  background: #0a0a0a !important;
  border-color: #1f1f1f !important;
}
html.dark .connect-field-lbl {
  color: #a3a3a3 !important;
}
html.dark .connect-field-input {
  color: #ffffff !important;
}
html.dark .connect-btn-icon {
  background: #0d0d0d !important;
  border-color: #262626 !important;
  color: #a3a3a3 !important;
}
html.dark .connect-btn-icon:hover {
  background: #171717 !important;
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
}

/* Quick Tools */
html.dark .tool-tile {
  background: #0a0a0a !important;
  border-color: #1f1f1f !important;
  box-shadow: none !important;
}
html.dark .tool-tile:hover {
  background: #121212 !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6) !important;
}
html.dark .tool-tile-title {
  color: #ffffff !important;
}
html.dark .tool-tile-sub {
  color: #a3a3a3 !important;
}

/* Admin Actions Grid */
html.dark .act-card {
  background: #0a0a0a !important;
  border-color: #1f1f1f !important;
}
html.dark .act-card:hover {
  background: #141414 !important;
  border-color: #3b82f6 !important;
}
html.dark .act-card-title {
  color: #ffffff !important;
}
html.dark .act-card[style*="border-color: #fecaca"],
html.dark .act-card-reinstall {
  background: #1a0808 !important;
  border-color: #7f1d1d !important;
}
html.dark .act-card[style*="border-color: #fecaca"]:hover,
html.dark .act-card-reinstall:hover {
  background: #250b0b !important;
  border-color: #ef4444 !important;
}
html.dark .act-card[style*="border-color: #fecaca"] .act-card-title,
html.dark .act-card-reinstall .act-card-title {
  color: #f87171 !important;
}

/* Sidebar Resource Monitoring */
html.dark .resource-refresh-btn {
  background: #0a0a0a !important;
  border-color: #262626 !important;
  color: #a3a3a3 !important;
}
html.dark .resource-refresh-btn:hover {
  background: #141414 !important;
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
}
html.dark .host-dash-sidebar span[style*="color: #334155"],
html.dark .resource-lbl {
  color: #e2e8f0 !important;
}
html.dark .host-dash-sidebar span[style*="color: #1e293b"],
html.dark .resource-val {
  color: #ffffff !important;
}
html.dark .resource-skeleton {
  background: linear-gradient(90deg, #141414 25%, #262626 50%, #141414 75%) !important;
  background-size: 200% 100% !important;
}
html.dark .host-dash-sidebar .el-progress-bar__outer {
  background-color: #1f1f1f !important;
}

/* Sidebar Order Info */
html.dark .dash-info-row {
  border-bottom-color: #1a1a1a !important;
}
html.dark .dash-info-lbl {
  color: #a3a3a3 !important;
}
html.dark .dash-info-val {
  color: #ffffff !important;
}
html.dark .dash-info-row span[style*="background: #ecfdf5"] {
  background: #042f1a !important;
  border-color: #065f46 !important;
  color: #34d399 !important;
}
html.dark .host-dash-sidebar div[style*="border-top: 1px dashed"] {
  border-top-color: #1a1a1a !important;
}
html.dark .host-dash-sidebar .ant-badge[style*="background: #fff2f0"] {
  background: #270b0b !important;
  border-color: #7f1d1d !important;
  color: #f87171 !important;
}
html.dark .host-dash-sidebar button.ant-btn:not(.ant-btn-primary) {
  background: #0a0a0a !important;
  border-color: #262626 !important;
  color: #e5e5e5 !important;
}
html.dark .host-dash-sidebar button.ant-btn:not(.ant-btn-primary):hover {
  background: #141414 !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
}
html.dark .host-dash-sidebar button.ant-btn[style*="color: #dc2626"] {
  border-color: #3b1818 !important;
  color: #f87171 !important;
}
html.dark .host-dash-sidebar button.ant-btn[style*="color: #dc2626"]:hover {
  background: #1a0808 !important;
  border-color: #dc2626 !important;
  color: #ef4444 !important;
}

/* Element Plus Dialogs (Cron, Addon, Subdomain, Upgrade, Transfer, IP, Reinstall) */
html.dark .el-dialog {
  background: #000000 !important;
  border: 1px solid #1f1f1f !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9) !important;
}
html.dark .el-dialog__title {
  color: #ffffff !important;
}
html.dark .el-dialog__header {
  border-bottom: 1px solid #1f1f1f !important;
}
html.dark .el-dialog__headerbtn .el-dialog__close {
  color: #a3a3a3 !important;
}
html.dark .el-dialog__headerbtn .el-dialog__close:hover {
  color: #ffffff !important;
}
html.dark .el-dialog__body {
  color: #cbd5e1 !important;
}
html.dark .el-dialog__footer {
  background: #050505 !important;
  border-top: 1px solid #1f1f1f !important;
}
html.dark .el-dialog__footer .ant-btn:not(.ant-btn-primary) {
  background: #0a0a0a !important;
  border-color: #262626 !important;
  color: #cbd5e1 !important;
}
html.dark .el-dialog__footer .ant-btn:not(.ant-btn-primary):hover {
  background: #141414 !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
}
html.dark .el-form-item__label {
  color: #a3a3a3 !important;
}
html.dark .el-input__wrapper,
html.dark .el-select .el-input__wrapper {
  background-color: #0a0a0a !important;
  box-shadow: 0 0 0 1px #262626 inset !important;
}
html.dark .el-input__inner {
  color: #ffffff !important;
}
html.dark .el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px #3b82f6 inset !important;
}

/* Specific Dialog Alert Banners */
html.dark .el-dialog div[style*="background: #fef3c7"] {
  background: #1f1604 !important;
  border-color: #78350f !important;
  color: #fde68a !important;
}
html.dark .el-dialog div[style*="background: #eff6ff"] {
  background: #071326 !important;
  border-color: #1e3a8a !important;
  color: #93c5fd !important;
}
html.dark .el-dialog div[style*="background: #fef2f2"] {
  background: #1c0a0a !important;
  border-color: #7f1d1d !important;
  color: #f87171 !important;
}
html.dark .el-dialog label[style*="color: #334155"] {
  color: #cbd5e1 !important;
}
html.dark .el-dialog div[style*="color: #64748b"] {
  color: #94a3b8 !important;
}
html.dark .el-dialog div[style*="color: #64748b"] strong {
  color: #60a5fa !important;
}

/* Element Plus Dropdown Options in Dark Mode */
html.dark .el-select-dropdown__wrap,
html.dark .el-popper.is-light {
  background: #0a0a0a !important;
  border-color: #1f1f1f !important;
}
html.dark .el-select-dropdown__item {
  color: #d4d4d4 !important;
}
html.dark .el-select-dropdown__item.hover,
html.dark .el-select-dropdown__item:hover {
  background-color: #171717 !important;
  color: #60a5fa !important;
}
html.dark .el-select-dropdown__item.selected {
  color: #3b82f6 !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   35. DEPOSIT SYSTEM (/deposit, /deposit/usdt, /deposit/pay/:id, /card) - PURE BLACK OLED
   ========================================================================== */

/* Main Containers */
html.dark #bank,
html.dark #usdt,
html.dark #card {
  color: #e5e5e5;
}

/* Anti-spam Warning Banner */
html.dark .pending-warning {
  background: #1a1403 !important;
  border: 1px solid #78350f !important;
}
html.dark .pending-warning-header {
  color: #fde68a !important;
}
html.dark .pending-warning-blocked {
  background: #1a0808 !important;
  border-color: #7f1d1d !important;
}
html.dark .pending-warning-blocked .pending-warning-header {
  color: #f87171 !important;
}
html.dark .pending-item {
  background: #0a0a0a !important;
  border-color: #1f1f1f !important;
}
html.dark .pending-item-code {
  color: #ffffff !important;
}
html.dark .pending-item-amount {
  color: #4ade80 !important;
}
html.dark #usdt .pending-item-amount {
  color: #34d399 !important;
}
html.dark .pending-item-time {
  color: #a3a3a3 !important;
}
html.dark .pending-btn-pay {
  background: #071326 !important;
  color: #60a5fa !important;
  border: 1px solid #1e3a8a !important;
}
html.dark .pending-btn-pay:hover {
  background: #0c2142 !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
}
html.dark .pending-btn-cancel {
  background: #1a0808 !important;
  color: #f87171 !important;
  border: 1px solid #7f1d1d !important;
}
html.dark .pending-btn-cancel:hover {
  background: #2b0d0d !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}
html.dark .deposit-form-overlay.blocked::after {
  background: rgba(0, 0, 0, 0.75) !important;
}

/* USDT Rate Banner & Badge */
html.dark .usdt-rate-banner,
html.dark #bank div[style*="linear-gradient(135deg, #02c09715"] {
  background: #061914 !important;
  border-color: #064e3b !important;
}
html.dark .usdt-rate-badge,
html.dark #bank div[style*="background: #fff; padding: 8px 16px"] {
  background: #000000 !important;
  border-color: #047857 !important;
  color: #34d399 !important;
}

/* Deposit Form Card & Header */
html.dark .deposit-form-card {
  background: #000000 !important;
  border: 1px solid #1f1f1f !important;
  box-shadow: none !important;
}
html.dark .deposit-form-header {
  color: #ffffff !important;
  border-bottom: 1px solid #141414 !important;
}
html.dark .deposit-form-header i {
  color: #3b82f6 !important;
}
html.dark #usdt .deposit-form-header i {
  color: #10b981 !important;
}
html.dark .deposit-form-body label {
  color: #e5e5e5 !important;
}
html.dark #depositAmount.ant-input,
html.dark #depositAmountUSDT.ant-input {
  background: #0a0a0a !important;
  border-color: #262626 !important;
  color: #ffffff !important;
}
html.dark #depositAmount.ant-input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}
html.dark #depositAmountUSDT.ant-input:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
}

/* Amount Presets Grid */
html.dark .deposit-amount-btn {
  background: #0a0a0a !important;
  border-color: #262626 !important;
  color: #d4d4d4 !important;
}
html.dark .deposit-amount-btn:hover {
  border-color: #3b82f6 !important;
  background: #0f1c33 !important;
  color: #60a5fa !important;
}
html.dark .deposit-amount-btn.active {
  border-color: #3b82f6 !important;
  background: #0c1e38 !important;
  color: #60a5fa !important;
  font-weight: 700 !important;
}
html.dark #usdt .deposit-amount-btn:hover {
  border-color: #10b981 !important;
  background: #06261c !important;
  color: #34d399 !important;
}
html.dark #usdt .deposit-amount-btn.active {
  border-color: #10b981 !important;
  background: #04241a !important;
  color: #34d399 !important;
  font-weight: 700 !important;
}

/* Bank Selection List */
html.dark .deposit-bank-item {
  background: #0a0a0a !important;
  border-color: #1f1f1f !important;
}
html.dark .deposit-bank-item:hover {
  border-color: #3b82f6 !important;
  background: #0c1e38 !important;
}
html.dark .deposit-bank-item.active {
  border-color: #3b82f6 !important;
  background: #081529 !important;
}
html.dark #usdt .deposit-bank-item:hover {
  border-color: #10b981 !important;
  background: #06261c !important;
}
html.dark #usdt .deposit-bank-item.active {
  border-color: #10b981 !important;
  background: #04241a !important;
}
html.dark .deposit-bank-item .bank-radio {
  border-color: #404040 !important;
}
html.dark .deposit-bank-item.active .bank-radio {
  border-color: #3b82f6 !important;
}
html.dark .deposit-bank-item.active .bank-radio::after {
  background: #3b82f6 !important;
}
html.dark #usdt .deposit-bank-item.active .bank-radio {
  border-color: #10b981 !important;
}
html.dark #usdt .deposit-bank-item.active .bank-radio::after {
  background: #10b981 !important;
}
html.dark .deposit-bank-info .bank-name {
  color: #ffffff !important;
}
html.dark .deposit-bank-info .bank-account {
  color: #a3a3a3 !important;
}

/* Submit Button */
html.dark .deposit-submit-btn {
  background: #2563eb !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
html.dark .deposit-submit-btn:hover:not(:disabled) {
  background: #1d4ed8 !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4) !important;
}
html.dark .deposit-submit-btn:disabled {
  background: #171717 !important;
  border: 1px solid #262626 !important;
  color: #737373 !important;
  opacity: 0.8 !important;
}
html.dark #usdt .deposit-submit-btn {
  background: #059669 !important;
}
html.dark #usdt .deposit-submit-btn:hover:not(:disabled) {
  background: #047857 !important;
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.4) !important;
}

/* Instruction Card */
html.dark .deposit-instruction {
  color: #a3a3a3 !important;
}
html.dark .deposit-instruction i {
  color: #3b82f6 !important;
  opacity: 0.8 !important;
}
html.dark #usdt .deposit-instruction i.bx-coin {
  color: #10b981 !important;
}
html.dark .deposit-step {
  background: #0a0a0a !important;
  border: 1px solid #1f1f1f !important;
}
html.dark .deposit-step[style*="rgba(255, 77, 79"] {
  background: #1a0808 !important;
  border-color: #7f1d1d !important;
}
html.dark .deposit-step-num {
  background: #2563eb !important;
  color: #ffffff !important;
}
html.dark #usdt .deposit-step-num {
  background: #059669 !important;
}
html.dark .deposit-step-text {
  color: #d4d4d4 !important;
}
html.dark .deposit-instruction div[style*="background: #fff2f0"] {
  background: #1a0808 !important;
  border-color: #7f1d1d !important;
  color: #f87171 !important;
}

/* History Card & Filters */
html.dark #bank .ant-card,
html.dark #usdt .ant-card,
html.dark #card .ant-card {
  background: #000000 !important;
  border: 1px solid #1f1f1f !important;
  box-shadow: none !important;
}
html.dark #bank .ant-card-head,
html.dark #usdt .ant-card-head,
html.dark #card .ant-card-head {
  background: #000000 !important;
  border-bottom: 1px solid #141414 !important;
}
html.dark #bank .ant-card-title,
html.dark #usdt .ant-card-title,
html.dark #card .ant-card-title {
  color: #ffffff !important;
}
html.dark #bank .ant-card-body,
html.dark #usdt .ant-card-body,
html.dark #card .ant-card-body {
  background: #000000 !important;
}
html.dark #bank .ant-filter-bar,
html.dark #usdt .ant-filter-bar,
html.dark #card .ant-filter-bar {
  background: #0a0a0a !important;
  border: 1px solid #1f1f1f !important;
}
html.dark #bank .ant-filter-bar .ant-form-label,
html.dark #usdt .ant-filter-bar .ant-form-label,
html.dark #card .ant-filter-bar .ant-form-label {
  color: #a3a3a3 !important;
}
html.dark #bank .ant-filter-bar .ant-input,
html.dark #usdt .ant-filter-bar .ant-input,
html.dark #card .ant-filter-bar .ant-input {
  background: #000000 !important;
  border-color: #262626 !important;
  color: #ffffff !important;
}
html.dark #bank .ant-filter-actions .ant-btn:not(.ant-btn-primary),
html.dark #usdt .ant-filter-actions .ant-btn:not(.ant-btn-primary),
html.dark #card .ant-filter-actions .ant-btn:not(.ant-btn-primary) {
  background: #0a0a0a !important;
  border-color: #262626 !important;
  color: #d4d4d4 !important;
}
html.dark #bank .ant-filter-actions .ant-btn:not(.ant-btn-primary):hover,
html.dark #usdt .ant-filter-actions .ant-btn:not(.ant-btn-primary):hover,
html.dark #card .ant-filter-actions .ant-btn:not(.ant-btn-primary):hover {
  background: #141414 !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
}

/* History Table */
html.dark #bank .ant-table,
html.dark #usdt .ant-table,
html.dark #card .ant-table {
  background: #000000 !important;
  color: #e5e5e5 !important;
}
html.dark #bank .ant-table thead th,
html.dark #usdt .ant-table thead th,
html.dark #card .ant-table thead th {
  background: #0a0a0a !important;
  border-bottom: 1px solid #1f1f1f !important;
  color: #a3a3a3 !important;
}
html.dark #bank .ant-table tbody tr,
html.dark #usdt .ant-table tbody tr,
html.dark #card .ant-table tbody tr {
  background: #000000 !important;
}
html.dark #bank .ant-table tbody tr:hover,
html.dark #usdt .ant-table tbody tr:hover,
html.dark #card .ant-table tbody tr:hover {
  background: #0a0a0a !important;
}
html.dark #bank .ant-table tbody td,
html.dark #usdt .ant-table tbody td,
html.dark #card .ant-table tbody td {
  border-bottom: 1px solid #141414 !important;
  color: #d4d4d4 !important;
}
html.dark #bank .ant-table td[data-label="Mã GD"],
html.dark #usdt .ant-table td[data-label="Mã GD"] {
  color: #ffffff !important;
}
html.dark #bank .ant-table td[data-label="Số tiền"] {
  color: #4ade80 !important;
}
html.dark #usdt .ant-table td[data-label="Số tiền quy đổi"] {
  color: #34d399 !important;
}
html.dark #bank .ant-table td[data-label="Thời gian"],
html.dark #usdt .ant-table td[data-label="Thời gian"] {
  color: #a3a3a3 !important;
}

/* Table Badges & Action Buttons */
html.dark #bank .badge-pending-invoice,
html.dark #bank .ant-table span[style*="background:#fff7e6"],
html.dark #usdt .badge-pending-invoice,
html.dark #usdt .ant-table span[style*="background:#fff7e6"] {
  background: #1a1403 !important;
  color: #fde68a !important;
  border: 1px solid #78350f !important;
}
html.dark #bank .btn-pay-invoice,
html.dark #bank .ant-table a[style*="background:#e6f7ff"],
html.dark #usdt .btn-pay-invoice,
html.dark #usdt .ant-table a[style*="background:#e6f7ff"] {
  background: #071326 !important;
  color: #60a5fa !important;
  border: 1px solid #1e3a8a !important;
}
html.dark #bank .btn-pay-invoice:hover,
html.dark #bank .ant-table a[style*="background:#e6f7ff"]:hover,
html.dark #usdt .btn-pay-invoice:hover,
html.dark #usdt .ant-table a[style*="background:#e6f7ff"]:hover {
  background: #0c2142 !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
}
html.dark #bank .badge-cancelled-invoice,
html.dark #bank .ant-table span[style*="background:#fff1f0"],
html.dark #usdt .badge-cancelled-invoice,
html.dark #usdt .ant-table span[style*="background:#fff1f0"],
html.dark #card .ant-table span[style*="background:#fff1f0"] {
  background: #1a0808 !important;
  color: #f87171 !important;
  border: 1px solid #7f1d1d !important;
}
html.dark #bank .badge-success-invoice,
html.dark #bank .ant-table span[style*="background:#f6ffed"],
html.dark #usdt .badge-success-invoice,
html.dark #usdt .ant-table span[style*="background:#f6ffed"],
html.dark #card .ant-table span[style*="background:#f6ffed"] {
  background: #061a0e !important;
  color: #4ade80 !important;
  border: 1px solid #166534 !important;
}
html.dark #bank .ant-badge-info {
  background: #071326 !important;
  color: #60a5fa !important;
  border: 1px solid #1e3a8a !important;
}
html.dark #usdt .ant-badge-info {
  background: #061914 !important;
  color: #34d399 !important;
  border: 1px solid #064e3b !important;
}

/* Mobile Responsive Table Rows */
@media (max-width: 768px) {
  html.dark #bank .ant-table-wrapper .ant-table tr,
  html.dark #usdt .ant-table-wrapper .ant-table tr,
  html.dark #card .ant-table-wrapper .ant-table tr {
    background: #0a0a0a !important;
    border: 1px solid #1f1f1f !important;
    box-shadow: none !important;
  }
  html.dark #bank .ant-table-wrapper .ant-table td::before,
  html.dark #usdt .ant-table-wrapper .ant-table td::before,
  html.dark #card .ant-table-wrapper .ant-table td::before {
    color: #a3a3a3 !important;
  }
}

/* Flatpickr Datepicker in Dark Mode */
html.dark .flatpickr-calendar {
  background: #0a0a0a !important;
  border: 1px solid #1f1f1f !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9) !important;
}
html.dark .flatpickr-calendar.arrowTop::before,
html.dark .flatpickr-calendar.arrowTop::after {
  border-bottom-color: #0a0a0a !important;
}
html.dark .flatpickr-calendar.arrowBottom::before,
html.dark .flatpickr-calendar.arrowBottom::after {
  border-top-color: #0a0a0a !important;
}
html.dark .flatpickr-months {
  background: #0a0a0a !important;
}
html.dark .flatpickr-months .flatpickr-month {
  color: #ffffff !important;
  fill: #ffffff !important;
}
html.dark .flatpickr-current-month .cur-month,
html.dark .flatpickr-current-month input.cur-year {
  color: #ffffff !important;
}
html.dark .flatpickr-months .flatpickr-prev-month,
html.dark .flatpickr-months .flatpickr-next-month {
  color: #a3a3a3 !important;
  fill: #a3a3a3 !important;
}
html.dark .flatpickr-months .flatpickr-prev-month:hover,
html.dark .flatpickr-months .flatpickr-next-month:hover {
  color: #ffffff !important;
  fill: #ffffff !important;
}
html.dark .flatpickr-weekdays,
html.dark span.flatpickr-weekday {
  background: #0a0a0a !important;
  color: #a3a3a3 !important;
}
html.dark .flatpickr-day {
  color: #d4d4d4 !important;
}
html.dark .flatpickr-day:hover {
  background: #1f1f1f !important;
  border-color: #1f1f1f !important;
  color: #ffffff !important;
}
html.dark .flatpickr-day.today {
  border-color: #3b82f6 !important;
}
html.dark .flatpickr-day.selected,
html.dark .flatpickr-day.startRange,
html.dark .flatpickr-day.endRange {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}
html.dark .flatpickr-day.inRange {
  background: #0f1c33 !important;
  border-color: #0f1c33 !important;
  box-shadow: -5px 0 0 #0f1c33, 5px 0 0 #0f1c33 !important;
  color: #60a5fa !important;
}
html.dark .flatpickr-day.prevMonthDay,
html.dark .flatpickr-day.nextMonthDay {
  color: #404040 !important;
}

/* Payment Invoice Detail Page (/deposit/pay/:id) */
html.dark .pay-card {
  background: #050505 !important;
  border: 1px solid #1f1f1f !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
}
html.dark .pay-logo h2 {
  color: #ffffff !important;
}
html.dark .pay-box {
  background: #000000 !important;
  border-color: #1f1f1f !important;
}
html.dark .pay-title {
  color: #ffffff !important;
}
html.dark .bank-short {
  color: #34d399 !important;
}
html.dark .bank-full {
  color: #a3a3a3 !important;
}
html.dark .bank-full strong {
  color: #ffffff !important;
}
html.dark .info-label {
  color: #a3a3a3 !important;
}
html.dark .info-val {
  color: #ffffff !important;
}
html.dark .info-copy {
  background: #141414 !important;
  color: #34d399 !important;
  border: 1px solid #262626 !important;
}
html.dark .info-copy:hover {
  background: #1f2937 !important;
  border-color: #34d399 !important;
  color: #6ee7b7 !important;
}
html.dark .note-text {
  color: #737373 !important;
}
html.dark .timer-box {
  background: #1a1403 !important;
  color: #fde68a !important;
  border: 1px solid #78350f !important;
}
html.dark .timer-box span {
  color: #f87171 !important;
}
html.dark .timer-box.paid,
html.dark #statusBox.paid {
  background: #061a0e !important;
  border: 1px solid #166534 !important;
  color: #4ade80 !important;
}
html.dark .timer-box.cancelled,
html.dark #statusBox.cancelled {
  background: #1a0808 !important;
  border: 1px solid #7f1d1d !important;
  color: #f87171 !important;
}
html.dark .cancel-link a {
  color: #f87171 !important;
}
html.dark .cancel-link a:hover {
  color: #ef4444 !important;
}
html.dark .toast {
  background: #141414 !important;
  color: #ffffff !important;
  border: 1px solid #262626 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8) !important;
}

/* ==========================================================================
   36. HOMEPAGE (/) - PURE BLACK OLED OVERHAUL
   ========================================================================== */

/* System Alert Banner */
html.dark .home-system-alert {
  background: #06182c !important;
  border: 1px solid #1e3a8a !important;
  color: #93c5fd !important;
}
html.dark .home-alert-icon {
  color: #60a5fa !important;
}
html.dark .home-alert-title {
  color: #bfdbfe !important;
}
html.dark .home-alert-desc {
  color: #cbd5e1 !important;
}

/* Service Switcher Tabs (Hosting / Domain / VPS / Proxy / Claude AI) */
html.dark .home-tabs-wrapper {
  background: #0a0a0a !important;
  border-color: #1f1f1f !important;
}
html.dark .ant-tab-btn {
  color: #a3a3a3 !important;
}
html.dark .ant-tab-btn:hover:not(.active) {
  background: #141414 !important;
  color: #ffffff !important;
}
html.dark .ant-tab-btn.active {
  background: #171717 !important;
  color: #60a5fa !important;
  border: 1px solid #262626 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

/* Server Filter Pills (Hosting, VPS, Proxy) */
html.dark .server-tabs button,
html.dark .server-tab-btn,
html.dark .server-tab-btn-vps,
html.dark .proxy-tab-btn {
  background: #0f0f0f !important;
  border-color: #262626 !important;
  color: #d4d4d4 !important;
}
html.dark .server-tabs button:hover,
html.dark .server-tab-btn:hover,
html.dark .server-tab-btn-vps:hover,
html.dark .proxy-tab-btn:hover {
  background: #171717 !important;
  border-color: #404040 !important;
  color: #ffffff !important;
}
html.dark .server-tabs button.active,
html.dark .server-tab-btn.active,
html.dark .server-tab-btn-vps.active,
html.dark .proxy-tab-btn.active {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}

/* Domain Search Bar Form & Input */
html.dark .home-domain-search-form {
  background: #0a0a0a !important;
  border: 1px solid #262626 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7) !important;
}
html.dark .home-domain-search-input {
  background: transparent !important;
  color: #ffffff !important;
}
html.dark .home-domain-search-input::placeholder {
  color: #6b7280 !important;
}
html.dark .home-domain-search-btn {
  background: #2563eb !important;
  color: #ffffff !important;
}
html.dark .home-domain-search-btn:hover {
  background: #1d4ed8 !important;
}

/* Pricing Grid Cards (Hosting, VPS, Domain, Proxy) */
html.dark .ant-pricing-card {
  background: #000000 !important;
  border: 1px solid #1f1f1f !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7) !important;
}
html.dark .ant-pricing-card:hover {
  background: #050505 !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.95) !important;
}
html.dark .ant-pricing-card.featured {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 1px #2563eb !important;
}
html.dark .ant-pricing-ribbon {
  background: #2563eb !important;
  color: #ffffff !important;
}
html.dark .ant-pricing-name {
  color: #ffffff !important;
}
html.dark .ant-pricing-price {
  color: #60a5fa !important;
}
html.dark .ant-pricing-period {
  color: #a3a3a3 !important;
}
html.dark .ant-pricing-features li {
  color: #d4d4d4 !important;
}
html.dark .ant-pricing-features li strong {
  color: #ffffff !important;
}
html.dark .ant-pricing-btn {
  background: #141414 !important;
  border: 1px solid #262626 !important;
  color: #ffffff !important;
}
html.dark .ant-pricing-btn:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}

/* Claude AI Product Cards */
html.dark .ai-list-item {
  background: #000000 !important;
  border: 1px solid #1f1f1f !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7) !important;
}
html.dark .ai-list-item:hover {
  background: #050505 !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.95) !important;
}
html.dark .ai-list-thumb {
  background: #0a0a0a !important;
  border: 1px solid #1f1f1f !important;
}
html.dark .ai-list-thumb-empty {
  color: #525252 !important;
}
html.dark .ai-list-name {
  color: #ffffff !important;
}
html.dark .ai-list-meta {
  color: #a3a3a3 !important;
}
html.dark .ai-list-meta span {
  color: #a3a3a3 !important;
}
html.dark .ai-list-meta i {
  color: #60a5fa !important;
}
html.dark .ai-list-price {
  color: #60a5fa !important;
}
html.dark .ai-list-period {
  color: #737373 !important;
}
html.dark .ai-list-badge.hot {
  background: #3f1212 !important;
  color: #f87171 !important;
  border: 1px solid #7f1d1d !important;
}
html.dark .ai-list-badge.in {
  background: #062816 !important;
  color: #34d399 !important;
  border: 1px solid #065f46 !important;
}
html.dark .ai-list-badge.out {
  background: #271010 !important;
  color: #ef4444 !important;
  border: 1px solid #7f1d1d !important;
}
html.dark .ai-list-action {
  border-top-color: #1f1f1f !important;
}

/* Home Notification Dialog */
html.dark #pagehome .el-dialog {
  background: #0a0a0a !important;
  border: 1px solid #262626 !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95) !important;
}
html.dark #pagehome .el-dialog__title,
html.dark #pagehome .el-dialog__header {
  border-bottom: 1px solid #1f1f1f !important;
}
html.dark #pagehome .el-dialog__body {
  color: #e5e5e5 !important;
}
html.dark #pagehome .el-dialog__footer {
  border-top: 1px solid #1f1f1f !important;
}