@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{--bg-color:#0f111a;--bg-gradient:radial-gradient(circle at 15% 50%, #1a1e2d, #0f111a 60%);--panel-bg:#ffffff08;--panel-border:#ffffff14;--text-primary:#f8f9fa;--text-secondary:#adb5bd;--primary-color:#6366f1;--primary-gradient:linear-gradient(135deg, #6366f1 0%, #a855f7 100%);--hover-bg:#ffffff14;--border-radius:16px;--transition-speed:.3s}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-color);background-image:var(--bg-gradient);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Inter,sans-serif;display:flex;overflow:hidden}#app{width:100vw;height:100vh;display:flex}h1,h2,h3,h4,h5,h6{letter-spacing:-.02em;font-weight:600}a{color:inherit;transition:color var(--transition-speed) ease;text-decoration:none}.glass-panel{background:var(--panel-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--panel-border);border-radius:var(--border-radius);box-shadow:0 8px 32px #0000004d}.glass-badge{background:var(--primary-gradient);color:#fff;text-transform:uppercase;letter-spacing:.05em;border-radius:20px;padding:4px 12px;font-size:.75rem;font-weight:600;box-shadow:0 4px 12px #6366f14d}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.5s forwards fadeIn}.glowing-text{background:var(--primary-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.sidebar{flex-direction:column;flex-shrink:0;width:280px;height:calc(100vh - 40px);margin:20px;padding:30px 0;display:flex}.sidebar-header{margin-bottom:40px;padding:0 30px}.logo{letter-spacing:-.05em;font-size:1.8rem;font-weight:800}.category-nav ul{list-style:none}.category-item{cursor:pointer;color:var(--text-secondary);transition:all var(--transition-speed) ease;padding:12px 30px;font-weight:500;position:relative}.category-item:hover{color:var(--text-primary);background:var(--hover-bg)}.category-item.active{color:var(--text-primary);background:#6366f11a}.category-item.active:before{content:"";background:var(--primary-gradient);width:4px;position:absolute;top:0;bottom:0;left:0}.main-content{flex-direction:column;flex-grow:1;height:100vh;padding:20px 40px 20px 0;display:flex;overflow-y:auto}.top-bar{z-index:10;justify-content:space-between;align-items:center;margin-bottom:30px;padding:20px 30px;display:flex;position:sticky;top:0}.search-container input{border:1px solid var(--panel-border);color:#fff;width:300px;transition:border-color var(--transition-speed);background:#ffffff0d;border-radius:12px;outline:none;padding:10px 20px}.search-container input:focus{border-color:var(--primary-color);box-shadow:0 0 0 2px #6366f133}.sites-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:25px;padding-bottom:40px;display:grid}.site-card{transition:all var(--transition-speed) cubic-bezier(.4, 0, .2, 1);flex-direction:column;height:100%;padding:25px;display:flex}.site-card:hover{background:#ffffff0d;border-color:#6366f166;transform:translateY(-8px)scale(1.02)}.site-card-header{justify-content:space-between;align-items:flex-start;margin-bottom:20px;display:flex}.site-icon{object-fit:contain;background:#ffffff0d;border-radius:12px;width:48px;height:48px;padding:8px}.site-card-content h3{margin-bottom:10px;font-size:1.25rem}.site-card-content p{color:var(--text-secondary);margin-bottom:15px;font-size:.95rem;line-height:1.6}.site-tags{flex-wrap:wrap;gap:8px;margin-bottom:20px;display:flex}.tag-badge{border:1px solid var(--panel-border);color:var(--text-secondary);transition:all var(--transition-speed);background:#ffffff0d;border-radius:6px;padding:2px 10px;font-size:.75rem;font-weight:500}.site-card:hover .tag-badge{color:var(--text-primary);border-color:#6366f14d}.site-card-footer{color:var(--primary-color);margin-top:auto;font-size:.9rem;font-weight:600}.empty-state{text-align:center;color:var(--text-secondary);grid-column:1/-1;padding:100px 0;font-size:1.2rem}@media (width<=900px){body{flex-direction:column;overflow-y:auto}#app{flex-direction:column;height:auto}.sidebar{width:calc(100% - 40px);height:auto;margin:20px}.main-content{height:auto;padding:0 20px 20px}.top-bar{flex-direction:column;align-items:stretch;gap:20px}.search-container input{width:100%}}.sidebar-footer{border-top:1px solid var(--panel-border);flex-direction:column;gap:10px;margin-top:auto;padding:20px 30px 0;display:flex}.sidebar-footer-item{color:var(--text-secondary);cursor:pointer;transition:all var(--transition-speed);text-align:left;background:0 0;border:none;align-items:center;gap:12px;width:100%;padding:10px 0;font-size:.9rem;font-weight:500;display:flex}.sidebar-footer-item:hover{color:var(--text-primary);transform:translate(5px)}.sidebar-footer-item svg{opacity:.7;transition:opacity var(--transition-speed)}.sidebar-footer-item:hover svg{opacity:1;color:var(--primary-color)}.modal-overlay{-webkit-backdrop-filter:blur(8px);z-index:1000;width:100%;height:100%;transition:all var(--transition-speed);background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;top:0;left:0}.modal-overlay.hidden{opacity:0;pointer-events:none;visibility:hidden}.modal-content{background:#0f111afa;border:1px solid #ffffff26;width:90%;max-width:500px;padding:40px;position:relative}.modal-header{justify-content:space-between;align-items:center;margin-bottom:25px;display:flex}.modal-header h3{background:var(--primary-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.5rem}.close-btn{color:var(--text-secondary);cursor:pointer;transition:color var(--transition-speed);background:0 0;border:none;font-size:1.8rem;line-height:1}.close-btn:hover{color:var(--text-primary)}.modal-body p{color:var(--text-secondary);margin-bottom:15px;line-height:1.8}.modal-footer{border-top:1px solid var(--panel-border);color:#666;text-align:center;margin-top:30px;padding-top:20px;font-size:.8rem}@media (width<=900px){.sidebar-footer{flex-direction:row;justify-content:space-around;margin-top:20px;padding:20px 0 0}.sidebar-footer-item{width:auto;padding:10px}}