.browser-controls{margin-bottom:1.5rem}.controls-row{align-items:center;gap:.75rem;display:flex}.search-container{flex:1;min-width:200px;max-width:320px;position:relative}.search-container .search-icon{color:var(--color-text-tertiary);font-size:var(--text-base);position:absolute;top:50%;left:.625rem;transform:translateY(-50%)}.search-input{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);width:100%;color:var(--color-text-primary);font-size:var(--text-sm);padding:.5rem 2.25rem .5rem 2rem;transition:all .2s}.search-input::placeholder{color:var(--color-text-secondary);font-size:var(--text-xs)}.search-input:focus{border-color:var(--color-primary);outline:none}.clear-search{color:var(--color-text-secondary);cursor:pointer;border-radius:var(--radius-sm);font-size:var(--text-base);background:0 0;border:none;padding:.25rem;transition:all .2s;position:absolute;top:50%;right:.75rem;transform:translateY(-50%)}.clear-search:hover{color:var(--color-text-primary);background:var(--color-background)}.search-shortcut{pointer-events:none;align-items:center;gap:.125rem;display:flex;position:absolute;top:50%;right:.75rem;transform:translateY(-50%)}.search-shortcut kbd{font-size:var(--text-xs);color:var(--color-text-tertiary);background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-sm);justify-content:center;align-items:center;padding:.125rem .375rem;font-family:inherit;line-height:1;display:inline-flex}.favorites-toggle{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text-secondary);font-size:var(--text-base);cursor:pointer;justify-content:center;align-items:center;gap:.375rem;padding:.5rem .75rem;transition:all .2s;display:flex}.favorites-toggle:hover{border-color:var(--color-primary);color:var(--color-primary)}.favorites-toggle.active{border-color:var(--color-primary);color:var(--color-primary);background:#0066cc1a}.favorites-toggle i{font-size:var(--text-base)}.favorites-count{min-width:1.125rem;height:1.125rem;font-size:var(--text-2xs);background:var(--color-text-tertiary);color:#fff;border-radius:9999px;justify-content:center;align-items:center;padding:0 .25rem;font-weight:600;display:inline-flex}.favorites-toggle.active .favorites-count{background:var(--color-primary)}.active-filters{border-top:1px solid var(--color-border);flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.75rem;padding-top:.75rem;display:flex}.filter-chip{background:var(--color-primary-alpha,#0066cc1a);color:var(--color-primary);font-size:var(--text-sm);border-radius:9999px;align-items:center;gap:.375rem;padding:.25rem .5rem .25rem .625rem;font-weight:500;display:inline-flex}.filter-chip i{font-size:var(--text-xs);opacity:.8}.filter-chip button{width:1rem;height:1rem;color:var(--color-primary);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;margin-left:.125rem;padding:0;transition:all .15s;display:flex}.filter-chip button:hover{background:var(--color-primary);color:#fff}.filter-chip button i{font-size:var(--text-2xs)}.clear-all-filters{color:var(--color-text-secondary);font-size:var(--text-sm);cursor:pointer;background:0 0;border:none;padding:.25rem .625rem;font-weight:500;transition:all .15s}.clear-all-filters:hover{color:var(--color-text-primary);text-decoration:underline}.filter-dropdown.has-value{border-color:var(--color-primary);color:var(--color-primary)}.filter-dropdown{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);color:var(--color-text-primary);font-size:var(--text-sm);cursor:pointer;min-width:130px;padding:.5rem .75rem;transition:all .2s}.filter-dropdown:focus{border-color:var(--color-primary);outline:none}.toolbar-right{align-items:center;gap:.75rem;margin-left:auto;display:flex}.api-count{font-size:var(--text-base);color:var(--color-text-secondary);white-space:nowrap;font-weight:500}.view-controls{gap:.25rem;display:flex}.view-btn{border:1px solid var(--color-border);background:var(--color-background);width:32px;height:32px;color:var(--color-text-secondary);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-base);justify-content:center;align-items:center;transition:all .2s;display:flex}.view-btn:hover,.view-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.apis-container{margin-bottom:2rem}.api-cards-grid{grid-template-columns:repeat(3,1fr);gap:1rem;display:grid}@media (max-width:1024px){.api-cards-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:640px){.api-cards-grid{grid-template-columns:1fr}}.apis-container.list-view .api-cards-grid{grid-template-columns:1fr;gap:.75rem}.apis-container.list-view .api-card{align-items:center;padding:1rem;display:flex}.apis-container.list-view .api-card-header{margin-bottom:0;margin-right:1rem}.apis-container.list-view .api-info{flex:1}.apis-container.list-view .api-description{margin-bottom:.5rem}.apis-container.list-view .api-metrics{flex-shrink:0;margin-left:0}.pagination-container{justify-content:center;align-items:center;gap:.75rem;margin-top:2rem;display:flex}.pagination{align-items:center;gap:.25rem;display:flex}.pagination-btn{border:1px solid var(--color-border);background:var(--color-background);color:var(--color-text-secondary);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-base);padding:.5rem .75rem;transition:all .2s}.pagination-btn:hover,.pagination-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.pagination-btn:disabled{opacity:.5;cursor:not-allowed}.pagination-info{font-size:var(--text-base);color:var(--color-text-secondary);margin:0 1rem}.api-logo-img{object-fit:contain;border-radius:var(--radius-sm);width:100%;height:100%}.loading-state,.error-state{text-align:center;color:var(--color-text-secondary);flex-direction:column;grid-column:1/-1;justify-content:center;align-items:center;padding:3rem 1rem;display:flex}.loading-spinner{font-size:var(--text-6xl);color:var(--color-primary);margin-bottom:1rem}.loading-spinner .fa-spinner{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-icon{font-size:var(--text-6xl);color:var(--color-error,#ef4444);margin-bottom:1rem}.loading-state h3,.error-state h3{font-size:var(--text-2xl);color:var(--color-text-primary);margin-bottom:.5rem;font-weight:600}.loading-state p,.error-state p{font-size:var(--text-base);max-width:400px;margin-bottom:1.5rem}.retry-btn{font-size:var(--text-lg);align-items:center;gap:.5rem;padding:.75rem 1.5rem;display:flex}@media (max-width:1000px){.controls-row{flex-wrap:wrap;gap:.5rem}.search-container{flex:100%;order:1;max-width:none}.filter-dropdown{flex:1;order:2;min-width:auto}.favorites-toggle{order:3}.toolbar-right{order:4;margin-left:0}}@media (max-width:768px){.browser-controls{margin-bottom:1rem}.controls-row{gap:.5rem}.filter-dropdown{min-width:auto;font-size:var(--text-sm);padding:.5rem}.api-count{display:none}.pagination-container{flex-wrap:wrap;gap:.25rem}.active-filters{margin-top:.5rem;padding-top:.5rem}}.api-actions{border-top:1px solid var(--color-border);gap:.5rem;margin-top:1rem;padding-top:1rem;display:flex}.test-api-btn,.mock-api-btn{border-radius:var(--radius-sm);font-size:var(--text-sm);cursor:pointer;border:1px solid;flex:1;justify-content:center;align-items:center;gap:.5rem;padding:.5rem .75rem;font-weight:500;transition:all .2s;display:flex}.test-api-btn{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.test-api-btn:hover{background:var(--color-primary-dark,var(--color-primary));transform:translateY(-1px)}.mock-api-btn{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text-primary)}.mock-api-btn:hover:not(:disabled){background:var(--color-background);border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-1px)}.mock-api-btn:disabled,.mock-api-btn.disabled{opacity:.5;cursor:not-allowed;background:var(--color-surface);border-color:var(--color-border);color:var(--color-text-tertiary)}.mock-api-btn:disabled:hover,.mock-api-btn.disabled:hover{border-color:var(--color-border);color:var(--color-text-tertiary);transform:none}.apis-container.list-view .api-card{align-items:flex-start;max-width:100%;margin-bottom:0;padding:1rem;display:flex;position:relative;overflow:hidden}.apis-container.list-view .api-card-header{flex-shrink:0;margin-bottom:0;margin-right:1rem}.apis-container.list-view .api-info{text-align:left;flex-direction:column;flex:1;justify-content:flex-start;align-items:flex-start;min-width:0;padding-right:8rem;display:flex}.apis-container.list-view .api-name,.apis-container.list-view .api-category{text-align:left;margin-bottom:.25rem}.apis-container.list-view .api-rating{text-align:left;margin-bottom:.5rem;display:none}.apis-container.list-view .api-description{text-align:left;text-overflow:ellipsis;margin-bottom:.5rem;overflow:hidden}.apis-container.list-view .api-meta-row{gap:12px;margin-bottom:.5rem}.apis-container.list-view .api-metrics{flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:.5rem;margin-left:0;margin-right:0;display:flex}.apis-container.list-view .api-actions{border-top:none;gap:.5rem;width:auto;margin-top:0;padding-top:0;position:absolute;top:1rem;right:1rem}.apis-container.list-view .test-api-btn,.apis-container.list-view .mock-api-btn{width:auto;font-size:var(--text-sm);white-space:nowrap;flex:none;padding:.5rem .75rem}.apis-container.list-view .favorite-btn,.apis-container.list-view .studio-btn-hover,.favorite-btn-inline{display:none}.apis-container.list-view .favorite-btn-inline{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);width:32px;height:32px;color:var(--color-text-tertiary);cursor:pointer;justify-content:center;align-items:center;padding:0;transition:all .2s;display:flex}.apis-container.list-view .favorite-btn-inline:hover{color:var(--color-primary);border-color:var(--color-primary)}.apis-container.list-view .favorite-btn-inline.active{color:var(--color-primary);background:#0066cc1a;border-color:#0066cc4d}.apis-container.list-view .favorite-btn-inline i{font-size:var(--text-sm)}.custom-api-cta-section{margin:2rem 0}.custom-api-cta-content{align-items:center;gap:1.5rem;padding:1rem 1.5rem;display:flex}.custom-api-cta-content .cta-text{flex:1;align-items:center;gap:.75rem;display:flex}.custom-api-cta-content .cta-icon{background:var(--color-primary-alpha);width:2rem;height:2rem;color:var(--color-primary);font-size:var(--text-base);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.custom-api-cta-content .cta-message h3{font-size:var(--text-sm);color:var(--color-text-primary);margin:0 0 .125rem;font-weight:600}.custom-api-cta-content .cta-message p{color:var(--color-text-secondary);line-height:1.4;font-size:var(--text-xs);margin:0}.custom-api-cta-content .cta-action{flex-shrink:0}.custom-api-cta-btn{background:var(--color-primary);color:#fff;border-radius:var(--radius-sm);font-weight:500;font-size:var(--text-xs);border:none;align-items:center;gap:.375rem;padding:.4rem .75rem;text-decoration:none;transition:all .2s;display:inline-flex}.custom-api-cta-btn:hover{background:var(--color-primary-hover);color:#fff;text-decoration:none;transform:translateY(-1px)}.custom-api-cta-btn:active{transform:translateY(0)}.custom-api-cta-btn i{font-size:var(--text-xs)}@media (max-width:768px){.custom-api-cta-content{text-align:center;flex-direction:column;gap:1rem;padding:1rem}.custom-api-cta-content .cta-text{flex-direction:column;gap:.75rem}.custom-api-cta-btn{justify-content:center;width:100%}}.new-badge{color:#fff;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;z-index:1;background:#ef4444;border-radius:3px;padding:2px 5px;font-size:.5rem;font-weight:600;position:absolute;top:.875rem;right:42px}.apis-container.list-view .new-badge{flex-shrink:0;margin-right:.5rem;position:static}.apis-container.list-view .api-card-header{align-items:center;display:flex}
.popular-apis-section{background:var(--color-surface);border-top:1px solid var(--color-border-light);padding:60px 0}.popular-apis-header{text-align:center;margin-bottom:36px}.popular-apis-title{font-size:var(--text-6xl);color:var(--color-text-primary);margin-bottom:12px;font-weight:700}.popular-apis-description{font-size:var(--text-xl);color:var(--color-text-secondary);max-width:600px;margin:0 auto}.api-cards-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-top:36px;display:grid}.api-card{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;flex-direction:column;height:100%;padding:18px;transition:all .3s;display:flex;position:relative;overflow:hidden}.favorite-btn{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);width:1.75rem;height:1.75rem;color:var(--color-text-tertiary);cursor:pointer;z-index:2;opacity:0;justify-content:center;align-items:center;transition:all .2s;display:flex;position:absolute;top:.75rem;right:.75rem}.api-card:hover .favorite-btn{opacity:1}.favorite-btn.active{opacity:1;color:var(--color-primary);background:#0066cc1a;border-color:#0066cc4d}.favorite-btn:hover{color:var(--color-primary);border-color:var(--color-primary)}.favorite-btn i{font-size:var(--text-xs)}.studio-btn-hover{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-sm);height:1.5rem;color:var(--color-text-secondary);cursor:pointer;z-index:10;white-space:nowrap;justify-content:center;align-items:center;gap:0;padding:0 .5rem;transition:all .2s;display:none;position:absolute;top:1.125rem;right:.75rem;overflow:hidden;box-shadow:0 1px 3px #0000001a}.api-card:hover .studio-btn-hover{display:flex}.studio-btn-hover .studio-btn-text{opacity:0;max-width:0;font-size:var(--text-xs);margin:0;padding:0;font-weight:500;transition:all .25s;overflow:hidden}.studio-btn-hover:hover{color:var(--color-primary);border-color:var(--color-primary);background:var(--color-background);gap:.375rem;padding:0 .625rem}.studio-btn-hover:hover .studio-btn-text{opacity:1;max-width:100px}.studio-btn-hover i{font-size:var(--text-xs);flex-shrink:0}.api-card.cta-card{height:auto;display:block}.api-card:hover{box-shadow:var(--shadow-lg);border-color:var(--color-primary);transform:translateY(-4px)}.api-card-header{align-items:flex-start;gap:12px;margin-bottom:12px;display:flex}.api-icon{font-size:var(--text-4xl);background:var(--color-surface);border-radius:var(--radius-md);border:1px solid var(--color-border);flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;line-height:1;display:flex}.api-icon-img{object-fit:contain;border-radius:var(--radius-sm);width:32px;height:32px}.api-icon-img-large{object-fit:contain;border-radius:var(--radius-md);width:60px;height:60px}.loading-spinner-large{border:4px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;width:60px;height:60px;margin:0 auto 20px;animation:1s linear infinite spin}.loading-overlay{text-align:center;color:var(--color-text-secondary)}.loading-overlay p{font-size:var(--text-2xl);font-weight:500}.api-info{flex:1;min-width:0}.api-name{font-size:var(--text-md);color:var(--color-text-primary);text-overflow:ellipsis;white-space:nowrap;margin:0 0 2px;padding-right:2rem;font-weight:600;line-height:1.3;overflow:hidden}.api-card .api-category{font-size:var(--text-xs);color:var(--color-text-tertiary);background:var(--color-surface-alt);border-radius:var(--radius-sm);margin-bottom:5px;padding:1px 5px;font-weight:500;display:inline-block}.api-rating{margin-top:2px}.stars{gap:1px;display:flex}.star{font-size:var(--text-md);color:var(--color-text-tertiary);transition:color .2s}.star.filled{color:#fbbf24}.api-description{font-size:var(--text-sm);color:var(--color-text-secondary);-webkit-line-clamp:2;-webkit-box-orient:vertical;flex:1;margin-bottom:8px;line-height:1.4;display:-webkit-box;overflow:hidden}.api-meta-row{color:var(--color-text-tertiary);justify-content:space-between;align-items:center;margin-bottom:10px;font-size:.65rem;display:flex}.api-meta-row .unified-text{color:var(--color-text-tertiary);align-items:center;gap:4px;display:flex}.api-meta-row .unified-text i{font-size:.6rem}.api-meta-row .fresh-text{color:var(--color-text-tertiary);align-items:center;gap:4px;display:flex}.api-meta-row .fresh-text i{font-size:.55rem}.api-meta-row .fresh-text.fresh-realtime{color:#10b981;font-weight:500}.api-metrics{flex-wrap:wrap;flex-shrink:0;gap:6px;margin-top:auto;display:flex}.metric-pill{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--text-xs);cursor:help;align-items:center;gap:6px;padding:3px 10px;transition:all .2s;display:inline-flex;position:relative}.metric-pill:hover{background:var(--color-surface-alt)}.metric-icon{font-size:var(--text-xs);opacity:.7;color:var(--color-text-secondary)}.api-metric-value{color:var(--color-text-primary);font-weight:600}.api-card:hover .api-name{color:var(--color-primary)}.api-card:hover .metric-pill{border-color:var(--color-primary);background:#0066cc0d}@media (max-width:768px){.popular-apis-section{padding:50px 0}.popular-apis-title{font-size:var(--text-5xl)}.popular-apis-description{font-size:var(--text-lg)}.api-cards-grid{grid-template-columns:1fr;gap:16px;margin-top:28px}.api-card{padding:16px}.api-card-header{gap:10px;margin-bottom:10px}.api-icon{width:36px;height:36px;font-size:var(--text-3xl)}.api-description{font-size:var(--text-sm);margin-bottom:12px}}@media (max-width:480px){.api-card-header{flex-direction:column;align-items:flex-start;gap:16px}.api-rating{align-self:flex-start}.api-metrics{gap:6px}.metric-pill{font-size:var(--text-sm);padding:3px 6px}}[data-theme=dark] .api-card:hover .metric-pill{border-color:var(--color-primary);background:#60a5fa1a}.api-card:focus-within{outline:2px solid var(--color-primary);outline-offset:2px}.api-card,.api-icon,.metric-pill{transition:all .3s,background-color .3s,border-color .3s,color .3s}