:root { --bg-color: #0b0e11; --text-color: #eaecef; --accent-color: #f0b90b; --card-bg: #181a20; --border-color: #2b2f36; --success-color: #0ecb81; --danger-color: #f6465d; --okx-blue: #0046ff; --bit-gradient: linear-gradient(45deg, #0046ff, #00ff96); --glass-bg: rgba(255, 255, 255, 0.03); --glass-border: rgba(255, 255, 255, 0.08); } body { background-color: var(--bg-color); color: var(--text-color); font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; letter-spacing: -0.2px; } /* Glassmorphism */ .glass-card { background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: 24px; } /* Gradient Text */ .text-gradient { background: var(--bit-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; } /* Buttons */ .btn-primary { background: var(--okx-blue); border: none; border-radius: 12px; padding: 10px 24px; font-weight: 600; transition: all 0.3s ease; } .btn-primary:hover { background: #0037cc; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 70, 255, 0.3); } .btn-accent { background-color: var(--accent-color); color: #000; font-weight: 700; border: none; border-radius: 10px; transition: all 0.3s ease; } .btn-accent:hover { background-color: #d9a508; color: #000; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(240, 185, 11, 0.4); } /* Visibility Utilities */ .text-white { color: #ffffff !important; } .text-muted { color: #848e9c !important; } .text-success { color: var(--success-color) !important; } .text-danger { color: var(--danger-color) !important; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: var(--bg-color); } ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #484f65; } /* Hover Effects */ .hover-scale { transition: transform 0.3s ease; } .hover-scale:hover { transform: scale(1.05); } .hover-glow:hover { box-shadow: 0 0 20px rgba(0, 70, 255, 0.2); } /* Layout Utilities */ .rounded-4 { border-radius: 1.5rem !important; } .rounded-5 { border-radius: 2rem !important; } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.5s ease forwards; }