:root,
[data-theme="dark"] {
    --bg: #0b1220;
    --surface: #111827;
    --surface-2: #1f2937;
    --border: rgba(255, 255, 255, 0.08);
    --text: #f9fafb;
    --muted: #9ca3af;
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --danger: #ef4444;
    --success: #10b981;

    --dash-bg: #0b1220;
    --dash-surface: #111827;
    --dash-surface-2: #1f2937;
    --dash-border: rgba(255, 255, 255, 0.08);
    --dash-text: #f9fafb;
    --dash-text-muted: #9ca3af;
    --dash-text-secondary: #d1d5db;
    --dash-section-title: #6b7280;
    --dash-link-hover-bg: rgba(37, 99, 235, 0.15);
    --dash-topbar-bg: rgba(17, 24, 39, 0.72);
    --dash-card-bg: rgba(17, 24, 39, 0.92);
    --dash-input-bg: #111827;
    --dash-scroll-hint-bg: linear-gradient(to bottom, rgba(17, 24, 39, 0) 0%, rgba(17, 24, 39, 0.92) 55%, #111827 100%);
    --dash-auth-gradient: radial-gradient(circle at top, rgba(37, 99, 235, 0.18), transparent 40%);
}

[data-theme="light"] {
    --bg: #f3f4f6;
    --surface: #ffffff;
    --surface-2: #f9fafb;
    --border: rgba(15, 23, 42, 0.12);
    --text: #111827;
    --muted: #6b7280;
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --danger: #dc2626;
    --success: #059669;

    --dash-bg: #eef2f7;
    --dash-surface: #ffffff;
    --dash-surface-2: #f3f4f6;
    --dash-border: rgba(15, 23, 42, 0.1);
    --dash-text: #111827;
    --dash-text-muted: #6b7280;
    --dash-text-secondary: #374151;
    --dash-section-title: #6b7280;
    --dash-link-hover-bg: rgba(37, 99, 235, 0.1);
    --dash-topbar-bg: rgba(255, 255, 255, 0.92);
    --dash-card-bg: #ffffff;
    --dash-input-bg: #ffffff;
    --dash-scroll-hint-bg: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.92) 55%, #ffffff 100%);
    --dash-auth-gradient: radial-gradient(circle at top, rgba(37, 99, 235, 0.08), transparent 40%);
}

[data-theme="midnight"] {
    --bg: #050816;
    --surface: #0f172a;
    --surface-2: #1e293b;
    --border: rgba(148, 163, 184, 0.14);
    --text: #e2e8f0;
    --muted: #94a3b8;
    --primary: #6366f1;
    --primary-hover: #4f46e5;
    --danger: #f87171;
    --success: #34d399;

    --dash-bg: #050816;
    --dash-surface: #0f172a;
    --dash-surface-2: #1e293b;
    --dash-border: rgba(148, 163, 184, 0.14);
    --dash-text: #e2e8f0;
    --dash-text-muted: #94a3b8;
    --dash-text-secondary: #cbd5e1;
    --dash-section-title: #64748b;
    --dash-link-hover-bg: rgba(99, 102, 241, 0.18);
    --dash-topbar-bg: rgba(15, 23, 42, 0.88);
    --dash-card-bg: rgba(15, 23, 42, 0.96);
    --dash-input-bg: #0f172a;
    --dash-scroll-hint-bg: linear-gradient(to bottom, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.92) 55%, #0f172a 100%);
    --dash-auth-gradient: radial-gradient(circle at top, rgba(99, 102, 241, 0.16), transparent 40%);
}

