html.dark-mode body {
    background: #0a0e17;
}

html.dark-mode .main-content {
    background: #0a0e17;
}

html.dark-mode .page-content {
    background: #0a0e17;
}

html.dark-mode #page-topbar {
    background: #0d121e;
    border-bottom-color: #1e2a3c;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

html.dark-mode .page-title-box {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

html.dark-mode .ovn-topbar-pill,
html.dark-mode .ovn-topbar-pill__value,
html.dark-mode .ovn-topbar-profile,
html.dark-mode .ovn-topbar-profile__name {
    color: #8899b4 !important;
}

html.dark-mode .ovn-topbar-icon-btn {
    color: #5a708c !important;
}

html.dark-mode .ovn-topbar-icon-btn:hover {
    color: #a78bfa !important;
    text-shadow: 0 0 12px rgba(167, 139, 250, 0.4);
}

html.dark-mode .ovn-topbar-divider {
    background: #1e2a3c;
}

html.dark-mode .ovn-topbar-dropdown {
    background: #111827;
    border-color: #1e2a3c;
}

html.dark-mode .ovn-topbar-dropdown .dropdown-item {
    color: #8899b4;
}

html.dark-mode .ovn-topbar-dropdown .dropdown-item:hover {
    background: #1e2a3c;
    color: #e8edf5;
}

html.dark-mode .vertical-menu {
    background: #0d121e;
    border-right-color: #1e2a3c;
}

html.dark-mode .vertical-menu .navbar-brand-box {
    background: #0a0e17;
}

html.dark-mode .logo-dark {
    display: none !important;
}

html.dark-mode .logo-light {
    display: block !important;
}

html.dark-mode .logo-light span {
    color: #a78bfa !important;
    text-shadow: 0 0 12px rgba(167, 139, 250, 0.4);
}

html.dark-mode .metismenu a {
    color: #5a708c;
}

html.dark-mode .metismenu a:hover,
html.dark-mode .metismenu a:focus,
html.dark-mode .metismenu .mm-active>a {
    color: #e8edf5;
    background: rgba(124, 58, 237, 0.1);
    box-shadow: inset 3px 0 0 #7c3aed;
}

html.dark-mode .menu-title {
    color: #3a5070;
}

html.dark-mode .metismenu li ul.sub-menu a {
    color: #5a708c;
}

html.dark-mode .metismenu li ul.sub-menu a:hover {
    color: #c084fc;
    background: rgba(124, 58, 237, 0.08);
}

html.dark-mode #sidebar-menu ul li ul.sub-menu li.wa-sidebar-item-locked a.wa-sidebar-link-locked,
html.dark-mode #sidebar-menu ul li ul.sub-menu li.wa-sidebar-item-locked a.wa-sidebar-link-locked:hover {
    color: #737d91 !important;
    background-color: rgba(255, 255, 255, 0.035);
}

html.dark-mode #sidebar-menu .wa-sidebar-lock-icon {
    color: #737d91 !important;
}

html.dark-mode .card {
    background: #0d121e;
    border-color: #1e2a3c;
}

html.dark-mode .card-header,
html.dark-mode .card-footer {
    background: #111827;
    border-color: #1e2a3c;
}

html.dark-mode .table {
    color: #8899b4;
}

html.dark-mode .table thead th {
    background: #0d121e;
    border-bottom-color: #1e2a3c;
    color: #5a708c;
}

html.dark-mode .page-title-box .breadcrumb-item a {
    color: #5a708c;
}

html.dark-mode .page-title-box .breadcrumb-item.active {
    color: #7c3aed;
    text-shadow: 0 0 8px rgba(124, 58, 237, 0.3);
}

html.dark-mode h4, html.dark-mode h5, html.dark-mode h6 {
    color: #e8edf5;
}

html.dark-mode .modal-content {
    background: #0d121e;
    border-color: #1e2a3c;
}

html.dark-mode .modal-header,
html.dark-mode .modal-footer {
    border-color: #1e2a3c;
}

html.dark-mode .modal-title {
    color: #e8edf5;
}

html.dark-mode .btn-close {
    filter: invert(0.8);
}

html.dark-mode .ovpn-shell {
    --ovpn-ink: #e8edf5;
    --ovpn-muted: #5a708c;
    --ovpn-line: #1e2a3c;
    --ovpn-soft: #111827;
    --ovpn-primary: #7c3aed;
    --ovpn-primary-dark: #6d28d9;
    --ovpn-success: #00ff88;
    --ovpn-danger: #f87171;
}

