@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Inter:wght@300;400;500&display=swap";:root{--bg-color:#0b0f19;--bg-gradient:linear-gradient(135deg, #0b0f19 0%, #1a1b38 100%);--text-main:#e2e8f0;--text-muted:#94a3b8;--accent-primary:#8b5cf6;--accent-secondary:#ec4899;--accent-gradient:linear-gradient(135deg, #8b5cf6, #ec4899);--card-bg:#1e293b99;--card-border:#ffffff14;--card-hover:#2d3748cc;--font-heading:"Outfit", sans-serif;--font-body:"Inter", sans-serif;--shadow-glow:0 0 20px #8b5cf64d}body{background:var(--bg-gradient);min-height:100vh;color:var(--text-main);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-attachment:fixed;margin:0}#root{flex-direction:column;align-items:center;width:100%;display:flex}.app-container{box-sizing:border-box;width:100%;max-width:1200px;margin:0 auto;padding:3rem 1.5rem}.app-header{text-align:center;margin-bottom:3rem;animation:.8s ease-out fadeInDown}.title{font-family:var(--font-heading);letter-spacing:-.02em;margin:0 0 .5rem;font-size:3.5rem;font-weight:800}.highlight{background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.subtitle{color:var(--text-muted);margin:0;font-size:1.125rem}.main-content{flex-direction:column;gap:3rem;display:flex}.categories-wrapper{justify-content:center;animation:1s ease-out .2s both fadeIn;display:flex}.categories-list{flex-wrap:wrap;justify-content:center;gap:1rem;margin:0;padding:0;list-style:none;display:flex}.category-btn{background:var(--card-bg);border:1px solid var(--card-border);color:var(--text-main);font-family:var(--font-heading);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:9999px;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1)}.category-btn:hover{background:var(--card-hover);transform:translateY(-2px);box-shadow:0 4px 12px #0003}.category-btn.active{background:var(--accent-gradient);box-shadow:var(--shadow-glow);border-color:#0000;transform:translateY(-2px)}.posts-wrapper{min-height:400px;animation:1s ease-out .4s both fadeIn}.posts-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem;display:grid}.post-card{background:var(--card-bg);border:1px solid var(--card-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-sizing:border-box;border-radius:16px;flex-direction:column;height:100%;padding:2rem;transition:all .3s;display:flex}.post-card:hover{border-color:var(--accent-primary);transform:translateY(-5px);box-shadow:0 10px 30px #0000004d}.post-title{font-family:var(--font-heading);color:#fff;margin:0 0 1rem;font-size:1.5rem;font-weight:600;line-height:1.3}.post-content{color:var(--text-muted);margin:0;line-height:1.6}.loader-container{justify-content:center;align-items:center;height:200px;display:flex}.loader{border:3px solid #8b5cf64d;border-top-color:var(--accent-primary);border-radius:50%;width:40px;height:40px;animation:1s ease-in-out infinite spin}.empty-state,.initial-state{text-align:center;color:var(--text-muted);background:var(--card-bg);border:1px dashed var(--card-border);border-radius:16px;padding:4rem}.pulse-circle{background:var(--accent-primary);opacity:.2;border-radius:50%;width:60px;height:60px;margin:0 auto 1.5rem;animation:2s infinite pulse}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%{opacity:.5;transform:scale(.95);box-shadow:0 0 #8b5cf6b3}70%{opacity:.8;transform:scale(1);box-shadow:0 0 0 20px #8b5cf600}to{opacity:.5;transform:scale(.95);box-shadow:0 0 #8b5cf600}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (width<=768px){.title{font-size:2.5rem}.posts-grid{grid-template-columns:1fr}}