@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); body { font-family: 'Inter', sans-serif; } /* Security Badge */ .security-badge { position: fixed; bottom: 1rem; right: 1rem; background: rgba(0, 240, 255, 0.1); border: 1px solid rgba(0, 240, 255, 0.3); border-radius: 9999px; padding: 0.5rem 1rem; font-size: 0.75rem; display: flex; align-items: center; gap: 0.5rem; z-index: 100; backdrop-filter: blur(10px); } .security-badge i { color: #00f0ff; } /* Mobile Responsive Styles */ @media (max-width: 768px) { main { padding: 1rem !important; } .grid-cols-1 { grid-template-columns: 1fr !important; } .stats-cards { grid-template-columns: 1fr !important; gap: 1rem !important; } .analysis-sections { grid-template-columns: 1fr !important; } .navbar { padding: 0 1rem !important; } .search-bar { display: none !important; } .security-banner .container { flex-direction: column; gap: 0.5rem; text-align: center; } .tweet-generator input, .tweet-generator button { width: 100% !important; } } @media (max-width: 1024px) { body.menu-open { overflow: hidden; } main { margin-left: 0 !important; } .sidebar { transform: translateX(-100%); } .sidebar.mobile-open { transform: translateX(0); } } /* Touch targets */ button, a, input[type="submit"] { min-height: 44px; min-width: 44px; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #111111; } ::-webkit-scrollbar-thumb { background: #333333; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #444444; } /* Neon glow effect */ .glow-effect { position: relative; } .glow-effect::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; box-shadow: 0 0 15px rgba(0, 240, 255, 0.3); opacity: 0; transition: opacity 0.3s ease; } .glow-effect:hover::after { opacity: 1; } /* Pulse animation */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(0, 240, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0); } } .pulse { animation: pulse 2s infinite; }