html.dark-mode .ovpn-card,
html.dark-mode .ovpn-table-card,
html.dark-mode .ovpn-card-body,
html.dark-mode .table-core-wrap,
html.dark-mode .ovpn-card [style*="background: #ffffff"],
html.dark-mode .ovpn-card [style*="background:#ffffff"],
html.dark-mode .ovpn-card .bg-white {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .ovpn-card [style*="background: #f8fafc"] {
    background: #111827 !important;
}

html.dark-mode .ovpn-card [style*="border: 1px solid #e2e8f0"] {
    border-color: #1e2a3c !important;
}

html.dark-mode .ovpn-card [style*="border-bottom-color: #cbd5e1"] {
    border-bottom-color: #1e2a3c !important;
}

html.dark-mode .ovpn-card [style*="border-top-color: #e2e8f0"] {
    border-top-color: #1e2a3c !important;
}

/* ============================================================
   GLOBAL UNIFIED CARD & PANEL HEADERS (DARK MODE)
   ============================================================ */
html.dark-mode .table-core-head,
html.dark-mode .wa-panel-head,
html.dark-mode .ovpn-card-head,
html.dark-mode .radius-form-header,
html.dark-mode .radius-guide-banner-head,
html.dark-mode .radius-settings-header,
html.dark-mode .template-shell__head,
html.dark-mode .schedule-shell__head,
html.dark-mode .schedule-create-shell__head,
html.dark-mode .logs-shell__head,
html.dark-mode .contact-shell__head,
html.dark-mode .im-premium-card-header,
html.dark-mode .ovpn-card .p-3.border-bottom.bg-white,
html.dark-mode .mk-card__head,
html.dark-mode .aspi-card__header,
html.dark-mode .api-test-card__header,
html.dark-mode .blog-card__header,
html.dark-mode .card-header,
html.dark-mode .panel-header-dark,
html.dark-mode .card-header-dark {
    background: linear-gradient(135deg, #1a1040 0%, #0d0a1f 100%) !important;
    border-bottom: 1px solid #2d1f6e !important;
}

html.dark-mode .table-core-head h5, html.dark-mode .table-core-head p,
html.dark-mode .wa-panel-head h5, html.dark-mode .wa-panel-head p,
html.dark-mode .ovpn-card-head .ovpn-card-title, html.dark-mode .ovpn-card-head .ovpn-card-subtitle,
html.dark-mode .radius-form-header h5,
html.dark-mode .radius-settings-header h5, html.dark-mode .radius-settings-header p,
html.dark-mode .template-shell__head h5, html.dark-mode .template-shell__head p,
html.dark-mode .schedule-shell__head h5, html.dark-mode .schedule-shell__head p,
html.dark-mode .logs-shell__head h5, html.dark-mode .logs-shell__head p,
html.dark-mode .contact-shell__head h5, html.dark-mode .contact-shell__head p,
html.dark-mode .im-premium-card-title, html.dark-mode .im-premium-card-subtitle,
html.dark-mode .ovpn-card .p-3.border-bottom.bg-white h6,
html.dark-mode .ovpn-card .p-3.border-bottom.bg-white span,
html.dark-mode .mk-card__head h5,
html.dark-mode .aspi-card__header h5, html.dark-mode .aspi-card__header p,
html.dark-mode .api-test-card__header h5, html.dark-mode .api-test-card__header p,
html.dark-mode .blog-card__header h5,
html.dark-mode .card-header h5, html.dark-mode .card-header h4, html.dark-mode .card-header h3, html.dark-mode .card-header p,
html.dark-mode .panel-header-dark h5, html.dark-mode .panel-header-dark p,
html.dark-mode .card-header-dark h5, html.dark-mode .card-header-dark p {
    color: #ffffff !important;
}

html.dark-mode .table-core-head p,
html.dark-mode .wa-panel-head p,
html.dark-mode .ovpn-card-head .ovpn-card-subtitle,
html.dark-mode .radius-settings-header p,
html.dark-mode .template-shell__head p,
html.dark-mode .schedule-shell__head p,
html.dark-mode .schedule-create-shell__head p,
html.dark-mode .logs-shell__head p,
html.dark-mode .contact-shell__head p,
html.dark-mode .im-premium-card-subtitle,
html.dark-mode .ovpn-card .p-3.border-bottom.bg-white span.text-muted {
    color: #8899b4 !important;
}

html.dark-mode .ovpn-stat {
    background: #0d121e;
    border-color: #1e2a3c;
}

html.dark-mode .ovpn-stat-label {
    color: #5a708c;
}

html.dark-mode .ovpn-stat-value {
    color: #e8edf5;
}

html.dark-mode .ovpn-card-title,
html.dark-mode .ovpn-card-subtitle {
    color: #e8edf5;
}

html.dark-mode .ovpn-card-subtitle {
    color: #5a708c;
}

html.dark-mode .ovpn-order-launcher {
    background: #0d121e;
    border-color: #1e2a3c;
}

html.dark-mode .ovpn-order-launcher__title {
    color: #e8edf5;
}

html.dark-mode .ovpn-order-launcher__copy {
    color: #5a708c;
}

html.dark-mode .form-control,
html.dark-mode .form-select,
html.dark-mode .input-group-text {
    background: #111827;
    border-color: #1e2a3c;
    color: #8899b4;
}

html.dark-mode .form-control:focus,
html.dark-mode .form-select:focus {
    background: #111827;
    border-color: #7c3aed;
    color: #e8edf5;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}

html.dark-mode .form-control::placeholder {
    color: #5a708c;
}

html.dark-mode .text-dark {
    color: #e8edf5 !important;
}

html.dark-mode .text-muted {
    color: #5a708c !important;
}

html.dark-mode .border-bottom {
    border-bottom-color: #1e2a3c !important;
}

html.dark-mode .border-top {
    border-top-color: #1e2a3c !important;
}

/* Global Table Core Dark Mode */
html.dark-mode .table-core {
    --tc-surface: #0d121e;
    --tc-ink: #e8edf5;
    --tc-muted: #5a708c;
    --tc-line: #1e2a3c;
    --tc-line-soft: #111827;
    --tc-primary: #7c3aed;
    --tc-primary-dark: #6d28d9;
    --tc-pill-bg: #111827;
    --tc-pill-line: #1e2a3c;
    background: #0d121e;
}

html.dark-mode .table-core .table-core-shell {
    background: linear-gradient(180deg, #0d121e 0%, #0a0e17 100%) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4) !important;
    border-color: #1e2a3c !important;
}

html.dark-mode .table-core .table-core-shell::before {
    background: radial-gradient(circle, rgba(124, 58, 237, 0.15) 0%, rgba(124, 58, 237, 0) 68%) !important;
}

html.dark-mode .table-core .table-core-head {
    border-bottom: 1px solid #2d1f6e !important;
    background: linear-gradient(135deg, #1a1040 0%, #0d0a1f 100%) !important;
}

html.dark-mode .table-core .table-core-title h5 {
    color: #e8edf5 !important;
}

html.dark-mode .table-core .table-core-title p {
    color: #5a708c !important;
}

html.dark-mode .table-core .table-core-body {
    background: #0d121e !important;
}

html.dark-mode .table-core .table-core-filter-segment {
    background: #111827 !important;
    border-color: #1e2a3c !important;
}

html.dark-mode .table-core .table-core-filter-btn,
html.dark-mode .table-core-filter-btn {
    color: #5a708c !important;
}

html.dark-mode .table-core .table-core-filter-btn:hover,
html.dark-mode .table-core .table-core-filter-btn:focus {
    background: #111827 !important;
    color: #e8edf5 !important;
}

html.dark-mode .table-core .table-core-filter-btn.is-active,
html.dark-mode .table-core-filter-btn.is-active {
    color: #ffffff !important;
    background: #7c3aed !important;
    box-shadow: 0 4px 10px rgba(124, 58, 237, 0.3) !important;
}

html.dark-mode .table-core .table-core-search .form-control {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #e8edf5 !important;
}

html.dark-mode .table-core .table-core-search .input-group-text,
html.dark-mode .table-core-search .input-group-text {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #5a708c !important;
}

html.dark-mode .table-core .table-core-search .btn-light {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #5a708c !important;
}

html.dark-mode .table-core .table-core-search .btn-light:hover {
    background: #1e2a3c !important;
    color: #e8edf5 !important;
}

html.dark-mode .table-core .table-core-meta,
html.dark-mode .table-core-meta {
    color: #5a708c !important;
}

html.dark-mode .table-core .table-core-table {
    background: transparent !important;
}

html.dark-mode .table-core .table-core-table thead th {
    background: linear-gradient(135deg, #111827 0%, #1e2a3c 100%) !important;
    border-top: 1px solid #1e2a3c !important;
    border-bottom: 1px solid #1e2a3c !important;
    color: #a78bfa !important;
    text-shadow: none !important;
}

html.dark-mode .table-core .table-core-table thead th:first-child {
    border-left: 1px solid #1e2a3c !important;
}

html.dark-mode .table-core .table-core-table thead th:last-child {
    border-right: 1px solid #1e2a3c !important;
}

html.dark-mode .table-core .table-core-table td {
    background: #0d121e !important;
    color: #8899b4 !important;
    border-top-color: #1e2a3c !important;
    border-bottom-color: #1e2a3c !important;
}

html.dark-mode .table-core .table-core-table td:first-child {
    border-left-color: #1e2a3c !important;
}

html.dark-mode .table-core .table-core-table td:last-child {
    border-right-color: #1e2a3c !important;
}

html.dark-mode .table-core .table-core-table tbody tr {
    background: #0d121e !important;
}

html.dark-mode .table-core .table-core-table tbody tr:hover td,
html.dark-mode .ovpn-table-card .table-core-table tbody tr:hover td,
html.dark-mode .table-hover > tbody > tr:hover > td,
html.dark-mode .table-hover > tbody > tr:hover > th,
html.dark-mode table.dataTable tbody tr:hover td,
html.dark-mode table.dataTable tbody tr:hover th,
html.dark-mode table.dataTable tbody tr:hover > .sorting_1,
html.dark-mode table.dataTable tbody tr:hover > .sorting_2,
html.dark-mode table.dataTable tbody tr:hover > .sorting_3,
html.dark-mode table.dataTable tbody tr:hover > .dtr-control {
    background: #1c152d !important;
    box-shadow: inset 0 0 0 9999px #1c152d !important;
    border-top-color: #7c3aed !important;
    border-bottom-color: #7c3aed !important;
    color: #ffffff !important;
}

html.dark-mode .table-core .table-core-row-accent--wa:hover td:first-child {
    box-shadow: inset 3px 0 0 #00ff88, inset 0 0 0 9999px #1c152d !important;
}

html.dark-mode .table-core .table-core-row-accent--email:hover td:first-child {
    box-shadow: inset 3px 0 0 #7c3aed, inset 0 0 0 9999px #1c152d !important;
}

html.dark-mode .table-core .table-core-row-accent--system:hover td:first-child {
    box-shadow: inset 3px 0 0 #facc15, inset 0 0 0 9999px #1c152d !important;
}

html.dark-mode .table-core .table-core-table tbody tr:hover td:first-child,
html.dark-mode .ovpn-table-card .table-core-table tbody tr:hover td:first-child,
html.dark-mode .table-hover > tbody > tr:hover > td:first-child,
html.dark-mode table.dataTable tbody tr:hover td:first-child {
    background: #1c152d !important;
    box-shadow: inset 0 0 0 9999px #1c152d !important;
}

html.dark-mode .table-core .table-core-table tbody tr:hover td:first-child,
html.dark-mode .ovpn-table-card .table-core-table tbody tr:hover td:first-child {
    border-left-color: #7c3aed !important;
}

html.dark-mode .table-core .table-core-table tbody tr:hover td:last-child,
html.dark-mode .ovpn-table-card .table-core-table tbody tr:hover td:last-child {
    border-right-color: #7c3aed !important;
}

html.dark-mode .table-core .table-core-row-accent--wa td:first-child {
    box-shadow: inset 3px 0 0 #00ff88 !important;
}

html.dark-mode .table-core .table-core-row-accent--email td:first-child {
    box-shadow: inset 3px 0 0 #7c3aed !important;
}

html.dark-mode .table-core .table-core-row-accent--system td:first-child {
    box-shadow: inset 3px 0 0 #facc15 !important;
}

html.dark-mode .table-core .table-core-pill {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #8899b4 !important;
}

html.dark-mode .table-core .table-core-pill.mutasi-role-pill {
    background: rgba(124, 58, 237, 0.15) !important;
    color: #a78bfa !important;
}

html.dark-mode .table-core .table-core-action-btn {
    border-color: #1e2a3c !important;
    background: #111827 !important;
    color: #8899b4 !important;
}

html.dark-mode .table-core .table-core-action-btn:hover,
html.dark-mode .table-core .table-core-action-btn:focus {
    border-color: #1e2a3c !important;
    background: #1e2a3c !important;
    color: #e8edf5 !important;
}

html.dark-mode .table-core .table-core-actions .dropdown-menu {
    background: #111827 !important;
    border-color: #1e2a3c !important;
}

html.dark-mode .table-core .table-core-actions .dropdown-item {
    color: #8899b4 !important;
}

html.dark-mode .table-core .table-core-actions .dropdown-item:hover {
    background: #1e2a3c !important;
    color: #e8edf5 !important;
}

html.dark-mode .ovpn-legend {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
    color: #8899b4;
}

html.dark-mode .ovpn-legend-row span:not(.badge) {
    color: #8899b4 !important;
}

/* Captcha Wrappers & Components Dark Mode */
html.dark-mode .ovpn-captcha-wrap,
html.dark-mode .saldo-captcha-wrap,
html.dark-mode .radius-captcha-wrap {
    background: #111827 !important;
    border-color: #1e2a3c !important;
}

html.dark-mode .ovpn-captcha-title,
html.dark-mode .saldo-captcha-title {
    color: #e8edf5 !important;
}

html.dark-mode .ovpn-captcha-head,
html.dark-mode .saldo-captcha-head {
    color: #5a708c !important;
}

html.dark-mode .ovpn-captcha-refresh,
html.dark-mode .saldo-captcha-refresh {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
    color: #8899b4 !important;
}

html.dark-mode .ovpn-captcha-refresh:hover,
html.dark-mode .saldo-captcha-refresh:hover {
    background: #1e2a3c !important;
    color: #e8edf5 !important;
}

html.dark-mode .ovpn-captcha-img,
html.dark-mode .saldo-captcha-img,
html.dark-mode .radius-captcha-img {
    background: #ffffff !important; /* Mempertahankan latar putih gambar captcha agar tulisan hitam terbaca jelas */
    border-color: #1e2a3c !important;
}

html.dark-mode .alert {
    background: #0d121e;
    border-color: #1e2a3c;
    color: #8899b4;
}

html.dark-mode .alert-warning {
    background: rgba(250, 204, 21, 0.05);
    border-color: rgba(250, 204, 21, 0.2);
    color: #facc15;
}

html.dark-mode .alert-danger {
    background: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

html.dark-mode .alert-success {
    background: rgba(0, 255, 136, 0.05);
    border-color: rgba(0, 255, 136, 0.2);
    color: #00ff88;
}

html.dark-mode .alert-info {
    background: rgba(0, 240, 255, 0.05);
    border-color: rgba(0, 240, 255, 0.2);
    color: #00f0ff;
}

html.dark-mode .list-unstyled li {
    color: #8899b4 !important;
}

html.dark-mode .dropdown-menu {
    background: #111827;
    border-color: #1e2a3c;
}

html.dark-mode .dropdown-item {
    color: #8899b4;
}

html.dark-mode .dropdown-item:hover {
    background: #1e2a3c;
    color: #e8edf5;
}

html.dark-mode .dropdown-divider {
    border-top-color: #1e2a3c;
}

html.dark-mode .btn-outline-secondary {
    color: #5a708c;
    border-color: #1e2a3c;
}

html.dark-mode .btn-outline-secondary:hover {
    background: #1e2a3c;
    color: #e8edf5;
}

html.dark-mode .btn-light {
    background: #111827;
    border-color: #1e2a3c;
    color: #8899b4;
}

html.dark-mode .btn-light:hover {
    background: #1e2a3c;
}

html.dark-mode .btn-primary {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    border-color: #7c3aed;
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.3);
}

html.dark-mode .btn-primary:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.5);
}

html.dark-mode .btn-success {
    background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
    border-color: #00ff88;
    color: #0a0e17;
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.3);
}

html.dark-mode .btn-success:hover {
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
}

html.dark-mode .btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-color: #ef4444;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
}

html.dark-mode .btn-danger:hover {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}

html.dark-mode .btn-info {
    background: linear-gradient(135deg, #00f0ff 0%, #00b8d4 100%);
    border-color: #00f0ff;
    color: #0a0e17;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
}

html.dark-mode .btn-info:hover {
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
}

html.dark-mode .btn-warning {
    background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
    border-color: #facc15;
    color: #0a0e17;
    box-shadow: 0 0 12px rgba(250, 204, 21, 0.3);
}

html.dark-mode .btn-warning:hover {
    box-shadow: 0 0 20px rgba(250, 204, 21, 0.5);
}

html.dark-mode code {
    color: #f0abfc;
}

html.dark-mode .text-primary {
    color: #a78bfa !important;
}

html.dark-mode .text-success {
    color: #00ff88 !important;
}

html.dark-mode .text-warning {
    color: #facc15 !important;
}

html.dark-mode .text-danger {
    color: #f87171 !important;
}

html.dark-mode .text-info {
    color: #00f0ff !important;
}

html.dark-mode .badge.bg-primary-subtle {
    background: rgba(124, 58, 237, 0.15) !important;
    color: #a78bfa !important;
    border-color: rgba(124, 58, 237, 0.3) !important;
}

html.dark-mode .badge.bg-success-subtle {
    background: rgba(0, 255, 136, 0.12) !important;
    color: #00ff88 !important;
    border-color: rgba(0, 255, 136, 0.25) !important;
}

html.dark-mode .badge.bg-warning-subtle {
    background: rgba(250, 204, 21, 0.12) !important;
    color: #facc15 !important;
    border-color: rgba(250, 204, 21, 0.25) !important;
}

html.dark-mode .badge.bg-danger-subtle {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
}

html.dark-mode .bg-primary-subtle {
    background: rgba(124, 58, 237, 0.12) !important;
}

html.dark-mode .bg-success-subtle {
    background: rgba(0, 255, 136, 0.12) !important;
}

html.dark-mode .bg-warning-subtle {
    background: rgba(250, 204, 21, 0.12) !important;
}

html.dark-mode .bg-danger-subtle {
    background: rgba(239, 68, 68, 0.12) !important;
}

html.dark-mode .bg-white {
    background: #0d121e !important;
}

html.dark-mode .shadow-sm {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .progress,
html.dark-mode .table-striped>tbody>tr:nth-of-type(odd) {
    background: #111827;
}

html.dark-mode .table-striped>tbody>tr:nth-of-type(even) {
    background: #0d121e;
}

html.dark-mode .btn-outline-primary {
    color: #a78bfa;
    border-color: #7c3aed;
}

html.dark-mode .btn-outline-primary:hover {
    background: #7c3aed;
    color: #fff;
    box-shadow: 0 0 16px rgba(124, 58, 237, 0.4);
}

html.dark-mode .border {
    border-color: #1e2a3c !important;
}

html.dark-mode .nav-tabs {
    border-bottom-color: #1e2a3c;
}

html.dark-mode .nav-tabs .nav-link {
    color: #5a708c;
}

html.dark-mode .nav-tabs .nav-link:hover {
    border-color: #1e2a3c;
    color: #e8edf5;
}

html.dark-mode .nav-tabs .nav-link.active {
    background: #0d121e;
    border-color: #1e2a3c #1e2a3c #0d121e;
    color: #a78bfa;
    text-shadow: 0 0 8px rgba(167, 139, 250, 0.3);
}

html.dark-mode .nav-pills .nav-link.active {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.3);
}

html.dark-mode .page-link {
    background: #0d121e;
    border-color: #1e2a3c;
    color: #5a708c;
}

html.dark-mode .page-link:hover {
    background: #1e2a3c;
    border-color: #1e2a3c;
    color: #e8edf5;
}

html.dark-mode .page-item.active .page-link {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #fff;
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.3);
}

html.dark-mode .page-item.disabled .page-link {
    background: #0a0e17;
    border-color: #1e2a3c;
    color: #3a5070;
}

html.dark-mode footer {
    background: #0d121e;
    border-top-color: #1e2a3c;
    color: #5a708c;
}

html.dark-mode .card-body {
    color: #8899b4;
}

html.dark-mode .table-hover>tbody>tr:hover {
    background: rgba(124, 58, 237, 0.05);
}

html.dark-mode .table-bordered {
    border-color: #1e2a3c;
}

html.dark-mode .table-bordered td,
html.dark-mode .table-bordered th {
    border-color: #1e2a3c;
}

html.dark-mode .dataTables_wrapper .dataTables_length,
html.dark-mode .dataTables_wrapper .dataTables_filter,
html.dark-mode .dataTables_wrapper .dataTables_info,
html.dark-mode .dataTables_wrapper .dataTables_processing,
html.dark-mode .dataTables_wrapper .dataTables_paginate {
    color: #8899b4;
}

html.dark-mode .dataTables_wrapper .dataTables_length select,
html.dark-mode .dataTables_wrapper .dataTables_filter input {
    background: #111827;
    border-color: #1e2a3c;
    color: #8899b4;
}

html.dark-mode table.dataTable tbody tr {
    background: #0d121e;
}

html.dark-mode table.dataTable tbody tr:hover td {
    background-image: none !important;
    background-color: rgba(124, 58, 237, 0.12) !important;
}

html.dark-mode table.dataTable thead th {
    background: #0d121e;
    border-bottom-color: #1e2a3c;
    color: #5a708c;
}

html.dark-mode .dataTables_paginate .paginate_button {
    color: #5a708c !important;
}

html.dark-mode .dataTables_paginate .paginate_button.current {
    background: #7c3aed !important;
    border-color: #7c3aed !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.3) !important;
}

html.dark-mode .dataTables_paginate .paginate_button:hover {
    background: #1e2a3c !important;
    border-color: #1e2a3c !important;
    color: #e8edf5 !important;
}

html.dark-mode [style*="background: #fff3cd"],
html.dark-mode [style*="background:#fff3cd"] {
    background: rgba(250, 204, 21, 0.08) !important;
    border-color: rgba(250, 204, 21, 0.2) !important;
}

html.dark-mode [style*="color: #856404"] {
    color: #facc15 !important;
}

html.dark-mode [style*="background: #f8fafc"],
html.dark-mode [style*="background:#f8fafc"] {
    background: #111827 !important;
}

html.dark-mode [style*="background: #f1f5f9"],
html.dark-mode [style*="background:#f1f5f9"] {
    background: #0d121e !important;
}

html.dark-mode [style*="background: #eef2ff"],
html.dark-mode [style*="background:#eef2ff"] {
    background: rgba(124, 58, 237, 0.1) !important;
}

html.dark-mode [style*="border: 1px solid #e2e8f0"],
html.dark-mode [style*="border:1px solid #e2e8f0"],
html.dark-mode [style*="border: 1px solid #e5e7eb"],
html.dark-mode [style*="border:1px solid #e5e7eb"] {
    border-color: #1e2a3c !important;
}

html.dark-mode [style*="color: #1e293b"] {
    color: #e8edf5 !important;
}

html.dark-mode [style*="color: #334155"] {
    color: #8899b4 !important;
}

html.dark-mode [style*="color: #64748b"] {
    color: #5a708c !important;
}

html.dark-mode [style*="color: #0f172a"] {
    color: #e8edf5 !important;
}

html.dark-mode [style*="background: #ffffff"],
html.dark-mode [style*="background:#ffffff"],
html.dark-mode [style*="background:white"],
html.dark-mode [style*="background: white"] {
    background: #0d121e !important;
}

html.dark-mode [style*="background: #2563eb"],
html.dark-mode [style*="background:#2563eb"] {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
}

html.dark-mode [style*="background: #1d4ed8"],
html.dark-mode [style*="background:#1d4ed8"] {
    background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%) !important;
}

html.dark-mode [style*="color: #2563eb"],
html.dark-mode [style*="color:#2563eb"] {
    color: #a78bfa !important;
}

html.dark-mode [style*="color: #1d4ed8"],
html.dark-mode [style*="color:#1d4ed8"] {
    color: #8b5cf6 !important;
}

html.dark-mode [style*="background: #ecfdf5"],
html.dark-mode [style*="background:#ecfdf5"] {
    background: rgba(0, 255, 136, 0.08) !important;
}

html.dark-mode [style*="color: #059669"] {
    color: #00ff88 !important;
}

html.dark-mode [style*="background: #fef3c7"],
html.dark-mode [style*="background:#fef3c7"] {
    background: rgba(250, 204, 21, 0.08) !important;
}

html.dark-mode [style*="color: #92400e"],
html.dark-mode [style*="color:#92400e"] {
    color: #facc15 !important;
}

html.dark-mode [style*="color: #b45309"],
html.dark-mode [style*="color:#b45309"] {
    color: #fbbf24 !important;
}

html.dark-mode [style*="background: #fee2e2"],
html.dark-mode [style*="background:#fee2e2"] {
    background: rgba(239, 68, 68, 0.08) !important;
}

html.dark-mode [style*="color: #dc2626"],
html.dark-mode [style*="color:#dc2626"] {
    color: #f87171 !important;
}

html.dark-mode [style*="background: #dbeafe"],
html.dark-mode [style*="background:#dbeafe"] {
    background: rgba(124, 58, 237, 0.08) !important;
}

html.dark-mode [style*="color: #1e40af"],
html.dark-mode [style*="color:#1e40af"] {
    color: #a78bfa !important;
}

html.dark-mode .text-bg-primary {
    background: #7c3aed !important;
    color: #fff !important;
}

html.dark-mode .text-bg-success {
    background: #00ff88 !important;
    color: #0a0e17 !important;
}

html.dark-mode .text-bg-warning {
    background: #facc15 !important;
    color: #0a0e17 !important;
}

html.dark-mode .text-bg-danger {
    background: #ef4444 !important;
    color: #fff !important;
}

html.dark-mode .bg-light {
    background: #111827 !important;
}

html.dark-mode .vr {
    background-color: #1e2a3c;
}

html.dark-mode hr {
    border-top-color: #1e2a3c;
}

html.dark-mode .rounded-3 {
    border-color: #1e2a3c;
}

html.dark-mode .shadow {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .shadow-lg {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode [style*="color: #f59e0b"],
html.dark-mode [style*="color:#f59e0b"] {
    color: #fbbf24 !important;
}

html.dark-mode [style*="color: #d97706"],
html.dark-mode [style*="color:#d97706"] {
    color: #f59e0b !important;
}

html.dark-mode [style*="background: #f1f3fa"],
html.dark-mode [style*="background:#f1f3fa"] {
    background: #111827 !important;
}

html.dark-mode [style*="background: #dbe7f6"],
html.dark-mode [style*="background:#dbe7f6"] {
    background: #111827 !important;
}

html.dark-mode [style*="background: #ffeeba"],
html.dark-mode [style*="background:#ffeeba"] {
    background: rgba(250, 204, 21, 0.08) !important;
}

html.dark-mode [style*="color: #d9480f"],
html.dark-mode [style*="color:#d9480f"] {
    color: #f87171 !important;
}

html.dark-mode [style*="color: #6b7280"],
html.dark-mode [style*="color:#6b7280"] {
    color: #5a708c !important;
}

html.dark-mode [style*="color: #1e3a8a"],
html.dark-mode [style*="color:#1e3a8a"] {
    color: #a78bfa !important;
}

html.dark-mode [style*="background: #f0fdf4"],
html.dark-mode [style*="background:#f0fdf4"] {
    background: rgba(0, 255, 136, 0.08) !important;
}

html.dark-mode [style*="color: #166534"],
html.dark-mode [style*="color:#166534"] {
    color: #00ff88 !important;
}

html.dark-mode [style*="background: #eff6ff"],
html.dark-mode [style*="background:#eff6ff"] {
    background: rgba(0, 240, 255, 0.06) !important;
}

html.dark-mode [style*="background: #fef2f2"],
html.dark-mode [style*="background:#fef2f2"] {
    background: rgba(239, 68, 68, 0.08) !important;
}

html.dark-mode [style*="color: #991b1b"],
html.dark-mode [style*="color:#991b1b"] {
    color: #f87171 !important;
}

html.dark-mode [style*="background: #f0f9ff"],
html.dark-mode [style*="background:#f0f9ff"] {
    background: rgba(0, 240, 255, 0.06) !important;
}

html.dark-mode [style*="color: #075985"],
html.dark-mode [style*="color:#075985"] {
    color: #00f0ff !important;
}

html.dark-mode [style*="background: #fff7ed"],
html.dark-mode [style*="background:#fff7ed"] {
    background: rgba(250, 204, 21, 0.06) !important;
}

html.dark-mode [style*="background: #fffbeb"],
html.dark-mode [style*="background:#fffbeb"] {
    background: rgba(250, 204, 21, 0.05) !important;
}

html.dark-mode [style*="border: 1px solid #fde68a"],
html.dark-mode [style*="border:1px solid #fde68a"],
html.dark-mode [style*="border: 1px solid #fef3c7"] {
    border-color: rgba(250, 204, 21, 0.2) !important;
}

html.dark-mode [style*="color: #9a3412"],
html.dark-mode [style*="color:#9a3412"] {
    color: #fbbf24 !important;
}

html.dark-mode [style*="border-left: 3px solid"] {
    border-left-color: #7c3aed !important;
}

html.dark-mode [style*="border-left:2px solid"] {
    border-left-color: #7c3aed !important;
}

html.dark-mode .list-group-item {
    background: #0d121e;
    border-color: #1e2a3c;
    color: #8899b4;
}

html.dark-mode .list-group-item:hover {
    background: #111827;
}

html.dark-mode .list-group-item.active {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    border-color: #7c3aed;
    color: #fff;
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.3);
}

html.dark-mode .accordion-item {
    background: #0d121e;
    border-color: #1e2a3c;
}

html.dark-mode .accordion-button {
    background: #0d121e;
    color: #e8edf5;
}

html.dark-mode .accordion-button:not(.collapsed) {
    background: #111827;
    color: #a78bfa;
    box-shadow: 0 0 8px rgba(167, 139, 250, 0.2);
}

html.dark-mode .accordion-button::after {
    filter: invert(0.7);
}

html.dark-mode .accordion-body {
    color: #8899b4;
}

html.dark-mode .toast {
    background: #0d121e;
    border-color: #1e2a3c;
}

html.dark-mode .toast-header {
    background: #111827;
    border-bottom-color: #1e2a3c;
    color: #e8edf5;
}

html.dark-mode .toast-body {
    color: #8899b4;
}

html.dark-mode .popover {
    background: #0d121e;
    border-color: #1e2a3c;
}

html.dark-mode .popover-header {
    background: #111827;
    border-bottom-color: #1e2a3c;
    color: #e8edf5;
}

html.dark-mode .popover-body {
    color: #8899b4;
}

html.dark-mode .popover .popover-arrow::after {
    border-top-color: #0d121e;
}

html.dark-mode pre {
    background: #0a0e17;
    border-color: #1e2a3c;
    color: #8899b4;
}

html.dark-mode kbd {
    background: #111827;
    border-color: #1e2a3c;
    color: #8899b4;
}

html.dark-mode ::-webkit-scrollbar {
    background: #0a0e17;
}

html.dark-mode ::-webkit-scrollbar-thumb {
    background: #1e2a3c;
    border-radius: 6px;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #1e2a3c;
}

html.dark-mode .form-check-input {
    background-color: #111827;
    border-color: #1e2a3c;
}

html.dark-mode .form-check-input:checked {
    background-color: #7c3aed;
    border-color: #7c3aed;
}

html.dark-mode .form-switch .form-check-input {
    background-color: #1e2a3c;
}

html.dark-mode .form-switch .form-check-input:checked {
    background-color: #7c3aed;
}

html.dark-mode .form-label {
    color: #8899b4;
}

html.dark-mode .form-text {
    color: #5a708c;
}

html.dark-mode .input-group .btn {
    border-color: #1e2a3c;
}

html.dark-mode select option {
    background: #0d121e;
    color: #8899b4;
}

html.dark-mode .text-secondary {
    color: #5a708c !important;
}

html.dark-mode .bg-secondary {
    background: #1e2a3c !important;
}

html.dark-mode .bg-dark {
    background: #0a0e17 !important;
}

html.dark-mode .bg-body {
    background: #0a0e17 !important;
}

html.dark-mode .bg-body-tertiary {
    background: #0d121e !important;
}

html.dark-mode .bg-body-secondary {
    background: #111827 !important;
}

html.dark-mode .bg-opacity-10 {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

html.dark-mode .bg-opacity-25 {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-mode .breadcrumb {
    background: transparent;
}

html.dark-mode .breadcrumb-item + .breadcrumb-item::before {
    color: #5a708c;
}

html.dark-mode .close, 
html.dark-mode .btn-close-white {
    filter: invert(0.8);
}

html.dark-mode .wa-modern {
    --wa-panel-border: #1e2a3c;
    --wa-panel-shadow: 0 18px 42px rgba(0, 0, 0, 0.4);
    --wa-ink: #e8edf5;
    --wa-muted: #5a708c;
    --wa-surface: #0d121e;
    --wa-soft: #111827;
    --wa-green: #00ff88;
    --wa-green-soft: rgba(0, 255, 136, 0.08);
    --wa-red: #f87171;
    --wa-red-soft: rgba(239, 68, 68, 0.08);
    --wa-blue: #a78bfa;
    --wa-blue-soft: rgba(124, 58, 237, 0.1);
    --wa-gold: #facc15;
    --wa-gold-soft: rgba(250, 204, 21, 0.08);
    --wa-forest: #a78bfa;
    --wa-leaf: #1e2a3c;
    --wa-leaf-deep: #2a364a;
    --wa-code-bg: #0a0e17;
    --wa-code-soft: #111827;
    --wa-code-fg: #8899b4;
}

html.dark-mode .wa-modern .wa-panel-head {
    background: linear-gradient(135deg, #0d121e 0%, #111827 100%);
}

html.dark-mode .wa-modern .wa-panel--gateway {
    background:
        radial-gradient(circle at top left, rgba(124, 58, 237, 0.12), transparent 35%),
        radial-gradient(circle at top right, rgba(167, 139, 250, 0.08), transparent 40%),
        linear-gradient(180deg, #0d121e 0%, #0a0e17 30%, #0a0e17 100%);
}

html.dark-mode .wa-modern .wa-panel--gateway .wa-panel-head {
    background: linear-gradient(135deg, #0d121e 0%, #111827 55%, #0d121e 100%);
    border-bottom-color: #1e2a3c;
}

html.dark-mode .wa-modern .wa-panel--gateway .wa-title-icon {
    color: #a78bfa;
}

html.dark-mode .wa-modern .wa-panel--gateway::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
}

html.dark-mode .wa-modern .wa-panel--tester {
    background: #0d121e;
    border-color: #1e2a3c;
}

html.dark-mode .wa-modern .quick-step-item::before {
    background-color: #1e2a3c;
}

html.dark-mode .wa-modern .quick-step-badge {
    background: #111827;
    border-color: #1e2a3c;
    color: #8899b4;
}

html.dark-mode .wa-modern .quick-step-text h6 {
    color: #e8edf5;
}

html.dark-mode .wa-modern .wa-panel-body {
    background: #0d121e;
}

html.dark-mode .ovn-top-announcement-bar--impersonation {
    background: linear-gradient(90deg, rgba(250, 204, 21, 0.1) 0%, rgba(250, 204, 21, 0.05) 100%) !important;
    border-bottom-color: rgba(250, 204, 21, 0.2) !important;
    color: #fbbf24 !important;
}

html.dark-mode .ovn-top-announcement-bar--mikrotik {
    background: linear-gradient(90deg, rgba(0, 240, 255, 0.08) 0%, rgba(0, 240, 255, 0.04) 100%) !important;
    border-bottom-color: rgba(0, 240, 255, 0.2) !important;
    color: #00f0ff !important;
}

html.dark-mode .home-modern {
    --hd-bg: #0a0e17;
    --hd-card: #0d121e;
    --hd-border: #1e2a3c;
    --hd-title: #e8edf5;
    --hd-text: #8899b4;
    --hd-muted: #5a708c;
    background: var(--hd-bg);
}

html.dark-mode .hd-promo-card__features {
    background: #0d121e;
}

html.dark-mode .hd-promo-card__features span {
    color: #00f0ff;
}

html.dark-mode .hd-promo-card__features span i {
    color: #00f0ff;
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
}

html.dark-mode .hd-promo-card--radius .hd-promo-card__head {
    background: linear-gradient(135deg, #0d121e 0%, #1a1220 100%);
    border-bottom-color: #7c3aed;
    box-shadow: inset 0 -1px 0 rgba(124, 58, 237, 0.3);
}

html.dark-mode .hd-promo-card--wa .hd-promo-card__head {
    background: linear-gradient(135deg, #0d121e 0%, #0a1a18 100%);
    border-bottom-color: #00ff88;
    box-shadow: inset 0 -1px 0 rgba(0, 255, 136, 0.3);
}

html.dark-mode .hd-promo-card__trial {
    background: rgba(124, 58, 237, 0.2);
    color: #c084fc;
    border-color: rgba(124, 58, 237, 0.4);
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.2);
}

html.dark-mode .hd-promo-card__badge-new {
    background: rgba(0, 255, 136, 0.15);
    color: #00ff88;
    border-color: rgba(0, 255, 136, 0.3);
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.15);
}

html.dark-mode .hd-promo-card__btn--amber {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #fff;
    border-color: #7c3aed;
    box-shadow: 0 0 16px rgba(124, 58, 237, 0.3);
}

html.dark-mode .hd-promo-card__btn--amber:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 0 24px rgba(124, 58, 237, 0.5);
}

html.dark-mode .hd-promo-card__btn--emerald {
    background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
    color: #0a0e17;
    border-color: #00ff88;
    box-shadow: 0 0 16px rgba(0, 255, 136, 0.3);
}

html.dark-mode .hd-promo-card__btn--emerald:hover {
    box-shadow: 0 0 24px rgba(0, 255, 136, 0.5);
}

html.dark-mode .hd-promo-card__emoji {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    box-shadow: 0 0 16px rgba(124, 58, 237, 0.4);
}

html.dark-mode .hd-promo-card__emoji--green {
    background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
    box-shadow: 0 0 16px rgba(0, 255, 136, 0.4);
}

html.dark-mode .hd-promo-card__title {
    color: #e8edf5;
}

html.dark-mode .hd-promo-card__sub {
    color: #8899b4;
}

html.dark-mode .hd-readme-card__head {
    background: linear-gradient(135deg, #0d121e 0%, #111827 100%);
}

html.dark-mode .hd-readme-card__yt {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

html.dark-mode .hd-readme-card__yt:hover {
    background: rgba(239, 68, 68, 0.2);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.2);
}

html.dark-mode .hd-account-card__head {
    background: linear-gradient(135deg, #0d121e 0%, #111827 100%);
}

html.dark-mode .hd-voucher--active {
    background: linear-gradient(135deg, #0a1a12 0%, #0d2618 100%);
    border-color: #00ff88;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.1), inset 0 0 20px rgba(0, 255, 136, 0.03);
}

html.dark-mode .hd-voucher--scheduled {
    background: linear-gradient(135deg, #0d121e 0%, #121a20 100%);
    border-color: #3b82f6;
}

html.dark-mode .hd-voucher--none {
    background: #0d121e;
    border-color: #1e2a3c;
}

html.dark-mode .hd-voucher__badge {
    background: rgba(0, 255, 136, 0.15);
    color: #00ff88;
    border-color: rgba(0, 255, 136, 0.3);
}

html.dark-mode .hd-voucher__badge--muted {
    background: #1e2a3c;
    color: #5a708c;
    border-color: #1e2a3c;
}

html.dark-mode .hd-voucher__amount {
    color: #00ff88;
    text-shadow: 0 0 12px rgba(0, 255, 136, 0.4);
}

html.dark-mode .hd-voucher__meta span i {
    color: #00ff88;
}

html.dark-mode .hd-voucher__status {
    background: #1e2a3c;
    color: #8899b4;
    border-color: #1e2a3c;
}

html.dark-mode .hd-voucher__empty {
    color: #5a708c;
}

html.dark-mode .hd-security-tip {
    background: #0d121e;
    border-color: #7c3aed;
    box-shadow: 0 0 16px rgba(124, 58, 237, 0.1);
}

html.dark-mode .hd-security-tip__icon {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.4);
}

html.dark-mode .hd-security-tip__body strong {
    color: #c084fc;
}

html.dark-mode .hd-security-tip__body > span {
    color: #8899b4;
}

html.dark-mode .hd-security-tip__chips code {
    background: #0a0e17;
    color: #00f0ff;
    border-color: rgba(0, 240, 255, 0.3);
    box-shadow: 0 0 6px rgba(0, 240, 255, 0.1);
}

html.dark-mode .hd-gw-bar {
    background: #0d121e;
    border-color: #1e2a3c;
}

html.dark-mode .hd-gw-bar__icon {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.3);
}

html.dark-mode .hd-gw-bar__live {
    background: rgba(0, 255, 136, 0.1);
    color: #00ff88;
    border-color: rgba(0, 255, 136, 0.3);
}

html.dark-mode .hd-gw-bar__dot {
    background: #00ff88;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
}

html.dark-mode .hd-gw-item.is-off {
    background: rgba(239, 68, 68, 0.05);
}

html.dark-mode .hd-gw-item__status {
    color: #00ff88;
}

html.dark-mode .hd-gw-item.is-off .hd-gw-item__status {
    color: #f87171;
}

html.dark-mode .hd-gw-item__dot.is-on {
    background: #00ff88;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
}

html.dark-mode .hd-gw-item__dot.is-off {
    background: #f87171;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

html.dark-mode .hd-stat-card {
    background: #0d121e;
    border-color: #1e2a3c;
}

html.dark-mode .hd-stat-card--saldo .hd-stat-card__icon {
    background: linear-gradient(135deg, #1a1a3a 0%, #0d122e 100%);
    color: #00f0ff;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

html.dark-mode .hd-stat-card--member .hd-stat-card__icon {
    background: linear-gradient(135deg, #2a0d3a 0%, #1a0d2e 100%);
    color: #c084fc;
    box-shadow: 0 0 10px rgba(192, 132, 252, 0.2);
}

html.dark-mode .hd-stat-card--since .hd-stat-card__icon {
    background: linear-gradient(135deg, #0d2a1a 0%, #0d1e12 100%);
    color: #00ff88;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.2);
}

html.dark-mode .hd-stat-card--lastlogin .hd-stat-card__icon {
    background: linear-gradient(135deg, #2a2a0d 0%, #1e1e0d 100%);
    color: #facc15;
    box-shadow: 0 0 10px rgba(250, 204, 21, 0.2);
}

html.dark-mode .hd-stat-card__action {
    background: #1e2a3c;
    border-color: #1e2a3c;
    color: #5a708c;
}

html.dark-mode .hd-stat-card__action:hover {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #fff;
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.4);
}

html.dark-mode .hd-readme-card__body p {
    color: #8899b4;
}

html.dark-mode .hd-promo-card__body-text p {
    color: #8899b4;
}

html.dark-mode .hd-promo-card__body-text p strong {
    color: #00ff88;
}

html.dark-mode .hd-logs-card {
    background: #0d121e;
    border-color: #1e2a3c;
}

html.dark-mode .hd-logs-card__head {
    background: linear-gradient(135deg, #1a1040 0%, #0d0a2e 100%);
    border-bottom-color: #4f46e5;
}

html.dark-mode .hd-logs-card__head h5 i {
    color: #a5b4fc;
    filter: drop-shadow(0 0 6px rgba(165, 180, 252, 0.4));
}

html.dark-mode .hd-logs-card__count {
    background: rgba(165, 180, 252, 0.1);
    color: #a5b4fc;
    border-color: rgba(165, 180, 252, 0.2);
}

html.dark-mode .hd-log-item::before {
    background: #1e2a3c;
}

html.dark-mode .hd-log-item__dot {
    background: #7c3aed;
    border-color: #0d121e;
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.6);
}

html.dark-mode .hd-log-item.is-latest .hd-log-item__dot {
    background: #a78bfa;
    box-shadow: 0 0 12px rgba(167, 139, 250, 0.8);
}

html.dark-mode .hd-log-item__content {
    background: #111827;
    border-color: #1e2a3c;
}

html.dark-mode .hd-log-item.is-latest .hd-log-item__content {
    background: #1a1040;
    border-color: #4f46e5;
    box-shadow: 0 0 16px rgba(79, 70, 229, 0.15);
}

html.dark-mode .hd-log-item__date {
    color: #e8edf5;
}

html.dark-mode .hd-log-item__tag--major {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.3);
}

html.dark-mode .hd-log-item__tag--feature {
    background: rgba(0, 255, 136, 0.1);
    color: #00ff88;
    border-color: rgba(0, 255, 136, 0.2);
}

html.dark-mode .hd-log-item__tag--fix {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, 0.3);
}

html.dark-mode .hd-log-item__tag--update {
    background: #1e2a3c;
    color: #8899b4;
    border-color: #1e2a3c;
}

html.dark-mode .hd-log-item__list {
    color: #8899b4;
}

html.dark-mode .hd-stat-card__value {
    color: #e8edf5;
}

/* Global JConfirm Modals Dark Mode Neon */
html.dark-mode .jconfirm .jconfirm-bg {
    background-color: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(6px) !important;
}

html.dark-mode .jconfirm .jconfirm-box {
    background: #0d121e !important;
    border: 1px solid #1e2a3c !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
    color: #8899b4 !important;
}

html.dark-mode .jconfirm .jconfirm-title-c {
    border-bottom: 1px solid #1e2a3c !important;
}

html.dark-mode .jconfirm .jconfirm-title {
    color: #e8edf5 !important;
}

html.dark-mode .jconfirm .jconfirm-content {
    color: #8899b4 !important;
}

html.dark-mode .jconfirm .jconfirm-buttons-container,
html.dark-mode .jconfirm .jconfirm-buttons {
    border-top: 1px solid #1e2a3c !important;
    background: #0d121e !important;
}

html.dark-mode .jconfirm .jconfirm-icon-c {
    color: #a78bfa !important;
}

html.dark-mode .jconfirm .jconfirm-buttons .btn {
    border-radius: 9px !important;
    font-weight: 700 !important;
    font-size: .75rem !important;
}

html.dark-mode .jconfirm .jconfirm-buttons .btn.btn-blue,
html.dark-mode .jconfirm .jconfirm-buttons .btn.btn-primary {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3) !important;
}

html.dark-mode .jconfirm .jconfirm-buttons .btn.btn-red,
html.dark-mode .jconfirm .jconfirm-buttons .btn.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

html.dark-mode .jconfirm .jconfirm-buttons .btn.btn-orange,
html.dark-mode .jconfirm .jconfirm-buttons .btn.btn-warning {
    background: linear-gradient(135deg, #facc15 0%, #eab308 100%) !important;
    border: none !important;
    color: #0a0e17 !important;
    box-shadow: 0 4px 12px rgba(250, 204, 21, 0.3) !important;
}

html.dark-mode .jconfirm .jconfirm-buttons .btn.btn-green,
html.dark-mode .jconfirm .jconfirm-buttons .btn.btn-success {
    background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%) !important;
    border: none !important;
    color: #0a0e17 !important;
    box-shadow: 0 4px 12px rgba(0, 255, 136, 0.3) !important;
}

html.dark-mode .jconfirm .jconfirm-buttons .btn.btn-default,
html.dark-mode .jconfirm .jconfirm-buttons .btn.btn-secondary,
html.dark-mode .jconfirm .jconfirm-buttons .btn.btn-outline-secondary {
    background: transparent !important;
    border: 1px solid #7c3aed !important;
    color: #a78bfa !important;
}

html.dark-mode .jconfirm .jconfirm-buttons .btn.btn-default:hover,
html.dark-mode .jconfirm .jconfirm-buttons .btn.btn-secondary:hover,
html.dark-mode .jconfirm .jconfirm-buttons .btn.btn-outline-secondary:hover {
    background: #7c3aed !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.4) !important;
}

html.dark-mode .hd-notice__text,
html.dark-mode .hd-notice__text + ul {
    color: #8899b4;
}

html.dark-mode .hd-notice__code {
    background: #1e2a3c !important;
    color: #00f0ff !important;
    border-color: rgba(0, 240, 255, 0.3) !important;
}

html.dark-mode .hd-popup {
    color: #e8edf5;
}

html.dark-mode .hd-popup__title {
    color: #e8edf5;
}

html.dark-mode .hd-popup__text {
    color: #8899b4;
}

html.dark-mode .hd-popup__amount {
    background: #111827;
    border-color: #1e2a3c;
}

html.dark-mode .hd-popup__amount span {
    color: #5a708c;
}

html.dark-mode .hd-popup__amount strong {
    color: #00f0ff;
    text-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
}

html.dark-mode .hd-popup__meta span {
    background: #111827;
    border-color: #1e2a3c;
    color: #8899b4;
}

html.dark-mode .hd-logs-card__head h5 {
    filter: drop-shadow(0 0 8px rgba(165, 180, 252, 0.3));
}

html.dark-mode .hd-gw-bar__title,
html.dark-mode .hd-gw-item__name {
    color: #e8edf5;
}

html.dark-mode .hd-notice__code {
    background: #1e2a3c !important;
    color: #00f0ff !important;
    border-color: rgba(0, 240, 255, 0.3) !important;
}

html.dark-mode .hd-popup__icon {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.4);
}

html.dark-mode .hd-popup__badge {
    background: rgba(124, 58, 237, 0.15);
    border-color: rgba(124, 58, 237, 0.3);
    color: #c084fc;
}

html.dark-mode .hd-popup__meta span i {
    color: #a78bfa;
}

html.dark-mode .hd-popup__wait {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.3);
    color: #c084fc;
}

/* Style vpn code badges in dark mode */
html.dark-mode .ovpn-user-code,
html.dark-mode .ovpn-password-code,
html.dark-mode .ovpn-caller-code {
    border-color: #1e2a3c !important;
    background: #111827 !important;
    color: #a78bfa !important;
}

/* Fix header & body corners overflow due to overflow:visible */
.ovpn-table-card .ovpn-card-head {
    border-top-left-radius: inherit !important;
    border-top-right-radius: inherit !important;
}
.ovpn-table-card .ovpn-card-body {
    border-bottom-left-radius: inherit !important;
    border-bottom-right-radius: inherit !important;
}

/* Dark Mode Neon Badges & Expiry Badges */
html.dark-mode .ovpn-expiry-badge {
    border-color: #1e2a3c !important;
}
html.dark-mode .ovpn-expiry-badge--safe {
    background: rgba(0, 255, 136, 0.12) !important;
    color: #00ff88 !important;
    border-color: rgba(0, 255, 136, 0.3) !important;
}
html.dark-mode .ovpn-expiry-badge--warning {
    background: rgba(250, 204, 21, 0.12) !important;
    color: #facc15 !important;
    border-color: rgba(250, 204, 21, 0.3) !important;
}
html.dark-mode .ovpn-expiry-badge--danger {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

html.dark-mode .badge.bg-success {
    background-color: rgba(0, 255, 136, 0.12) !important;
    color: #00ff88 !important;
    border: 1px solid rgba(0, 255, 136, 0.3) !important;
}
html.dark-mode .badge.bg-danger {
    background-color: rgba(239, 68, 68, 0.12) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}
html.dark-mode .badge.bg-info {
    background-color: rgba(0, 240, 255, 0.12) !important;
    color: #00f0ff !important;
    border: 1px solid rgba(0, 240, 255, 0.3) !important;
}
html.dark-mode .badge.bg-warning {
    background-color: rgba(250, 204, 21, 0.12) !important;
    color: #facc15 !important;
    border: 1px solid rgba(250, 204, 21, 0.3) !important;
}
html.dark-mode .badge.bg-dark {
    background-color: #111827 !important;
    color: #8899b4 !important;
    border: 1px solid #1e2a3c !important;
}

/* Revert datatable wrapper backgrounds */
html.dark-mode .dataTables_wrapper,
html.dark-mode .dataTables_paginate {
    background: transparent !important;
}

/* OVPN Access Modal Dark Mode Neon Override */
html.dark-mode .ovpn-access-modal .modal-content {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .ovpn-access-modal .modal-header {
    background: linear-gradient(135deg, #111827 0%, #0d121e 100%) !important;
    border-bottom-color: #1e2a3c !important;
}

html.dark-mode .ovpn-access-modal .modal-title {
    color: #e8edf5 !important;
}

html.dark-mode .ovpn-access-modal__eyebrow {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #a78bfa !important;
}

html.dark-mode .ovpn-access-modal__subtitle {
    color: #5a708c !important;
}

html.dark-mode .ovpn-access-modal__hero {
    background: #111827 !important;
    border-color: #1e2a3c !important;
}

html.dark-mode .ovpn-access-modal__label {
    color: #5a708c !important;
}

html.dark-mode .ovpn-access-modal__user-row strong {
    color: #e8edf5 !important;
}

html.dark-mode .ovpn-access-copy-pill,
html.dark-mode .ovpn-access-modal__count {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
    color: #8899b4 !important;
}

html.dark-mode .ovpn-access-modal__section-title {
    color: #a78bfa !important;
}

html.dark-mode .ovpn-access-modal__row {
    background: #111827 !important;
    border-color: #1e2a3c !important;
}

html.dark-mode .ovpn-access-modal__row-index {
    background: #0d121e !important;
    color: #8899b4 !important;
}

html.dark-mode .ovpn-access-modal__endpoint {
    color: #e8edf5 !important;
}

html.dark-mode .ovpn-access-modal__meta {
    color: #5a708c !important;
}

html.dark-mode .ovpn-access-modal__badge {
    background: rgba(124, 58, 237, 0.12) !important;
    color: #a78bfa !important;
}

html.dark-mode .ovpn-access-modal__badge--winbox,
html.dark-mode .ovpn-access-modal__badge--api {
    background: rgba(0, 255, 136, 0.12) !important;
    color: #00ff88 !important;
}

html.dark-mode .ovpn-access-modal__badge--ssh,
html.dark-mode .ovpn-access-modal__badge--telnet {
    background: rgba(250, 204, 21, 0.12) !important;
    color: #facc15 !important;
}

html.dark-mode .ovpn-access-modal__badge--web,
html.dark-mode .ovpn-access-modal__badge--custom {
    background: rgba(0, 240, 255, 0.12) !important;
    color: #00f0ff !important;
}

html.dark-mode .ovpn-access-modal__copy-btn {
    border-color: #1e2a3c !important;
    background: #0d121e !important;
    color: #8899b4 !important;
}

html.dark-mode .ovpn-access-modal__copy-btn:hover {
    background: #7c3aed !important;
    border-color: #7c3aed !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.4) !important;
}

html.dark-mode .ovpn-access-modal__empty,
html.dark-mode .ovpn-access-modal__footnote {
    background: #111827 !important;
    color: #5a708c !important;
}

html.dark-mode .ovpn-access-modal__close-btn {
    background: transparent !important;
    border: 1px solid #7c3aed !important;
    color: #a78bfa !important;
}

html.dark-mode .ovpn-access-modal__close-btn:hover {
    background: #7c3aed !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.4) !important;
}

/* OVPN Order Modal Dark Mode Neon Override */
html.dark-mode .ovpn-order-modal .modal-content {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .ovpn-order-modal .modal-header {
    background: linear-gradient(135deg, #111827 0%, #0d121e 100%) !important;
    border-bottom-color: #1e2a3c !important;
}

html.dark-mode .ovpn-order-modal .modal-title {
    color: #e8edf5 !important;
}

html.dark-mode .ovpn-order-modal__eyebrow {
    background: rgba(124, 58, 237, 0.12) !important;
    border-color: rgba(124, 58, 237, 0.3) !important;
    color: #a78bfa !important;
}

html.dark-mode .ovpn-order-modal__subtitle {
    color: #5a708c !important;
}

html.dark-mode .ovpn-order-modal .modal-body {
    background: #0d121e !important;
}

html.dark-mode .ovpn-order-modal .alert {
    background: #111827 !important;
    border-color: #1e2a3c !important;
}

/* OVPN Pemasangan Terminal Dark Mode Neon Override */
html.dark-mode .vpn-terminal-install__intro p {
    color: #5a708c !important;
}

html.dark-mode .vpn-terminal-install__badge {
    background: rgba(124, 58, 237, 0.12) !important;
    border-color: rgba(124, 58, 237, 0.3) !important;
    color: #a78bfa !important;
}

html.dark-mode .vpn-terminal-install__code-wrap {
    border-color: #1e2a3c !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .vpn-terminal-install__copy {
    background: #7c3aed !important;
    border-color: #7c3aed !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.3) !important;
}

html.dark-mode .vpn-terminal-install__copy:hover,
html.dark-mode .vpn-terminal-install__copy:focus {
    background: #8b5cf6 !important;
    border-color: #8b5cf6 !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px rgba(124, 58, 237, 0.5) !important;
}

html.dark-mode .vpn-terminal-install__note {
    background: rgba(0, 240, 255, 0.06) !important;
    border-color: rgba(0, 240, 255, 0.2) !important;
    color: #00f0ff !important;
}

html.dark-mode .vpn-terminal-install__note i {
    color: #00f0ff !important;
}

/* Mikhmon Online Dark Mode Neon Override */
html.dark-mode .mk-page {
    --mk-bg: #0a0e17;
    --mk-card: #0d121e;
    --mk-border: #1e2a3c;
    --mk-title: #e8edf5;
    --mk-text: #8899b4;
    --mk-muted: #5a708c;
    --mk-indigo: #7c3aed;
    --mk-indigo-dark: #6d28d9;
    --mk-emerald: #00ff88;
    --mk-amber: #facc15;
    --mk-danger: #f87171;
    background: #0a0e17;
}

html.dark-mode .mk-info-bar__icon {
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.1) 0%, rgba(250, 204, 21, 0.05) 100%) !important;
    border: 1px solid rgba(250, 204, 21, 0.2) !important;
}

html.dark-mode .mk-info-bar__list li code {
    background: #111827 !important;
    color: #a78bfa !important;
    border: 1px solid #1e2a3c !important;
}

html.dark-mode .mk-card__head {
    background: linear-gradient(135deg, #111827 0%, #0d121e 100%) !important;
    border-bottom-color: #1e2a3c !important;
}

html.dark-mode .mk-form-select,
html.dark-mode .mk-form-input {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #e8edf5 !important;
}

html.dark-mode .mk-form-select:focus,
html.dark-mode .mk-form-input:focus {
    background: #111827 !important;
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

html.dark-mode .mk-input-group .mk-input-icon,
html.dark-mode .mk-input-group .mk-input-toggle {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #5a708c !important;
}

html.dark-mode .mk-input-group .mk-input-toggle:hover {
    background: #1e2a3c !important;
    color: #a78bfa !important;
}

html.dark-mode .mk-captcha-row img {
    background: #ffffff !important;
    border-color: #1e2a3c !important;
}

html.dark-mode .mk-btn--indigo {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3) !important;
}

html.dark-mode .mk-btn--indigo:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.5) !important;
}

html.dark-mode .mk-user {
    color: #e8edf5 !important;
}

html.dark-mode .mk-pass-text {
    color: #8899b4 !important;
}

html.dark-mode .mk-date {
    color: #5a708c !important;
}

html.dark-mode .table-core .table-core-table tbody tr:hover td .mk-user,
html.dark-mode .table-core .table-core-table tbody tr:hover td .mk-pass-text,
html.dark-mode .table-core .table-core-table tbody tr:hover td .mk-date {
    color: #ffffff !important;
}

html.dark-mode .mk-badge--active {
    background: rgba(0, 255, 136, 0.12) !important;
    color: #00ff88 !important;
    border-color: rgba(0, 255, 136, 0.3) !important;
}

html.dark-mode .mk-badge--expired,
html.dark-mode .mk-badge--failed {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

html.dark-mode .mk-btn-sm--danger {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
}

html.dark-mode .mk-btn-sm--danger:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.4) !important;
    border-color: #ef4444 !important;
}

html.dark-mode .mk-btn-sm--info {
    background: rgba(0, 240, 255, 0.12) !important;
    border-color: rgba(0, 240, 255, 0.3) !important;
    color: #00f0ff !important;
}

html.dark-mode .mk-btn-sm--info:hover {
    background: #00f0ff !important;
    color: #0a0e17 !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.4) !important;
    border-color: #00f0ff !important;
}

/* Quick guides numbers list styles */
html.dark-mode .mk-card__body [style*="background:#eef2ff"],
html.dark-mode .mk-card__body [style*="background: #eef2ff"] {
    background: rgba(124, 58, 237, 0.12) !important;
    color: #a78bfa !important;
}

html.dark-mode .mk-card__body [style*="background:#ecfdf5"],
html.dark-mode .mk-card__body [style*="background: #ecfdf5"] {
    background: rgba(0, 255, 136, 0.12) !important;
    color: #00ff88 !important;
}

html.dark-mode .mk-card__body p[style*="color:#0f172a"],
html.dark-mode .mk-card__body p[style*="color: #0f172a"] {
    color: #e8edf5 !important;
}

html.dark-mode .mk-card__body p[style*="color:#94a3b8"],
html.dark-mode .mk-card__body p[style*="color: #94a3b8"] {
    color: #5a708c !important;
}

/* Style vpn expiry date in dark mode */
html.dark-mode .ovpn-expiry-date {
    color: #8899b4;
}

/* Revert text colors on hover inside the vpn table to white */
html.dark-mode .ovpn-table-card tbody tr:hover td .ovpn-user-code,
html.dark-mode .ovpn-table-card tbody tr:hover td .ovpn-password-code,
html.dark-mode .ovpn-table-card tbody tr:hover td .ovpn-caller-code,
html.dark-mode .ovpn-table-card tbody tr:hover td .ovpn-expiry-date {
    color: #ffffff !important;
}

/* Timeline Process Steps Dark Mode Neon Override */
html.dark-mode .im-step-title,
html.dark-mode [style*="color:#1e293b"],
html.dark-mode [style*="color: #1e293b"] {
    color: #e8edf5 !important;
}

html.dark-mode .im-step-badge {
    background: rgba(124, 58, 237, 0.12) !important;
    color: #a78bfa !important;
}

html.dark-mode .im-step-item.active .im-step-badge {
    background: #7c3aed !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.4) !important;
}

/* ============================================================
   RADIUS / IMPORT PPPOE — Dark Mode Neon Override
   ============================================================ */

/* Page background */
html.dark-mode .radius-page {
    background:
        radial-gradient(1200px 420px at 8% -8%, rgba(124, 58, 237, .06), transparent 52%),
        radial-gradient(980px 420px at 100% 0%, rgba(124, 58, 237, .04), transparent 54%),
        #0a0e17 !important;
}

/* Banner */
html.dark-mode .im-banner {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .im-banner-title {
    color: #e8edf5 !important;
}

html.dark-mode .im-pulsing-dot {
    box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.5) !important;
}

/* Premium card (login form wrapper) */
html.dark-mode .im-premium-card {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .im-premium-card-header {
    background: linear-gradient(135deg, #1a1040 0%, #0d0a1f 100%) !important;
    border-bottom-color: #2d1f6e !important;
}

html.dark-mode .im-premium-card-body {
    background: #0d121e !important;
}

/* Import form controls */
html.dark-mode .im-form-label {
    color: #5a708c !important;
}

html.dark-mode .im-form-control {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #e8edf5 !important;
}

html.dark-mode .im-form-control:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
    background: #111827 !important;
}

html.dark-mode .im-form-hint {
    color: #5a708c !important;
}

/* Submit button */
html.dark-mode .im-btn-submit {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3) !important;
}

html.dark-mode .im-btn-submit:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.4) !important;
}

/* Disconnect button */
html.dark-mode .im-btn-disconnect {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
}

html.dark-mode .im-btn-disconnect:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
}

/* Steps timeline */
html.dark-mode .im-steps .im-step-item:not(:last-child)::after {
    background: #1e2a3c !important;
}

html.dark-mode .im-step-desc {
    color: #5a708c !important;
}

/* Radius form card (NAS / Profiles pages) */
html.dark-mode .radius-form-card {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .radius-form-body {
    background: #0d121e !important;
}

html.dark-mode .radius-field label {
    color: #8899b4 !important;
}

html.dark-mode .radius-field input,
html.dark-mode .radius-field select,
html.dark-mode .radius-field textarea {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #e8edf5 !important;
}

html.dark-mode .radius-field input:focus,
html.dark-mode .radius-field select:focus,
html.dark-mode .radius-field textarea:focus {
    border-color: #7c3aed !important;
    background: #111827 !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

html.dark-mode .radius-field small {
    color: #5a708c !important;
}

/* Radius input group & button icon */
html.dark-mode .radius-input-group input {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #e8edf5 !important;
}

html.dark-mode .radius-btn-icon {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #8899b4 !important;
}

html.dark-mode .radius-btn-icon:hover {
    background: #1e2a3c !important;
    color: #e8edf5 !important;
}

/* Script box */
html.dark-mode .radius-script-box {
    background: #111827 !important;
    border-color: #1e2a3c !important;
}

html.dark-mode .radius-script-box h6 {
    color: #e8edf5 !important;
}

/* Cancel button */
html.dark-mode .radius-btn-cancel {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #8899b4 !important;
}

html.dark-mode .radius-btn-cancel:hover {
    background: #1e2a3c !important;
    color: #e8edf5 !important;
}

/* Flash messages */
html.dark-mode .radius-flash--error {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
    color: #f87171 !important;
}

html.dark-mode .radius-flash--success {
    background: rgba(0, 255, 136, 0.06) !important;
    border-color: rgba(0, 255, 136, 0.2) !important;
    color: #00ff88 !important;
}

/* Filter bar in import */
html.dark-mode .u-filter-bar {
    background: #0d121e !important;
    border-bottom-color: #1e2a3c !important;
}

html.dark-mode .u-search-input {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #e8edf5 !important;
}

html.dark-mode .u-search-input:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

html.dark-mode .u-filter-select {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #e8edf5 !important;
}

html.dark-mode .u-filter-select:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

/* Import settings box */
html.dark-mode .p-3.mb-3.border-bottom[style*="background-color: #f8fafc"],
html.dark-mode [style*="background-color: #f8fafc"] {
    background-color: #111827 !important;
    border-color: #1e2a3c !important;
}

html.dark-mode .form-label.text-muted {
    color: #5a708c !important;
}

/* Connected state header bar */
html.dark-mode .radius-table-card.table-core-shell[style*="background: rgba(255,255,255,0.7)"] {
    background: rgba(13, 18, 30, 0.85) !important;
    border-color: #1e2a3c !important;
}

html.dark-mode .r-mono {
    color: #a78bfa !important;
}

/* Radius table card body */
html.dark-mode .radius-table-body {
    background: #0d121e !important;
}

/* Import table badges */
html.dark-mode .badge.bg-success-subtle {
    background: rgba(0, 255, 136, 0.1) !important;
    border-color: rgba(0, 255, 136, 0.2) !important;
    color: #00ff88 !important;
}

html.dark-mode .badge.bg-secondary-subtle {
    background: rgba(136, 153, 180, 0.1) !important;
    border-color: rgba(136, 153, 180, 0.2) !important;
    color: #8899b4 !important;
}

/* r-badge elements */
html.dark-mode .r-badge--blue {
    background: rgba(0, 240, 255, 0.1) !important;
    border-color: rgba(0, 240, 255, 0.25) !important;
    color: #00f0ff !important;
}

/* Checkbox styling in dark mode */
html.dark-mode .form-check-input {
    background-color: #111827 !important;
    border-color: #1e2a3c !important;
}

html.dark-mode .form-check-input:checked {
    background-color: #7c3aed !important;
    border-color: #7c3aed !important;
}

/* u-btn-add in import toolbar */
html.dark-mode .u-btn-add {
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3) !important;
}

/* No results message */
html.dark-mode .u-empty {
    color: #5a708c !important;
}

html.dark-mode .u-empty i {
    color: #1e2a3c !important;
}

/* Radius key modal dark mode */
html.dark-mode .radius-key-modal {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .radius-key-modal__header {
    background: linear-gradient(135deg, #1a1040 0%, #0d0a1f 100%) !important;
}

html.dark-mode .radius-key-modal__body {
    background: #0d121e !important;
    color: #8899b4 !important;
}

html.dark-mode .radius-key-modal__intro {
    color: #5a708c !important;
}

html.dark-mode .radius-key-modal__key-card {
    background: #111827 !important;
    border-color: #1e2a3c !important;
}

html.dark-mode .radius-key-modal__key-row code {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
    color: #a78bfa !important;
}

html.dark-mode .radius-key-modal__notice {
    background: rgba(250, 204, 21, 0.06) !important;
    border-color: rgba(250, 204, 21, 0.18) !important;
    color: #facc15 !important;
}

html.dark-mode .radius-key-modal__footer {
    background: #0d121e !important;
    border-top-color: #1e2a3c !important;
}

/* Radius key confirm modal dark mode */
html.dark-mode .radius-key-confirm-modal {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .radius-key-confirm-modal__icon {
    background: rgba(124, 58, 237, 0.12) !important;
    border-color: rgba(124, 58, 237, 0.25) !important;
    color: #a78bfa !important;
}

html.dark-mode .radius-key-confirm-modal h5 {
    color: #e8edf5 !important;
}

html.dark-mode .radius-key-confirm-modal__body > p:last-child {
    color: #5a708c !important;
}

html.dark-mode .radius-key-confirm-modal__footer {
    background: #0d121e !important;
    border-top-color: #1e2a3c !important;
}

html.dark-mode .radius-key-confirm-modal__cancel {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #8899b4 !important;
}

/* Premium NAS modal dark mode */
html.dark-mode .premium-nas-modal .u-modal {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
}

html.dark-mode .premium-nas-modal .u-modal-body {
    background: #0d121e !important;
}

html.dark-mode .premium-nas-modal .u-modal-footer {
    background: #0d121e !important;
    border-top-color: #1e2a3c !important;
}

html.dark-mode .premium-nas-modal .radius-field label {
    color: #8899b4 !important;
}

html.dark-mode .premium-nas-modal .radius-field input[type="text"],
html.dark-mode .premium-nas-modal .radius-field select,
html.dark-mode .premium-nas-modal .radius-field textarea {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #e8edf5 !important;
}

html.dark-mode .premium-nas-modal .radius-field input:focus,
html.dark-mode .premium-nas-modal .radius-field select:focus,
html.dark-mode .premium-nas-modal .radius-field textarea:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15) !important;
}

html.dark-mode .premium-nas-modal .radius-input-group {
    background: #111827 !important;
    border-color: #1e2a3c !important;
}

html.dark-mode .premium-nas-modal .radius-btn-icon {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #8899b4 !important;
}

html.dark-mode .premium-nas-modal .radius-script-box {
    background: #0a0e17 !important;
    border-color: #1e2a3c !important;
}

/* Inline style color overrides for import page text */
html.dark-mode .im-step-title[style*="color:#1e293b"],
html.dark-mode .im-step-title[style*="color: #1e293b"],
html.dark-mode [style*="color: #64748b"],
html.dark-mode [style*="color:#64748b"] {
    color: #5a708c !important;
}

html.dark-mode [style*="color: #1e3a8a"],
html.dark-mode [style*="color:#1e3a8a"] {
    color: #a78bfa !important;
}

html.dark-mode [style*="color: #4f46e5"],
html.dark-mode [style*="color:#4f46e5"] {
    color: #a78bfa !important;
}

/* u-form-control in radius pages */
html.dark-mode .radius-page .u-form-control {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #e8edf5 !important;
}

html.dark-mode .radius-page .u-form-control:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

/* u-form-label in radius pages */
html.dark-mode .radius-page .u-form-label {
    color: #5a708c !important;
}

/* u-form-hint in radius pages */
html.dark-mode .radius-page .u-form-hint {
    color: #5a708c !important;
}

/* Table core wrap inside radius */
html.dark-mode .table-core-wrap {
    background: #0d121e !important;
}

/* Progress overlay — already dark, but ensure consistency */
html.dark-mode .im-progress-overlay {
    background: rgba(10, 14, 23, 0.88) !important;
}

/* NAS Filter Buttons & Search inside Sessions Page */
html.dark-mode .u-nas-filter-group {
    background: #111827 !important;
    border: 1px solid #1e2a3c !important;
}

html.dark-mode .nas-filter-btn {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
    color: #8899b4 !important;
}

html.dark-mode .nas-filter-btn:hover {
    background: #1e2a3c !important;
    color: #e8edf5 !important;
    border-color: #7c3aed !important;
}

html.dark-mode .nas-filter-btn.active {
    background: #7c3aed !important;
    color: #ffffff !important;
    border-color: #7c3aed !important;
    box-shadow: 0 4px 6px -1px rgba(124, 58, 237, 0.2), 0 2px 4px -2px rgba(124, 58, 237, 0.2) !important;
}

html.dark-mode #sessions-search {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #e8edf5 !important;
}

html.dark-mode #sessions-search:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

/* ============================================================
   SIDEBAR MENU — Dark Mode Neon Override
   ============================================================ */
html.dark-mode .vertical-menu {
    background: #0d121e !important;
    border-right-color: #1e2a3c !important;
}

html.dark-mode .navbar-brand-box {
    background: #0d121e !important;
    border-bottom-color: #1e2a3c !important;
}

html.dark-mode #sidebar-menu ul li a {
    color: #8899b4 !important;
}

html.dark-mode #sidebar-menu ul li a i {
    color: #5a708c !important;
}

html.dark-mode #sidebar-menu ul li a:hover {
    color: #e8edf5 !important;
    background-color: #111827 !important;
}

html.dark-mode #sidebar-menu ul li a:hover i {
    color: #e8edf5 !important;
}

html.dark-mode .menu-title {
    color: #5a708c !important;
}

/* Sidebar Active/Selected Menu */
html.dark-mode #sidebar-menu > ul > li.mm-active > a,
html.dark-mode #sidebar-menu > ul > li > a.active {
    color: #a78bfa !important;
    background: linear-gradient(180deg, rgba(124, 58, 237, 0.12) 0%, rgba(124, 58, 237, 0.06) 100%) !important;
    border-color: rgba(124, 58, 237, 0.3) !important;
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.2) !important;
}

