:root{--bg-body:#fff;--bg-card:#fff;--bg-muted:#f9fafb;--bg-inverse:#111827;--text-primary:#111827;--text-secondary:#374151;--text-muted:#6b7280;--text-inverse:#fff;--border:#e5e7eb;--border-hover:#d1d5db;--border-strong:#9ca3af;--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:2rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--max-width:960px;--radius:6px;--radius-sm:4px}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{min-height:100%}body{font-family:var(--font-sans);background-color:var(--bg-body);color:var(--text-primary);-webkit-font-smoothing:antialiased;line-height:1.6}a{color:inherit;text-decoration:none}.top-banner{background-color:var(--bg-inverse);color:var(--text-inverse);text-align:center;padding:var(--space-2) var(--space-4);font-size:var(--text-xs)}.top-banner a{color:var(--text-inverse);opacity:.8;transition:opacity .15s}.top-banner a:hover{opacity:1;text-decoration:underline}.site-header{z-index:100;-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--border);background:#ffffffeb;position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-3) 0;display:flex}.header-logo{font-size:var(--text-lg);color:var(--text-primary);letter-spacing:-.02em;font-weight:700}.header-nav{align-items:center;gap:var(--space-6);display:flex}.header-nav a{font-size:var(--text-sm);color:var(--text-secondary);padding:var(--space-1) 0;border-bottom:2px solid #0000;transition:color .15s,border-color .15s}.header-nav a:hover{color:var(--text-primary)}.header-nav a.active{color:var(--text-primary);border-bottom-color:var(--text-primary);font-weight:500}.header-cta{font-size:var(--text-sm);color:var(--text-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-2) var(--space-3);transition:all .15s}.header-cta:hover{border-color:var(--border-hover);color:var(--text-primary)}.hero{text-align:center;padding:var(--space-16) 0 var(--space-8)}.hero h1{font-size:var(--text-3xl);letter-spacing:-.02em;margin-bottom:var(--space-3);font-weight:700;line-height:1.2}.hero p{font-size:var(--text-lg);color:var(--text-muted);margin-bottom:var(--space-4)}.hero-stats{align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--text-muted);padding:var(--space-1) var(--space-3);background:var(--bg-muted);border-radius:var(--radius-sm);display:inline-flex}.category-filter{align-items:center;gap:var(--space-2);padding:var(--space-4) 0 var(--space-6);white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none;display:flex;overflow-x:auto}.category-filter::-webkit-scrollbar{display:none}.category-filter a{padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--text-secondary);border:1px solid var(--border);align-items:center;transition:all .15s;display:inline-flex}.category-filter a:hover{border-color:var(--border-hover);color:var(--text-primary)}.category-filter a.active{background:var(--bg-inverse);color:var(--text-inverse);border-color:var(--bg-inverse)}.saas-grid{gap:var(--space-4);margin-bottom:var(--space-12);grid-template-columns:repeat(2,1fr);display:grid}@media (width<=640px){.saas-grid{grid-template-columns:1fr}}.saas-card{padding:var(--space-5);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);transition:border-color .15s,transform .15s;display:block;position:relative}.saas-card:hover{border-color:var(--border-hover);transform:translateY(-1px)}.favorite-star{top:var(--space-3);right:var(--space-3);font-size:var(--text-sm);color:#f59e0b;line-height:1;position:absolute}.saas-card-header{align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);display:flex}.saas-card-title{font-size:var(--text-base);white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;font-weight:600;overflow:hidden}.saas-card-desc{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--space-4);-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.5;display:-webkit-box;overflow:hidden}.saas-card-footer{justify-content:space-between;align-items:center;display:flex}.saas-card-creator{font-size:var(--text-xs);color:var(--text-muted)}.saas-card-visit{font-size:var(--text-xs);color:var(--text-primary);align-items:center;gap:var(--space-1);font-weight:500;display:flex}.saas-card-visit:hover{text-decoration:underline}.avatar{border-radius:var(--radius);color:#fff;text-transform:uppercase;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:1rem;font-weight:700;display:flex}.avatar-lg{width:48px;height:48px;font-size:1.25rem}.category-badge{padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-xs);color:#fff;flex-shrink:0;align-items:center;font-weight:500;display:inline-flex}.pagination{justify-content:center;align-items:center;gap:var(--space-6);margin-top:var(--space-12);padding-bottom:var(--space-8);display:flex}.pagination-prev,.pagination-next{font-size:var(--text-sm);color:var(--text-muted);transition:color .15s}.pagination-prev:hover,.pagination-next:hover{color:var(--text-primary)}.pagination-numbers{align-items:center;gap:var(--space-1);display:flex}.pagination-link{font-size:var(--text-sm);color:var(--text-muted);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);text-align:center;min-width:1.75rem;transition:all .15s}.pagination-link:hover{color:var(--text-primary)}.pagination-link.active{color:var(--text-primary);font-weight:600}.site-footer{border-top:1px solid var(--border);padding:var(--space-8) 0}.footer-inner{justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;display:flex}.footer-logo{font-size:var(--text-sm);color:var(--text-primary);font-weight:600}.footer-links{align-items:center;gap:var(--space-6);display:flex}.footer-links a{font-size:var(--text-sm);color:var(--text-secondary);transition:color .15s}.footer-links a:hover{color:var(--text-primary)}.footer-built{font-size:var(--text-xs);color:var(--text-muted)}.detail-page{padding:var(--space-8) 0 var(--space-12)}.detail-breadcrumb{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--space-6)}.detail-breadcrumb a{color:var(--text-muted);transition:color .15s}.detail-breadcrumb a:hover{color:var(--text-primary)}.detail-header{align-items:center;gap:var(--space-4);margin-bottom:var(--space-6);display:flex}.detail-header h1{font-size:var(--text-2xl);letter-spacing:-.02em;font-weight:700}.detail-description{font-size:var(--text-lg);color:var(--text-secondary);margin-bottom:var(--space-8);max-width:640px;line-height:1.7}.detail-meta{align-items:center;gap:var(--space-4);margin-bottom:var(--space-8);padding:var(--space-4) 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);flex-wrap:wrap;display:flex}.detail-meta-item{font-size:var(--text-sm);color:var(--text-muted)}.detail-meta-item strong{color:var(--text-primary);font-weight:500}.detail-actions{gap:var(--space-3);margin-bottom:var(--space-8);display:flex}.button{align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-radius:var(--radius);font-size:var(--text-sm);font-weight:500;transition:all .15s;display:inline-flex}.button-primary{background:var(--bg-inverse);color:var(--text-inverse)}.button-primary:hover{opacity:.85}.button-secondary{color:var(--text-secondary);border:1px solid var(--border);background:0 0}.button-secondary:hover{border-color:var(--border-hover);color:var(--text-primary)}.categories-page{padding:var(--space-8) 0 var(--space-12)}.categories-page h1{font-size:var(--text-3xl);letter-spacing:-.02em;margin-bottom:var(--space-2);font-weight:700}.categories-page p{font-size:var(--text-lg);color:var(--text-muted);margin-bottom:var(--space-8)}.categories-grid{gap:var(--space-4);grid-template-columns:repeat(3,1fr);display:grid}@media (width<=768px){.categories-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=480px){.categories-grid{grid-template-columns:1fr}}.category-card{padding:var(--space-6);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);transition:border-color .15s,transform .15s;display:block}.category-card:hover{border-color:var(--border-hover);transform:translateY(-1px)}.category-card h3{font-size:var(--text-lg);margin-bottom:var(--space-2);font-weight:600}.category-card span{font-size:var(--text-sm);color:var(--text-muted)}.about-page{padding:var(--space-8) 0 var(--space-12)}.about-page h1{font-size:var(--text-3xl);letter-spacing:-.02em;margin-bottom:var(--space-6);font-weight:700}.about-content{max-width:640px}.about-content p{font-size:var(--text-lg);color:var(--text-secondary);margin-bottom:var(--space-5);line-height:1.7}.about-content a{color:var(--text-primary);text-underline-offset:2px;text-decoration:underline}.about-content a:hover{opacity:.7}.container{max-width:var(--max-width);padding:0 var(--space-4);margin:0 auto}.empty-state{text-align:center;padding:var(--space-12) var(--space-4)}.empty-state h2{font-size:var(--text-xl);margin-bottom:var(--space-2);color:var(--text-primary);font-weight:600}.empty-state p{color:var(--text-muted)}.not-found{text-align:center;padding:var(--space-12) var(--space-4)}.not-found h1{font-size:var(--text-2xl);margin-bottom:var(--space-4);letter-spacing:-.02em;font-weight:700}.not-found p{color:var(--text-muted);margin-bottom:var(--space-6)}@media (width<=640px){.header-nav{display:none}.hero{padding:var(--space-10) 0 var(--space-6)}.hero h1{font-size:var(--text-2xl)}}