.theme-switcher {
    position: relative;
    z-index: 1085;
}

.theme-switcher-inline {
    flex: 0 0 auto;
}

.theme-switcher-floating {
    position: fixed;
    top: 18px;
    right: 18px;
}

:root {
    --theme-primary: #1677ff;
    --theme-primary-hover: #4096ff;
    --theme-bg: #f7f8fa;
    --theme-bg-elevated: #ffffff;
    --theme-surface: #ffffff;
    --theme-surface-strong: #f4f7fb;
    --theme-surface-soft: #fbfcfd;
    --theme-surface-muted: #f2f4f7;
    --theme-border: #e5e6eb;
    --theme-border-strong: #d9dde4;
    --theme-text: #1d2129;
    --theme-body: #4e5969;
    --theme-muted: #86909c;
    --theme-link: #165dff;
    --theme-link-hover: #0e42d2;
    --theme-input-bg: #ffffff;
    --theme-input-border: #d9dde4;
    --theme-input-disabled: #f3f4f6;
    --theme-table-head: #fbfcfd;
    --theme-table-row-alt: rgba(15, 23, 42, 0.02);
    --theme-table-row-hover: rgba(22, 119, 255, 0.06);
    --theme-shadow-soft: 0 8px 24px rgba(29, 33, 41, 0.05);
    --theme-shadow-strong: 0 18px 40px rgba(29, 33, 41, 0.12);
    --theme-success: #00b42a;
    --theme-warning: #ff7d00;
    --theme-danger: #f53f3f;
    --theme-info: #1677ff;
}

html[data-theme="light"] {
    color-scheme: light;
}

.theme-switcher-toggle,
.theme-switcher-option {
    border: 1px solid var(--theme-toggle-border, rgba(148, 163, 184, 0.22));
    background: var(--theme-toggle-bg, rgba(255, 255, 255, 0.88));
    color: var(--theme-toggle-text, #0f172a);
    box-shadow: var(--theme-toggle-shadow, 0 12px 28px rgba(15, 23, 42, 0.12));
    backdrop-filter: blur(12px);
}

.theme-switcher-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.theme-switcher-toggle:hover,
.theme-switcher-toggle:focus-visible {
    transform: translateY(-1px);
    border-color: var(--theme-toggle-accent, rgba(22, 93, 255, 0.3));
    outline: none;
}

.theme-switcher-toggle-icon,
.theme-switcher-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.theme-switcher-toggle-icon svg,
.theme-switcher-option-icon svg {
    display: block;
}

.theme-switcher-toggle-text {
    white-space: nowrap;
}

.theme-switcher-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 244px;
    padding: 8px;
    border-radius: 16px;
    background: var(--theme-toggle-menu-bg, rgba(255, 255, 255, 0.94));
    border: 1px solid var(--theme-toggle-border, rgba(148, 163, 184, 0.22));
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}

.theme-switcher.is-open .theme-switcher-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.theme-switcher-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.theme-switcher-option + .theme-switcher-option {
    margin-top: 6px;
}

.theme-switcher-option:hover,
.theme-switcher-option:focus-visible {
    transform: translateY(-1px);
    border-color: var(--theme-toggle-accent, rgba(22, 93, 255, 0.3));
    outline: none;
}

.theme-switcher-option-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.theme-switcher-option-copy strong {
    color: inherit;
    font-size: 0.92rem;
    line-height: 1.25;
}