html.dark-mode #sidebar-menu > ul > li.mm-active > a i,
html.dark-mode #sidebar-menu > ul > li > a.active i {
    color: #a78bfa !important;
}

html.dark-mode #sidebar-menu ul li ul.sub-menu li.mm-active > a,
html.dark-mode #sidebar-menu ul li ul.sub-menu li a.active {
    color: #a78bfa !important;
    background-color: rgba(124, 58, 237, 0.08) !important;
}

/* ============================================================
   WHATSAPP PAGES — Dark Mode Neon Override
   ============================================================ */

/* Main page variables override (.wa-modern) */
html.dark-mode .wa-modern {
    --wa-panel-border: #1e2a3c;
    --wa-panel-shadow: 0 18px 42px rgba(0, 0, 0, 0.4);
    --wa-ink: #e8edf5;
    --wa-muted: #5a708c;
    --wa-surface: #0d121e;
    --wa-soft: #111827;
    --wa-green: #00ff88;
    --wa-green-soft: rgba(0, 255, 136, 0.12);
    --wa-red: #f87171;
    --wa-red-soft: rgba(239, 68, 68, 0.12);
    --wa-blue: #a78bfa;
    --wa-blue-soft: rgba(124, 58, 237, 0.12);
    --wa-gold: #facc15;
    --wa-gold-soft: rgba(250, 204, 21, 0.12);
    --wa-forest: #0d121e;
    --wa-leaf: #111827;
    --wa-leaf-deep: #1e2a3c;
    --wa-code-bg: #0a0e17;
    --wa-code-soft: #111827;
    --wa-code-fg: #a78bfa;
}

