/*CSS tuỳ chỉnh - Tailwind directives*/
body { background-color: #000000; color: #f3f4f6; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; -webkit-tap-highlight-color: transparent; }
.quantum-gradient { background: linear-gradient(135deg, #00f2fe 0%, #4facfe 35%, #667eea 70%, #764ba2 100%); }
.glass-panel { background: rgba(3, 5, 10, 0.98); backdrop-filter: blur(32px); border: 1px solid rgba(255, 255, 255, 0.08); }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #000000; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #334155; }

@keyframes pulse-ring {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.15); opacity: 0.4; }
    100% { transform: scale(0.95); opacity: 0.8; }
}
.mic-recording { animation: pulse-ring 1.5s infinite; background: rgba(239, 68, 68, 0.2) !important; border-color: rgba(239, 68, 68, 0.8) !important; color: #ef4444 !important; }

/* TỐI ƯU HÓA TOÀN DIỆN CHO CHẾ ĐỘ SÁNG (LIGHT MODE) */
body.light-mode { background-color: #f8fafc !important; color: #0f172a !important; }
body.light-mode header, body.light-mode nav { background-color: #f8fafc !important; }
body.light-mode header nav { background-color: #f1f5f9 !important; border: 1px solid rgba(226, 232, 240, 0.9) !important; padding: 3px; border-radius: 9999px; }
body.light-mode header nav a, body.light-mode header nav button { background-color: transparent !important; color: #64748b !important; border-radius: 9999px; box-shadow: none !important; border: none !important; }
body.light-mode header nav a:hover, body.light-mode header nav button:hover { color: #0f172a !important; background-color: rgba(255, 255, 255, 0.5) !important; }
body.light-mode header nav a[class*="bg-gray-"]:not([class*="bg-transparent"]), body.light-mode header nav button[class*="bg-gray-"]:not([class*="bg-transparent"]), body.light-mode header nav a.active, body.light-mode header nav button.active { background-color: #ffffff !important; color: #4f46e5 !important; border: 1px solid rgba(226, 232, 240, 0.9) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important; }
body.light-mode header div[class*="bg-gray-"]:not(nav *), body.light-mode header div[class*="bg-slate-"]:not(nav *) { background-color: #ffffff !important; border: 1px solid rgba(226, 232, 240, 0.9) !important; color: #1e293b !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important; }
body.light-mode header span, body.light-mode header a:not(nav a), body.light-mode header button:not(nav button) { color: #1e293b !important; }
body.light-mode .glass-panel { background: rgba(255, 255, 255, 0.9) !important; border: 1px solid rgba(203, 213, 225, 0.6) !important; box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.03); }
body.light-mode .glass-panel div[class*="bg-gray-"], body.light-mode .glass-panel div[class*="bg-slate-"] { background-color: #ffffff !important; border: 1px solid rgba(226, 232, 240, 0.9) !important; color: #1e293b !important; }
body.light-mode .glass-panel .quantum-gradient, body.light-mode .glass-panel button[class*="quantum-gradient"] { background: linear-gradient(135deg, #00f2fe 0%, #4facfe 35%, #667eea 70%, #764ba2 100%) !important; color: #ffffff !important; border: none !important; }
body.light-mode .glass-panel div[class*="border-cyan"], body.light-mode .glass-panel div[class*="border-blue"] { background-color: #eef2ff !important; border-color: #6366f1 !important; color: #4f46e5 !important; }
body.light-mode .glass-panel span[class*="bg-"], body.light-mode .glass-panel button[class*="bg-"] { background-color: #f1f5f9 !important; color: #334155 !important; border: 1px solid rgba(226, 232, 240, 0.9) !important; }
body.light-mode textarea, body.light-mode input[type="text"], body.light-mode input[type="number"], body.light-mode select { background-color: #ffffff !important; color: #0f172a !important; border: 1px solid rgba(203, 213, 225, 0.7) !important; }
body.light-mode textarea::placeholder, body.light-mode input::placeholder { color: #94a3b8 !important; }
body.light-mode input[type="range"] { accent-color: #4f46e5 !important; }
body.light-mode ::-webkit-scrollbar-track { background: #f8fafc !important; }
body.light-mode ::-webkit-scrollbar-thumb { background: #cbd5e1 !important; border-radius: 2px; }
body.light-mode ::-webkit-scrollbar-thumb:hover { background: #94a3b8 !important; }
body.light-mode footer, body.light-mode .border-t.border-gray-850 { background-color: #f1f5f9 !important; color: #334155 !important; border-top: 1px solid rgba(226, 232, 240, 0.9) !important; }
body.light-mode footer h3, body.light-mode footer h4, body.light-mode footer .text-white { color: #0f172a !important; }
body.light-mode footer p, body.light-mode footer span, body.light-mode footer a { color: #64748b !important; }
body.light-mode label, body.light-mode .text-xs, body.light-mode .text-sm { color: #475569 !important; }
body.light-mode hr, body.light-mode [class*="border-"]:not(header nav *) { border-color: rgba(226, 232, 240, 0.5) !important; }
body.light-mode [class*="text-cyan-"], body.light-mode [class*="text-blue-"] { color: #4f46e5 !important; }
body.light-mode a:hover { color: #6366f1 !important; }
body.light-mode header span[class*="CORE"], body.light-mode span[class*="CORE"] { color: inherit; }
body.light-mode header span[class*="bg-"], body.light-mode header div[class*="bg-"] { background-color: #e0e7ff !important; color: #4f46e5 !important; border: 1px solid rgba(199, 210, 254, 0.8) !important; box-shadow: none !important; }