:root {
            --bg-grad-start: #151C33;
            --bg-grad-end: #0B0F19;
            --text-color: #E2E8F0;
            --glass-bg: rgba(15, 23, 42, 0.65);
            --glass-border: rgba(255, 255, 255, 0.07);
            --text-muted: #94A3B8;
            --input-bg: #05070C;
            --input-border: #1E293B;
            --sidebar-bg: #070B14;
        }
        html.light {
            --bg-grad-start: #E2E8F0;
            --bg-grad-end: #F8FAFC;
            --text-color: #0F172A;
            --glass-bg: rgba(255, 255, 255, 0.75);
            --glass-border: rgba(0, 0, 0, 0.08);
            --text-muted: #64748B;
            --input-bg: #FFFFFF;
            --input-border: #CBD5E1;
            --sidebar-bg: #F8FAFC;
        }
        html.light #screen-auth h1 {
            background: linear-gradient(to right, #1e1b4b, #4338ca, #6366f1) !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            color: transparent !important;
        }
        /* Light theme overrides for Manage Profiles overlay */
        html.light .manage-overlay {
            background-color: rgba(255, 255, 255, 0.65) !important;
        }
        html.light .manage-overlay-icon {
            background-color: rgba(0, 0, 0, 0.05) !important;
            border-color: rgba(0, 0, 0, 0.15) !important;
            color: #0F172A !important;
        }
        body {
            background: radial-gradient(circle at 50% 50%, var(--bg-grad-start) 0%, var(--bg-grad-end) 100%);
            color: var(--text-color);
            overflow-x: hidden;
            transition: background 0.3s ease, color 0.3s ease;
        }
        /* Light theme overrides for Tailwind classes */
        html.light .text-slate-100,
        html.light .text-slate-200,
        html.light .text-white,
        html.light h2,
        html.light h3,
        html.light h4,
        html.light th,
        html.light .font-bold,
        html.light .text-slate-100 span,
        html.light .text-slate-200 span {
            color: #0F172A !important;
        }
        html.light .text-slate-300,
        html.light .text-slate-400,
        html.light p,
        html.light label,
        html.light span:not(.font-bold) {
            color: #334155 !important;
        }
        html.light .text-slate-500,
        html.light .text-slate-600 {
            color: #64748B !important;
        }
        html.light .bg-slate-950,
        html.light .bg-slate-950\/60,
        html.light .bg-slate-950\/80,
        html.light .bg-slate-950\/50,
        html.light .bg-slate-950\/40,
        html.light .bg-slate-900\/60,
        html.light .bg-slate-900\/80 {
            background-color: #FFFFFF !important;
        }
        html.light .bg-slate-900,
        html.light aside,
        html.light footer,
        html.light .bg-slate-900\/20,
        html.light .bg-slate-950\/20 {
            background-color: #F1F5F9 !important;
        }
        html.light .border-slate-800,
        html.light .border-slate-900,
        html.light .border-slate-700,
        html.light .border-transparent {
            border-color: rgba(0, 0, 0, 0.08) !important;
        }
        html.light input,
        html.light select {
            background-color: #FFFFFF !important;
            border-color: #CBD5E1 !important;
            color: #0F172A !important;
        }
        html.light input::placeholder {
            color: #94A3B8 !important;
        }
        /* Buttons, tables and tab styling overrides for light theme */
        html.light .bg-slate-800,
        html.light .bg-indigo-600\/10 {
            background-color: #E2E8F0 !important;
            color: #334155 !important;
        }
        html.light .bg-slate-800:hover,
        html.light .bg-indigo-600\/10:hover {
            background-color: #CBD5E1 !important;
            color: #0F172A !important;
        }
        html.light .char-tab:hover {
            background-color: rgba(99, 102, 241, 0.06) !important;
        }
        html.light .char-tab.bg-indigo-600\/20 {
            background-color: rgba(99, 102, 241, 0.12) !important;
            border-color: rgba(99, 102, 241, 0.3) !important;
        }
        html.light .btn-block-user,
        html.light .btn-delete-user,
        html.light .btn-delete-log {
            border-color: rgba(0, 0, 0, 0.05) !important;
        }
        html.light table thead {
            background-color: #E2E8F0 !important;
        }
        html.light table tbody tr:hover {
            background-color: rgba(0, 0, 0, 0.02) !important;
        }
        html.light .chat-bubble-markdown {
            background-color: #FFFFFF !important;
            border: 1px solid rgba(0, 0, 0, 0.06) !important;
            color: #334155 !important;
        }
        html.light .chat-bubble-markdown p,
        html.light .chat-bubble-markdown span,
        html.light .chat-bubble-markdown li {
            color: #334155 !important;
        }
        /* ── FIX 1: "Заблоковано" badge та blocked bubble у світлій темі ── */
        html.light .bg-red-950\/20 {
            background-color: #FEF2F2 !important;
        }
        html.light .bg-red-950\/40 {
            background-color: #FEE2E2 !important;
        }
        html.light .border-red-900,
        html.light .border-red-800\/40,
        html.light .border-red-800\/60 {
            border-color: #FECACA !important;
        }
        html.light .text-red-200,
        html.light .text-red-300 {
            color: #B91C1C !important;
        }
        html.light .bg-red-950\/80 {
            background-color: #FEE2E2 !important;
        }
        html.light .text-red-400 {
            color: #DC2626 !important;
        }
        html.light span.bg-red-950\/80 {
            background-color: #FEE2E2 !important;
            border-color: #FECACA !important;
            color: #B91C1C !important;
        }
        /* ── FIX 2: PIN-клавіатура у світлій темі ── */
        html.light .pin-btn {
            background-color: #E2E8F0 !important;
            color: #0F172A !important;
            border: 1px solid #CBD5E1 !important;
        }
        html.light .pin-btn:hover {
            background-color: #CBD5E1 !important;
            color: #0F172A !important;
        }
        html.light .pin-btn-action {
            color: #475569 !important;
        }
        html.light .pin-btn-action:hover {
            color: #0F172A !important;
        }
        /* PIN dots у світлій темі — лише неактивні (без bg-indigo-500) */
        html.light .pin-dot:not(.bg-indigo-500) {
            background-color: #E2E8F0 !important;
            border-color: #CBD5E1 !important;
        }
        /* ── FIX 3: Іконка перемикача теми (сонце/місяць) ── */
        #theme-icon-sun, #theme-icon-sun-profiles, #theme-icon-sun-auth { display: none; }
        #theme-icon-moon, #theme-icon-moon-profiles, #theme-icon-moon-auth { display: block; }
        html.light #theme-icon-sun,
        html.light #theme-icon-sun-profiles,
        html.light #theme-icon-sun-auth {
            display: block !important;
        }
        html.light #theme-icon-moon,
        html.light #theme-icon-moon-profiles,
        html.light #theme-icon-moon-auth {
            display: none !important;
        }
        /* ── FIX 4: Кнопки налаштування аватару у моделках редагування та створення профілю ── */
        html.light #edit-avatar-styles button,
        html.light #add-avatar-styles button {
            background-color: #F1F5F9 !important;
            border-color: #CBD5E1 !important;
            color: #334155 !important;
        }
        html.light #edit-avatar-styles button:hover,
        html.light #add-avatar-styles button:hover {
            background-color: #E2E8F0 !important;
            color: #0F172A !important;
        }
        html.light #edit-avatar-styles button span,
        html.light #add-avatar-styles button span {
            color: #475569 !important;
        }
        /* ── FIX 5: Кнопка "Вийти" ── */
        html.light #btn-logout {
            background-color: rgba(255,255,255,0.75) !important;
            border: 1px solid rgba(0, 0, 0, 0.08) !important;
            color: #334155 !important;
            border-radius: 0.75rem;
            padding: 0.625rem 1.25rem;
            backdrop-filter: blur(16px);
        }
        html.light #btn-logout:hover {
            background-color: #FEE2E2 !important;
            border-color: #FECACA !important;
            color: #B91C1C !important;
        }
        html.light #btn-goto-admin:hover,
        html.light #btn-manage-profiles:hover {
            background-color: rgba(99, 102, 241, 0.10) !important;
            color: #3730A3 !important;
            border-color: rgba(99, 102, 241, 0.25) !important;
        }
        html.light #btn-goto-admin,
        html.light #btn-manage-profiles {
            color: #334155 !important;
            border-color: rgba(0, 0, 0, 0.08) !important;
        }
        /* ── Active Manage Profiles Button Styling ── */
        .btn-manage-active {
            background-color: rgba(124, 58, 237, 0.9) !important; /* bg-violet-600/90 */
            border: 1px solid rgb(139, 92, 246) !important; /* border-violet-500 */
            color: #FFFFFF !important;
            box-shadow: 0 10px 15px -3px rgba(124, 58, 237, 0.2), 0 4px 6px -4px rgba(124, 58, 237, 0.2) !important;
        }
        .btn-manage-active:hover {
            background-color: rgb(124, 58, 237) !important; /* hover:bg-violet-600 */
        }
        .btn-manage-active i {
            color: #FFFFFF !important;
        }
        /* Light theme overrides for Active Manage Button */
        html.light .btn-manage-active {
            background-color: #EDE9FE !important; /* light violet */
            border: 1px solid #C4B5FD !important; /* border-violet-300 */
            color: #6D28D9 !important; /* text-violet-700 */
            box-shadow: 0 4px 6px -1px rgba(109, 40, 217, 0.05), 0 2px 4px -1px rgba(109, 40, 217, 0.03) !important;
        }
        html.light .btn-manage-active:hover {
            background-color: #DDD6FE !important; /* hover:bg-violet-200 */
            color: #5B21B6 !important; /* text-violet-800 */
        }
        html.light .btn-manage-active i {
            color: #6D28D9 !important;
        }
        /* ── FIX: Спадкування кольору тексту в кнопках світлої теми ── */
        html.light button span,
        html.light .btn span,
        html.light a span {
            color: inherit !important;
        }
        /* ── FIX: Запобігаємо перетворенню тексту в темний для кнопок із заливкою ── */
        html.light .bg-indigo-500:not(.text-transparent),
        html.light .bg-indigo-500:not(.text-transparent) span,
        html.light .bg-indigo-500:not(.text-transparent) i,
        html.light .bg-indigo-600:not(.text-transparent),
        html.light .bg-indigo-600:not(.text-transparent) span,
        html.light .bg-indigo-600:not(.text-transparent) i,
        html.light .bg-violet-500:not(.text-transparent),
        html.light .bg-violet-500:not(.text-transparent) span,
        html.light .bg-violet-500:not(.text-transparent) i,
        html.light .bg-violet-600:not(.text-transparent),
        html.light .bg-violet-600:not(.text-transparent) span,
        html.light .bg-violet-600:not(.text-transparent) i,
        html.light .bg-violet-600\/90:not(.text-transparent),
        html.light .bg-violet-600\/90:not(.text-transparent) span,
        html.light .bg-violet-600\/90:not(.text-transparent) i,
        html.light .bg-red-600:not(.text-transparent),
        html.light .bg-red-600:not(.text-transparent) span,
        html.light .bg-red-600:not(.text-transparent) i,
        html.light .bg-rose-600:not(.text-transparent),
        html.light .bg-rose-600:not(.text-transparent) span,
        html.light .bg-rose-600:not(.text-transparent) i,
        html.light .bg-gradient-to-tr:not(.text-transparent),
        html.light .bg-gradient-to-tr:not(.text-transparent) span,
        html.light .bg-gradient-to-tr:not(.text-transparent) i,
        html.light .bg-gradient-to-r:not(.text-transparent),
        html.light .bg-gradient-to-r:not(.text-transparent) span,
        html.light .bg-gradient-to-r:not(.text-transparent) i {
            color: #FFFFFF !important;
        }
        /* ── FIX: Кнопки батьківського контролю та супер-адміна у сайдбарі ── */
        html.light #btn-sidebar-admin {
            background-color: rgba(99, 102, 241, 0.06) !important;
            border-color: rgba(99, 102, 241, 0.15) !important;
            color: #4F46E5 !important;
        }
        html.light #btn-sidebar-admin:hover {
            background-color: #4F46E5 !important;
            border-color: #4F46E5 !important;
            color: #FFFFFF !important;
        }
        html.light #btn-sidebar-superadmin {
            background-color: rgba(244, 63, 94, 0.06) !important;
            border-color: rgba(244, 63, 94, 0.15) !important;
            color: #E11D48 !important;
        }
        html.light #btn-sidebar-superadmin:hover {
            background-color: #E11D48 !important;
            border-color: #E11D48 !important;
            color: #FFFFFF !important;
        }
        html.light .chat-bubble-markdown strong,
        html.light .chat-bubble-markdown b,
        html.light .chat-bubble-markdown h1,
        html.light .chat-bubble-markdown h2,
        html.light .chat-bubble-markdown h3,
        html.light .chat-bubble-markdown h4 {
            color: #0F172A !important;
            font-weight: 800 !important;
        }
        html.light .chat-bubble-markdown code {
            background-color: #F1F5F9 !important;
            color: #0F172A !important;
            border: 1px solid rgba(0, 0, 0, 0.06) !important;
            padding: 2px 5px !important;
            border-radius: 4px !important;
            font-family: monospace !important;
        }
        html.light .chat-bubble-markdown pre {
            background-color: #F8FAFC !important;
            border: 1px solid rgba(0, 0, 0, 0.08) !important;
            padding: 10px !important;
            border-radius: 8px !important;
            overflow-x: auto !important;
        }
        html.light .chat-bubble-markdown pre code {
            background-color: transparent !important;
            border: none !important;
            color: #0F172A !important;
            padding: 0 !important;
        }
        html.light .chat-bubble-markdown a {
            color: #4F46E5 !important;
            text-decoration: underline !important;
        }
        html.light .chat-bubble-markdown blockquote {
            border-left: 4px solid #CBD5E1 !important;
            background-color: #F8FAFC !important;
            color: #475569 !important;
            padding-left: 10px !important;
            margin: 10px 0 !important;
        }
        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: rgba(15, 23, 42, 0.3);
        }
        ::-webkit-scrollbar-thumb {
            background: rgba(99, 102, 241, 0.3);
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: rgba(99, 102, 241, 0.6);
        }
        /* Custom scrollbar for modals */
        .custom-scrollbar::-webkit-scrollbar {
            width: 5px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: transparent;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: rgba(99, 102, 241, 0.25);
            border-radius: 9999px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: rgba(99, 102, 241, 0.5);
        }
        /* Glassmorphism style */
        .glass-panel {
            background: var(--glass-bg);
            backdrop-filter: blur(16px);
            border: 1px solid var(--glass-border);
            color: var(--text-color);
            transition: background 0.3s ease, border 0.3s ease, color 0.3s ease;
        }
        /* Animations */
        .fade-in {
            animation: fadeIn 0.4s ease-out forwards;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        /* Pulse for glowing borders */
        .glow-border:focus {
            outline: none;
            border-color: rgba(99, 102, 241, 0.8);
            box-shadow: 0 0 15px rgba(99, 102, 241, 0.25);
        }
        /* Shimmer Loading Effect */
        .shimmer {
            background: linear-gradient(90deg, #1E293B 25%, #334155 50%, #1E293B 75%);
            background-size: 200% 100%;
            animation: loading-shimmer 1.5s infinite;
        }
        @keyframes loading-shimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        /* Typing indicator animation */
        .dot {
            animation: wave 1.2s infinite ease-in-out;
        }
        .dot:nth-child(2) { animation-delay: 0.2s; }
        .dot:nth-child(3) { animation-delay: 0.4s; }
        @keyframes wave {
            0%, 60%, 100% { transform: translateY(0); }
            30% { transform: translateY(-6px); }
        }
        /* Shake animation for invalid PIN */
        .shake {
            animation: shake 0.4s ease-in-out;
        }
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-6px); }
            40%, 80% { transform: translateX(6px); }
        }
        /* Markdown styles in chat bubble */
        .chat-bubble-markdown p {
            margin-bottom: 0.75rem;
        }
        .chat-bubble-markdown p:last-child {
            margin-bottom: 0;
        }
        .chat-bubble-markdown strong {
            font-weight: 700;
            color: #FFFFFF;
        }
        .chat-bubble-markdown ul {
            list-style-type: disc;
            padding-left: 1.25rem;
            margin-bottom: 0.75rem;
        }
        .chat-bubble-markdown ol {
            list-style-type: decimal;
            padding-left: 1.25rem;
            margin-bottom: 0.75rem;
        }
        .chat-bubble-markdown li {
            margin-bottom: 0.25rem;
        }
        .chat-bubble-markdown code {
            font-family: monospace;
            background-color: rgba(15, 23, 42, 0.6);
            padding: 0.125rem 0.25rem;
            border-radius: 0.25rem;
            font-size: 0.875em;
            color: #A5B4FC;
        }
        .chat-bubble-markdown pre {
            background-color: rgba(15, 23, 42, 0.8);
            padding: 0.75rem;
            border-radius: 0.5rem;
            overflow-x: auto;
            margin-bottom: 0.75rem;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        .chat-bubble-markdown pre code {
            background-color: transparent;
            padding: 0;
            border-radius: 0;
            color: #E2E8F0;
        }