/* css/styles.css */
body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; -webkit-tap-highlight-color: transparent; transition: background-color 0.3s, color 0.3s; }
.display-font { font-family: 'Space Grotesk', sans-serif; }
.mono-font { font-family: 'JetBrains Mono', monospace; letter-spacing: -0.05em; }
.glass-panel { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04); transition: all 0.3s ease; }
.tab-content { display: none; opacity: 0; transition: opacity 0.4s ease; }
.tab-content.active { display: block; opacity: 1; animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes slideUp { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.neon-glow { filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.4)); }
.shiny-btn { background: linear-gradient(90deg, #06b6d4, #8b5cf6, #06b6d4); background-size: 200% auto; animation: shine 3s linear infinite; }
@keyframes shine { to { background-position: 200% center; } }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.dark ::-webkit-scrollbar-thumb { background: #334155; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.search-input { width: 100%; padding: 12px 16px 12px 40px; border-radius: 8px; transition: all 0.3s ease; font-size: 0.875rem; }
.search-input:focus { outline: none; border-color: #22d3ee; box-shadow: 0 0 0 3px rgba(34,211,238,0.1); }
#toast { position: fixed; bottom: 24px; right: 24px; transform: translateY(150px) scale(0.9); opacity: 0; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 9999; }
#toast.show { transform: translateY(0) scale(1); opacity: 1; }
.modal-overlay { opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 60; }
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-content { transform: scale(0.98); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.modal-overlay.active .modal-content { transform: scale(1); }
#drawer { transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); z-index: 70;}
#drawer.active { transform: translateX(0); }
#overlay { opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
#overlay.active { opacity: 1; pointer-events: auto; }
.scan-line { width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #22d3ee, #a855f7, transparent); position: absolute; left: 0; box-shadow: 0 0 15px #22d3ee; animation: vScan 1.5s ease-in-out infinite; display: none; z-index: 50; }
@keyframes vScan { 0% { top: 0%; } 100% { top: 100%; } }

/* --- YOLO MODE v2.0 (DARK WEB BRUTALISM) --- */
html.yolo body { background-color: #050505 !important; color: #00ff41 !important; font-family: 'JetBrains Mono', monospace !important; }
html.yolo::after { content: " "; display: block; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%); z-index: 99999; background-size: 100% 3px; pointer-events: none; opacity: 0.6; }
html.yolo * { font-family: 'JetBrains Mono', monospace !important; border-radius: 0px !important; border-color: #00ff41 !important; }
html.yolo .glass-panel { background: #0a0a0a !important; border: 1px dashed #00ff41 !important; box-shadow: 6px 6px 0px rgba(0, 255, 65, 0.15) !important; backdrop-filter: none !important; }
html.yolo .glass-panel:hover { transform: translate(-2px, -2px) !important; box-shadow: 8px 8px 0px rgba(0, 255, 65, 0.3) !important; }
html.yolo h1, html.yolo h2, html.yolo h3, html.yolo h4, html.yolo h5, html.yolo p, html.yolo span, html.yolo a { color: #00ff41 !important; letter-spacing: -0.05em !important; text-transform: uppercase !important; }
html.yolo .text-slate-500, html.yolo .text-slate-400 { color: #008f11 !important; }
html.yolo button.bg-slate-900, html.yolo .shiny-btn, html.yolo .bg-gradient-to-r, html.yolo .bg-emerald-600 { background: #00ff41 !important; color: #050505 !important; border: none !important; box-shadow: 0 0 15px rgba(0, 255, 65, 0.4) !important; animation: none !important; font-weight: 900 !important;}
html.yolo button i, html.yolo .shiny-btn i { color: #050505 !important; }
html.yolo .engine-glow-tab { background-color: #00ff41 !important; color: #050505 !important; box-shadow: 0 0 20px rgba(0, 255, 65, 0.8) !important; animation: none !important; }
html.yolo .engine-glow-tab span, html.yolo .engine-glow-tab i { color: #050505 !important; }
html.yolo .bg-clip-text { background: none !important; -webkit-text-fill-color: #00ff41 !important; color: #00ff41 !important; text-shadow: 2px 2px 0px rgba(0, 255, 65, 0.3); }
html.yolo .text-red-500, html.yolo .text-orange-500, html.yolo .border-red-500 { color: #ff003c !important; border-color: #ff003c !important; }
html.yolo .bg-red-50, html.yolo .bg-red-500\/5, html.yolo .bg-orange-50, html.yolo .bg-orange-500\/5 { background-color: rgba(255, 176, 0, 0.1) !important; }
html.yolo input[type="range"] { accent-color: #00ff41 !important; background-color: #003300 !important; }
html.yolo input[type="checkbox"] { accent-color: #ff003c !important; border-radius: 0 !important;}
html.yolo input, html.yolo select { background: #050505 !important; border: 1px solid #00ff41 !important; color: #00ff41 !important; }
html.yolo input:focus { box-shadow: 0 0 10px rgba(0,255,65,0.5) !important; }
html.yolo .bg-blue-100, html.yolo .bg-purple-100, html.yolo .bg-amber-100, html.yolo .bg-emerald-100 { background-color: transparent !important; color: #00ff41 !important; border: 1px dashed #00ff41 !important; }
html.yolo svg path { stroke: #00ff41 !important; }
html.yolo svg circle { fill: #00ff41 !important; }