.theme-switcher-option-copy small {
    color: var(--theme-toggle-muted, #64748b);
    font-size: 0.76rem;
    line-height: 1.35;
}

.theme-switcher-option.is-active {
    border-color: var(--theme-toggle-accent, rgba(22, 93, 255, 0.3));
    background: var(--theme-toggle-active-bg, rgba(22, 93, 255, 0.08));
}

body.public-page {
    --theme-toggle-bg: rgba(255, 255, 255, 0.86);
    --theme-toggle-menu-bg: rgba(255, 255, 255, 0.96);
    --theme-toggle-border: rgba(148, 163, 184, 0.22);
    --theme-toggle-text: #0f172a;
    --theme-toggle-muted: #64748b;
    --theme-toggle-accent: rgba(22, 93, 255, 0.28);
    --theme-toggle-active-bg: rgba(22, 93, 255, 0.08);
    --theme-toggle-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --panel-primary: #1677ff;
    --panel-primary-hover: #4096ff;
    --panel-success: #00b42a;
    --panel-warning: #ff7d00;
    --panel-danger: #f53f3f;
    --panel-bg: #1a2333;
    --panel-surface: #2a3648;
    --panel-surface-soft: #314056;
    --panel-surface-muted: #202c3d;
    --panel-border: rgba(22, 119, 255, 0.12);
    --panel-text: #f7f9fc;
    --panel-body: #e2e8f0;
    --panel-muted: #a9b4c3;
    --panel-input-border: rgba(148, 163, 184, 0.2);
    --panel-shadow: 0 18px 36px rgba(15, 23, 42, 0.28);
    --panel-shadow-soft: 0 10px 24px rgba(15, 23, 42, 0.2);
    --admin-primary: #1677ff;
    --admin-primary-hover: #4096ff;
    --admin-primary-soft: #243244;
    --admin-bg: #1a2333;
    --admin-surface: #2a3648;
    --admin-soft: #314056;
    --admin-border: rgba(22, 119, 255, 0.12);
    --admin-text: #f7f9fc;
    --admin-muted: #e2e8f0;
    --admin-shadow: 0 18px 36px rgba(15, 23, 42, 0.28);
    --admin-sidebar-shadow: 0 16px 32px rgba(15, 23, 42, 0.22);
    --brand-primary: #1677ff;
    --brand-primary-hover: #4096ff;
    --brand-success: #00b42a;
    --brand-warning: #ff7d00;
    --brand-danger: #f53f3f;
    --brand-soft: #243244;
    --bg-page: #1a2333;
    --bg-surface: #2a3648;
    --bg-soft: #202c3d;
    --border-color: rgba(22, 119, 255, 0.12);
    --input-border: rgba(148, 163, 184, 0.2);
    --text-primary: #f7f9fc;
    --text-body: #e2e8f0;
    --text-muted: #a9b4c3;
    --shadow-soft: 0 18px 36px rgba(15, 23, 42, 0.26);
    --shadow-card: 0 10px 24px rgba(15, 23, 42, 0.18);
}

html[data-theme="dark"] body.panel-app,
html[data-theme="dark"] body.admin-app,
html[data-theme="dark"] body.public-page {
    --theme-toggle-bg: rgba(30, 41, 59, 0.72);
    --theme-toggle-menu-bg: rgba(24, 34, 50, 0.92);
    --theme-toggle-border: rgba(22, 119, 255, 0.12);
    --theme-toggle-text: #f7f9fc;
    --theme-toggle-muted: #a9b4c3;
    --theme-toggle-accent: rgba(22, 119, 255, 0.18);
    --theme-toggle-active-bg: rgba(22, 119, 255, 0.1);
    --theme-toggle-shadow: 0 18px 32px rgba(15, 23, 42, 0.24);
}

html[data-theme="dark"] body.panel-app,
html[data-theme="dark"] body.admin-app,
html[data-theme="dark"] body.public-page,
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .table,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .btn-link,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] label,
html[data-theme="dark"] legend,
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] small,
html[data-theme="dark"] span,
html[data-theme="dark"] .text-body,
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .link-dark {
    color: var(--panel-body);
}

html[data-theme="dark"] a,
html[data-theme="dark"] .btn-link,
html[data-theme="dark"] .page-link,
html[data-theme="dark"] .dropdown-item {
    color: var(--panel-text);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] strong,
html[data-theme="dark"] b,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .modal-title,
html[data-theme="dark"] .text-black {
    color: var(--panel-text);
}

html[data-theme="dark"] body.panel-app {
    background: var(--panel-bg);
    color: var(--panel-body);
}

html[data-theme="dark"] .panel-shell,
html[data-theme="dark"] .panel-main {
    background: transparent;
}

html[data-theme="dark"] .panel-sidebar,
html[data-theme="dark"] .panel-topbar,
html[data-theme="dark"] .panel-header,
html[data-theme="dark"] .panel-account-card,
html[data-theme="dark"] .panel-brand-mark,
html[data-theme="dark"] .panel-brand-mark-image,
html[data-theme="dark"] .panel-hero-meta-item,
html[data-theme="dark"] .card,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .panel-feature-card,
html[data-theme="dark"] .panel-summary-box,
html[data-theme="dark"] .panel-note-card,
html[data-theme="dark"] .panel-note-box,
html[data-theme="dark"] .chat-workspace-card,
html[data-theme="dark"] .buy-plan-card,
html[data-theme="dark"] .panel-site-card,
html[data-theme="dark"] .panel-order-card,
html[data-theme="dark"] .profile-security-summary,
html[data-theme="dark"] .panel-security-item,
html[data-theme="dark"] .buy-page-hero-meta,
html[data-theme="dark"] .buy-page-hero-action,
html[data-theme="dark"] .dashboard-empty-state,
html[data-theme="dark"] .payment-status-box,
html[data-theme="dark"] .payment-modal-card,
html[data-theme="dark"] .modal-content {
    background: rgba(42, 54, 72, 0.82) !important;
    backdrop-filter: blur(8px);
    border-color: var(--panel-border) !important;
    color: var(--panel-body) !important;
    box-shadow: var(--panel-shadow-soft);
}

html[data-theme="dark"] .panel-topbar,
html[data-theme="dark"] .panel-header {
    background: rgba(26, 35, 51, 0.92) !important;
}

html[data-theme="dark"] .panel-nav .nav-link:hover,
html[data-theme="dark"] .panel-account-link:hover,
html[data-theme="dark"] .panel-topbar-icon:hover,
html[data-theme="dark"] .header-icon-btn:hover,
html[data-theme="dark"] .panel-app-tech .panel-account-link:hover,
html[data-theme="dark"] .panel-app-tech .panel-menu-link:hover {
    background: rgba(22, 119, 255, 0.08) !important;
    color: var(--panel-text) !important;
}

html[data-theme="dark"] .panel-nav .nav-link.active,
html[data-theme="dark"] .panel-app-tech .panel-menu-link.active {
    background: rgba(22, 119, 255, 0.18) !important;
    border-color: rgba(22, 119, 255, 0.22) !important;
    box-shadow: 0 0 0 1px rgba(22, 119, 255, 0.08) inset !important;
    color: #f7fbff !important;
}

