:root { --grad: linear-gradient(135deg, #7C3AED, #3B82F6, #06B6D4); --glass: rgba(255,255,255,0.04); --glass-border: rgba(255,255,255,0.08); }
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:#0B0B0F; color:#E2E8F0; font-family:'Inter',sans-serif; overflow-x:hidden; min-height:100vh; }
::-webkit-scrollbar { width:4px; } ::-webkit-scrollbar-track { background:#0B0B0F; } ::-webkit-scrollbar-thumb { background:#7C3AED; border-radius:2px; }

.glass { background:var(--glass); border:1px solid var(--glass-border); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.grad-text { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-grad { background:radial-gradient(ellipse at 20% 50%,rgba(124,58,237,0.15) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(59,130,246,0.1) 0%,transparent 60%); }
.grid-bg { position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px); background-size:24px 24px; pointer-events:none; }

.btn-grad { background:linear-gradient(135deg,#7C3AED,#3B82F6); border:none; cursor:pointer; position:relative; overflow:hidden; transition:all 0.3s ease; }
.btn-grad:hover { transform:translateY(-1px); box-shadow:0 8px 30px rgba(124,58,237,0.5); }
.btn-grad::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,#8B5CF6,#60A5FA); opacity:0; transition:opacity 0.3s; }
.btn-grad:hover::after { opacity:1; }
.btn-grad span { position:relative; z-index:1; }

.blob { position:fixed; border-radius:50%; filter:blur(80px); opacity:0.12; pointer-events:none; animation:floatBlob 8s ease-in-out infinite; }
.blob-1 { width:600px; height:600px; background:#7C3AED; top:-200px; left:-200px; }
.blob-2 { width:500px; height:500px; background:#3B82F6; bottom:-200px; right:-150px; animation-delay:-3s; }
.blob-3 { width:400px; height:400px; background:#EC4899; top:50%; left:50%; animation-delay:-6s; }
@keyframes floatBlob { 0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(30px,-30px) scale(1.05);} 66%{transform:translate(-20px,20px) scale(0.95);} }

.prompt-card { position:relative; border-radius:16px; overflow:hidden; cursor:pointer; transition:transform 0.3s ease,box-shadow 0.3s ease; background:#111118; border:1px solid rgba(255,255,255,0.06); }
.prompt-card:hover { transform:scale(1.03) translateY(-4px); box-shadow:0 20px 60px rgba(124,58,237,0.3); border-color:rgba(124,58,237,0.4); }
.prompt-card img { width:100%; aspect-ratio:3/4; object-fit:cover; display:block; transition:transform 0.4s ease; }
.prompt-card:hover img { transform:scale(1.05); }
.prompt-card .overlay { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top,rgba(11,11,15,0.95),transparent); padding:20px 12px 12px; transform:translateY(100%); transition:transform 0.3s ease; }
.prompt-card:hover .overlay { transform:translateY(0); }
.prompt-card .badge { position:absolute; top:10px; left:10px; background:rgba(124,58,237,0.8); backdrop-filter:blur(10px); border-radius:20px; padding:2px 10px; font-size:10px; font-weight:600; border:1px solid rgba(124,58,237,0.5); }
.prompt-card.blurred img { filter:blur(14px) brightness(0.5); }
.prompt-card.blurred .lock-icon { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:32px; }
.trend-badge { background:linear-gradient(135deg,#F59E0B,#EF4444); font-size:9px; padding:2px 8px; border-radius:20px; font-weight:700; letter-spacing:0.5px; }

.skeleton { background:linear-gradient(90deg,#1A1A27 25%,#222235 50%,#1A1A27 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:16px; aspect-ratio:3/4; }
@keyframes shimmer { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

.modal-overlay { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.8); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.3s ease; padding:16px; }
.modal-overlay.active { opacity:1; pointer-events:all; }
.modal-box { background:#111118; border:1px solid rgba(255,255,255,0.1); border-radius:24px; max-width:520px; width:100%; max-height:90vh; overflow-y:auto; transform:scale(0.9) translateY(20px); transition:transform 0.3s ease; }
.modal-overlay.active .modal-box { transform:scale(1) translateY(0); }

.toast-container { position:fixed; bottom:90px; left:50%; transform:translateX(-50%); z-index:2000; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast { padding:10px 20px; border-radius:50px; background:#1A1A27; border:1px solid rgba(255,255,255,0.1); font-size:13px; font-weight:500; animation:toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards; white-space:nowrap; }
.toast.success { border-color:rgba(16,185,129,0.5); color:#10B981; }
.toast.error { border-color:rgba(239,68,68,0.5); color:#EF4444; }
@keyframes toastIn { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }
@keyframes toastOut { from{opacity:1;} to{opacity:0;} }

.bottom-nav { position:fixed; bottom:0; left:0; right:0; z-index:100; background:rgba(11,11,15,0.95); border-top:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(20px); display:flex; align-items:center; justify-content:space-around; padding:8px 0 max(8px,env(safe-area-inset-bottom)); }
.nav-item { display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; padding:6px 16px; transition:all 0.2s ease; color:#64748B; font-size:10px; font-weight:500; border-radius:12px; }
.nav-item.active { color:#8B5CF6; }
.nav-item .nav-icon { font-size:22px; line-height:1; transition:transform 0.2s; }
.nav-item:active .nav-icon { transform:scale(0.85); }

.search-bar { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:50px; padding:10px 18px; color:#E2E8F0; font-size:14px; width:100%; outline:none; transition:all 0.2s; }
.search-bar:focus { border-color:rgba(124,58,237,0.5); box-shadow:0 0 0 3px rgba(124,58,237,0.1); }

.cat-pill { padding:7px 16px; border-radius:50px; border:1px solid rgba(255,255,255,0.1); font-size:12px; font-weight:500; cursor:pointer; white-space:nowrap; transition:all 0.2s; color:#94A3B8; background:transparent; }
.cat-pill.active { background:linear-gradient(135deg,#7C3AED,#3B82F6); border-color:transparent; color:white; box-shadow:0 4px 15px rgba(124,58,237,0.4); }

.page { display:none; padding-bottom:80px; }
.page.active { display:block; }

.input-field { width:100%; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:14px 16px; color:#E2E8F0; font-size:15px; outline:none; transition:all 0.2s; font-family:inherit; }
.input-field:focus { border-color:rgba(124,58,237,0.6); box-shadow:0 0 0 3px rgba(124,58,237,0.15); }
.input-label { font-size:11px; font-weight:600; color:#94A3B8; margin-bottom:6px; letter-spacing:0.5px; text-transform:uppercase; display:block; }
.code-input { font-family:monospace; font-size:18px; letter-spacing:3px; }

.load-more { display:flex; justify-content:center; padding:20px; }
.spinner { width:32px; height:32px; border:3px solid rgba(124,58,237,0.2); border-top-color:#7C3AED; border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg);} }

.stat-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:12px; padding:14px; }
.fade-in { animation:fadeIn 0.4s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }

.prompt-modal-img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:20px 20px 0 0; }