.header{position:sticky;top:0;z-index:100;background:linear-gradient(180deg,#0a0e17f2,#0a0e17cc);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border-color);padding:1.5rem 0}.header-content{max-width:1400px;margin:0 auto;padding:0 2rem;display:flex;justify-content:space-between;align-items:center}.logo{display:flex;align-items:center;gap:1rem}.logo-icon{width:36px;height:36px;color:var(--accent-cyan);filter:drop-shadow(0 0 10px rgba(6,182,212,.5))}.logo h1{font-size:1.75rem;font-weight:700;background:linear-gradient(135deg,var(--text-primary),var(--accent-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-stats{display:flex;gap:2rem}.stat-item{display:flex;align-items:center;gap:.5rem;color:var(--text-secondary);font-size:.875rem}.stat-icon{width:18px;height:18px;color:var(--accent-blue)}.container{max-width:1400px;margin:0 auto;padding:2rem}.search-section{margin-bottom:2rem;display:flex;flex-direction:column;gap:1rem}.search-box{position:relative;background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:12px;padding:1rem 1.5rem;display:flex;align-items:center;gap:1rem;transition:all .3s ease}.search-box:focus-within{border-color:var(--accent-cyan);box-shadow:var(--glow-cyan)}.search-icon{width:20px;height:20px;color:var(--text-secondary);flex-shrink:0}.search-input{flex:1;background:transparent;border:none;color:var(--text-primary);font-size:1rem;outline:none}.search-input::placeholder{color:var(--text-secondary)}.clear-search{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:.25rem;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.clear-search:hover{background:var(--bg-tertiary);color:var(--text-primary)}.filter-tabs{display:flex;gap:.5rem;align-self:flex-start}.filter-tab{background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-secondary);padding:.5rem 1rem;border-radius:8px;font-size:.875rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .3s}.filter-tab:hover{background:var(--bg-tertiary);color:var(--text-primary)}.filter-tab.active{background:var(--accent-blue);border-color:var(--accent-blue);color:#fff}.add-snippet-btn{background:var(--accent-blue);border:none;color:#fff;padding:.5rem 1rem;border-radius:8px;font-size:.875rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s;align-self:flex-start}.add-snippet-btn:hover{background:var(--accent-cyan);transform:translateY(-1px)}.main-layout{display:grid;grid-template-columns:280px 1fr;gap:2rem}.sidebar{position:sticky;top:100px;height:fit-content;max-height:calc(100vh - 140px);overflow-y:auto}.category-list{display:flex;flex-direction:column;gap:.5rem}.category-item{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;background:var(--bg-secondary);border:1px solid transparent;border-radius:10px;cursor:pointer;transition:all .3s;color:var(--text-secondary)}.category-item:hover{background:var(--bg-tertiary);color:var(--text-primary)}.category-item.active{background:linear-gradient(135deg,var(--accent-blue),var(--accent-purple));border-color:transparent;color:#fff}.category-icon{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:var(--bg-primary)}.category-count{margin-left:auto;font-size:.75rem;opacity:.7}.sidebar-footer{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--border-color)}.quick-stats h4{color:var(--text-secondary);font-size:.875rem;margin-bottom:1rem}.tags-cloud{display:flex;flex-wrap:wrap;gap:.5rem}.tag-item{background:var(--bg-tertiary);border:1px solid var(--border-color);padding:.375rem .75rem;border-radius:6px;font-size:.75rem;color:var(--text-secondary);cursor:pointer;transition:all .2s}.tag-item:hover{background:var(--accent-purple);border-color:var(--accent-purple);color:#fff}.content{min-height:600px}.snippet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.5rem}.snippet-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;padding:1.5rem;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}.snippet-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent-blue),var(--accent-purple));opacity:0;transition:opacity .3s}.snippet-card:hover:before{opacity:1}.snippet-card:hover{border-color:var(--accent-blue);box-shadow:var(--glow-blue);transform:translateY(-4px)}.snippet-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.snippet-category{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--text-secondary)}.category-dot{width:8px;height:8px;border-radius:50%}.snippet-badge{display:flex;align-items:center;gap:.25rem;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;padding:.25rem .625rem;border-radius:6px;font-size:.625rem;font-weight:600}.snippet-title{font-size:1.125rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem}.snippet-description{color:var(--text-secondary);font-size:.875rem;margin-bottom:1.25rem;line-height:1.6}.snippet-footer{display:flex;justify-content:space-between;align-items:center}.snippet-tags{display:flex;gap:.5rem;flex-wrap:wrap}.snippet-tags .tag{background:var(--bg-tertiary);color:var(--text-secondary);padding:.25rem .5rem;border-radius:4px;font-size:.6875rem;display:flex;align-items:center;gap:.25rem}.snippet-tags .tag.more{opacity:.6}.snippet-actions{display:flex;gap:.5rem;margin-right:1rem}.snippet-action-btn{background:var(--bg-tertiary);border:none;color:var(--text-secondary);width:28px;height:28px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.snippet-action-btn.edit-btn{background:var(--accent-blue);color:#fff}.snippet-action-btn.delete-btn{background:var(--accent-red);color:#fff}.snippet-action-btn:hover{transform:scale(1.1)}.snippet-stats{display:flex;gap:1rem}.usage-stat,.date-stat{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:var(--text-secondary)}.recent-badge{position:absolute;top:1rem;right:1rem;background:var(--accent-green);color:var(--bg-primary);padding:.25rem .625rem;border-radius:4px;font-size:.625rem;font-weight:600}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6rem 2rem;text-align:center}.empty-icon{color:var(--border-color);margin-bottom:1.5rem}.empty-state h2{font-size:1.5rem;margin-bottom:.75rem;color:var(--text-primary)}.empty-state p{color:var(--text-secondary)}.add-first-snippet-btn{background:var(--accent-blue);border:none;color:#fff;padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s;margin-top:1.5rem}.add-first-snippet-btn:hover{background:var(--accent-cyan);transform:scale(1.05)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:2rem}.modal-content{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:20px;max-width:900px;width:100%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column}.modal-form{max-width:600px}.modal-header{padding:2rem;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:flex-start;gap:2rem}.modal-title-group{flex:1}.modal-category{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--accent-cyan);margin-bottom:.75rem}.modal-header h2{font-size:1.75rem;font-weight:700;color:var(--text-primary);margin-bottom:.5rem}.modal-header p{color:var(--text-secondary)}.close-modal{background:var(--bg-tertiary);border:none;color:var(--text-secondary);padding:.5rem;border-radius:8px;cursor:pointer;transition:all .2s}.close-modal:hover{background:var(--accent-blue);color:#fff}.modal-body{flex:1;overflow-y:auto;padding:2rem}.code-block-container{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px;overflow:hidden}.code-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--bg-tertiary);border-bottom:1px solid var(--border-color)}.code-language{font-size:.75rem;font-weight:600;color:var(--accent-cyan);text-transform:uppercase}.code-actions{display:flex;gap:.5rem}.edit-button{background:var(--accent-blue);border:none;color:#fff;padding:.5rem 1rem;border-radius:6px;font-size:.875rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s}.edit-button:hover{background:var(--accent-cyan);transform:scale(1.02)}.copy-button{background:var(--accent-blue);border:none;color:#fff;padding:.5rem 1rem;border-radius:6px;font-size:.875rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s}.copy-button:hover{background:var(--accent-cyan);transform:scale(1.02)}.copy-button .check{font-weight:700}.code-block{padding:1.5rem;overflow-x:auto;margin:0}.code-block code{font-family:Fira Code,Monaco,Consolas,monospace;font-size:.875rem;line-height:1.8;color:var(--text-primary)}.modal-footer{display:flex;justify-content:space-between;align-items:center;padding-top:1.5rem;margin-top:1.5rem;border-top:1px solid var(--border-color)}.modal-tags{display:flex;gap:.5rem;flex-wrap:wrap}.modal-tags .tag{background:var(--bg-tertiary);color:var(--text-secondary);padding:.5rem .75rem;border-radius:6px;font-size:.8125rem;display:flex;align-items:center;gap:.5rem}.modal-stats{display:flex;gap:2rem}.modal-stats .stat{display:flex;align-items:center;gap:.5rem;color:var(--text-secondary);font-size:.875rem}.snippet-form{width:100%}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;color:var(--text-primary);font-weight:500;font-size:.875rem}.form-group input,.form-group textarea,.form-group select{width:100%;padding:.75rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:.875rem;transition:all .2s}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--accent-cyan);box-shadow:var(--glow-cyan)}.form-group textarea{resize:vertical;min-height:100px}.form-actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border-color)}.btn-cancel,.btn-submit{padding:.75rem 1.5rem;border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}.btn-cancel{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-secondary)}.btn-cancel:hover{background:var(--bg-secondary);color:var(--text-primary)}.btn-submit{background:var(--accent-blue);border:none;color:#fff}.btn-submit:hover{background:var(--accent-cyan);transform:translateY(-1px)}@media (max-width: 1024px){.main-layout{grid-template-columns:1fr}.sidebar{position:static;max-height:none}}@media (max-width: 768px){.header-content{flex-direction:column;gap:1rem}.snippet-grid{grid-template-columns:1fr}.modal-content{margin:1rem;max-height:90vh}.modal-footer{flex-direction:column;gap:1rem;align-items:flex-start}.form-actions{flex-direction:column-reverse}.btn-submit{width:100%}}*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #0a0e17;--bg-secondary: #111827;--bg-tertiary: #1f2937;--text-primary: #f3f4f6;--text-secondary: #9ca3af;--accent-blue: #3b82f6;--accent-cyan: #06b6d4;--accent-purple: #8b5cf6;--accent-green: #10b981;--border-color: #374151;--glow-blue: 0 0 20px rgba(59, 130, 246, .3);--glow-cyan: 0 0 20px rgba(6, 182, 212, .3);--glow-purple: 0 0 20px rgba(139, 92, 246, .3)}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;overflow-x:hidden}.app{min-height:100vh;background:var(--bg-primary)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes glow{0%,to{box-shadow:var(--glow-blue)}50%{box-shadow:0 0 30px #3b82f680}}.animate-fade-in{animation:fadeIn .5s ease-out}.animate-pulse{animation:pulse 2s ease-in-out infinite}.animate-glow{animation:glow 2s ease-in-out infinite}