html[data-theme="dark"] .panel-title,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .panel-brand-text strong,
html[data-theme="dark"] .panel-account-name,
html[data-theme="dark"] .panel-topbar-user-meta strong,
html[data-theme="dark"] .dashboard-card-header,
html[data-theme="dark"] .dashboard-card-header h5,
html[data-theme="dark"] .panel-feature-card h3,
html[data-theme="dark"] .panel-feature-card h4,
html[data-theme="dark"] .stat-value,
html[data-theme="dark"] .panel-summary-box strong,
html[data-theme="dark"] .buy-plan-price,
html[data-theme="dark"] .payment-qr-amount,
html[data-theme="dark"] .chat-bubble-meta strong {
    color: var(--panel-text) !important;
}

html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .panel-app-tech .table thead th {
    background: rgba(32, 44, 61, 0.92) !important;
    color: var(--panel-text) !important;
    border-color: var(--panel-border) !important;
}

html[data-theme="dark"] .table > :not(caption) > * > *,
html[data-theme="dark"] .panel-app-tech .table > :not(caption) > * > * {
    border-color: var(--panel-border) !important;
    color: var(--panel-body) !important;
}

html[data-theme="dark"] .table tbody tr:hover {
    background: rgba(22, 119, 255, 0.05) !important;
}

html[data-theme="dark"] .table-responsive {
    border-color: var(--panel-border) !important;
    background: rgba(42, 54, 72, 0.74) !important;
}

html[data-theme="dark"] .chat-message-list {
    background: rgba(32, 44, 61, 0.86) !important;
}

html[data-theme="dark"] .chat-bubble.message-own,
html[data-theme="dark"] .message-own {
    background: rgba(22, 119, 255, 0.16) !important;
    border-color: rgba(22, 119, 255, 0.2) !important;
    color: var(--panel-text) !important;
}

