/* ══════════════════════════════════════════════════════════════════════════ LIGHT MODE OVERRIDES Toàn bộ giao diện được thiết kế mặc định cho dark mode bằng Tailwind utility class. File này override các class đó khi bằng attribute-selector (khớp chính xác từng class token qua [class~=]), độ đặc thù luôn cao hơn class Tailwind gốc nên không cần !important. Các panel dạng "terminal" (bg-[#020617], chữ emerald/indigo) cố tình giữ nguyên tông tối ở cả 2 theme — giống quy ước terminal/code output. ══════════════════════════════════════════════════════════════════════════ */ html[data-theme="light"] { color-scheme: light; } /* ── Nền không gian phía sau (quantum-bg) — tắt hiệu ứng sao/tinh vân ──── */ html[data-theme="light"] #quantum-bg { background: #ffffff; } html[data-theme="light"] .qb-nebula, html[data-theme="light"] .qb-stars, html[data-theme="light"] .qb-ring { /* display:none (chứ không phải opacity:0) vì các phần tử này có @keyframes tự set opacity riêng — animation luôn thắng static opacity */ display: none; } /* ── Scrollbar ────────────────────────────────────────────────────────── */ html[data-theme="light"] ::-webkit-scrollbar-track { background: #f4f4f5; } html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #d4d4d8; } html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #a1a1aa; } html[data-theme="light"] #activity-feed { scrollbar-color: #d4d4d8 #f4f4f5 !important; } /* ── Hero grid background (trang chủ) ────────────────────────────────── */ html[data-theme="light"] .ai-grid-bg { background-color: #f4f4f5; } /* ── Nền / bề mặt (background) ───────────────────────────────────────── */ html[data-theme="light"] [class~="bg-[#05050a]"] { background-color: #ffffff; } html[data-theme="light"] [class~="bg-[#09090b]"] { background-color: #ffffff; } html[data-theme="light"] [class~="bg-[#09090b]/80"] { background-color: rgba(255, 255, 255, 0.85); } html[data-theme="light"] [class~="bg-zinc-950"] { background-color: #ffffff; } html[data-theme="light"] [class~="bg-zinc-950/50"] { background-color: rgba(244, 244, 245, 0.7); } html[data-theme="light"] [class~="bg-zinc-950/80"] { background-color: rgba(255, 255, 255, 0.85); } html[data-theme="light"] [class~="bg-zinc-900"] { background-color: #f4f4f5; } html[data-theme="light"] [class~="bg-zinc-900/10"] { background-color: rgba(244, 244, 245, 0.8); } html[data-theme="light"] [class~="bg-zinc-900/20"] { background-color: rgba(228, 228, 231, 0.6); } html[data-theme="light"] [class~="bg-zinc-900/30"] { background-color: rgba(228, 228, 231, 0.7); } html[data-theme="light"] [class~="bg-zinc-900/50"] { background-color: rgba(228, 228, 231, 0.8); } html[data-theme="light"] [class~="bg-zinc-800"] { background-color: #e4e4e7; } html[data-theme="light"] [class~="hover:bg-zinc-800"]:hover { background-color: #e4e4e7; } html[data-theme="light"] [class~="hover:bg-zinc-900"]:hover { background-color: #f4f4f5; } html[data-theme="light"] [class~="hover:bg-zinc-900/30"]:hover { background-color: rgba(244, 244, 245, 0.5); } html[data-theme="light"] [class~="hover:bg-zinc-900/40"]:hover { background-color: rgba(244, 244, 245, 0.6); } /* ── Viền (border) ────────────────────────────────────────────────────── */ html[data-theme="light"] [class~="border-white"] { border-color: #d4d4d8; } html[data-theme="light"] [class~="border-zinc-500"] { border-color: #a1a1aa; } html[data-theme="light"] [class~="border-zinc-500/20"] { border-color: rgba(161, 161, 170, 0.3); } html[data-theme="light"] [class~="border-zinc-700"] { border-color: #d4d4d8; } html[data-theme="light"] [class~="border-zinc-700/60"] { border-color: rgba(212, 212, 216, 0.6); } html[data-theme="light"] [class~="border-zinc-800"] { border-color: #e4e4e7; } html[data-theme="light"] [class~="border-zinc-800/40"] { border-color: rgba(228, 228, 231, 0.5); } html[data-theme="light"] [class~="border-zinc-800/60"] { border-color: rgba(228, 228, 231, 0.7); } html[data-theme="light"] [class~="border-zinc-800/80"] { border-color: rgba(228, 228, 231, 0.85); } html[data-theme="light"] [class~="border-zinc-900"] { border-color: #e4e4e7; } html[data-theme="light"] [class~="border-zinc-900/50"] { border-color: rgba(228, 228, 231, 0.6); } html[data-theme="light"] [class~="border-zinc-900/60"] { border-color: rgba(228, 228, 231, 0.7); } html[data-theme="light"] [class~="hover:border-zinc-600"]:hover { border-color: #a1a1aa; } html[data-theme="light"] [class~="hover:border-zinc-700"]:hover { border-color: #d4d4d8; } /* ── divide / placeholder ─────────────────────────────────────────────── */ html[data-theme="light"] [class~="divide-zinc-800/60"] > :not([hidden]) ~ :not([hidden]) { border-color: rgba(228, 228, 231, 0.7); } html[data-theme="light"] [class~="placeholder-zinc-500"]::placeholder { color: #a1a1aa; } html[data-theme="light"] [class~="placeholder-zinc-600"]::placeholder { color: #a1a1aa; } /* ── Chữ (text) ───────────────────────────────────────────────────────── */ html[data-theme="light"] [class~="text-white"] { color: #18181b; } html[data-theme="light"] [class~="text-zinc-200"] { color: #27272a; } html[data-theme="light"] [class~="text-zinc-300"] { color: #3f3f46; } html[data-theme="light"] [class~="text-zinc-400"] { color: #52525b; } html[data-theme="light"] [class~="text-zinc-600"] { color: #a1a1aa; } html[data-theme="light"] [class~="text-zinc-700"] { color: #d4d4d8; } html[data-theme="light"] [class~="hover:text-white"]:hover { color: #18181b; } html[data-theme="light"] [class~="hover:text-zinc-300"]:hover { color: #3f3f46; } html[data-theme="light"] [class~="hover:text-zinc-400"]:hover { color: #52525b; }