[data-theme="ocean"] {
    --bg: #031525;
    --surface: #0a2540;
    --surface-2: #123456;
    --border: rgba(125, 211, 252, 0.14);
    --text: #e0f2fe;
    --muted: #7dd3fc;
    --primary: #0284c7;
    --primary-hover: #0369a1;
    --danger: #f87171;
    --success: #2dd4bf;

    --dash-bg: #031525;
    --dash-surface: #0a2540;
    --dash-surface-2: #123456;
    --dash-border: rgba(125, 211, 252, 0.14);
    --dash-text: #e0f2fe;
    --dash-text-muted: #7dd3fc;
    --dash-text-secondary: #bae6fd;
    --dash-section-title: #38bdf8;
    --dash-link-hover-bg: rgba(2, 132, 199, 0.2);
    --dash-topbar-bg: rgba(10, 37, 64, 0.9);
    --dash-card-bg: rgba(10, 37, 64, 0.96);
    --dash-input-bg: #0a2540;
    --dash-scroll-hint-bg: linear-gradient(to bottom, rgba(10, 37, 64, 0) 0%, rgba(10, 37, 64, 0.92) 55%, #0a2540 100%);
    --dash-auth-gradient: radial-gradient(circle at top, rgba(14, 165, 233, 0.18), transparent 40%);
}

[data-theme="forest"] {
    --bg: #071a12;
    --surface: #0f291c;
    --surface-2: #163826;
    --border: rgba(134, 239, 172, 0.12);
    --text: #ecfdf5;
    --muted: #86efac;
    --primary: #059669;
    --primary-hover: #047857;
    --danger: #f87171;
    --success: #34d399;

    --dash-bg: #071a12;
    --dash-surface: #0f291c;
    --dash-surface-2: #163826;
    --dash-border: rgba(134, 239, 172, 0.12);
    --dash-text: #ecfdf5;
    --dash-text-muted: #86efac;
    --dash-text-secondary: #bbf7d0;
    --dash-section-title: #4ade80;
    --dash-link-hover-bg: rgba(5, 150, 105, 0.2);
    --dash-topbar-bg: rgba(15, 41, 28, 0.9);
    --dash-card-bg: rgba(15, 41, 28, 0.96);
    --dash-input-bg: #0f291c;
    --dash-scroll-hint-bg: linear-gradient(to bottom, rgba(15, 41, 28, 0) 0%, rgba(15, 41, 28, 0.92) 55%, #0f291c 100%);
    --dash-auth-gradient: radial-gradient(circle at top, rgba(16, 185, 129, 0.16), transparent 40%);
}

[data-theme="sunset"] {
    --bg: #1a1008;
    --surface: #2a1810;
    --surface-2: #3d2418;
    --border: rgba(251, 191, 36, 0.14);
    --text: #fff7ed;
    --muted: #fdba74;
    --primary: #ea580c;
    --primary-hover: #c2410c;
    --danger: #ef4444;
    --success: #84cc16;

    --dash-bg: #1a1008;
    --dash-surface: #2a1810;
    --dash-surface-2: #3d2418;
    --dash-border: rgba(251, 191, 36, 0.14);
    --dash-text: #fff7ed;
    --dash-text-muted: #fdba74;
    --dash-text-secondary: #fed7aa;
    --dash-section-title: #fb923c;
    --dash-link-hover-bg: rgba(234, 88, 12, 0.2);
    --dash-topbar-bg: rgba(42, 24, 16, 0.9);
    --dash-card-bg: rgba(42, 24, 16, 0.96);
    --dash-input-bg: #2a1810;
    --dash-scroll-hint-bg: linear-gradient(to bottom, rgba(42, 24, 16, 0) 0%, rgba(42, 24, 16, 0.92) 55%, #2a1810 100%);
    --dash-auth-gradient: radial-gradient(circle at top, rgba(249, 115, 22, 0.16), transparent 40%);
}

[data-theme="rose"] {
    --bg: #fff1f2;
    --surface: #ffffff;
    --surface-2: #ffe4e6;
    --border: rgba(190, 18, 60, 0.12);
    --text: #4c0519;
    --muted: #9f1239;
    --primary: #e11d48;
    --primary-hover: #be123c;
    --danger: #dc2626;
    --success: #059669;

    --dash-bg: #fff1f2;
    --dash-surface: #ffffff;
    --dash-surface-2: #ffe4e6;
    --dash-border: rgba(190, 18, 60, 0.12);
    --dash-text: #4c0519;
    --dash-text-muted: #9f1239;
    --dash-text-secondary: #881337;
    --dash-section-title: #be123c;
    --dash-link-hover-bg: rgba(225, 29, 72, 0.1);
    --dash-topbar-bg: rgba(255, 255, 255, 0.92);
    --dash-card-bg: #ffffff;
    --dash-input-bg: #ffffff;
    --dash-scroll-hint-bg: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.92) 55%, #ffffff 100%);
    --dash-auth-gradient: radial-gradient(circle at top, rgba(244, 63, 94, 0.1), transparent 40%);
}

[data-theme="graphite"] {
    --bg: #18181b;
    --surface: #27272a;
    --surface-2: #3f3f46;
    --border: rgba(228, 228, 231, 0.12);
    --text: #fafafa;
    --muted: #a1a1aa;
    --primary: #71717a;
    --primary-hover: #52525b;
    --danger: #f87171;
    --success: #4ade80;

    --dash-bg: #18181b;
    --dash-surface: #27272a;
    --dash-surface-2: #3f3f46;
    --dash-border: rgba(228, 228, 231, 0.12);
    --dash-text: #fafafa;
    --dash-text-muted: #a1a1aa;
    --dash-text-secondary: #d4d4d8;
    --dash-section-title: #71717a;
    --dash-link-hover-bg: rgba(113, 113, 122, 0.22);
    --dash-topbar-bg: rgba(39, 39, 42, 0.92);
    --dash-card-bg: rgba(39, 39, 42, 0.96);
    --dash-input-bg: #27272a;
    --dash-scroll-hint-bg: linear-gradient(to bottom, rgba(39, 39, 42, 0) 0%, rgba(39, 39, 42, 0.92) 55%, #27272a 100%);
    --dash-auth-gradient: radial-gradient(circle at top, rgba(161, 161, 170, 0.12), transparent 40%);
}

[data-theme="contrast"] {
    --bg: #000000;
    --surface: #000000;
    --surface-2: #111111;
    --border: #ffffff;
    --text: #ffffff;
    --muted: #d4d4d4;
    --primary: #ffff00;
    --primary-hover: #fde047;
    --danger: #ff4444;
    --success: #00ff88;

    --dash-bg: #000000;
    --dash-surface: #000000;
    --dash-surface-2: #111111;
    --dash-border: #ffffff;
    --dash-text: #ffffff;
    --dash-text-muted: #d4d4d4;
    --dash-text-secondary: #ffffff;
    --dash-section-title: #ffff00;
    --dash-link-hover-bg: rgba(255, 255, 0, 0.18);
    --dash-topbar-bg: #000000;
    --dash-card-bg: #000000;
    --dash-input-bg: #000000;
    --dash-scroll-hint-bg: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.92) 55%, #000000 100%);
    --dash-auth-gradient: none;
}

[data-theme="light"] .auth-card,
[data-theme="rose"] .auth-card,
[data-theme="light"] .admin-form-card,
[data-theme="rose"] .admin-form-card,
[data-theme="light"] .form-card,
[data-theme="rose"] .form-card,
[data-theme="light"] .admin-card,
[data-theme="rose"] .admin-card,
[data-theme="light"] .content-category-block,
[data-theme="rose"] .content-category-block,
[data-theme="light"] .detail-card,
[data-theme="rose"] .detail-card,
[data-theme="light"] .empty-state,
[data-theme="rose"] .empty-state,
[data-theme="light"] .dashboard-widgets-section,
[data-theme="rose"] .dashboard-widgets-section,
[data-theme="light"] .schedule-item,
[data-theme="rose"] .schedule-item,
[data-theme="light"] .widget-popconfirm,
[data-theme="rose"] .widget-popconfirm,
[data-theme="light"] .device-card,
[data-theme="rose"] .device-card,
[data-theme="light"] .widget-card,
[data-theme="rose"] .widget-card,
[data-theme="light"] .stat-card,
[data-theme="rose"] .stat-card,
[data-theme="light"] .data-table-wrap,
[data-theme="rose"] .data-table-wrap,
[data-theme="light"] .app-modal-dialog,
[data-theme="rose"] .app-modal-dialog,
[data-theme="light"] .notification-dropdown,
[data-theme="rose"] .notification-dropdown,
[data-theme="light"] .manage-menu-panel,
[data-theme="rose"] .manage-menu-panel,
[data-theme="light"] .searchable-select-panel,
[data-theme="rose"] .searchable-select-panel,
[data-theme="light"] .empty-state.compact,
[data-theme="rose"] .empty-state.compact {
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .badge-muted,
[data-theme="light"] .badge-outline {
    color: #374151;
}

[data-theme="rose"] .badge-muted,
[data-theme="rose"] .badge-outline {
    color: #881337;
}

[data-theme="light"] .sidebar-link.active,
[data-theme="light"] .sidebar-link:hover {
    color: #1d4ed8;
}

[data-theme="rose"] .sidebar-link.active,
[data-theme="rose"] .sidebar-link:hover {
    color: #be123c;
}

[data-theme="midnight"] .sidebar-link.active,
[data-theme="midnight"] .sidebar-link:hover {
    color: #c7d2fe;
}

[data-theme="ocean"] .sidebar-link.active,
[data-theme="ocean"] .sidebar-link:hover {
    color: #7dd3fc;
}

[data-theme="forest"] .sidebar-link.active,
[data-theme="forest"] .sidebar-link:hover {
    color: #86efac;
}

[data-theme="sunset"] .sidebar-link.active,
[data-theme="sunset"] .sidebar-link:hover {
    color: #fdba74;
}

[data-theme="contrast"] .sidebar-link.active,
[data-theme="contrast"] .sidebar-link:hover {
    color: #ffff00;
}

[data-theme="light"] .data-table,
[data-theme="rose"] .data-table,
[data-theme="light"] .data-table th,
[data-theme="rose"] .data-table th,
[data-theme="light"] .data-table td,
[data-theme="rose"] .data-table td,
[data-theme="light"] .devices-admin-table .devices-col-labels th,
[data-theme="rose"] .devices-admin-table .devices-col-labels th,
[data-theme="light"] .devices-admin-table .devices-col-filters th,
[data-theme="rose"] .devices-admin-table .devices-col-filters th,
[data-theme="light"] .device-card,
[data-theme="rose"] .device-card,
[data-theme="light"] .widget-card,
[data-theme="rose"] .widget-card,
[data-theme="light"] .stat-card,
[data-theme="rose"] .stat-card,
[data-theme="light"] .admin-form-card,
[data-theme="rose"] .admin-form-card,
[data-theme="light"] .form-card,
[data-theme="rose"] .form-card,
[data-theme="light"] .admin-card,
[data-theme="rose"] .admin-card,
[data-theme="light"] .content-category-block,
[data-theme="rose"] .content-category-block,
[data-theme="light"] .detail-card,
[data-theme="rose"] .detail-card,
[data-theme="light"] .empty-state,
[data-theme="rose"] .empty-state,
[data-theme="light"] .dashboard-widgets-section,
[data-theme="rose"] .dashboard-widgets-section,
[data-theme="light"] .schedule-item,
[data-theme="rose"] .schedule-item,
[data-theme="light"] .widget-popconfirm,
[data-theme="rose"] .widget-popconfirm,
[data-theme="light"] .app-modal-dialog,
[data-theme="rose"] .app-modal-dialog,
[data-theme="light"] .notification-dropdown,
[data-theme="rose"] .notification-dropdown,
[data-theme="light"] .manage-menu-panel,
[data-theme="rose"] .manage-menu-panel,
[data-theme="light"] .searchable-select-panel,
[data-theme="rose"] .searchable-select-panel,
[data-theme="light"] .page-title,
[data-theme="rose"] .page-title,
[data-theme="light"] .section-title,
[data-theme="rose"] .section-title,
[data-theme="light"] .app-modal-title,
[data-theme="rose"] .app-modal-title,
[data-theme="light"] .device-card h3,
[data-theme="rose"] .device-card h3,
[data-theme="light"] .widget-card h3,
[data-theme="rose"] .widget-card h3,
[data-theme="light"] .admin-card h3,
[data-theme="rose"] .admin-card h3,
[data-theme="light"] .content-category-header h3,
[data-theme="rose"] .content-category-header h3,
[data-theme="light"] .detail-card-header h2,
[data-theme="rose"] .detail-card-header h2,
[data-theme="light"] .empty-state h2,
[data-theme="rose"] .empty-state h2 {
    color: var(--dash-text);
}

[data-theme="light"] .page-subtitle,
[data-theme="rose"] .page-subtitle,
[data-theme="light"] .device-code,
[data-theme="rose"] .device-code,
[data-theme="light"] .device-footer,
[data-theme="rose"] .device-footer,
[data-theme="light"] .widget-card-meta,
[data-theme="rose"] .widget-card-meta,
[data-theme="light"] .muted-text,
[data-theme="rose"] .muted-text,
[data-theme="light"] .admin-pagination-info,
[data-theme="rose"] .admin-pagination-info,
[data-theme="light"] .admin-card p,
[data-theme="rose"] .admin-card p,
[data-theme="light"] .detail-label,
[data-theme="rose"] .detail-label,
[data-theme="light"] .empty-state,
[data-theme="rose"] .empty-state {
    color: var(--dash-text-muted);
}

[data-theme="light"] .detail-value,
[data-theme="rose"] .detail-value {
    color: var(--dash-text);
}

[data-theme="light"] .data-table th,
[data-theme="rose"] .data-table th {
    background: var(--dash-surface-2);
}

[data-theme="light"] .data-table tr:hover td,
[data-theme="rose"] .data-table tr:hover td {
    background: rgba(37, 99, 235, 0.04);
}

[data-theme="rose"] .data-table tr:hover td {
    background: rgba(225, 29, 72, 0.05);
}

[data-theme="light"] .form-control,
[data-theme="rose"] .form-control,
[data-theme="light"] select.form-control,
[data-theme="rose"] select.form-control,
[data-theme="light"] textarea.form-control,
[data-theme="rose"] textarea.form-control {
    background: var(--dash-input-bg);
    color: var(--dash-text);
    border-color: var(--dash-border);
}

[data-theme="light"] .notification-dropdown,
[data-theme="rose"] .notification-dropdown,
[data-theme="light"] .manage-menu-panel,
[data-theme="rose"] .manage-menu-panel,
[data-theme="light"] .searchable-select-panel,
[data-theme="rose"] .searchable-select-panel,
[data-theme="light"] .app-modal-dialog,
[data-theme="rose"] .app-modal-dialog,
[data-theme="light"] .device-card,
[data-theme="rose"] .device-card,
[data-theme="light"] .widget-card,
[data-theme="rose"] .widget-card,
[data-theme="light"] .stat-card,
[data-theme="rose"] .stat-card,
[data-theme="light"] .admin-form-card,
[data-theme="rose"] .admin-form-card,
[data-theme="light"] .form-card,
[data-theme="rose"] .form-card,
[data-theme="light"] .admin-card,
[data-theme="rose"] .admin-card,
[data-theme="light"] .content-category-block,
[data-theme="rose"] .content-category-block,
[data-theme="light"] .detail-card,
[data-theme="rose"] .detail-card,
[data-theme="light"] .empty-state,
[data-theme="rose"] .empty-state,
[data-theme="light"] .dashboard-widgets-section,
[data-theme="rose"] .dashboard-widgets-section,
[data-theme="light"] .schedule-item,
[data-theme="rose"] .schedule-item,
[data-theme="light"] .widget-popconfirm,
[data-theme="rose"] .widget-popconfirm,
[data-theme="light"] .widget-preview-container,
[data-theme="rose"] .widget-preview-container,
[data-theme="light"] .image-dropzone,
[data-theme="rose"] .image-dropzone {
    background: var(--dash-surface);
    border-color: var(--dash-border);
}

[data-theme="light"] .notification-dropdown-header,
[data-theme="rose"] .notification-dropdown-header {
    color: var(--dash-text);
    border-bottom-color: var(--dash-border);
}

[data-theme="light"] .notification-dropdown-header a,
[data-theme="rose"] .notification-dropdown-header a {
    color: #2563eb;
}

[data-theme="rose"] .notification-dropdown-header a {
    color: #be123c;
}

[data-theme="light"] .notification-dropdown-item,
[data-theme="rose"] .notification-dropdown-item {
    color: var(--dash-text);
    border-bottom-color: var(--dash-border);
}

[data-theme="light"] .notification-dropdown-message,
[data-theme="rose"] .notification-dropdown-message {
    color: var(--dash-text);
}

[data-theme="light"] .notification-dropdown-date,
[data-theme="rose"] .notification-dropdown-date,
[data-theme="light"] .notification-dropdown-empty,
[data-theme="rose"] .notification-dropdown-empty {
    color: var(--dash-text-muted);
}

[data-theme="light"] .notification-dropdown-item:hover,
[data-theme="rose"] .notification-dropdown-item:hover {
    background: rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .notification-dropdown-item.is-unread,
[data-theme="rose"] .notification-dropdown-item.is-unread {
    background: rgba(37, 99, 235, 0.1);
}

[data-theme="rose"] .notification-dropdown-item.is-unread {
    background: rgba(225, 29, 72, 0.08);
}

[data-theme="light"] .notification-dropdown .badge-danger,
[data-theme="rose"] .notification-dropdown .badge-danger,
[data-theme="light"] .notification-item .badge-danger,
[data-theme="rose"] .notification-item .badge-danger,
[data-theme="light"] .badge-danger,
[data-theme="rose"] .badge-danger {
    background: rgba(185, 28, 28, 0.12);
    color: #991b1b;
    border: 1px solid rgba(185, 28, 28, 0.25);
}

[data-theme="light"] .notification-dropdown .badge-warning,
[data-theme="rose"] .notification-dropdown .badge-warning,
[data-theme="light"] .notification-item .badge-warning,
[data-theme="rose"] .notification-item .badge-warning,
[data-theme="light"] .badge-warning,
[data-theme="rose"] .badge-warning {
    background: rgba(180, 83, 9, 0.12);
    color: #92400e;
    border: 1px solid rgba(180, 83, 9, 0.25);
}

[data-theme="light"] .notification-dropdown .badge-info,
[data-theme="rose"] .notification-dropdown .badge-info,
[data-theme="light"] .notification-item .badge-info,
[data-theme="rose"] .notification-item .badge-info,
[data-theme="light"] .badge-info,
[data-theme="rose"] .badge-info {
    background: rgba(29, 78, 216, 0.12);
    color: #1e40af;
    border: 1px solid rgba(29, 78, 216, 0.25);
}

[data-theme="light"] .notification-item,
[data-theme="rose"] .notification-item {
    background: var(--dash-surface);
    border-color: var(--dash-border);
}

[data-theme="light"] .notification-message,
[data-theme="rose"] .notification-message {
    color: var(--dash-text);
}

[data-theme="light"] .notification-meta,
[data-theme="rose"] .notification-meta {
    color: var(--dash-text-muted);
}

[data-theme="light"] .image-dropzone,
[data-theme="rose"] .image-dropzone {
    background: var(--dash-surface-2);
}

[data-theme="light"] .widget-card,
[data-theme="rose"] .widget-card,
[data-theme="light"] .schedule-item,
[data-theme="rose"] .schedule-item {
    background: var(--dash-surface-2);
}

[data-theme="midnight"] .notification-bell-button:hover {
    background: #334155;
}

[data-theme="contrast"] .btn-primary {
    background: #ffff00;
    color: #000000;
    border-color: #ffff00;
}

[data-theme="contrast"] .btn-primary:hover {
    background: #fde047;
    color: #000000;
}

[data-theme="contrast"] .btn-outline {
    border-color: #ffffff;
    color: #ffffff;
}

.theme-selector {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.theme-selector-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dash-section-title);
}

.theme-selector .form-control {
    background: var(--dash-input-bg);
    color: var(--dash-text);
    border-color: var(--dash-border);
}