.search-bar{position:relative;display:flex;align-items:center;width:100%;max-width:600px;background:var(--card);border:2px solid var(--border);border-radius:12px;padding:0;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 3px rgba(0,0,0,.1)}.search-bar--focused{border-color:var(--ring);box-shadow:0 0 0 3px rgba(59,130,246,.1),0 4px 6px rgba(0,0,0,.05)}.search-bar--loading{border-color:var(--border);background:var(--muted)}.search-bar--error{border-color:var(--destructive);box-shadow:0 0 0 3px rgba(239,68,68,.1)}.search-bar__icon-container{display:flex;align-items:center;justify-content:center;padding:12px 16px;color:var(--muted-foreground);flex-shrink:0}.search-bar__icon{width:20px;height:20px;transition:color .2s ease}.search-bar--focused .search-bar__icon{color:var(--primary)}.search-bar__spinner{width:20px;height:20px;border:2px solid transparent;border-top:2px solid var(--primary);border-radius:50%;animation:search-spinner 1s linear infinite}@keyframes search-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.search-bar__input{flex:1;border:none;background:transparent;padding:16px 0;font-size:16px;line-height:1.5;color:var(--foreground);outline:none;min-width:0}.search-bar__input::placeholder{color:var(--muted-foreground);font-weight:400}.search-bar__input:disabled{color:var(--muted-foreground);cursor:not-allowed}.search-bar__clear-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin-right:8px;border:none;background:var(--muted);color:var(--muted-foreground);border-radius:6px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.search-bar__clear-button:hover{background:var(--accent);color:var(--foreground);transform:scale(1.05)}.search-bar__clear-button:focus{outline:2px solid var(--ring);outline-offset:2px}.search-bar__clear-button:active{transform:scale(.95)}.search-bar__error-message{position:absolute;top:100%;left:0;right:0;margin-top:4px;padding:8px 16px;background:color-mix(in oklab,var(--destructive) 10%,transparent);border:1px solid color-mix(in oklab,var(--destructive) 30%,transparent);border-radius:8px;color:var(--destructive);font-size:14px;font-weight:500;z-index:10;animation:search-error-slide-in .3s ease}@keyframes search-error-slide-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media (max-width:640px){.search-bar{max-width:100%;border-radius:10px}.search-bar__icon-container{padding:10px 12px}.search-bar__input{padding:14px 0;font-size:16px}.search-bar__clear-button{width:28px;height:28px;margin-right:6px}.search-bar__error-message{font-size:13px;padding:6px 12px}}@media (prefers-contrast:high){.search-bar{border-width:3px;border-color:#000000}.search-bar--focused{border-color:#0000ff;box-shadow:0 0 0 4px rgba(0,0,255,.3)}.search-bar__icon,.search-bar__input{color:#000000}.search-bar__clear-button{border:2px solid #000000;background:#ffffff;color:#000000}}@media (prefers-reduced-motion:reduce){.search-bar,.search-bar__clear-button,.search-bar__icon{transition:none}.search-bar__spinner{animation:none;border:2px solid var(--primary)}@keyframes search-spinner{0%,to{transform:rotate(0deg)}}.search-bar__error-message{animation:none}}@media print{.search-bar{border:1px solid #000000;box-shadow:none;background:#ffffff}.search-bar__clear-button,.search-bar__error-message,.search-bar__spinner{display:none}}.filter-panel{width:100%;max-width:320px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;box-shadow:0 2px 4px rgba(0,0,0,.05)}.filter-panel__header{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid var(--border)}.filter-panel__title-section{display:flex;align-items:center;gap:12px}.filter-panel__title{margin:0;font-size:18px;font-weight:600;color:var(--foreground)}.filter-panel__count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background:var(--primary);color:var(--primary-foreground);font-size:12px;font-weight:600;border-radius:10px;line-height:1}.filter-panel__actions{display:flex;align-items:center;gap:8px}.filter-panel__reset-button{padding:6px 12px;background:transparent;border:1px solid var(--border);border-radius:6px;color:var(--muted-foreground);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease}.filter-panel__reset-button:hover{background:var(--accent);border-color:var(--ring);color:var(--foreground)}.filter-panel__reset-button:focus{outline:2px solid var(--ring);outline-offset:2px}.filter-panel__toggle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:transparent;border:1px solid var(--border);border-radius:6px;color:var(--muted-foreground);cursor:pointer;transition:all .2s ease}.filter-panel__toggle:hover{background:var(--accent);border-color:var(--ring)}.filter-panel__toggle svg{transition:transform .2s ease}.filter-panel__toggle--expanded svg{transform:rotate(180deg)}.filter-panel__content{padding:0 20px 20px;max-height:80vh;overflow-y:auto;transition:all .3s ease}.filter-panel__content--collapsed{max-height:0;padding:0 20px;overflow:hidden}.filter-panel__section{margin-bottom:24px}.filter-panel__section:last-child{margin-bottom:0}.filter-panel__section-title{display:block;margin:0 0 12px;font-size:14px;font-weight:600;color:var(--foreground);line-height:1.4}.filter-panel__sort-select{width:100%;padding:10px 12px;background:var(--background);border:1px solid var(--input);border-radius:8px;font-size:14px;color:var(--foreground);cursor:pointer;transition:border-color .2s ease}.filter-panel__sort-select:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 2px rgba(59,130,246,.1)}.filter-panel__checkbox-group{display:flex;flex-direction:column;gap:8px}.filter-panel__checkbox-label{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer;transition:all .2s ease;border-radius:4px}.filter-panel__checkbox-label:hover{background:var(--accent)}.filter-panel__checkbox{width:18px;height:18px;border:2px solid var(--border);border-radius:4px;background:var(--background);cursor:pointer;transition:all .2s ease;appearance:none;position:relative;flex-shrink:0}.filter-panel__checkbox:checked{background:var(--primary);border-color:var(--primary)}.filter-panel__checkbox:checked:after{content:"";position:absolute;left:50%;top:50%;width:4px;height:8px;border:solid var(--primary-foreground);border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.filter-panel__checkbox:focus{outline:2px solid var(--ring);outline-offset:2px}.filter-panel__checkbox-text{font-size:14px;color:var(--foreground);user-select:none;line-height:1.4}.filter-panel__free-tier-label{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}.filter-panel__popularity-container{display:flex;flex-direction:column;gap:12px}.filter-panel__popularity-slider{width:100%;height:6px;background:var(--muted);border-radius:3px;outline:none;appearance:none;cursor:pointer}.filter-panel__popularity-slider::-webkit-slider-thumb{appearance:none;width:20px;height:20px;background:var(--primary);border-radius:50%;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.1);transition:all .2s ease}.filter-panel__popularity-slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 4px 8px rgba(59,130,246,.3)}.filter-panel__popularity-slider::-moz-range-thumb{width:20px;height:20px;background:var(--primary);border-radius:50%;border:none;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.1);transition:all .2s ease}.filter-panel__popularity-slider::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:0 4px 8px rgba(59,130,246,.3)}.filter-panel__popularity-display{display:flex;align-items:center;justify-content:space-between;gap:8px}.filter-panel__stars{display:flex;align-items:center;gap:2px}.filter-panel__star{font-size:16px;color:var(--muted-foreground);transition:color .2s ease}.filter-panel__star--filled{color:var(--warning)}.filter-panel__popularity-value{font-size:13px;color:var(--muted-foreground);font-weight:500;white-space:nowrap}.filter-panel__advanced-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 0;background:transparent;border:none;border-top:1px solid var(--border);color:var(--info);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.filter-panel__advanced-toggle:hover{color:color-mix(in oklab,var(--info) 82%,var(--foreground))}.filter-panel__advanced-toggle svg{transition:transform .2s ease}.filter-panel__advanced-toggle--active svg{transform:rotate(180deg)}.filter-panel__advanced-section{margin-top:16px;padding-top:16px;border-top:1px solid var(--border);animation:filter-advanced-slide-in .3s ease}@keyframes filter-advanced-slide-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media (max-width:640px){.filter-panel{max-width:100%;border-radius:8px}.filter-panel__header{padding:16px}.filter-panel__content{padding:0 16px 16px}.filter-panel__content--collapsed{padding:0 16px}.filter-panel__title{font-size:16px}.filter-panel__section{margin-bottom:20px}.filter-panel__checkbox-label{padding:8px 0}.filter-panel__popularity-slider::-webkit-slider-thumb{width:24px;height:24px}.filter-panel__popularity-slider::-moz-range-thumb{width:24px;height:24px}.filter-panel__toggle{display:flex}}@media (prefers-contrast:high){.filter-panel{border-width:2px;border-color:#000000}.filter-panel__checkbox{border-width:3px;border-color:#000000}.filter-panel__checkbox:checked{background:#0000ff;border-color:#000000}.filter-panel__popularity-slider::-webkit-slider-thumb{background:#0000ff;border:2px solid #000000}.filter-panel__popularity-slider::-moz-range-thumb{background:#0000ff;border:2px solid #000000}}@media (prefers-reduced-motion:reduce){.filter-panel__advanced-toggle svg,.filter-panel__checkbox,.filter-panel__content,.filter-panel__popularity-slider::-moz-range-thumb,.filter-panel__popularity-slider::-webkit-slider-thumb,.filter-panel__toggle svg{transition:none}.filter-panel__advanced-section{animation:none}}@media print{.filter-panel{border:1px solid #000000;box-shadow:none;background:#ffffff;page-break-inside:avoid}.filter-panel__reset-button,.filter-panel__toggle{display:none}.filter-panel__content,.filter-panel__content--collapsed{max-height:none;overflow:visible}}.service-card{display:flex;flex-direction:column;padding:1.5rem;background:var(--card);border:1px solid var(--border);border-radius:.5rem;cursor:pointer;transition:all .2s ease-in-out;text-align:left;min-height:240px;position:relative;overflow:hidden}.service-card--hover,.service-card:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(0,0,0,.1);border-color:var(--ring)}.service-card:focus{outline:2px solid var(--ring);outline-offset:2px}.service-card--selected{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary);background:var(--accent)}.service-card--compact{min-height:180px;padding:1rem}.service-card__header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem;gap:1rem}.service-card__title-section{flex:1;min-width:0}.service-card__title{font-size:1.125rem;font-weight:600;color:var(--foreground);margin:0 0 .5rem;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.service-card__category{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.category-primary{background:var(--secondary);color:var(--secondary-foreground);font-weight:500}.category-primary,.category-secondary{padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;text-transform:capitalize}.category-secondary{background:var(--muted);color:var(--muted-foreground)}.service-card__pricing{flex-shrink:0}.pricing-info{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem}.pricing-badge{padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.025em}.pricing-badge--free{background:color-mix(in oklab,var(--success) 15%,transparent);color:var(--success-foreground)}.pricing-badge--freemium{background:color-mix(in oklab,var(--info) 15%,transparent);color:var(--info-foreground)}.pricing-badge--paid{background:color-mix(in oklab,var(--warning) 15%,transparent);color:var(--warning-foreground)}.pricing-badge--enterprise,.pricing-badge--unknown{background:var(--muted);color:var(--muted-foreground)}.pricing-details{font-size:.75rem;color:var(--muted-foreground);text-align:right}.service-card__content{flex:1;display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem}.service-card__description{color:var(--muted-foreground);font-size:.875rem;line-height:1.5;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.service-card--compact .service-card__description{-webkit-line-clamp:2}.tags-display{display:flex;flex-wrap:wrap;gap:.375rem}.tag{padding:.25rem .5rem;color:var(--foreground);border:1px solid var(--border);border-radius:.25rem;font-size:.75rem;font-weight:500}.tag,.tag--more{background:var(--muted)}.tag--more{color:var(--muted-foreground);font-style:italic}.features-display{display:flex;flex-wrap:wrap;gap:.375rem}.feature{padding:.25rem .5rem;background:color-mix(in oklab,var(--info) 12%,transparent);color:var(--info-foreground);border:1px solid color-mix(in oklab,var(--info) 25%,transparent);border-radius:.25rem;font-size:.75rem;font-weight:500}.feature--more{background:var(--muted);color:var(--muted-foreground);border-color:var(--border);font-style:italic}.metrics-display{display:flex;gap:1rem;align-items:center}.metrics-display--compact{gap:.5rem}.metric-item{display:flex;align-items:center;gap:.25rem}.metric-icon,.metric-value{font-size:.875rem}.metric-value{font-weight:500;color:var(--foreground)}.service-card__footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:auto;padding-top:.5rem;border-top:1px solid var(--border)}.company-info{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0}.company-info--link{color:inherit;text-decoration:none;transition:color .2s ease-in-out}.company-info--link:hover{color:var(--info)}.company-name{font-size:.875rem;font-weight:500;color:var(--foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.company-founded{font-size:.75rem;color:var(--muted-foreground)}.integrations-info{flex-shrink:0}.integrations-count{font-size:.75rem;color:var(--muted-foreground);background:var(--muted);padding:.25rem .5rem;border-radius:.25rem}.service-card--skeleton{cursor:default;animation:none}.service-card--skeleton:hover{transform:none;box-shadow:none;border-color:var(--border)}.skeleton{background:linear-gradient(90deg,var(--muted) 25%,var(--border) 50%,var(--muted) 75%);background-size:200% 100%;animation:skeleton-loading 2s infinite;border-radius:.25rem}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton--title{height:1.5rem;width:70%;margin-bottom:.5rem}.skeleton--category{height:1rem;width:40%}.skeleton--description{height:3rem;width:100%;margin-bottom:.5rem}.skeleton--tags{height:1.5rem;width:80%;margin-bottom:.5rem}.skeleton--metrics{height:1.5rem;width:60%}.skeleton--company{height:2rem;width:50%}.skeleton--pricing{height:1.5rem;width:30%}@media (max-width:640px){.service-card{padding:1rem;min-height:200px}.service-card__header{flex-direction:column;align-items:flex-start;gap:.5rem}.service-card__title{font-size:1rem}.service-card__footer{flex-direction:column;align-items:flex-start;gap:.5rem}.metrics-display{gap:.5rem}}@media (max-width:480px){.service-card{padding:.75rem}.features-display,.tags-display{gap:.25rem}.feature,.tag{font-size:.6875rem;padding:.1875rem .375rem}}@media (prefers-contrast:high){.service-card{border-width:2px}.pricing-badge--free{background:#166534;color:#ffffff}.pricing-badge--freemium{background:#1d4ed8;color:#ffffff}.pricing-badge--paid{background:#92400e;color:#ffffff}.pricing-badge--enterprise{background:#7c3aed;color:#ffffff}}@media (prefers-reduced-motion:reduce){.service-card{transition:none}.service-card--hover,.service-card:hover{transform:none}.skeleton{animation:none;background:var(--muted)}}.service-grid{width:100%;padding:1rem}.service-grid.service-grid--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}.service-grid--list,.service-grid--list-layout{display:flex;flex-direction:column;gap:1rem}.service-grid--1-columns{--grid-min-width:280px}.service-grid--2-columns{--grid-min-width:300px}.service-grid--3-columns{--grid-min-width:280px}.service-grid--4-columns{--grid-min-width:250px}.service-grid--5-columns{--grid-min-width:220px}.service-grid--6-columns{--grid-min-width:200px}@supports not (display:grid){.service-grid--grid{display:flex;flex-wrap:wrap;gap:1rem}.service-grid--grid .service-card{flex:1 1 calc(33.333% - 1rem);min-width:280px}}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;min-height:400px}.empty-state__icon{font-size:4rem;margin-bottom:1.5rem;opacity:.6}.empty-state__title{font-size:1.5rem;font-weight:600;color:var(--foreground);margin-bottom:1rem}.empty-state__description{font-size:1rem;color:var(--muted-foreground);margin-bottom:2rem;max-width:500px;line-height:1.6}.empty-state__action{padding:.75rem 1.5rem;background:var(--primary);color:var(--primary-foreground);border:none;border-radius:.375rem;font-weight:500;cursor:pointer;transition:background-color .2s ease-in-out}.empty-state__action:hover{background:color-mix(in oklab,var(--primary) 88%,var(--primary-foreground))}.empty-state__action:focus{outline:2px solid var(--ring);outline-offset:2px}.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;min-height:400px}.error-state__icon{font-size:4rem;margin-bottom:1.5rem;color:var(--destructive)}.error-state__title{font-size:1.5rem;font-weight:600;color:var(--destructive);margin-bottom:1rem}.error-state__description{font-size:1rem;color:var(--muted-foreground);margin-bottom:2rem;max-width:500px;line-height:1.6}.error-state__retry{padding:.75rem 1.5rem;background:var(--destructive);color:var(--destructive-foreground);border:none;border-radius:.375rem;font-weight:500;cursor:pointer;transition:background-color .2s ease-in-out}.error-state__retry:hover{background:color-mix(in oklab,var(--destructive) 85%,var(--foreground))}.error-state__retry:focus{outline:2px solid var(--destructive);outline-offset:2px}.load-more-trigger{display:flex;justify-content:center;align-items:center;padding:2rem;min-height:100px}.load-more-spinner{display:flex;align-items:center;gap:.5rem;color:var(--muted-foreground);font-size:.875rem}.load-more-spinner:before{content:"";width:1rem;height:1rem;border-top:2px solid var(--border);border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media (max-width:640px){.service-grid{padding:.5rem}.empty-state,.error-state{padding:2rem 1rem;min-height:300px}.empty-state__title,.error-state__title{font-size:1.25rem}.empty-state__icon,.error-state__icon{font-size:3rem;margin-bottom:1rem}.load-more-trigger{padding:1rem}}.service-grid--list .service-card{display:flex;flex-direction:row;align-items:center;padding:1.5rem;min-height:auto;max-width:none}.service-grid--list .service-card__header{flex-direction:column;align-items:flex-start;width:200px;flex-shrink:0;margin-right:2rem;margin-bottom:0}.service-grid--list .service-card__content{flex:1;margin-bottom:0;margin-right:2rem}.service-grid--list .service-card__footer{width:200px;flex-shrink:0;flex-direction:column;align-items:flex-end;margin-top:0;padding-top:0;border-top:none}@media (max-width:768px){.service-grid--list .service-card{flex-direction:column}.service-grid--list .service-card__header{width:100%;margin-right:0;margin-bottom:1rem}.service-grid--list .service-card__content{margin-right:0;margin-bottom:1rem}.service-grid--list .service-card__footer{width:100%;flex-direction:row;align-items:center;justify-content:space-between;padding-top:.5rem;border-top:1px solid var(--border)}}.service-card,.service-grid{contain:layout style}@media print{.service-grid{display:block!important;padding:0}.service-card{break-inside:avoid;margin-bottom:1rem;box-shadow:none;border:1px solid #000}.empty-state,.error-state,.load-more-trigger{display:none}}@media (prefers-contrast:high){.empty-state__action,.error-state__retry{border:2px solid}.load-more-spinner:before{border-width:3px}}@media (prefers-reduced-motion:reduce){.load-more-spinner:before{animation:none}.empty-state__action,.error-state__retry{transition:none}}