/* Modal */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(8px); z-index: 1000; display: none; align-items: center; justify-content: center; } .modal-backdrop.open { display: flex; } .modal-content { background: #131418; border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; width: 90%; max-width: 900px; overflow: hidden; animation: fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
/* Shine button */ .shine-button { position: relative; overflow: hidden; } .shine-button::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); transition: 0.5s; } .shine-button:hover::after { left: 100%; } xxnxcom
/* Search bar */ .search-bar { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; transition: all 0.3s; } .search-bar:focus-within { border-color: rgba(249, 115, 22, 0.4); box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1); background: rgba(255,255,255,0.06); } /* Modal */
/* Progress bar */ .progress-bar { height: 3px; background: rgba(255,255,255,0.1); border-radius: 999px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(to right, #F97316, #FB923C); border-radius: 999px; } } .modal-backdrop.open { display: flex