*{box-sizing:border-box;margin:0;padding:0}html{font-family:var(--font-family);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100vh;background-color:var(--bg-primary);color:var(--text-primary)}a{color:var(--primary-color);text-decoration:none}a:hover{text-decoration:underline}button{font-family:inherit;cursor:pointer}input,select,textarea{font-family:inherit}img{max-width:100%;height:auto}:root{--primary-color: #667eea;--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--secondary-color: #6c757d;--success-color: #28a745;--warning-color: #ffc107;--danger-color: #dc3545;--text-primary: #333;--text-secondary: #6c757d;--text-light: #fff;--bg-primary: #fff;--bg-secondary: #f8f9fa;--bg-dark: #242424;--border-color: #dee2e6;--border-radius: 6px;--box-shadow: 0 2px 4px rgba(0, 0, 0, .1);--box-shadow-hover: 0 4px 8px rgba(0, 0, 0, .15);--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;--font-size-sm: .8rem;--font-size-base: .9rem;--font-size-lg: 1.1rem;--transition-fast: .15s;--transition-base: .3s;--transition-slow: .5s}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--border-radius);font-size:var(--font-size-base);font-weight:500;cursor:pointer;transition:all var(--transition-base);text-decoration:none;min-height:2.5rem;box-shadow:var(--box-shadow)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:hover:not(:disabled){opacity:.9;transform:translateY(-2px);box-shadow:var(--box-shadow-hover)}.btn:active:not(:disabled){transform:translateY(0)}.btn-primary{background:var(--primary-gradient);color:var(--text-light)}.btn-secondary{background-color:var(--secondary-color);color:var(--text-light)}.btn-outline{background-color:transparent;border:1px solid var(--secondary-color);color:var(--secondary-color)}.btn-outline:hover:not(:disabled){background-color:var(--secondary-color);color:var(--text-light)}.btn-success{background:linear-gradient(135deg,var(--success-color) 0%,#20c997 100%);color:var(--text-light)}.btn-warning{background:linear-gradient(135deg,var(--warning-color) 0%,#fd7e14 100%);color:var(--text-primary)}.btn-danger{background:linear-gradient(135deg,var(--danger-color) 0%,#c82333 100%);color:var(--text-light)}.btn-sm{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-sm);min-height:2rem}.btn-lg{padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-lg);min-height:3rem}.btn-block{width:100%}.btn-group{display:flex;gap:var(--spacing-sm)}.btn-group .btn{border-radius:0}.btn-group .btn:first-child{border-top-left-radius:var(--border-radius);border-bottom-left-radius:var(--border-radius)}.btn-group .btn:last-child{border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}@media(max-width:768px){.btn{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm)}.btn-sm{padding:var(--spacing-xs) var(--spacing-sm)}.btn-lg{padding:var(--spacing-md) var(--spacing-lg)}.btn-group{flex-direction:column}.btn-group .btn{border-radius:var(--border-radius)}}.app-container{min-height:100vh;display:flex;flex-direction:column;width:100%}.header{background:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%);color:var(--text-light);padding:2rem 0;text-align:center}.site-title{margin:0 0 .5rem;font-size:2.5rem;font-weight:700}.site-description{margin:0;font-size:1.1rem;opacity:.9}.search-section{padding:2rem 0;background-color:var(--light-bg-color)}.search-box{position:relative;max-width:600px;margin:0 auto}.search-input{width:100%;padding:1rem 1rem 1rem 3rem;font-size:var(--font-size-base);border:2px solid var(--border-color);border-radius:50px;outline:none;transition:border-color var(--transition-base)}.search-input:focus{border-color:var(--primary-color)}.search-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);font-size:1.2rem}.category-nav{padding:1rem 0;background-color:var(--bg-color);box-shadow:0 2px 4px #0000000d}.category-list{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--spacing-sm)}.category-btn{padding:.5rem 1rem;background:none;border:1px solid var(--border-color);border-radius:20px;cursor:pointer;transition:all var(--transition-base);font-size:var(--font-size-sm)}.category-btn:hover,.category-btn.active{background-color:var(--primary-color);color:var(--text-light);border-color:var(--primary-color)}.main-content{flex:1;padding:2rem 0}.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem}.tool-card{background:var(--bg-color);border-radius:10px;padding:1.2rem;box-shadow:0 4px 6px #0000001a;transition:transform var(--transition-base),box-shadow var(--transition-base);text-align:center}.tool-card:hover{transform:translateY(-2px);box-shadow:0 6px 12px #00000026}.tool-icon{font-size:2rem;margin-bottom:.8rem}.tool-name{margin:0 0 .4rem;font-size:1.1rem;color:var(--text-primary)}.tool-description{margin:0 0 .8rem;color:var(--text-secondary);font-size:.9rem;line-height:1.4}.tool-category{display:inline-block;padding:.2rem .6rem;background-color:var(--light-bg-color);color:var(--text-muted);font-size:.7rem;border-radius:4px;margin-bottom:.8rem}.use-tool-btn{width:100%}.empty-state{text-align:center;padding:3rem;grid-column:1 / -1}.empty-icon{font-size:4rem;margin-bottom:1rem;opacity:.3}.footer{background-color:var(--dark-bg-color);color:var(--text-light);text-align:center;padding:2rem 0;margin-top:2rem}.footer-links a{color:var(--text-muted);text-decoration:none;margin:0 .5rem}.footer-links a:hover{color:var(--text-light)}@media(max-width:1024px){.tools-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.8rem}.site-title{font-size:1.8rem}.site-description{font-size:1rem}}@media(max-width:768px){.site-title{font-size:1.6rem}.site-description{font-size:.9rem}.search-section{padding:1.5rem 0}.search-box{max-width:100%;padding:0 1rem}.search-input{padding:.7rem .7rem .7rem 2.2rem;font-size:.9rem}.search-icon{font-size:1rem}.category-nav{padding:.8rem 0}.category-list{gap:.2rem}.category-btn{padding:.3rem .6rem;font-size:.8rem;border-radius:15px}.main-content{padding:1.5rem 0}.tools-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.7rem}}@media(max-width:480px){.tools-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem}.site-title{font-size:1.4rem}.site-description{font-size:.8rem}.search-input{padding:.6rem .6rem .6rem 2rem;font-size:.8rem}.tool-card{padding:.8rem}.tool-icon{font-size:1.5rem;margin-bottom:.5rem}.tool-name{font-size:.9rem}.tool-description{font-size:.8rem}.tool-category{font-size:.65rem;padding:.15rem .4rem}}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--spacing-md)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}.w-full{width:100%}.h-full{height:100%}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.m-0{margin:0}.m-sm{margin:var(--spacing-sm)}.m-md{margin:var(--spacing-md)}.m-lg{margin:var(--spacing-lg)}.mt-0{margin-top:0}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.mt-lg{margin-top:var(--spacing-lg)}.mb-0{margin-bottom:0}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}.p-0{padding:0}.p-sm{padding:var(--spacing-sm)}.p-md{padding:var(--spacing-md)}.p-lg{padding:var(--spacing-lg)}.pt-0{padding-top:0}.pt-sm{padding-top:var(--spacing-sm)}.pt-md{padding-top:var(--spacing-md)}.pt-lg{padding-top:var(--spacing-lg)}.pb-0{padding-bottom:0}.pb-sm{padding-bottom:var(--spacing-sm)}.pb-md{padding-bottom:var(--spacing-md)}.pb-lg{padding-bottom:var(--spacing-lg)}:root{font-family:var(--font-family);line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh}#app{width:100%;min-height:100vh;margin:0;padding:0;text-align:center}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}