.filter-section{background:var(--card-bg, #f8f9fa);border-radius:15px;padding:2rem;margin:2rem 0;box-shadow:var(--shadow-primary, 0 4px 12px rgba(74, 158, 255, .3));border:1px solid var(--border-color, rgba(255, 255, 255, .1))}.search-container{position:relative;margin-bottom:2rem}.search-input{width:100%;padding:1rem 1rem 1rem 3rem;border:2px solid var(--border-color, rgba(255, 255, 255, .1));border-radius:10px;background:var(--bg-primary, #0a0a0f);color:var(--text-primary, #e8e8e8);font-size:1.1rem;transition:all .3s ease;font-family:inherit}.search-input:focus{outline:none;border-color:var(--primary-color, #4a9eff);box-shadow:0 0 0 3px rgba(74,158,255,.1)}.search-input::-moz-placeholder{color:var(--text-secondary, #b0b0b0)}.search-input::placeholder{color:var(--text-secondary, #b0b0b0)}.search-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--text-secondary, #b0b0b0);font-size:1.2rem;pointer-events:none}.filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-bottom:2rem}.filter-group{display:flex;flex-direction:column;gap:.5rem}.filter-label{font-weight:600;color:var(--text-primary, #e8e8e8);margin-bottom:.5rem;font-size:.9rem}.filter-select{padding:.8rem;border:1px solid var(--border-color, rgba(255, 255, 255, .1));border-radius:8px;background:var(--bg-primary, #0a0a0f);color:var(--text-primary, #e8e8e8);font-size:.9rem;cursor:pointer;transition:all .3s ease;font-family:inherit}.filter-select:focus{outline:none;border-color:var(--primary-color, #4a9eff);box-shadow:0 0 0 2px rgba(74,158,255,.1)}.filter-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;min-height:2rem}.filter-tag{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--primary-color, #4a9eff);color:#fff;border-radius:20px;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .3s ease;animation:slideIn .3s ease}.filter-tag:hover{background:var(--secondary-color, #2ecc71);transform:translateY(-2px)}.filter-tag .remove{background:rgba(255,255,255,.2);border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.8rem;transition:all .3s ease}.filter-tag .remove:hover{background:rgba(255,255,255,.3)}.clear-filters{background:transparent;color:var(--text-secondary, #b0b0b0);border:1px solid var(--border-color, rgba(255, 255, 255, .1));padding:.5rem 1rem;border-radius:8px;cursor:pointer;font-size:.9rem;transition:all .3s ease;font-family:inherit}.clear-filters:hover{background:var(--accent-color, #00d4ff);color:#fff;border-color:var(--accent-color, #00d4ff)}.results-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}.results-count{color:var(--text-secondary, #b0b0b0);font-size:1rem;font-weight:500}.sort-controls{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.sort-controls label{color:var(--text-primary, #e8e8e8);font-weight:500;font-size:.9rem}.sort-select{padding:.6rem 1rem;border:1px solid var(--border-color, rgba(255, 255, 255, .1));border-radius:8px;background:var(--bg-primary, #0a0a0f);color:var(--text-primary, #e8e8e8);font-size:.9rem;cursor:pointer;transition:all .3s ease;font-family:inherit}.sort-select:focus{outline:none;border-color:var(--primary-color, #4a9eff);box-shadow:0 0 0 2px rgba(74,158,255,.1)}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;margin-top:2rem}.project-card{background:var(--card-bg, #f8f9fa);border-radius:15px;padding:2rem;transition:all .3s ease;border:1px solid var(--border-color, rgba(255, 255, 255, .1));position:relative;overflow:hidden;animation:fadeInUp .6s ease}.project-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-primary, 0 4px 12px rgba(74, 158, 255, .3))}.project-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary-color, #4a9eff),var(--secondary-color, #2ecc71))}.project-status{display:inline-block;padding:.3rem .8rem;border-radius:15px;font-size:.8rem;font-weight:500;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.5px}.status-live{background:rgba(46,204,113,.2);color:var(--secondary-color, #2ecc71);border:1px solid var(--secondary-color, #2ecc71)}.status-development{background:rgba(255,193,7,.2);color:#ffc107;border:1px solid #ffc107}.status-completed{background:rgba(46,204,113,.2);color:var(--secondary-color, #2ecc71);border:1px solid var(--secondary-color, #2ecc71)}.status-coming-soon{background:rgba(108,117,125,.2);color:#6c757d;border:1px solid #6c757d}.project-title{font-size:1.5rem;font-weight:600;color:var(--text-primary, #e8e8e8);margin-bottom:1rem;line-height:1.3}.project-description{color:var(--text-secondary, #b0b0b0);line-height:1.6;margin-bottom:1.5rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.project-tech{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}.tech-tag{padding:.3rem .8rem;background:var(--primary-color, #4a9eff);color:#fff;border-radius:15px;font-size:.8rem;font-weight:500;transition:all .3s ease}.tech-tag:hover{background:var(--secondary-color, #2ecc71);transform:scale(1.05)}.project-actions{display:flex;gap:1rem;flex-wrap:wrap}.btn{display:inline-block;padding:.8rem 1.5rem;border-radius:8px;text-decoration:none;font-weight:500;transition:all .3s ease;border:none;cursor:pointer;font-size:.9rem;font-family:inherit}.btn-primary{background:var(--primary-color, #4a9eff);color:#fff}.btn-primary:hover{background:var(--secondary-color, #2ecc71);transform:translateY(-2px);box-shadow:0 4px 8px rgba(46,204,113,.3)}.btn-secondary{background:transparent;color:var(--text-secondary, #b0b0b0);border:1px solid var(--border-color, rgba(255, 255, 255, .1))}.btn-secondary:hover{background:var(--text-secondary, #b0b0b0);color:var(--bg-primary, #0a0a0f);border-color:var(--text-secondary, #b0b0b0)}.loading{display:flex;justify-content:center;align-items:center;padding:4rem}.spinner{width:40px;height:40px;border:4px solid var(--border-color, rgba(255, 255, 255, .1));border-top:4px solid var(--primary-color, #4a9eff);border-radius:50%;animation:spin 1s linear infinite}.no-results{text-align:center;padding:4rem 2rem;color:var(--text-secondary, #b0b0b0)}.no-results h3{font-size:1.5rem;margin-bottom:1rem;color:var(--text-primary, #e8e8e8)}.no-results p{margin-bottom:2rem;font-size:1.1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@media (max-width: 768px){.filter-grid,.projects-grid{grid-template-columns:1fr}.results-info{flex-direction:column;align-items:flex-start}.sort-controls{width:100%;justify-content:space-between}.project-card{padding:1.5rem}.project-actions{flex-direction:column}.btn{width:100%;text-align:center}}@media (max-width: 480px){.filter-section{padding:1.5rem}.search-input{font-size:1rem;padding:.8rem .8rem .8rem 2.5rem}.search-icon{left:.8rem;font-size:1rem}.project-card{padding:1rem}.project-title{font-size:1.3rem}.project-description{-webkit-line-clamp:2}}.filter-select:focus,.search-input:focus,.btn:focus{outline:2px solid var(--primary-color, #4a9eff);outline-offset:2px}@media (prefers-contrast: high){.project-card{border:2px solid var(--text-primary, #e8e8e8)}.filter-tag{border:1px solid white}.btn{border:2px solid currentColor}}@media (prefers-reduced-motion: reduce){.project-card,.filter-tag,.btn{transition:none}.spinner,.project-card,.filter-tag{animation:none}}@media print{.filter-section{display:none}.project-card{-moz-column-break-inside:avoid;break-inside:avoid;box-shadow:none;border:1px solid #ccc}.project-actions{display:none}}