html[data-theme="dark"] .chat-bubble.message-other,
html[data-theme="dark"] .message-other {
    background: rgba(42, 54, 72, 0.86) !important;
    border-color: var(--panel-border) !important;
    color: var(--panel-text) !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .panel-app-tech .form-control,
html[data-theme="dark"] .panel-app-tech .form-select {
    background: rgba(32, 44, 61, 0.9) !important;
    border-color: var(--panel-input-border) !important;
    color: var(--panel-text) !important;
}

html[data-theme="dark"] .form-control::placeholder {
    color: var(--panel-muted) !important;
}

html[data-theme="dark"] .btn-outline-primary,
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-secondary {
    background: rgba(42, 54, 72, 0.82);
    border-color: var(--panel-border);
    color: var(--panel-text);
}

html[data-theme="dark"] .btn-outline-primary:hover,
html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-secondary:hover {
    background: rgba(22, 119, 255, 0.1);
    border-color: rgba(22, 119, 255, 0.18);
    color: var(--panel-text);
}

html[data-theme="dark"] .alert {
    background: rgba(42, 54, 72, 0.84);
    border-color: var(--panel-border);
    color: var(--panel-body);
}

html[data-theme="dark"] .alert-info {
    background: rgba(22, 119, 255, 0.14) !important;
    border-color: rgba(22, 119, 255, 0.2) !important;
    color: #d6e8ff !important;
}

html[data-theme="dark"] .alert-success {
    background: rgba(0, 180, 42, 0.14) !important;
    border-color: rgba(0, 180, 42, 0.2) !important;
    color: #b7f0c2 !important;
}

html[data-theme="dark"] .alert-warning {
    background: rgba(255, 125, 0, 0.14) !important;
    border-color: rgba(255, 125, 0, 0.2) !important;
    color: #ffd4a3 !important;
}

html[data-theme="dark"] .alert-danger {
    background: rgba(245, 63, 63, 0.14) !important;
    border-color: rgba(245, 63, 63, 0.2) !important;
    color: #ffc2c2 !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .form-text,
html[data-theme="dark"] .panel-subtitle,
html[data-theme="dark"] .page-description,
html[data-theme="dark"] .panel-table-toolbar p,
html[data-theme="dark"] .payment-modal-kicker,
html[data-theme="dark"] .payment-note,
html[data-theme="dark"] .payment-qr-order,
html[data-theme="dark"] .payment-qr-method,
html[data-theme="dark"] .payment-qr-tips,
html[data-theme="dark"] .payment-status-meta,
html[data-theme="dark"] .payment-summary-box,
html[data-theme="dark"] .payment-summary-box .text-muted {
    color: var(--panel-muted) !important;
}

html[data-theme="dark"] .payment-summary-box,
html[data-theme="dark"] .payment-qr-fallback {
    background: rgba(32, 44, 61, 0.88) !important;
    border: 1px solid var(--panel-border) !important;
    color: var(--panel-body) !important;
}

html[data-theme="dark"] .payment-modal .modal-header,
html[data-theme="dark"] .payment-modal .modal-footer {
    background: rgba(32, 44, 61, 0.88) !important;
    border-color: var(--panel-border) !important;
}

html[data-theme="dark"] .payment-modal .btn-close {
    filter: invert(1) brightness(1.25) opacity(0.9);
}

html[data-theme="dark"] .payment-option-tile {
    background: rgba(32, 44, 61, 0.88) !important;
    border-color: var(--panel-border) !important;
    color: var(--panel-text) !important;
}

html[data-theme="dark"] .payment-option-tile:hover,
html[data-theme="dark"] .payment-option-tile:focus-visible {
    background: rgba(30, 41, 59, 0.88) !important;
    border-color: rgba(22, 119, 255, 0.18) !important;
    box-shadow: 0 0 6px rgba(22, 119, 255, 0.2) !important;
}

html[data-theme="dark"] .payment-option-text strong,
html[data-theme="dark"] .modal-title {
    color: var(--panel-text) !important;
}

html[data-theme="dark"] .profile-mode-note,
html[data-theme="dark"] .profile-security-summary-label,
html[data-theme="dark"] .panel-note-card p,
html[data-theme="dark"] .panel-security-item,
html[data-theme="dark"] .dashboard-empty-state p {
    color: var(--panel-body) !important;
}

html[data-theme="dark"] .panel-security-item strong,
html[data-theme="dark"] .panel-note-card strong,
html[data-theme="dark"] .dashboard-empty-state strong {
    color: var(--panel-text) !important;
}

html[data-theme="dark"] .profile-mode-badge-viewing {
    background: rgba(32, 44, 61, 0.88) !important;
    color: var(--panel-body) !important;
    border: 1px solid var(--panel-border) !important;
}

html[data-theme="dark"] .profile-mode-badge-editing {
    background: rgba(22, 119, 255, 0.14) !important;
    color: #d6e8ff !important;
    border: 1px solid rgba(22, 119, 255, 0.2) !important;
}

html[data-theme="dark"] .form-check-input {
    background-color: rgba(32, 44, 61, 0.9) !important;
    border-color: var(--panel-input-border) !important;
}

html[data-theme="dark"] .form-check-input:checked {
    background-color: #1677ff !important;
    border-color: #1677ff !important;
}

html[data-theme="dark"] .form-check-label {
    color: var(--panel-body) !important;
}

html[data-theme="dark"] .payment-status-success {
    background: rgba(0, 180, 42, 0.14) !important;
    border-color: rgba(0, 180, 42, 0.2) !important;
    color: #b7f0c2 !important;
}

html[data-theme="dark"] .payment-status-pending {
    background: rgba(32, 44, 61, 0.9) !important;
    color: var(--panel-body) !important;
}

html[data-theme="dark"] .panel-data-pill,
html[data-theme="dark"] .badge.text-bg-secondary,
html[data-theme="dark"] .text-bg-secondary {
    background: rgba(22, 119, 255, 0.14) !important;
    color: #d6e8ff !important;
    border-color: rgba(22, 119, 255, 0.18) !important;
}

html[data-theme="dark"] .badge.text-bg-success,
html[data-theme="dark"] .text-bg-success {
    background: rgba(0, 180, 42, 0.14) !important;
    color: #b7f0c2 !important;
    border-color: rgba(0, 180, 42, 0.2) !important;
}

html[data-theme="dark"] .badge.text-bg-warning,
html[data-theme="dark"] .text-bg-warning {
    background: rgba(255, 125, 0, 0.16) !important;
    color: #ffd4a3 !important;
    border-color: rgba(255, 125, 0, 0.22) !important;
}

html[data-theme="dark"] .badge.bg-danger,
html[data-theme="dark"] .text-bg-danger {
    background: rgba(245, 63, 63, 0.16) !important;
    color: #ffc2c2 !important;
    border-color: rgba(245, 63, 63, 0.22) !important;
}

html[data-theme="dark"] .pagination .page-link {
    background: rgba(32, 44, 61, 0.9) !important;
    border-color: var(--panel-border) !important;
    color: var(--panel-text) !important;
}

html[data-theme="dark"] .pagination .page-link:hover {
    background: rgba(22, 119, 255, 0.1) !important;
    border-color: rgba(22, 119, 255, 0.18) !important;
    color: var(--panel-text) !important;
}

html[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background: rgba(32, 44, 61, 0.7) !important;
    border-color: var(--panel-border) !important;
    color: var(--panel-muted) !important;
}

html[data-theme="dark"] .pagination .page-item.active .page-link {
    background: rgba(22, 119, 255, 0.18) !important;
    border-color: rgba(22, 119, 255, 0.2) !important;
    color: #f7fbff !important;
}

html[data-theme="dark"] .table-success,
html[data-theme="dark"] .table-success > td,
html[data-theme="dark"] .table-success > th {
    background: rgba(0, 180, 42, 0.1) !important;
    color: var(--panel-text) !important;
}

html[data-theme="dark"] body.admin-app {
    background: var(--admin-bg);
    color: var(--admin-text);
}

html[data-theme="dark"] .admin-shell,
html[data-theme="dark"] .admin-main {
    background: transparent;
}

html[data-theme="dark"] .admin-sidebar,
html[data-theme="dark"] .admin-topbar,
html[data-theme="dark"] .admin-header,
html[data-theme="dark"] .admin-account-card,
html[data-theme="dark"] .page-hero-meta-item,
html[data-theme="dark"] .admin-card,
html[data-theme="dark"] .admin-feature-card,
html[data-theme="dark"] .admin-summary-box,
html[data-theme="dark"] .admin-settings-overview-card,
html[data-theme="dark"] .admin-settings-sidebar-card,
html[data-theme="dark"] .admin-setting-group,
html[data-theme="dark"] .admin-runtime-summary-card,
html[data-theme="dark"] .admin-monitor-test-result,
html[data-theme="dark"] .admin-mail-test-box,
html[data-theme="dark"] .admin-note-box,
html[data-theme="dark"] .admin-keypoint-item,
html[data-theme="dark"] .admin-dashboard-strip-item,
html[data-theme="dark"] .dashboard-empty-state,
html[data-theme="dark"] .admin-summary-strip,
html[data-theme="dark"] .admin-table-toolbar {
    background: rgba(42, 54, 72, 0.82) !important;
    backdrop-filter: blur(8px);
    border-color: var(--admin-border) !important;
    color: var(--admin-muted) !important;
    box-shadow: var(--admin-shadow);
}

html[data-theme="dark"] .admin-sidebar {
    background: linear-gradient(180deg, rgba(32, 44, 61, 0.98) 0%, rgba(26, 35, 51, 0.98) 100%) !important;
}

html[data-theme="dark"] .admin-topbar,
html[data-theme="dark"] .admin-header {
    background: rgba(26, 35, 51, 0.92) !important;
    border-bottom-color: var(--admin-border) !important;
}

html[data-theme="dark"] .admin-nav .nav-link:hover,
html[data-theme="dark"] .admin-account-link:hover,
html[data-theme="dark"] .admin-topbar-icon:hover {
    background: rgba(22, 119, 255, 0.08) !important;
    color: var(--admin-text) !important;
}

html[data-theme="dark"] .admin-nav .nav-link.active {
    background: rgba(22, 119, 255, 0.18) !important;
    border-color: rgba(22, 119, 255, 0.22) !important;
    color: #f7fbff !important;
}

html[data-theme="dark"] .admin-setting-group .accordion-button {
    background: rgba(42, 54, 72, 0.84) !important;
    color: var(--admin-text) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .admin-setting-group .accordion-button:not(.collapsed) {
    background: rgba(22, 119, 255, 0.14) !important;
    color: var(--admin-text) !important;
}

html[data-theme="dark"] .admin-setting-group .accordion-button::after {
    filter: invert(88%) sepia(12%) saturate(660%) hue-rotate(180deg) brightness(104%) contrast(96%);
}

html[data-theme="dark"] .admin-copy-group .btn,
html[data-theme="dark"] .admin-mail-test-box .btn,
html[data-theme="dark"] .admin-monitor-test-result .btn {
    border-color: var(--admin-border) !important;
}

html[data-theme="dark"] .admin-brand,
html[data-theme="dark"] .admin-brand strong,
html[data-theme="dark"] .admin-topbar-user-meta strong,
html[data-theme="dark"] .page-hero h1,
html[data-theme="dark"] .page-hero-meta-item strong,
html[data-theme="dark"] .admin-card h3,
html[data-theme="dark"] .admin-card h4,
html[data-theme="dark"] .admin-card h5,
html[data-theme="dark"] .admin-note-box strong {
    color: var(--admin-text) !important;
}

html[data-theme="dark"] .admin-content .table thead th {
    background: rgba(32, 44, 61, 0.92) !important;
    color: var(--admin-text) !important;
    border-color: var(--admin-border) !important;
}

html[data-theme="dark"] .admin-content .table > :not(caption) > * > * {
    border-color: var(--admin-border) !important;
    color: var(--admin-muted) !important;
}

html[data-theme="dark"] .admin-content .form-control,
html[data-theme="dark"] .admin-content .form-select {
    background: rgba(32, 44, 61, 0.9) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
    color: var(--admin-text) !important;
}

html[data-theme="dark"] .admin-content .form-check-label,
html[data-theme="dark"] .admin-content .admin-section-note,
html[data-theme="dark"] .admin-content .form-text,
html[data-theme="dark"] .admin-runtime-summary-card p,
html[data-theme="dark"] .admin-settings-overview-card p,
html[data-theme="dark"] .admin-summary-strip span,
html[data-theme="dark"] .admin-settings-sidebar-note {
    color: var(--admin-muted) !important;
}

html[data-theme="dark"] .admin-runtime-summary-card strong,
html[data-theme="dark"] .admin-settings-overview-card strong,
html[data-theme="dark"] .admin-summary-strip strong,
html[data-theme="dark"] .admin-settings-sidebar-title,
html[data-theme="dark"] .admin-runtime-note-title,
html[data-theme="dark"] .admin-monitor-test-title {
    color: var(--admin-text) !important;
}

html[data-theme="dark"] .admin-runtime-note-list li {
    color: var(--admin-muted) !important;
}

html[data-theme="dark"] .admin-monitor-test-log {
    background: rgba(32, 44, 61, 0.9) !important;
    border-color: var(--admin-border) !important;
    color: var(--admin-text) !important;
}

html[data-theme="dark"] body.site-app .navbar,
html[data-theme="dark"] body.site-app .sidebar,
html[data-theme="dark"] body.site-app .position-sticky {
    background: rgba(42, 54, 72, 0.84) !important;
    backdrop-filter: blur(8px);
    border-color: var(--panel-border) !important;
    color: var(--panel-body) !important;
}

html[data-theme="dark"] body.site-app .navbar {
    border-bottom: 1px solid var(--panel-border) !important;
}

html[data-theme="dark"] body.site-app .sidebar {
    border-right: 1px solid var(--panel-border) !important;
}

html[data-theme="dark"] body.site-app .navbar-brand,
html[data-theme="dark"] body.site-app .sidebar .nav-link,
html[data-theme="dark"] body.site-app .card-header h5,
html[data-theme="dark"] body.site-app .card strong {
    color: var(--panel-text) !important;
}

html[data-theme="dark"] body.site-app .sidebar .nav-link:hover,
html[data-theme="dark"] body.site-app .sidebar .nav-link.active {
    background: rgba(22, 119, 255, 0.12) !important;
    color: var(--panel-text) !important;
}

html[data-theme="dark"] body.site-app .card-header {
    background: rgba(32, 44, 61, 0.9) !important;
    border-bottom-color: var(--panel-border) !important;
}

html[data-theme="dark"] body.public-page {
    background: var(--bg-page);
    color: var(--text-body);
}

html[data-theme="dark"] .public-navbar,
html[data-theme="dark"] .hero-panel,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .announcement-card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .pay-card,
html[data-theme="dark"] .payment-return-card,
html[data-theme="dark"] .auth-side-card,
html[data-theme="dark"] .home-hero-shell,
html[data-theme="dark"] .home-feature-card,
html[data-theme="dark"] .home-process-panel,
html[data-theme="dark"] .home-scenario-panel,
html[data-theme="dark"] .home-announcement-card,
html[data-theme="dark"] .home-empty-card,
html[data-theme="dark"] .home-stat-card,
html[data-theme="dark"] .home-status-card,
html[data-theme="dark"] .home-scenario-card,
html[data-theme="dark"] .home-process-item,
html[data-theme="dark"] .home-cta-panel {
    background: rgba(42, 54, 72, 0.82) !important;
    backdrop-filter: blur(8px);
    border-color: var(--border-color) !important;
    color: var(--text-body) !important;
    box-shadow: var(--shadow-card);
}

html[data-theme="dark"] .public-navbar {
    background: rgba(26, 35, 51, 0.92) !important;
}

html[data-theme="dark"] .home-main {
    background:
        radial-gradient(circle at top left, rgba(22, 119, 255, 0.08), transparent 28%),
        linear-gradient(180deg, #1a2333 0%, #202c3d 100%) !important;
}

html[data-theme="dark"] .home-hero-shell,
html[data-theme="dark"] .hero-panel {
    background:
        radial-gradient(circle at top left, rgba(22, 119, 255, 0.08), transparent 26%),
        linear-gradient(180deg, rgba(42, 54, 72, 0.86) 0%, rgba(32, 44, 61, 0.88) 100%) !important;
}

html[data-theme="dark"] .home-status-list li,
html[data-theme="dark"] .home-hero-tags span,
html[data-theme="dark"] .hero-chip,
html[data-theme="dark"] .feature-kicker,
html[data-theme="dark"] .home-badge {
    background: rgba(22, 119, 255, 0.12) !important;
    color: #d6e8ff !important;
    border-color: rgba(22, 119, 255, 0.16) !important;
}

html[data-theme="dark"] .public-navbar .navbar-brand,
html[data-theme="dark"] .public-navbar .nav-link,
html[data-theme="dark"] .home-hero-copy h1,
html[data-theme="dark"] .home-section-head h2,
html[data-theme="dark"] .home-feature-card h3,
html[data-theme="dark"] .home-process-item h3,
html[data-theme="dark"] .home-scenario-card h3,
html[data-theme="dark"] .home-announcement-head h3,
html[data-theme="dark"] .auth-card h1,
html[data-theme="dark"] .auth-side h1,
html[data-theme="dark"] .payment-return-card h1,
html[data-theme="dark"] .pay-card h1,
html[data-theme="dark"] .display-4,
html[data-theme="dark"] .home-stat-card strong {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .public-page .form-control,
html[data-theme="dark"] .public-page .form-select {
    background: rgba(32, 44, 61, 0.9);
    border-color: var(--input-border);
    color: var(--text-primary);
}

html[data-theme="dark"] .public-page .btn-outline-secondary,
html[data-theme="dark"] .public-page .btn-outline-primary {
    background: rgba(42, 54, 72, 0.82);
    border-color: var(--border-color);
    color: var(--text-primary);
}

html[data-theme="dark"] .public-page .btn-outline-secondary:hover,
html[data-theme="dark"] .public-page .btn-outline-primary:hover {
    background: rgba(22, 119, 255, 0.1);
    border-color: rgba(22, 119, 255, 0.18);
    color: var(--text-primary);
}

html[data-theme="dark"] .public-page .alert {
    background: rgba(42, 54, 72, 0.84);
    border-color: var(--border-color);
    color: var(--text-body);
}

html[data-theme="dark"] .public-page .text-muted,
html[data-theme="dark"] .public-page .form-text,
html[data-theme="dark"] .auth-side p,
html[data-theme="dark"] .auth-side-card span,
html[data-theme="dark"] .auth-card-head p,
html[data-theme="dark"] .auth-links p,
html[data-theme="dark"] .auth-links a,
html[data-theme="dark"] .payment-return-card p {
    color: var(--text-body) !important;
}

html[data-theme="dark"] .auth-side-card strong,
html[data-theme="dark"] .pay-card .lead,
html[data-theme="dark"] .payment-return-status,
html[data-theme="dark"] .auth-links a:hover {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .payment-return-status.is-success {
    background: rgba(0, 180, 42, 0.14) !important;
    color: #b7f0c2 !important;
}

html[data-theme="dark"] .payment-return-status.is-failed {
    background: rgba(245, 63, 63, 0.16) !important;
    color: #ffc2c2 !important;
}

html[data-theme="dark"] .public-page .form-control:disabled,
html[data-theme="dark"] .public-page .form-control[readonly],
html[data-theme="dark"] .public-page .form-select:disabled,
html[data-theme="dark"] .public-page textarea:disabled {
    background: rgba(32, 44, 61, 0.8) !important;
    color: var(--text-muted) !important;
}

html[data-theme="dark"] {
    --theme-bg: #111827;
    --theme-bg-elevated: #162133;
    --theme-surface: rgba(30, 41, 59, 0.86);
    --theme-surface-strong: rgba(36, 52, 72, 0.94);
    --theme-surface-soft: rgba(22, 33, 51, 0.88);
    --theme-surface-muted: rgba(15, 23, 42, 0.78);
    --theme-border: rgba(148, 163, 184, 0.18);
    --theme-border-strong: rgba(148, 163, 184, 0.28);
    --theme-text: #f8fafc;
    --theme-body: #d6dfeb;
    --theme-muted: #94a3b8;
    --theme-link: #8bb8ff;
    --theme-link-hover: #bfd7ff;
    --theme-input-bg: rgba(15, 23, 42, 0.72);
    --theme-input-border: rgba(148, 163, 184, 0.24);
    --theme-input-disabled: rgba(15, 23, 42, 0.52);
    --theme-table-head: rgba(15, 23, 42, 0.92);
    --theme-table-row-alt: rgba(148, 163, 184, 0.04);
    --theme-table-row-hover: rgba(22, 119, 255, 0.1);
    --theme-shadow-soft: 0 14px 28px rgba(2, 6, 23, 0.28);
    --theme-shadow-strong: 0 20px 48px rgba(2, 6, 23, 0.34);
    --theme-success: #3ccf6e;
    --theme-warning: #ffb65c;
    --theme-danger: #ff8f8f;
    --theme-info: #7fb6ff;
    --panel-primary: var(--theme-primary);
    --panel-primary-hover: var(--theme-primary-hover);
    --panel-success: var(--theme-success);
    --panel-warning: var(--theme-warning);
    --panel-danger: var(--theme-danger);
    --panel-bg: var(--theme-bg);
    --panel-surface: var(--theme-surface);
    --panel-surface-soft: var(--theme-surface-strong);
    --panel-surface-muted: var(--theme-surface-soft);
    --panel-border: var(--theme-border);
    --panel-text: var(--theme-text);
    --panel-body: var(--theme-body);
    --panel-muted: var(--theme-muted);
    --panel-input-border: var(--theme-input-border);
    --panel-shadow: var(--theme-shadow-strong);
    --panel-shadow-soft: var(--theme-shadow-soft);
    --admin-primary: var(--theme-primary);
    --admin-primary-hover: var(--theme-primary-hover);
    --admin-primary-soft: rgba(22, 119, 255, 0.12);
    --admin-bg: var(--theme-bg);
    --admin-surface: var(--theme-surface);
    --admin-soft: var(--theme-surface-soft);
    --admin-border: var(--theme-border);
    --admin-text: var(--theme-text);
    --admin-muted: var(--theme-muted);
    --admin-body: var(--theme-body);
    --admin-shadow: var(--theme-shadow-soft);
    --admin-sidebar-shadow: var(--theme-shadow-soft);
    --brand-primary: var(--theme-primary);
    --brand-primary-hover: var(--theme-primary-hover);
    --brand-success: var(--theme-success);
    --brand-warning: var(--theme-warning);
    --brand-danger: var(--theme-danger);
    --brand-soft: rgba(22, 119, 255, 0.12);
    --bg-page: var(--theme-bg);
    --bg-surface: var(--theme-surface);
    --bg-soft: var(--theme-surface-soft);
    --border-color: var(--theme-border);
    --input-border: var(--theme-input-border);
    --text-primary: var(--theme-text);
    --text-body: var(--theme-body);
    --text-muted: var(--theme-muted);
    --shadow-soft: var(--theme-shadow-soft);
    --shadow-card: var(--theme-shadow-soft);
}

html[data-theme="dark"] body.panel-app,
html[data-theme="dark"] body.admin-app,
html[data-theme="dark"] body.public-page {
    background:
        radial-gradient(circle at top left, rgba(22, 119, 255, 0.08), transparent 22%),
        linear-gradient(180deg, var(--theme-bg) 0%, var(--theme-bg-elevated) 100%) !important;
    color: var(--theme-body) !important;
}

html[data-theme="dark"] a {
    color: var(--theme-link);
}

html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:focus-visible {
    color: var(--theme-link-hover);
}

html[data-theme="dark"] .panel-sidebar,
html[data-theme="dark"] .panel-topbar,
html[data-theme="dark"] .panel-header,
html[data-theme="dark"] .admin-sidebar,
html[data-theme="dark"] .admin-topbar,
html[data-theme="dark"] .admin-header,
html[data-theme="dark"] .public-navbar {
    background: rgba(17, 24, 39, 0.9) !important;
    border-color: var(--theme-border) !important;
    box-shadow: none !important;
    backdrop-filter: blur(12px);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .table-responsive,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-button,
html[data-theme="dark"] .accordion-body,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .offcanvas-header,
html[data-theme="dark"] .offcanvas-body,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .tooltip-inner,
html[data-theme="dark"] .table-mobile-cards tr {
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-button,
html[data-theme="dark"] .accordion-body,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .popover {
    background: var(--theme-surface-strong) !important;
    color: var(--theme-body) !important;
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus-visible,
html[data-theme="dark"] .list-group-item:hover,
html[data-theme="dark"] .accordion-button:not(.collapsed) {
    background: rgba(22, 119, 255, 0.12) !important;
    color: var(--theme-text) !important;
}

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

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .input-group-text {
    background: var(--theme-input-bg) !important;
    border-color: var(--theme-input-border) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] .input-group-text:focus-within {
    border-color: rgba(22, 119, 255, 0.42) !important;
    box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.14) !important;
}

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .form-select:disabled,
html[data-theme="dark"] textarea:disabled,
html[data-theme="dark"] .input-group-text:disabled {
    background: var(--theme-input-disabled) !important;
    color: var(--theme-muted) !important;
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] .form-select::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .form-text,
html[data-theme="dark"] .text-muted {
    color: var(--theme-muted) !important;
}

html[data-theme="dark"] .form-check-input,
html[data-theme="dark"] .form-switch .form-check-input {
    background-color: var(--theme-input-bg) !important;
    border-color: var(--theme-input-border) !important;
}

html[data-theme="dark"] .form-check-input:checked {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

html[data-theme="dark"] .table {
    color: var(--theme-body) !important;
}

html[data-theme="dark"] .table thead th {
    background: var(--theme-table-head) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .table > :not(caption) > * > * {
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] .table tbody tr:nth-of-type(even) {
    background: var(--theme-table-row-alt) !important;
}

html[data-theme="dark"] .table tbody tr:hover,
html[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background: var(--theme-table-row-hover) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-outline-warning,
html[data-theme="dark"] .btn-outline-danger {
    background: var(--theme-surface-soft) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-outline-warning:hover,
html[data-theme="dark"] .btn-outline-danger:hover {
    background: rgba(22, 119, 255, 0.12) !important;
    border-color: rgba(22, 119, 255, 0.24) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .btn-primary {
    box-shadow: 0 10px 22px rgba(22, 119, 255, 0.18) !important;
}

html[data-theme="dark"] .pagination .page-link {
    background: var(--theme-surface-soft) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .pagination .page-link:hover {
    background: rgba(22, 119, 255, 0.12) !important;
    border-color: rgba(22, 119, 255, 0.24) !important;
}

html[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background: rgba(15, 23, 42, 0.44) !important;
    color: var(--theme-muted) !important;
}

html[data-theme="dark"] .alert {
    color: var(--theme-body) !important;
    box-shadow: var(--theme-shadow-soft) !important;
}

html[data-theme="dark"] .alert-info {
    background: rgba(22, 119, 255, 0.16) !important;
    border-color: rgba(22, 119, 255, 0.24) !important;
    color: #d8e8ff !important;
}

html[data-theme="dark"] .alert-success {
    background: rgba(60, 207, 110, 0.14) !important;
    border-color: rgba(60, 207, 110, 0.24) !important;
    color: #c9f7d7 !important;
}

html[data-theme="dark"] .alert-warning {
    background: rgba(255, 182, 92, 0.14) !important;
    border-color: rgba(255, 182, 92, 0.24) !important;
    color: #ffe2b9 !important;
}

html[data-theme="dark"] .alert-danger {
    background: rgba(255, 143, 143, 0.14) !important;
    border-color: rgba(255, 143, 143, 0.24) !important;
    color: #ffd1d1 !important;
}

html[data-theme="dark"] .progress {
    background: rgba(148, 163, 184, 0.12) !important;
}

html[data-theme="dark"] .progress-bar {
    background-color: var(--theme-primary) !important;
}

html[data-theme="dark"] .spinner-border,
html[data-theme="dark"] .spinner-grow {
    color: var(--theme-primary) !important;
}

html[data-theme="dark"] .navbar-toggler {
    border-color: var(--theme-input-border) !important;
    background: var(--theme-surface-soft) !important;
}

html[data-theme="dark"] .navbar-toggler-icon,
html[data-theme="dark"] .btn-close,
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.15);
}

html[data-theme="dark"] .panel-picker-input-wrap::after {
    border-color: rgba(203, 213, 225, 0.68);
}

@media (max-width: 767.98px) {
    .theme-switcher-floating {
        top: 14px;
        right: 14px;
    }

    .theme-switcher-menu {
        min-width: 220px;
    }

    .theme-switcher-toggle {
        min-height: 38px;
        padding: 0 12px;
    }
}