/* Specific card/panel styling for wa-modern dashboard */
html.dark-mode .wa-modern .wa-summary-card,
html.dark-mode .wa-modern .wa-panel--gateway .wa-summary-card {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .wa-modern .wa-summary-card::after {
    background: #7c3aed !important;
}

html.dark-mode .wa-modern .wa-summary-label,
html.dark-mode .wa-modern .wa-meta-label {
    color: #5a708c !important;
}

html.dark-mode .wa-modern .wa-summary-value {
    color: #e8edf5 !important;
}

html.dark-mode .wa-modern .wa-premium-card,
html.dark-mode .wa-modern .wa-premium-card--action {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .wa-modern .wa-premium-card__head {
    border-bottom-color: #1e2a3c !important;
}

html.dark-mode [style*="background: rgba(248, 250, 252"],
html.dark-mode [style*="background:rgba(248, 250, 252"] {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
}

html.dark-mode [style*="color: #64748b"] {
    color: #8899b4 !important;
}

html.dark-mode .wa-modern .wa-panel-head h5 {
    color: #e8edf5 !important;
}

html.dark-mode .wa-modern .wa-panel-head p {
    color: #5a708c !important;
}

html.dark-mode .wa-modern .quick-step-text h6 {
    color: #e8edf5 !important;
}

html.dark-mode .wa-modern .quick-step-text p {
    color: #5a708c !important;
}

html.dark-mode .wa-modern .wa-panel-head {
    background: linear-gradient(135deg, #1a1040 0%, #0d0a1f 100%) !important;
    border-bottom-color: #2d1f6e !important;
}

html.dark-mode .wa-modern .wa-panel--gateway {
    background:
        radial-gradient(circle at top left, rgba(124, 58, 237, 0.12), transparent 35%),
        radial-gradient(circle at top right, rgba(0, 255, 136, 0.05), transparent 40%),
        linear-gradient(180deg, #0d121e 0%, #0a0e17 100%) !important;
    border: 1px solid #1e2a3c !important;
}

html.dark-mode .wa-modern .wa-panel--gateway::before {
    display: none !important;
}

html.dark-mode .wa-modern .wa-panel-body {
    background: #0d121e !important;
}

/* Bottom elements: Premium cards, credentials, & switches */
html.dark-mode .wa-modern .wa-credential-card,
html.dark-mode .wa-modern .wa-panel--gateway .wa-credential-card,
html.dark-mode .wa-modern .wa-credential-card--secret,
html.dark-mode .wa-modern .wa-panel--gateway .wa-credential-card--secret,
html.dark-mode .wa-modern .wa-credential-card--phone {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .wa-modern .wa-panel--gateway .wa-credential-card--secret .wa-meta-label {
    color: #a78bfa !important;
}

html.dark-mode .wa-modern .wa-panel--gateway .wa-credential-card--secret .wa-credential-caption {
    color: #5a708c !important;
}

html.dark-mode .wa-modern .wa-gateway-foot {
    background: linear-gradient(135deg, #111827 0%, #0d121e 100%) !important;
    border-color: #1e2a3c !important;
}

html.dark-mode .wa-modern .wa-premium-card,
html.dark-mode .wa-modern .wa-premium-card--action {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .wa-modern .wa-premium-stat {
    border-color: #1e2a3c !important;
    background: #0d121e !important;
    box-shadow: none !important;
}

html.dark-mode .wa-modern .wa-premium-note,
html.dark-mode .wa-modern .wa-premium-manual-note {
    border-color: #1e2a3c !important;
    background: #111827 !important;
    color: #8899b4 !important;
}

html.dark-mode .wa-modern .wa-premium-price strong {
    color: #a78bfa !important;
}

html.dark-mode .wa-modern .wa-premium-price p,
html.dark-mode .wa-modern .wa-premium-manual-note,
html.dark-mode .wa-modern .wa-premium-footnote {
    color: #5a708c !important;
}

html.dark-mode .wa-modern .wa-renew-switch {
    border-color: #1e2a3c !important;
    background: #111827 !important;
}

html.dark-mode .wa-modern .wa-renew-switch__slider {
    background: #1e2a3c !important;
}

html.dark-mode .wa-modern .wa-renew-switch__slider::after {
    background: #8899b4 !important;
}

html.dark-mode .wa-modern .wa-renew-switch input:checked + .wa-renew-switch__slider {
    background: linear-gradient(135deg, #059669 0%, #065f46 100%) !important;
}

html.dark-mode .wa-modern .wa-renew-switch input:checked + .wa-renew-switch__slider::after {
    background: #ffffff !important;
}

html.dark-mode .wa-modern .wa-note {
    border-color: #1e2a3c !important;
    background: linear-gradient(135deg, #111827 0%, #0d121e 100%) !important;
    color: #8899b4 !important;
}

html.dark-mode .wa-modern .wa-note strong {
    color: #e8edf5 !important;
}

/* API Key & No HP Boxes specific overrides */
html.dark-mode .wa-modern .wa-panel--gateway .wa-secret-copy,
html.dark-mode .wa-modern .wa-panel--gateway .wa-phone-box {
    background: #111827 !important;
    border-color: #1e2a3c !important;
}

html.dark-mode .wa-modern .wa-panel--gateway .wa-credential-card--secret .wa-secret-copy {
    border-color: #1e2a3c !important;
    background: linear-gradient(180deg, #111827 0%, #0d121e 100%) !important;
}

html.dark-mode .wa-modern .wa-panel--gateway .wa-credential-card--secret .wa-secret-copy:hover {
    border-color: #7c3aed !important;
    background: linear-gradient(180deg, rgba(124, 58, 237, 0.08) 0%, rgba(124, 58, 237, 0.12) 100%) !important;
}

html.dark-mode .wa-modern .wa-panel--gateway .wa-credential-card--secret .wa-secret-text {
    color: #e8edf5 !important;
}

html.dark-mode .wa-modern .wa-panel--gateway .wa-credential-card--secret .wa-secret-hint {
    color: #5a708c !important;
}

html.dark-mode .wa-modern .wa-secret-copy {
    border-color: #1e2a3c !important;
    background: linear-gradient(135deg, #111827 0%, #0d121e 100%) !important;
}

html.dark-mode .wa-modern .wa-secret-copy:hover {
    border-color: #7c3aed !important;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(124, 58, 237, 0.12) 100%) !important;
}

html.dark-mode .wa-modern .wa-secret-text {
    color: #e8edf5 !important;
}

html.dark-mode .wa-modern .wa-secret-hint {
    color: #5a708c !important;
}

html.dark-mode .wa-modern .wa-phone-box {
    border-color: #1e2a3c !important;
    background: #111827 !important;
}

html.dark-mode .wa-modern .wa-phone-value {
    color: #e8edf5 !important;
}

html.dark-mode .wa-modern .wa-phone-hint {
    color: #5a708c !important;
}

html.dark-mode .wa-modern .wa-phone-hint i {
    color: #00ff88 !important;
}

html.dark-mode .wa-modern .wa-phone-hint.is-offline {
    color: #f87171 !important;
}

html.dark-mode .wa-modern .wa-phone-hint.is-offline i {
    color: #f87171 !important;
}

/* ============================================================
   API TESTER FORM (BOTTOM PANEL)
   ============================================================ */
html.dark-mode .wa-modern .wa-send-banner {
    border-color: #1e2a3c !important;
    background: linear-gradient(135deg, #111827 0%, #0d121e 100%) !important;
    color: #8899b4 !important;
}

html.dark-mode .wa-modern .wa-send-banner strong {
    color: #a78bfa !important;
}

html.dark-mode .wa-modern .wa-send-main {
    background: linear-gradient(180deg, #111827 0%, #0d121e 100%) !important;
    border-color: #1e2a3c !important;
    box-shadow: none !important;
}

html.dark-mode .wa-modern .wa-send-section-head h6 {
    color: #a78bfa !important;
}

html.dark-mode .wa-modern .wa-send-section-head p {
    color: #5a708c !important;
}

html.dark-mode .wa-modern .wa-send-form .form-label {
    color: #8899b4 !important;
}

html.dark-mode .wa-modern .wa-send-form .form-control {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
    color: #e8edf5 !important;
}

html.dark-mode .wa-modern .wa-send-form .form-control:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 0.18rem rgba(124, 58, 237, 0.15) !important;
}

html.dark-mode .wa-modern .wa-send-form .input-group-text {
    border-color: #1e2a3c !important;
    background: linear-gradient(180deg, #111827 0%, #0d121e 100%) !important;
    color: #8899b4 !important;
}

html.dark-mode .wa-modern .wa-helper-card,
html.dark-mode .wa-modern .wa-result-card {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    box-shadow: none !important;
}

html.dark-mode .wa-modern .wa-side-title {
    color: #a78bfa !important;
}

html.dark-mode .wa-modern .wa-helper-checks li {
    color: #8899b4 !important;
}

html.dark-mode .wa-modern .wa-helper-checks li i {
    color: #00ff88 !important;
}

html.dark-mode .wa-modern .wa-result-card__head p {
    color: #5a708c !important;
}

html.dark-mode .wa-modern .wa-result-badge {
    border-color: #1e2a3c !important;
    background: #0d121e !important;
    color: #8899b4 !important;
}

html.dark-mode .wa-modern .wa-result-badge.is-success {
    border-color: rgba(0, 255, 136, 0.25) !important;
    background: rgba(0, 255, 136, 0.1) !important;
    color: #00ff88 !important;
}

html.dark-mode .wa-modern .wa-result-badge.is-error {
    border-color: rgba(239, 68, 68, 0.25) !important;
    background: rgba(239, 68, 68, 0.1) !important;
    color: #f87171 !important;
}

html.dark-mode .wa-modern .wa-result-pre {
    border-color: #1e2a3c !important;
    background: #0a0e17 !important;
    color: #e8edf5 !important;
}

/* Shell style overrides for other subpages (template, schedule, logs, contact) */
html.dark-mode .wa-template-modern,
html.dark-mode .wa-schedule-modern,
html.dark-mode .wa-logs-modern,
html.dark-mode .wa-contact-modern {
    background: #0a0e17 !important;
}

html.dark-mode .template-shell,
html.dark-mode .schedule-shell,
html.dark-mode .schedule-create-shell,
html.dark-mode .logs-shell,
html.dark-mode .contact-shell {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .template-shell__head,
html.dark-mode .schedule-shell__head,
html.dark-mode .schedule-create-shell__head,
html.dark-mode .logs-shell__head,
html.dark-mode .contact-shell__head {
    background: linear-gradient(135deg, #1a1040 0%, #0d0a1f 100%) !important;
    border-bottom-color: #2d1f6e !important;
}

html.dark-mode .template-shell__body,
html.dark-mode .schedule-shell__body,
html.dark-mode .schedule-create-shell__body,
html.dark-mode .logs-shell__body,
html.dark-mode .contact-shell__body {
    background: #0d121e !important;
}

html.dark-mode .template-form__surface,
html.dark-mode .schedule-form__surface,
html.dark-mode .contact-form__surface {
    background: linear-gradient(180deg, #111827 0%, #0d121e 100%) !important;
    border-color: #1e2a3c !important;
}

/* Form element styles */
html.dark-mode .wa-template-modern .form-label,
html.dark-mode .wa-schedule-modern .form-label,
html.dark-mode .wa-contact-modern .form-label {
    color: #8899b4 !important;
}

html.dark-mode .wa-template-modern .form-control,
html.dark-mode .wa-template-modern .form-select,
html.dark-mode .wa-schedule-modern .form-control,
html.dark-mode .wa-schedule-modern .form-select,
html.dark-mode .wa-contact-modern .form-control,
html.dark-mode .wa-contact-modern .form-select {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #e8edf5 !important;
}

html.dark-mode .wa-template-modern .form-control:focus,
html.dark-mode .wa-template-modern .form-select:focus,
html.dark-mode .wa-schedule-modern .form-control:focus,
html.dark-mode .wa-schedule-modern .form-select:focus,
html.dark-mode .wa-contact-modern .form-control:focus,
html.dark-mode .wa-contact-modern .form-select:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

html.dark-mode .template-shell__title p,
html.dark-mode .schedule-shell__title p,
html.dark-mode .schedule-create-shell__title p,
html.dark-mode .logs-shell__title p,
html.dark-mode .contact-shell__title p {
    color: #5a708c !important;
}

/* Specific elements for schedule/contact/logs */
html.dark-mode .schedule-card,
html.dark-mode .contact-card {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #e8edf5 !important;
}

html.dark-mode .schedule-time,
html.dark-mode .contact-phone {
    color: #8899b4 !important;
}

html.dark-mode .wa-logs-modern .table {
    --bs-table-bg: #0d121e;
    --bs-table-hover-bg: #111827;
    color: #8899b4;
}

html.dark-mode .wa-logs-modern .table thead th {
    background: #111827 !important;
    border-bottom-color: #1e2a3c !important;
    color: #5a708c !important;
}

/* User Profile Dropdown Menu in Topbar */
html.dark-mode #page-topbar .dropdown-menu {
    background: #0d121e !important;
    border: 1px solid #1e2a3c !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode #page-topbar .dropdown-item {
    color: #8899b4 !important;
}

html.dark-mode #page-topbar .dropdown-item:hover,
html.dark-mode #page-topbar .dropdown-item:focus {
    background-color: #111827 !important;
    color: #e8edf5 !important;
}

html.dark-mode #page-topbar .dropdown-menu .border-bottom,
html.dark-mode #page-topbar .dropdown-menu .border-top {
    border-color: #1e2a3c !important;
}

/* ============================================================
   TOPUP / SALDO PAGE — Dark Mode
   ============================================================ */

/* Page background */
html.dark-mode .saldo-modern {
    background:
        radial-gradient(1200px 420px at 8% -8%, rgba(124, 58, 237, .08), transparent 52%),
        radial-gradient(980px 420px at 100% 0%, rgba(124, 58, 237, .06), transparent 54%),
        #0a0e17 !important;
}

/* Panel (card) */
html.dark-mode .saldo-modern .saldo-panel {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4) !important;
}

/* Panel head (gradient header) */
html.dark-mode .saldo-modern .saldo-panel-head {
    background: linear-gradient(135deg, #1a1040 0%, #0d0a1f 100%) !important;
    border-bottom-color: #2d1f6e !important;
}

html.dark-mode .saldo-modern .saldo-panel-head h5 {
    color: #e8edf5 !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .saldo-modern .saldo-panel-head p {
    color: #8899b4 !important;
}

/* Panel body */
html.dark-mode .saldo-modern .saldo-panel-body {
    background: #0d121e !important;
}

/* Summary stat grid */
html.dark-mode .saldo-modern .saldo-stat {
    background: linear-gradient(145deg, #111827 0%, #0d121e 100%) !important;
    border-color: #1e2a3c !important;
}

html.dark-mode .saldo-modern .saldo-stat-label {
    color: #5a708c !important;
}

html.dark-mode .saldo-modern .saldo-stat-value {
    color: #e8edf5 !important;
}

html.dark-mode .saldo-modern .saldo-stat-value.is-ok {
    color: #00ff88 !important;
}

html.dark-mode .saldo-modern .saldo-stat-value.is-warn {
    color: #facc15 !important;
}

html.dark-mode .saldo-modern .saldo-stat-value.is-accent {
    color: #a78bfa !important;
}

/* Guideline list */
html.dark-mode .saldo-modern .saldo-guideline li {
    color: #8899b4 !important;
}

html.dark-mode .saldo-modern .saldo-guideline code {
    background: rgba(124, 58, 237, .1) !important;
    border-color: rgba(124, 58, 237, .25) !important;
    color: #a78bfa !important;
}

/* Thanks box */
html.dark-mode .saldo-modern .saldo-thanks {
    background: rgba(124, 58, 237, .05) !important;
    border-color: #1e2a3c !important;
    color: #8899b4 !important;
}

/* Quick info cards (Minimum / Bonus) */
html.dark-mode .saldo-modern .saldo-quick-card {
    background: #111827 !important;
    border-color: #1e2a3c !important;
}

html.dark-mode .saldo-modern .saldo-quick-card b {
    color: #00ff88 !important;
}

html.dark-mode .saldo-modern .saldo-quick-card span {
    color: #e8edf5 !important;
}

/* Order form */
html.dark-mode .saldo-modern .saldo-order-form .form-label {
    color: #8899b4 !important;
}

html.dark-mode .saldo-modern .saldo-order-form .form-select,
html.dark-mode .saldo-modern .saldo-order-form .form-control {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #e8edf5 !important;
}

html.dark-mode .saldo-modern .saldo-order-form .form-select:focus,
html.dark-mode .saldo-modern .saldo-order-form .form-control:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 0.16rem rgba(124, 58, 237, .2) !important;
    color: #e8edf5 !important;
}

html.dark-mode .saldo-modern .saldo-order-form .form-helper {
    color: #5a708c !important;
}

html.dark-mode .saldo-modern .saldo-order-form .btn-primary {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
    border-color: #7c3aed !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, .3) !important;
}

/* History toolbar */
html.dark-mode .saldo-modern .saldo-history-toolbar {
    color: #5a708c !important;
}

html.dark-mode .saldo-modern .saldo-history-note {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #5a708c !important;
}

/* Table elements */
html.dark-mode .saldo-modern .saldo-invoice {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #a78bfa !important;
}

html.dark-mode .saldo-modern .saldo-date {
    color: #8899b4 !important;
}

html.dark-mode .saldo-modern .saldo-nominal {
    color: #e8edf5 !important;
}

html.dark-mode .saldo-modern .saldo-method {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #8899b4 !important;
}

html.dark-mode .saldo-modern .saldo-action-empty {
    color: #5a708c !important;
}

/* Action buttons */
html.dark-mode .saldo-modern .btn-outline-primary {
    border-color: #1e2a3c !important;
    color: #a78bfa !important;
}

html.dark-mode .saldo-modern .btn-outline-primary:hover {
    background: #7c3aed !important;
    border-color: #7c3aed !important;
    color: #fff !important;
}

/* DataTable overrides inside saldo */
html.dark-mode .saldo-modern .table {
    --bs-table-bg: #0d121e;
    --bs-table-hover-bg: #111827;
    color: #8899b4;
}

html.dark-mode .saldo-modern .table thead th {
    background: #111827 !important;
    border-bottom-color: #1e2a3c !important;
    color: #5a708c !important;
}

html.dark-mode .saldo-modern .table td {
    border-bottom-color: #1e2a3c !important;
}

html.dark-mode .saldo-modern .dataTables_filter label,
html.dark-mode .saldo-modern .dataTables_info {
    color: #5a708c !important;
}

html.dark-mode .saldo-modern .dataTables_filter input {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #e8edf5 !important;
}

/* Saldo alert warning with inline styles */
html.dark-mode .saldo-modern .alert-warning {
    background-color: rgba(250, 204, 21, .06) !important;
    border-color: rgba(250, 204, 21, .18) !important;
    color: #facc15 !important;
}

html.dark-mode .saldo-modern .alert-warning i {
    color: #facc15 !important;
}

/* Full screen loader overlay */
html.dark-mode #fullScreenLoader {
    background-color: rgba(10, 14, 23, 0.85) !important;
}

/* DataTable responsive child row */
html.dark-mode .saldo-modern .table.dataTable > tbody > tr.child ul.dtr-details > li {
    border-bottom-color: #1e2a3c !important;
}

/* Status badges */
html.dark-mode .saldo-modern .saldo-status.is-success {
    background: #059669 !important;
    box-shadow: 0 0 8px rgba(0, 255, 136, .2) !important;
}

html.dark-mode .saldo-modern .saldo-status.is-pending {
    background: #7c3aed !important;
    box-shadow: 0 0 8px rgba(124, 58, 237, .2) !important;
}

/* Dropdown menu inside table */
html.dark-mode .saldo-modern .dropdown-menu {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .5) !important;
}

html.dark-mode .saldo-modern .dropdown-item {
    color: #8899b4 !important;
}

html.dark-mode .saldo-modern .dropdown-item:hover,
html.dark-mode .saldo-modern .dropdown-item:focus {
    background: #1e2a3c !important;
    color: #e8edf5 !important;
}

/* Pagination */
html.dark-mode .saldo-modern .page-link {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #8899b4 !important;
}

html.dark-mode .saldo-modern .page-item.active .page-link {
    background: #7c3aed !important;
    border-color: #7c3aed !important;
    color: #fff !important;
    box-shadow: 0 0 8px rgba(124, 58, 237, .3) !important;
}

/* ============================================================
   ACCOUNT SETTINGS & MUTASI LOGS — Dark Mode Neon Override
   ============================================================ */

/* 1. Account Settings (.st-page) */
html.dark-mode .st-page {
    --st-bg: #0a0e17;
    --st-card: #0d121e;
    --st-border: #1e2a3c;
    --st-title: #e8edf5;
    --st-text: #8899b4;
    --st-muted: #5a708c;
    --st-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    background: #0a0e17 !important;
}

html.dark-mode .st-card,
html.dark-mode .st-topbar,
html.dark-mode .st-stat-card {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
}

html.dark-mode .st-card__head {
    background: linear-gradient(135deg, #1a1040 0%, #0d0a1f 100%) !important;
    border-bottom-color: #2d1f6e !important;
}

html.dark-mode .st-card__head h5,
html.dark-mode .st-card__head p {
    color: #ffffff !important;
}

html.dark-mode .st-card__body {
    background: #0d121e !important;
}

/* Specific overrides for st-page input wrappers, captcha, and info rows */
html.dark-mode .st-page .st-input-wrap,
html.dark-mode .st-page .st-captcha-input-group {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
    box-shadow: none !important;
}

html.dark-mode .st-page .st-input-wrap--readonly {
    background: #111827 !important;
}

html.dark-mode .st-page .st-input-wrap i,
html.dark-mode .st-page .st-captcha-refresh {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #8899b4 !important;
}

html.dark-mode .st-page .st-captcha-img {
    background: #111827 !important;
    border-color: #1e2a3c !important;
}

html.dark-mode .st-page .st-info-row {
    background: #111827 !important;
    border-color: #1e2a3c !important;
}

html.dark-mode .st-page .st-btn--ghost {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #8899b4 !important;
}

html.dark-mode .st-page .st-btn--ghost:hover {
    background: #1e2a3c !important;
    color: #e8edf5 !important;
}

html.dark-mode .st-page .st-note {
    background: rgba(250, 204, 21, 0.06) !important;
    border-color: rgba(250, 204, 21, 0.18) !important;
}

html.dark-mode .st-page .st-note span {
    color: #facc15 !important;
}

html.dark-mode .st-page .form-control,
html.dark-mode .st-page .form-select {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #e8edf5 !important;
}

html.dark-mode .st-page .form-control:focus,
html.dark-mode .st-page .form-select:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

/* 2. Mutasi / Activity Logs (.mutasi-modern) */
html.dark-mode .mutasi-modern {
    background: #0a0e17 !important;
}

html.dark-mode .mutasi-modern .mutasi-table-core {
    --tc-primary: #7c3aed;
    --tc-primary-dark: #6d28d9;
    --tc-pill-bg: #111827;
    --tc-pill-line: #1e2a3c;
}

html.dark-mode .mutasi-modern .mutasi-stat {
    border-color: #1e2a3c !important;
    background: #0d121e !important;
    box-shadow: none !important;
}

html.dark-mode .mutasi-modern .mutasi-stat__label {
    color: #5a708c !important;
}

html.dark-mode .mutasi-modern .mutasi-stat__value {
    color: #e8edf5 !important;
}

html.dark-mode .mutasi-modern .mutasi-stat__value.is-ok {
    color: #00ff88 !important;
}

html.dark-mode .mutasi-modern .mutasi-stat__value.is-danger {
    color: #f87171 !important;
}

html.dark-mode .mutasi-modern .mutasi-stat__value.is-accent {
    color: #a78bfa !important;
}

/* ============================================================
   CLIENT IP-BAN — Dark Mode Neon Override
   ============================================================ */
html.dark-mode .ipban-notice {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
}

html.dark-mode .ipban-notice__header-row {
    border-bottom-color: #1e2a3c !important;
}

html.dark-mode .ipban-notice__title-block h6,
html.dark-mode .ipban-notice__ip-info strong {
    color: #e8edf5 !important;
}

html.dark-mode .ipban-notice.is-safe .ipban-notice__icon-circle {
    background: rgba(0, 255, 136, 0.12) !important;
    color: #00ff88 !important;
}

html.dark-mode .ipban-notice.is-banned .ipban-notice__icon-circle {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #f87171 !important;
}

html.dark-mode .ipban-notice.is-safe .ipban-badge {
    background: rgba(0, 255, 136, 0.08) !important;
    border-color: rgba(0, 255, 136, 0.25) !important;
    color: #00ff88 !important;
}

html.dark-mode .ipban-notice.is-banned .ipban-badge {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
    color: #f87171 !important;
}

html.dark-mode .ipban-guide {
    background: rgba(37, 99, 235, 0.06) !important;
    border-color: rgba(37, 99, 235, 0.18) !important;
    border-left-color: #2563eb !important;
}

html.dark-mode .ipban-guide__head,
html.dark-mode .ipban-guide__body {
    color: #8899b4 !important;
}

html.dark-mode .ipban-guide__body strong {
    color: #e8edf5 !important;
}

/* Specific text color override for voucher page terms list in dark mode */
html.dark-mode .radius-page .radius-form-body ul {
    color: #8899b4 !important;
}

/* ============================================================
   ADMIN MEMBER CENTER — Dark Mode Neon Override
   ============================================================ */

/* 1. Top Statistics Cards */
html.dark-mode .member-stat {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .member-stat .label {
    color: #5a708c !important;
}

html.dark-mode .member-stat .value {
    color: #e8edf5 !important;
}

/* 2. Member Table Hover Font Color Fix
   Force link text and role badges to turn white on hover so they don't disappear */
html.dark-mode .table-core-table tbody tr:hover td a,
html.dark-mode .table-core-table tbody tr:hover td a * {
    color: #ffffff !important;
}

html.dark-mode .member-role-badge {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #a78bfa !important;
}

html.dark-mode .table-core-table tbody tr:hover td .member-role-badge {
    color: #ffffff !important;
    background: rgba(124, 58, 237, 0.2) !important;
    border-color: #7c3aed !important;
}

/* Specific ID override for member table hover colors to prevent text from disappearing */
html.dark-mode #datatable-ovn tbody tr:hover td,
html.dark-mode #datatable-ovn tbody tr:hover td *,
html.dark-mode #datatable-ovn tbody tr:hover td .table-core-date {
    color: #ffffff !important;
}

/* ============================================================
   VPN REMOTE — Dark Mode Neon Badge & Code Overrides
   ============================================================ */
html.dark-mode .ovpn-user-code,
html.dark-mode .ovpn-password-code,
html.dark-mode .ovpn-caller-code {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #a78bfa !important;
}

html.dark-mode .table-core-table tbody tr:hover td .ovpn-user-code,
html.dark-mode .table-core-table tbody tr:hover td .ovpn-password-code,
html.dark-mode .table-core-table tbody tr:hover td .ovpn-caller-code {
    background: #1a1040 !important;
    border-color: #7c3aed !important;
    color: #ffffff !important;
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.3) !important;
}

/* Neon badges inside VPN Remote tables */
html.dark-mode #datatable-ovn .badge.bg-info,
html.dark-mode .table-core-table .badge.bg-info {
    background: rgba(0, 240, 255, 0.12) !important;
    border: 1px solid rgba(0, 240, 255, 0.3) !important;
    color: #00f0ff !important;
}

html.dark-mode #datatable-ovn .badge.bg-success,
html.dark-mode .table-core-table .badge.bg-success {
    background: rgba(0, 255, 136, 0.12) !important;
    border: 1px solid rgba(0, 255, 136, 0.3) !important;
    color: #00ff88 !important;
}

html.dark-mode #datatable-ovn .badge.bg-danger,
html.dark-mode .table-core-table .badge.bg-danger {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
}

html.dark-mode #datatable-ovn .badge.bg-warning,
html.dark-mode .table-core-table .badge.bg-warning {
    background: rgba(250, 204, 21, 0.12) !important;
    border: 1px solid rgba(250, 204, 21, 0.3) !important;
    color: #facc15 !important;
}

html.dark-mode #datatable-ovn .badge.bg-dark,
html.dark-mode .table-core-table .badge.bg-dark {
    background: #111827 !important;
    border: 1px solid #1e2a3c !important;
    color: #8899b4 !important;
}

/* Row hover badge text visibility fix */
html.dark-mode #datatable-ovn tbody tr:hover td .badge,
html.dark-mode .table-core-table tbody tr:hover td .badge {
    color: #ffffff !important;
}

/* Global Table Code Block Overrides (Column 1 Client ID) */
html.dark-mode .table-core-code {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #a78bfa !important;
}

/* Global Table Action Buttons (Column 7 Actions) */
html.dark-mode .table-core-actions .btn-light,
html.dark-mode .table-core-actions .btn {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #8899b4 !important;
}

html.dark-mode .table-core-actions .btn-light:hover,
html.dark-mode .table-core-actions .btn:hover {
    background: #1e2a3c !important;
    color: #e8edf5 !important;
    border-color: #7c3aed !important;
}

/* Row hover table code text visibility fix */
html.dark-mode .table-core-table tbody tr:hover td .table-core-code {
    color: #ffffff !important;
}

/* ============================================================
   ADMIN WHATSAPP LOGS — Dark Mode Neon Override
   ============================================================ */
html.dark-mode .admin-wa-logs .logs-history-table td {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
    color: #8899b4 !important;
}

/* Specific override for the table wrapper container to prevent white top bar */
html.dark-mode .admin-wa-logs .logs-table-wrap {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
    box-shadow: none !important;
}

html.dark-mode .admin-wa-logs .logs-history-table tbody tr:hover td {
    background: #1c152d !important;
    border-top-color: #7c3aed !important;
    border-bottom-color: #7c3aed !important;
    color: #ffffff !important;
}

html.dark-mode .admin-wa-logs .logs-history-table tbody tr:hover td * {
    color: #ffffff !important;
}

html.dark-mode .admin-wa-logs .log-target {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #a78bfa !important;
}

html.dark-mode .admin-wa-logs .log-date {
    color: #5a708c !important;
}

html.dark-mode .admin-wa-logs .wa-info-chip {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #8899b4 !important;
}

html.dark-mode .admin-wa-logs .dataTables_wrapper .dataTables_filter label {
    color: #5a708c !important;
}

html.dark-mode .admin-wa-logs .dataTables_wrapper .dataTables_filter input {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #e8edf5 !important;
}

html.dark-mode .wa-send-confirm-modal .modal-content {
    background: #0d121e !important;
    border: 1px solid #1e2a3c !important;
}

html.dark-mode .wa-send-confirm-modal .modal-header {
    background: linear-gradient(135deg, #1a1040 0%, #0d0a1f 100%) !important;
    border-bottom: 1px solid #2d1f6e !important;
}

/* ============================================================
   ADMIN INVOICE — Dark Mode Neon Override
   ============================================================ */
html.dark-mode .admin-invoice-table-core .invoice-amount {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    box-shadow: none !important;
}

html.dark-mode .admin-invoice-table-core .invoice-amount__prefix {
    color: #5a708c !important;
}

html.dark-mode .admin-invoice-table-core .invoice-amount__value {
    color: #e8edf5 !important;
}

/* Row hover state for amount badge */
html.dark-mode .admin-invoice-table-core .table-core-table tbody tr:hover td .invoice-amount,
html.dark-mode .admin-invoice-table-core .table-core-table tbody tr:hover td .invoice-amount *,
html.dark-mode #datatable-ovn tbody tr:hover td .invoice-amount,
html.dark-mode #datatable-ovn tbody tr:hover td .invoice-amount * {
    color: #ffffff !important;
    border-color: #7c3aed !important;
}

/* ============================================================
   ADMIN MACRODROID LOGS — Dark Mode Neon Override
   ============================================================ */
html.dark-mode .macrodroid-admin-logs {
    --macrodroid-card-line: #1e2a3c;
    --macrodroid-soft-line: #1e2a3c;
    --macrodroid-surface: #0d121e;
    --macrodroid-surface-soft: #111827;
    --macrodroid-text: #e8edf5;
    --macrodroid-muted: #5a708c;
}

html.dark-mode .macrodroid-stat-card {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Row hover state for macrodroid pre boxes */
html.dark-mode .macrodroid-admin-logs .table-core-table tbody tr:hover td .macrodroid-pre {
    background: #1a1040 !important;
    border-color: #7c3aed !important;
    color: #ffffff !important;
}

/* ============================================================
   ADMIN LAUNDRY QRIS — Dark Mode Neon Override
   ============================================================ */
html.dark-mode .laundry-qris-stat {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .laundry-qris-stat small {
    color: #5a708c !important;
}

html.dark-mode .laundry-qris-stat strong {
    color: #e8edf5 !important;
}

html.dark-mode .laundry-qris-note {
    background: rgba(37, 99, 235, 0.06) !important;
    border-color: rgba(37, 99, 235, 0.18) !important;
    color: #8899b4 !important;
}

/* Row hover badge text visibility fix for laundry table */
html.dark-mode #datatable-laundry tbody tr:hover td,
html.dark-mode #datatable-laundry tbody tr:hover td * {
    color: #ffffff !important;
    border-color: #7c3aed !important;
}

/* ============================================================
   ADMIN TEST DANA & ASPI MPM — Dark Mode Neon Override
   ============================================================ */

/* 1. ASPI MPM Test Page (.aspi-page) */
html.dark-mode .aspi-page {
    --aspi-navy: #a78bfa;
    --aspi-blue: #7c3aed;
    --aspi-soft: #111827;
    --aspi-border: #1e2a3c;
    --aspi-text: #e8edf5;
    background: #0a0e17 !important;
}

html.dark-mode .aspi-hero {
    background:
        radial-gradient(circle at 90% 20%, rgba(124, 58, 237, .12), transparent 32%),
        linear-gradient(135deg, #0d121e 0%, #0a0e17 100%) !important;
    border-color: #1e2a3c !important;
}

html.dark-mode .aspi-card {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
}

html.dark-mode .aspi-card__header {
    background: linear-gradient(135deg, #1a1040 0%, #0d0a1f 100%) !important;
    border-bottom-color: #2d1f6e !important;
}

html.dark-mode .aspi-card__header h5,
html.dark-mode .aspi-card__header p {
    color: #ffffff !important;
}

html.dark-mode .aspi-card__body {
    background: #0d121e !important;
}

html.dark-mode .aspi-environment {
    background: #111827 !important;
    border-color: #1e2a3c !important;
}

html.dark-mode .aspi-operation {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #e8edf5 !important;
}

html.dark-mode .aspi-operation:hover,
html.dark-mode .aspi-operation.is-active {
    background: #1e2a3c !important;
    border-color: #7c3aed !important;
}

/* 2. DANA Snap Page (.dana-page) */
html.dark-mode .dana-page {
    background: #0a0e17 !important;
}

html.dark-mode .test-dana-card {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

html.dark-mode .test-dana-header {
    background: linear-gradient(135deg, #1a1040 0%, #0d0a1f 100%) !important;
    border-bottom-color: #2d1f6e !important;
}

html.dark-mode .test-dana-header h5 {
    color: #ffffff !important;
}

html.dark-mode .nav-pills-dana .nav-link {
    background-color: #111827 !important;
    border-color: #1e2a3c !important;
    color: #8899b4 !important;
}

html.dark-mode .nav-pills-dana .nav-link.active {
    background-color: #7c3aed !important;
    color: #ffffff !important;
    border-color: #7c3aed !important;
    box-shadow: 0 4px 10px rgba(124, 58, 237, 0.25) !important;
}

html.dark-mode .nav-pills-dana .nav-link:hover:not(.active) {
    background-color: #1e2a3c !important;
    color: #e8edf5 !important;
    border-color: #7c3aed !important;
}

html.dark-mode .dana-page .form-control,
html.dark-mode .dana-page .form-select {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #e8edf5 !important;
}

html.dark-mode .dana-page .form-control:focus,
html.dark-mode .dana-page .form-select:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

/* ============================================================
   ADMIN SYSTEM SETTINGS — Dark Mode Neon Override
   ============================================================ */
html.dark-mode .system-settings-page {
    --settings-ink: #e8edf5;
    --settings-muted: #5a708c;
    --settings-border: #1e2a3c;
    --settings-surface: #111827;
    background: #0a0e17 !important;
}

html.dark-mode .system-settings-page .system-settings-card {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .system-settings-page .settings-card-body {
    background: #0d121e !important;
}

html.dark-mode .system-settings-page .settings-tabs {
    background: #111827 !important;
}

html.dark-mode .system-settings-page .settings-tabs .nav-link {
    color: #8899b4 !important;
}

html.dark-mode .system-settings-page .settings-tabs .nav-link:hover {
    color: #e8edf5 !important;
    background: #1e2a3c !important;
}

html.dark-mode .system-settings-page .settings-tabs .nav-link.active {
    color: #ffffff !important;
    background: #7c3aed !important;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3) !important;
}

html.dark-mode .system-settings-page .settings-status {
    border-color: #1e2a3c !important;
    background: linear-gradient(135deg, #111827 0%, #0d121e 100%) !important;
}

html.dark-mode .system-settings-page .theme-option {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #e8edf5 !important;
}

html.dark-mode .system-settings-page .theme-option:hover {
    border-color: #7c3aed !important;
    box-shadow: 0 10px 20px rgba(124, 58, 237, 0.2) !important;
}

html.dark-mode .system-settings-page .theme-option.active {
    border-color: #7c3aed !important;
    background: #1e2a3c !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2) !important;
}

html.dark-mode .system-settings-page .form-control,
html.dark-mode .system-settings-page .form-select,
html.dark-mode .system-settings-page textarea {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #e8edf5 !important;
}

html.dark-mode .system-settings-page .form-control:focus,
html.dark-mode .system-settings-page .form-select:focus,
html.dark-mode .system-settings-page textarea:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

html.dark-mode .system-settings-page .theme-preview-link {
    color: #a78bfa !important;
}

/* ============================================================
   ADMIN GATEWAY SETTINGS, API TESTER & TOPUP METHODS
   ============================================================ */

/* 1. Topup Payment Methods (.topup-method-page) */
html.dark-mode .topup-method-page {
    --topup-primary: #7c3aed;
    --topup-primary-dark: #6d28d9;
    --topup-ink: #e8edf5;
    --topup-muted: #5a708c;
    --topup-line: #1e2a3c;
    background: #0a0e17 !important;
}

html.dark-mode .topup-method-card {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .topup-method-card .card-body {
    background: #0d121e !important;
}

html.dark-mode .topup-method-page .form-control,
html.dark-mode .topup-method-page .form-select {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #e8edf5 !important;
}

html.dark-mode .topup-method-page .form-control:focus,
html.dark-mode .topup-method-page .form-select:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

/* 2. Gateway Settings (.shopee-manager-page) */
html.dark-mode .shopee-manager-page {
    --shopee-primary: #a78bfa;
    --shopee-primary-hover: #7c3aed;
    --shopee-bg-light: #111827;
    --shopee-border: #1e2a3c;
    --shopee-text: #e8edf5;
    --shopee-muted: #5a708c;
    background: #0a0e17 !important;
}

html.dark-mode .gopay-card,
html.dark-mode .shopee-card,
html.dark-mode .dana-card {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .gopay-card .card-body,
html.dark-mode .shopee-card .card-body,
html.dark-mode .dana-card .card-body {
    background: #0d121e !important;
}

html.dark-mode .gopay-card .card-header,
html.dark-mode .shopee-card .card-header,
html.dark-mode .dana-card .card-header {
    background: linear-gradient(135deg, #1a1040 0%, #0d0a1f 100%) !important;
    border-bottom: 1px solid #2d1f6e !important;
}

html.dark-mode .gopay-card .card-header h4,
html.dark-mode .shopee-card .card-header h4,
html.dark-mode .dana-card .card-header h4 {
    color: #ffffff !important;
}

html.dark-mode .status-badge--success {
    background-color: rgba(0, 255, 136, 0.12) !important;
    color: #00ff88 !important;
    border-color: rgba(0, 255, 136, 0.25) !important;
}

html.dark-mode .status-badge--danger {
    background-color: rgba(239, 68, 68, 0.12) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
}

html.dark-mode .status-badge--warning {
    background-color: rgba(250, 204, 21, 0.12) !important;
    color: #facc15 !important;
    border-color: rgba(250, 204, 21, 0.25) !important;
}

/* 3. API Gateway Tester (.api-test-page) */
html.dark-mode .api-test-page {
    --api-blue: #a78bfa;
    --api-blue-dark: #7c3aed;
    --api-blue-soft: #111827;
    --api-border: #1e2a3c;
    --api-text: #e8edf5;
    --api-muted: #5a708c;
    background: #0a0e17 !important;
}

html.dark-mode .api-test-hero {
    background:
        radial-gradient(circle at 88% 12%, rgba(124, 58, 237, 0.12), transparent 32%),
        linear-gradient(135deg, #0d121e 0%, #0a0e17 100%) !important;
    border-color: #1e2a3c !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .api-test-hero::after {
    border-color: rgba(124, 58, 237, 0.08) !important;
}

html.dark-mode .api-test-card {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .api-test-card__body {
    background: #0d121e !important;
}

html.dark-mode .api-test-page .form-control,
html.dark-mode .api-test-page .form-select {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    color: #e8edf5 !important;
}

html.dark-mode .api-test-page .form-control:focus,
html.dark-mode .api-test-page .form-select:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

/* ============================================================
   ADMIN WIFI MANAGER — Dark Mode Neon Override
   ============================================================ */
html.dark-mode .admin-wifi-manager .logs-toolbar__stat {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    box-shadow: none !important;
}

html.dark-mode .admin-wifi-manager .logs-toolbar__stat-icon {
    background: rgba(0, 255, 136, 0.12) !important;
    color: #00ff88 !important;
}

html.dark-mode .admin-wifi-manager .logs-toolbar__stat-icon[style*="background: #dbeafe"] {
    background: rgba(37, 99, 235, 0.12) !important;
    color: #2563eb !important;
}

html.dark-mode .admin-wifi-manager .logs-toolbar__stat-icon[style*="background: #fef3c7"] {
    background: rgba(250, 204, 21, 0.12) !important;
    color: #facc15 !important;
}

html.dark-mode .admin-wifi-manager .logs-toolbar__stat-label {
    color: #5a708c !important;
}

html.dark-mode .admin-wifi-manager .logs-toolbar__stat-value {
    color: #e8edf5 !important;
}

html.dark-mode .admin-wifi-manager .logs-toolbar__row-top .form-select-sm {
    background-color: #111827 !important;
    border-color: #1e2a3c !important;
    color: #e8edf5 !important;
}

html.dark-mode .admin-wifi-manager .logs-toolbar__row-top .form-select-sm:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

/* ============================================================
   ADMIN WIFI ACTIVE USERS — Dark Mode Neon Override
   ============================================================ */
html.dark-mode .stats-card {
    background: #0d121e !important;
    border-color: #1e2a3c !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .stats-card__info h4 {
    color: #e8edf5 !important;
}

html.dark-mode .stats-card__info span {
    color: #5a708c !important;
}

html.dark-mode .server-nyawangan { background: rgba(0, 255, 136, 0.12) !important; color: #00ff88 !important; }
html.dark-mode .server-karangsono { background: rgba(37, 99, 235, 0.12) !important; color: #2563eb !important; }
html.dark-mode .server-bandar { background: rgba(236, 72, 153, 0.12) !important; color: #ec4899 !important; }
html.dark-mode .server-total { background: #111827 !important; color: #8899b4 !important; border-color: #1e2a3c !important; }

/* ==========================================================
   Modal "VPN Remote Berhasil Dibuat" — hitam neon (hijau)
   ========================================================== */

/* -- Kartu hero sukses -- */
html.dark-mode .ovpn-order-success__hero {
    border-color: rgba(34, 197, 94, 0.28);
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.14) 0%, rgba(13, 18, 30, 0.65) 100%);
    box-shadow: inset 0 0 18px rgba(34, 197, 94, 0.06);
}

html.dark-mode .ovpn-order-success__eyebrow {
    color: #4ade80;
}

html.dark-mode .ovpn-order-success__eyebrow::before {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18), 0 0 10px rgba(34, 197, 94, 0.55);
}

html.dark-mode .ovpn-order-success__hero-copy strong {
    color: #e8f9ef;
    text-shadow: 0 0 12px rgba(34, 197, 94, 0.25);
}

html.dark-mode .ovpn-order-success__hero-copy > span:last-child {
    color: #8fa9b8;
}

html.dark-mode .ovpn-order-success__hero-status {
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.18);
}

/* -- Detail order -- */
html.dark-mode .ovpn-order-success__details {
    border-color: #1e2a3c;
}

html.dark-mode .ovpn-order-success__row {
    background: #101826;
}

html.dark-mode .ovpn-order-success__row:nth-child(even) {
    background: #0c1420;
}

html.dark-mode .ovpn-order-success__label {
    color: #7d93a8;
}

html.dark-mode .ovpn-order-success__value {
    color: #e8edf5;
}

html.dark-mode .ovpn-order-success__value.is-accent {
    color: #4ade80;
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.35);
}

html.dark-mode .ovpn-order-success__status {
    color: #4ade80;
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}

/* -- Shell modal + ikon + tombol khusus modal ini -- */
html.dark-mode .jconfirm .jconfirm-box:has(.ovpn-order-success) {
    border-color: rgba(34, 197, 94, 0.35) !important;
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55), 0 0 28px rgba(34, 197, 94, 0.16) !important;
}

html.dark-mode .jconfirm .jconfirm-box:has(.ovpn-order-success) .jconfirm-icon-c {
    color: #22c55e !important;
    filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.6));
}

html.dark-mode .jconfirm .jconfirm-box:has(.ovpn-order-success) .jconfirm-buttons .btn-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border: none !important;
    color: #05130a !important;
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.5) !important;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

html.dark-mode .jconfirm .jconfirm-box:has(.ovpn-order-success) .jconfirm-buttons .btn-success:hover,
html.dark-mode .jconfirm .jconfirm-box:has(.ovpn-order-success) .jconfirm-buttons .btn-success:focus {
    color: #05130a !important;
    transform: translateY(-1px);
    box-shadow: 0 0 26px rgba(34, 197, 94, 0.65) !important;
}

/* ============================================================
   WhatsApp Gateway Panel (compact redesign) — Dark Mode
   Scope: .wa-panel--gateway-whatsapp / .wa-gw-* (exclusive to
   app/Views/v2/layanan/whatsapp/whatsapp.php). Mirrors the
   client-whatsapp.css "Compact Modern Redesign" section.
   ============================================================ */

html.dark-mode .wa-modern .wa-panel--gateway-whatsapp .wa-panel-head {
    background: linear-gradient(120deg, #111827 0%, #151d2e 40%, #0d121e 100%) !important;
    border-bottom-color: #1e2a3c !important;
}

html.dark-mode .wa-modern .wa-panel--gateway-whatsapp .wa-title-icon {
    color: #a78bfa !important;
}

html.dark-mode .wa-modern .wa-gw-stat {
    background: #111827 !important;
    border-color: #1e2a3c !important;
    box-shadow: none !important;
}

html.dark-mode .wa-modern .wa-gw-stat-label {
    color: #5a708c !important;
}

html.dark-mode .wa-modern .wa-gw-stat-value {
    color: #e8edf5 !important;
}

html.dark-mode .wa-modern .wa-gw-stat-note {
    color: #6d7fa0 !important;
}

html.dark-mode .wa-modern .wa-gw-stat--uid {
    --wa-gw-accent: #a78bfa;
    --wa-gw-accent-soft: rgba(124, 58, 237, 0.16);
}

html.dark-mode .wa-modern .wa-gw-stat--status {
    --wa-gw-accent: #38bdf8;
    --wa-gw-accent-soft: rgba(56, 189, 248, 0.14);
}

html.dark-mode .wa-modern .wa-gw-stat--plan {
    --wa-gw-accent: #facc15;
    --wa-gw-accent-soft: rgba(250, 204, 21, 0.14);
}

html.dark-mode .wa-modern .wa-gw-stat--limit {
    --wa-gw-accent: #2dd4bf;
    --wa-gw-accent-soft: rgba(45, 212, 191, 0.14);
}

html.dark-mode .wa-modern .wa-gw-chip.is-online {
    background: rgba(0, 255, 136, 0.12) !important;
    color: #00ff88 !important;
}

html.dark-mode .wa-modern .wa-gw-chip.is-offline {
    background: rgba(239, 68, 68, 0.14) !important;
    color: #f87171 !important;
}

html.dark-mode .wa-modern .wa-gw-cred {
    background: #111827 !important;
    border-color: #1e2a3c !important;
}

html.dark-mode .wa-modern .wa-gw-cred-label {
    color: #8899b4 !important;
}

html.dark-mode .wa-modern .wa-gw-cred--secret::before {
    background: #a78bfa !important;
}

html.dark-mode .wa-modern .wa-gw-cred--phone::before {
    background: #00ff88 !important;
}

html.dark-mode .wa-modern .wa-gw-secret {
    border-color: #372a5c !important;
    background: linear-gradient(135deg, #111827 0%, #17132b 100%) !important;
}

html.dark-mode .wa-modern .wa-gw-secret:hover {
    border-color: #7c3aed !important;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(124, 58, 237, 0.16) 100%) !important;
}

html.dark-mode .wa-modern .wa-gw-secret-text {
    color: #c4b5fd !important;
}

html.dark-mode .wa-modern .wa-gw-secret-hint {
    color: #8899b4 !important;
}

html.dark-mode .wa-modern .wa-gw-phone {
    border-color: #14532d !important;
    background: linear-gradient(135deg, #111827 0%, #0f1f18 100%) !important;
}

html.dark-mode .wa-modern .wa-gw-phone-value {
    color: #4ade80 !important;
}

html.dark-mode .wa-modern .wa-gw-phone-hint {
    color: #5a708c !important;
}

html.dark-mode .wa-modern .wa-gw-phone-hint.is-offline {
    color: #f87171 !important;
}

html.dark-mode .wa-modern .wa-gw-sub {
    background: linear-gradient(180deg, #111827 0%, #0d121e 100%) !important;
    border-color: #3a3316 !important;
    box-shadow: none !important;
}

html.dark-mode .wa-modern .wa-gw-sub::before {
    background: linear-gradient(180deg, #facc15 0%, #a16207 100%) !important;
}

html.dark-mode .wa-modern .wa-gw-sub-title {
    color: #e8edf5 !important;
}

html.dark-mode .wa-modern .wa-gw-sub-title i {
    color: #facc15 !important;
}

/* Premium Aktif / Manual — aksen hijau */
html.dark-mode .wa-modern .wa-gw-sub--active {
    background:
        radial-gradient(circle at top right, rgba(0, 255, 136, 0.1), transparent 42%),
        linear-gradient(180deg, #0f1f18 0%, #0d121e 100%) !important;
    border-color: #14532d !important;
    box-shadow: none !important;
}

html.dark-mode .wa-modern .wa-gw-sub--active::before {
    background: linear-gradient(180deg, #34d399 0%, #059669 100%) !important;
}

html.dark-mode .wa-modern .wa-gw-sub--active .wa-gw-sub-title i {
    color: #00ff88 !important;
}

html.dark-mode .wa-modern .wa-gw-sub--active .wa-gw-sub-stat {
    border-color: #14532d !important;
    background: rgba(13, 18, 30, 0.7) !important;
}

/* Premium Expired — aksen merah */
html.dark-mode .wa-modern .wa-gw-sub--expired {
    background:
        radial-gradient(circle at top right, rgba(239, 68, 68, 0.12), transparent 42%),
        linear-gradient(180deg, #1f0d0d 0%, #0d121e 100%) !important;
    border-color: #4c1d24 !important;
    box-shadow: none !important;
}

html.dark-mode .wa-modern .wa-gw-sub--expired::before {
    background: linear-gradient(180deg, #f87171 0%, #b91c1c 100%) !important;
}

html.dark-mode .wa-modern .wa-gw-sub--expired .wa-gw-sub-title i {
    color: #f87171 !important;
}

html.dark-mode .wa-modern .wa-gw-sub--expired .wa-gw-sub-stat {
    border-color: #4c1d24 !important;
    background: rgba(13, 18, 30, 0.7) !important;
}

html.dark-mode .wa-modern .wa-gw-badge--active {
    background: rgba(0, 255, 136, 0.12) !important;
    color: #00ff88 !important;
}

html.dark-mode .wa-modern .wa-gw-badge--pending {
    background: rgba(250, 204, 21, 0.14) !important;
    color: #facc15 !important;
}

html.dark-mode .wa-modern .wa-gw-badge--expired {
    background: rgba(239, 68, 68, 0.14) !important;
    color: #f87171 !important;
}

html.dark-mode .wa-modern .wa-gw-badge--manual {
    background: rgba(124, 58, 237, 0.16) !important;
    color: #c4b5fd !important;
}

html.dark-mode .wa-modern .wa-gw-badge--idle {
    background: rgba(124, 58, 237, 0.12) !important;
    color: #a78bfa !important;
}

html.dark-mode .wa-modern .wa-gw-sub-stat {
    border-color: #3a3316 !important;
    background: rgba(13, 18, 30, 0.6) !important;
}

html.dark-mode .wa-modern .wa-gw-sub-stat span {
    color: #8899b4 !important;
}

html.dark-mode .wa-modern .wa-gw-sub-stat strong {
    color: #e8edf5 !important;
}

html.dark-mode .wa-modern .wa-gw-sub-note {
    color: #8899b4 !important;
}

html.dark-mode .wa-modern .wa-gw-sub-action {
    border-left-color: #3a3316 !important;
}

html.dark-mode .wa-modern .wa-gw-upgrade-btn {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
    box-shadow: 0 10px 20px rgba(124, 58, 237, 0.3) !important;
}

html.dark-mode .wa-modern .wa-gw-upgrade-btn:disabled {
    background: #1e2a3c !important;
    box-shadow: none !important;
}

html.dark-mode .wa-modern .wa-gw-toggle {
    border-color: #1e2a3c !important;
    background: #111827 !important;
}

html.dark-mode .wa-modern .wa-gw-toggle__slider {
    background: #1e2a3c !important;
}

html.dark-mode .wa-modern .wa-gw-toggle__slider::after {
    background: #8899b4 !important;
}

html.dark-mode .wa-modern .wa-gw-toggle input:checked + .wa-gw-toggle__slider {
    background: linear-gradient(135deg, #059669 0%, #065f46 100%) !important;
}

html.dark-mode .wa-modern .wa-gw-toggle input:checked + .wa-gw-toggle__slider::after {
    background: #ffffff !important;
}

html.dark-mode .wa-modern .wa-gw-toggle__text {
    color: #e8edf5 !important;
}

html.dark-mode .wa-modern .wa-gw-manual-note {
    border-color: #1e2a3c !important;
    background: #0d121e !important;
    color: #8899b4 !important;
}

html.dark-mode .wa-modern .wa-gw-sub-footnote {
    color: #8899b4 !important;
}

html.dark-mode .wa-modern .wa-gw-footer {
    background: linear-gradient(135deg, #111827 0%, #0d121e 100%) !important;
    border-color: #1e2a3c !important;
}

html.dark-mode .wa-modern .wa-gw-access-label {
    color: #5a708c !important;
}

html.dark-mode .wa-modern .wa-gw-access-note {
    color: #8899b4 !important;
}

html.dark-mode .wa-modern .wa-gw-pill {
    border-color: #1e2a3c !important;
    background: #111827 !important;
    color: #a9bdff !important;
}

html.dark-mode .wa-modern .wa-gw-pill--premium {
    border-color: #372a5c !important;
    background: rgba(124, 58, 237, 0.16) !important;
    color: #c4b5fd !important;
}

html.dark-mode .wa-modern .wa-gw-pill--locked {
    border-color: #4c1d24 !important;
    background: rgba(239, 68, 68, 0.14) !important;
    color: #f87171 !important;
}

html.dark-mode .wa-modern .wa-gw-actions .btn-primary {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
}

html.dark-mode .wa-modern .wa-gw-actions .btn-warning {
    color: #2a1c00 !important;
    background: linear-gradient(135deg, #facc15 0%, #a16207 100%) !important;
}

html.dark-mode .wa-modern .wa-gw-actions .btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #991b1b 100%) !important;
}

html.dark-mode .wa-modern .wa-gw-legend {
    border-color: #1e2a3c !important;
    background: linear-gradient(135deg, #111827 0%, #0d121e 100%) !important;
    color: #8899b4 !important;
}

html.dark-mode .wa-modern .wa-gw-legend strong {
    color: #a78bfa !important;
}