.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Thin scrollbar for tab row */
#tab-row { scrollbar-width: none; }
#tab-row::-webkit-scrollbar { display: none; }

/* Animations */
@keyframes slideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }

/* Animated gradient logo */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.sidebar-logo {
    background: linear-gradient(270deg, #60a5fa, #a78bfa, #f472b6, #60a5fa);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 6s ease infinite;
}

/* Content transitions */
.content-animate { animation: slideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.search-animate { animation: scaleIn 0.2s ease-out forwards; }

/* Card hover */
.card-hover { transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 12px 30px -8px rgba(0,0,0,0.4); border-color: rgba(99, 102, 241, 0.3); }

/* Nav items */
.nav-item { transition: all 0.15s ease; }
.nav-item:active { transform: scale(0.97); }

/* Code blocks */
pre { white-space: pre; tab-size: 2; }
pre code { line-height: 1.6; }
table th, table td { padding: 0.75rem 1rem; }
tbody tr:hover { background: rgba(255,255,255,0.03); transition: background 0.15s ease; }

/* Theme accent styles */
[data-theme="blue"] .card-hover:hover { border-color: rgba(96, 165, 250, 0.5); }
[data-theme="purple"] .card-hover:hover { border-color: rgba(192, 132, 252, 0.5); }
[data-theme="teal"] .card-hover:hover { border-color: rgba(45, 212, 191, 0.5); }
[data-theme="orange"] .card-hover:hover { border-color: rgba(251, 146, 60, 0.5); }
[data-theme="cyan"] .card-hover:hover { border-color: rgba(34, 211, 238, 0.5); }
[data-theme="emerald"] .card-hover:hover { border-color: rgba(52, 211, 153, 0.5); }
[data-theme="default"] .card-hover:hover { border-color: rgba(139, 92, 246, 0.5); }

/* Dropdown animation */
.dd-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.dd-content.open { grid-template-rows: 1fr; }
.dd-content > div { overflow: hidden; }
.dd-arrow { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

/* Search results */
.search-item { transition: all 0.15s ease; }
.search-item:hover { background: #2d2f31; transform: translateX(2px); }
.search-item.active { background: #2d2f31; }

/* Sidebar */
#sidebar { transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

/* Buttons */
button { transition: all 0.15s ease; }
button:active { transform: scale(0.96); }

/* Theme bar glow */
@keyframes glowMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
#theme-bar { background-size: 200% 100%; animation: glowMove 3s ease infinite; }
[data-theme="default"] #theme-bar { box-shadow: 0 0 15px rgba(124,58,237,0.6), 0 0 5px rgba(124,58,237,0.3); }
[data-theme="blue"] #theme-bar { box-shadow: 0 0 15px rgba(59,130,246,0.6), 0 0 5px rgba(59,130,246,0.3); }
[data-theme="purple"] #theme-bar { box-shadow: 0 0 15px rgba(168,85,247,0.6), 0 0 5px rgba(168,85,247,0.3); }
[data-theme="teal"] #theme-bar { box-shadow: 0 0 15px rgba(20,184,166,0.6), 0 0 5px rgba(20,184,166,0.3); }
[data-theme="orange"] #theme-bar { box-shadow: 0 0 15px rgba(249,115,22,0.6), 0 0 5px rgba(249,115,22,0.3); }
[data-theme="cyan"] #theme-bar { box-shadow: 0 0 15px rgba(6,182,212,0.6), 0 0 5px rgba(6,182,212,0.3); }
[data-theme="emerald"] #theme-bar { box-shadow: 0 0 15px rgba(16,185,129,0.6), 0 0 5px rgba(16,185,129,0.3); }

/* Scroll progress indicator */
#scroll-progress { transition: width 0.1s linear; }

/* ===== LIGHT MODE ===== */
body.light { background: #f5f5f7 !important; color: #1a1a1a !important; }
body.light main { background: #f5f5f7 !important; }
body.light #sidebar { background: #ffffff !important; border-color: #e5e7eb !important; }
body.light #sidebar .nav-item { color: #374151 !important; }
body.light #sidebar .nav-item:hover { background: #f3f4f6 !important; color: #111827 !important; }
body.light #sidebar button { color: #6b7280 !important; }
body.light #sidebar button:hover { color: #374151 !important; }
body.light header { background: #ffffff !important; border-color: #e5e7eb !important; }
body.light header button { color: #6b7280 !important; }
body.light header .text-gray-300, body.light header .text-gray-500 { color: #6b7280 !important; }
body.light #breadcrumb { border-color: #e5e7eb !important; color: #6b7280 !important; }
body.light #workspace { color: #1a1a1a !important; }
body.light #workspace h1 { color: #111827 !important; -webkit-text-fill-color: initial !important; }
body.light #workspace h2[class*="text-"], body.light #workspace h3[class*="text-"] { -webkit-text-fill-color: initial !important; }
body.light #workspace h2:not([class*="text-"]), body.light #workspace h3:not([class*="text-"]) { color: #111827 !important; }
body.light #workspace p { color: #374151 !important; }
body.light #workspace li { color: #374151 !important; }
body.light #workspace span { color: #4b5563 !important; }
body.light #workspace strong { color: #111827 !important; }
body.light #workspace .text-white { color: #111827 !important; }
body.light #workspace h3.text-white, body.light #workspace h3.font-bold { color: #111827 !important; }
body.light #workspace p.text-sm { color: #374151 !important; }

/* Preserve colored text */
body.light #workspace [class*="text-blue-4"] { color: #2563eb !important; }
body.light #workspace [class*="text-purple-4"] { color: #7c3aed !important; }
body.light #workspace [class*="text-emerald-4"] { color: #059669 !important; }
body.light #workspace [class*="text-green-4"] { color: #16a34a !important; }
body.light #workspace [class*="text-teal-4"] { color: #0d9488 !important; }
body.light #workspace [class*="text-orange-4"] { color: #ea580c !important; }
body.light #workspace [class*="text-cyan-4"] { color: #0891b2 !important; }
body.light #workspace [class*="text-red-4"] { color: #dc2626 !important; }
body.light #workspace [class*="text-amber-4"] { color: #d97706 !important; }
body.light #workspace [class*="text-rose-4"] { color: #e11d48 !important; }
body.light #workspace [class*="text-pink-4"] { color: #db2777 !important; }
body.light #workspace [class*="text-violet-4"] { color: #7c3aed !important; }
body.light #workspace [class*="text-sky-4"] { color: #0284c7 !important; }
body.light #workspace [class*="text-indigo-4"] { color: #4f46e5 !important; }
body.light #workspace [class*="text-lime-4"] { color: #65a30d !important; }
body.light #workspace [class*="text-fuchsia-4"] { color: #c026d3 !important; }
body.light #workspace [class*="text-yellow-4"] { color: #ca8a04 !important; }
body.light #workspace p.text-gray-300, body.light p.text-gray-300 { color: #374151 !important; }
body.light #workspace p.text-gray-400, body.light p.text-gray-400 { color: #4b5563 !important; }
body.light #workspace .text-gray-500, body.light span.text-gray-500 { color: #6b7280 !important; }
body.light #workspace .text-white { color: #111827 !important; }
body.light .bg-blue-600, body.light .bg-blue-500,
body.light button.bg-blue-600, body.light button.bg-blue-500,
body.light button[class*="bg-blue-6"], body.light button[class*="bg-blue-5"],
body.light div[onclick*="startQuiz"] button,
body.light [class*="bg-blue-6"], body.light [class*="bg-blue-5"] { color: #ffffff !important; }
body.light .bg-blue-600 *, body.light .bg-blue-500 * { color: #ffffff !important; }
body.light .text-gray-200:not(h2):not(h3):not([class*="text-blue"]):not([class*="text-purple"]):not([class*="text-emerald"]):not([class*="text-teal"]):not([class*="text-orange"]):not([class*="text-cyan"]):not([class*="text-rose"]):not([class*="text-green"]):not([class*="text-sky"]):not([class*="text-lime"]):not([class*="text-indigo"]) { color: #1f2937 !important; }
body.light p.text-gray-300, body.light li.text-gray-300, body.light span.text-gray-300, body.light div.text-gray-300 { color: #374151 !important; }
body.light .card-hover, body.light [class*="bg-[#1e1f20]"] { background: #ffffff !important; border-color: #e5e7eb !important; }
body.light [class*="from-[#1e1f20]"], body.light [class*="to-[#1a1b2e]"],
body.light [class*="bg-gradient"] { background: #eef2ff !important; border-color: #c7d2fe !important; }
body.light [class*="bg-gradient"] .text-white, body.light [class*="from-[#1e1f20]"] .text-white { color: #1e293b !important; }
body.light [class*="bg-gradient"] .text-gray-400 { color: #64748b !important; }
body.light .card-hover:hover { box-shadow: 0 8px 25px -5px rgba(0,0,0,0.08) !important; border-color: rgba(99,102,241,0.4) !important; }
body.light [class*="bg-[#0d0d0e]"] { background: #f1f5f9 !important; border-color: #e2e8f0 !important; }
body.light pre { background: #1e293b !important; color: #e2e8f0 !important; border-radius: 0.5rem; }
body.light pre code { color: inherit !important; }
body.light code.text-green-300 { color: #059669 !important; }
body.light [class*="bg-[#2d2f31]"] { background: #e5e7eb !important; color: #1f2937 !important; }
body.light [class*="hover:bg-[#3d3f41]"]:hover { background: #d1d5db !important; }
body.light [class*="border-[#2d2f31]"] { border-color: #e5e7eb !important; }
body.light .sidebar-logo { -webkit-text-fill-color: transparent !important; }
body.light #workspace span[class*="bg-clip-text"] { -webkit-text-fill-color: transparent !important; background: linear-gradient(90deg, #2563eb, #7c3aed) !important; -webkit-background-clip: text !important; background-clip: text !important; }
body.light .dd-content { background: transparent !important; }
body.light .search-item:hover, body.light .search-item.active { background: #f3f4f6 !important; }
body.light #theme-bar { box-shadow: 0 0 6px rgba(99,102,241,0.2) !important; }
body.light table { color: #374151 !important; }
body.light table th { color: #1f2937 !important; }
body.light table td { color: #374151 !important; }
body.light tbody tr:hover { background: rgba(0,0,0,0.02) !important; }
body.light .font-mono.text-green-300 { color: #059669 !important; }
body.light .text-xs.text-gray-500.font-mono { color: #6b7280 !important; }
body.light #sidebar .text-xs.font-semibold { color: #4b5563 !important; }
body.light .text-xs.text-gray-400 { color: #4b5563 !important; }

/* Fix light-colored text in light mode */
body.light [class*="text-red-2"], body.light [class*="text-red-3"] { color: #dc2626 !important; }
body.light [class*="text-orange-2"], body.light [class*="text-orange-3"] { color: #ea580c !important; }
body.light [class*="text-amber-2"], body.light [class*="text-amber-3"] { color: #d97706 !important; }
body.light [class*="text-yellow-2"], body.light [class*="text-yellow-3"] { color: #ca8a04 !important; }
body.light [class*="text-green-2"], body.light [class*="text-green-3"] { color: #16a34a !important; }
body.light [class*="text-lime-2"], body.light [class*="text-lime-3"] { color: #65a30d !important; }
body.light [class*="text-teal-2"], body.light [class*="text-teal-3"] { color: #0d9488 !important; }
body.light [class*="text-cyan-2"], body.light [class*="text-cyan-3"] { color: #0891b2 !important; }
body.light [class*="text-sky-2"], body.light [class*="text-sky-3"] { color: #0284c7 !important; }
body.light [class*="text-blue-2"], body.light [class*="text-blue-3"] { color: #2563eb !important; }
body.light [class*="text-indigo-2"], body.light [class*="text-indigo-3"] { color: #4f46e5 !important; }
body.light [class*="text-violet-2"], body.light [class*="text-violet-3"] { color: #7c3aed !important; }
body.light [class*="text-purple-2"], body.light [class*="text-purple-3"] { color: #9333ea !important; }
body.light [class*="text-fuchsia-2"], body.light [class*="text-fuchsia-3"] { color: #c026d3 !important; }
body.light [class*="text-pink-2"], body.light [class*="text-pink-3"] { color: #db2777 !important; }
body.light [class*="text-rose-2"], body.light [class*="text-rose-3"] { color: #e11d48 !important; }

/* Fix colored info boxes in light mode */
body.light [class*="bg-amber-500/10"], body.light [class*="bg-green-500/10"],
body.light [class*="bg-lime-500/10"], body.light [class*="bg-red-500/10"],
body.light [class*="bg-blue-500/10"], body.light [class*="bg-orange-500/10"],
body.light [class*="bg-sky-500/10"], body.light [class*="bg-purple-500/10"],
body.light [class*="bg-cyan-500/10"] {
    background: #fefce8 !important;
    border-color: #fde047 !important;
}
body.light [class*="bg-amber-500/10"] p, body.light [class*="bg-green-500/10"] p,
body.light [class*="bg-lime-500/10"] p, body.light [class*="bg-red-500/10"] p,
body.light [class*="bg-orange-500/10"] p, body.light [class*="bg-sky-500/10"] p {
    color: #78350f !important;
}

/* ===== PRINT STYLES ===== */
@media print {
    #sidebar, header, #theme-bar, #search-overlay, #scroll-progress { display: none !important; }
    body { background: white !important; color: black !important; }
    #workspace { padding: 0 !important; overflow: visible !important; }
    .card-hover { break-inside: avoid; border: 1px solid #ddd !important; box-shadow: none !important; transform: none !important; }
    pre { border: 1px solid #ddd; padding: 8px; font-size: 10px; }
    .content-animate { animation: none !important; }
    a { color: black !important; text-decoration: underline; }
}

/* Footer */
body.light footer { border-color: #e5e7eb !important; }
body.light footer a { color: #6b7280 !important; }
body.light footer a:hover { color: #111827 !important; }
body.light footer a.text-blue-400 { color: #2563eb !important; }
body.light footer span { color: #d1d5db !important; }