:root{--primary-color: #3b82f6;--primary-hover: #2563eb;--primary-light: #dbeafe;--secondary-color: #64748b;--success-color: #10b981;--warning-color: #f59e0b;--danger-color: #ef4444;--bg-color: #ffffff;--bg-secondary: #f8fafc;--bg-tertiary: #f1f5f9;--text-color: #1f2937;--text-secondary: #6b7280;--text-muted: #9ca3af;--card-bg: #ffffff;--card-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--border-color: #e5e7eb;--border-light: #f3f4f6;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;--font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;--container-width: 1200px;--header-height: 50px;--border-radius: 8px;--border-radius-lg: 12px;--transition: all .2s ease;--transition-slow: all .3s ease}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-family);font-size:16px;line-height:1.6;color:var(--text-color);background-color:var(--bg-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{max-width:var(--container-width);margin:0 auto;padding:0 20px}.header{position:fixed;top:0;left:0;width:100%;height:var(--header-height);background-color:var(--bg-color);border-bottom:1px solid var(--border-color);z-index:1000;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.nav{display:flex;align-items:center;justify-content:space-between;height:100%}.nav__brand{flex-shrink:0}.nav__logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text-color);font-weight:700;font-size:24px}.nav__logo-icon{font-size:28px}.nav__menu{display:flex;align-items:center;gap:24px}.nav__search{position:relative;width:400px}.nav__search-input{width:100%;padding:12px 44px 12px 16px;border:1px solid var(--border-color);border-radius:var(--border-radius);background-color:var(--bg-secondary);font-size:14px;transition:var(--transition)}.nav__search-input:focus{outline:none;border-color:var(--primary-color);background-color:var(--bg-color);box-shadow:0 0 0 3px var(--primary-light)}.nav__search-icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:16px}.nav__theme-toggle{padding:8px;border:none;background:none;border-radius:var(--border-radius);cursor:pointer;font-size:20px;transition:var(--transition)}.nav__theme-toggle:hover{background-color:var(--bg-secondary)}.nav__toggle{display:none;flex-direction:column;gap:4px;cursor:pointer;padding:8px}.nav__toggle-line{width:24px;height:2px;background-color:var(--text-color);border-radius:2px;transition:var(--transition)}.hero{padding:calc(var(--header-height) + 30px) 0 20px;background:linear-gradient(135deg,var(--bg-color) 0%,var(--bg-secondary) 100%);text-align:center;height:150px;display:flex;align-items:center}.hero__content{width:100%}.hero__title{font-size:clamp(24px,4vw,36px);font-weight:700;line-height:1.2;margin-bottom:8px;background:linear-gradient(135deg,var(--primary-color),var(--primary-hover));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero__subtitle{font-size:16px;color:var(--text-secondary);margin-bottom:0;font-weight:400}.hero__counter-number{display:inline;font-size:16px;font-weight:600;color:var(--primary-color)}.tools{padding:20px 0 80px}.categories{position:sticky;top:var(--header-height);background-color:var(--bg-color);padding:15px 0;margin-bottom:30px;border-bottom:1px solid var(--border-light);z-index:100}.categories{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.categories::-webkit-scrollbar{display:none}.category-btn{padding:12px 20px;border:1px solid var(--border-color);background-color:var(--bg-color);color:var(--text-color);border-radius:var(--border-radius);font-size:14px;font-weight:500;cursor:pointer;transition:var(--transition);white-space:nowrap;flex-shrink:0}.category-btn:hover{background-color:var(--bg-secondary);border-color:var(--primary-light)}.category-btn.active{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color)}.tools__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-bottom:40px;max-width:1200px;margin-left:auto;margin-right:auto}.tool-card{position:relative;padding:20px;background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);box-shadow:var(--card-shadow);transition:var(--transition-slow);cursor:pointer;text-decoration:none;color:inherit;height:220px;display:flex;flex-direction:column;overflow:hidden}.tool-card:hover{transform:translateY(-6px);box-shadow:var(--card-shadow-hover);border-color:var(--primary-color);background-color:var(--bg-secondary)}.tool-card__header{display:flex;align-items:center;gap:12px;margin-bottom:12px}.tool-card__icon{font-size:48px;flex-shrink:0}.tool-card__title{font-size:20px;font-weight:700;color:var(--text-color);margin:0;line-height:1.3}.tool-card__description{font-size:14px;color:var(--text-secondary);line-height:1.4;margin-bottom:18px;flex-grow:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;min-height:40px}.tool-card__footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;flex-shrink:0;height:24px}.tool-card__uses{font-size:12px;color:var(--text-muted)}.tool-card__tags{display:flex;gap:6px}.tool-card__tag{padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase}.tool-card__tag--hot{background-color:#fef3c7;color:#d97706}.tool-card__tag--new{background-color:#dcfce7;color:#16a34a}.tool-card__tag--updated{background-color:#dbeafe;color:#2563eb}.no-results{text-align:center;padding:60px 20px}.no-results__icon{font-size:64px;margin-bottom:20px;opacity:.5}.no-results__title{font-size:24px;font-weight:600;color:var(--text-color);margin-bottom:8px}.no-results__text{font-size:16px;color:var(--text-secondary)}.footer{background-color:var(--bg-secondary);border-top:1px solid var(--border-color);padding:60px 0 20px}.footer__content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px;margin-bottom:40px}.footer__title{font-size:16px;font-weight:600;color:var(--text-color);margin-bottom:16px}.footer__links{list-style:none;display:flex;flex-direction:column;gap:8px}.footer__link{color:var(--text-secondary);text-decoration:none;font-size:14px;transition:var(--transition)}.footer__link:hover{color:var(--primary-color)}.footer__text{font-size:14px;color:var(--text-secondary);line-height:1.6;margin-bottom:16px}.footer__bottom{padding-top:20px;border-top:1px solid var(--border-color);text-align:center}.footer__copyright{font-size:14px;color:var(--text-muted)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.tool-card{animation:fadeIn .5s ease forwards}.loading{opacity:.6;pointer-events:none}.loading .tool-card{animation:none}@media (max-width: 768px){.container{padding:0 16px}.nav__menu{position:fixed;top:var(--header-height);left:0;width:100%;background-color:var(--bg-color);border-bottom:1px solid var(--border-color);padding:20px;transform:translateY(-100%);transition:var(--transition-slow);flex-direction:column;align-items:stretch;gap:16px}.nav__menu.active{transform:translateY(0)}.nav__search{width:100%}.nav__toggle{display:flex}.hero{padding:calc(var(--header-height) + 20px) 0 10px;height:120px}.hero__features{grid-template-columns:1fr;gap:16px}.tools{padding:15px 0 40px}.tools__grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.categories{padding:16px 0;margin-bottom:24px}.category-btn{padding:10px 16px}.footer{padding:40px 0 20px}.footer__content{grid-template-columns:1fr;gap:24px}}@media (max-width: 480px){.nav__logo{font-size:20px}.nav__logo-icon{font-size:24px}.hero__title{font-size:28px}.hero__subtitle{font-size:16px}.hero__counter-number{font-size:24px}.tool-card{height:auto;min-height:180px}}.search-suggestions{position:absolute;top:100%;left:0;right:0;background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--card-shadow-hover);z-index:1000;max-height:400px;overflow-y:auto;display:none}.search-suggestions__list{padding:8px 0}.search-suggestion{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:var(--transition)}.search-suggestion:hover,.search-suggestion.selected{background-color:var(--bg-secondary)}.search-suggestion__icon{font-size:18px;flex-shrink:0}.search-suggestion__text{flex-grow:1;font-size:14px;color:var(--text-color)}.search-suggestion__text strong{color:var(--primary-color);font-weight:600}.search-suggestion__type{font-size:12px;color:var(--text-muted);background-color:var(--bg-tertiary);padding:2px 6px;border-radius:4px}.search-highlight{background-color:var(--warning-color);color:var(--bg-color);padding:1px 2px;border-radius:2px;font-weight:600}.error-notification{position:fixed;top:20px;right:20px;background-color:var(--danger-color);color:#fff;padding:16px 20px;border-radius:var(--border-radius);box-shadow:var(--card-shadow-hover);z-index:9999;transform:translate(400px);transition:var(--transition-slow);max-width:400px;font-size:14px;font-weight:500}.error-notification.show{transform:translate(0)}.error-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:40px;text-align:center;background-color:var(--bg-secondary)}.error-fallback h1{font-size:32px;color:var(--danger-color);margin-bottom:16px}.error-fallback p{font-size:16px;color:var(--text-secondary);margin-bottom:24px}.error-fallback button{padding:12px 24px;background-color:var(--primary-color);color:#fff;border:none;border-radius:var(--border-radius);font-size:16px;font-weight:600;cursor:pointer;transition:var(--transition)}.error-fallback button:hover{background-color:var(--primary-hover)}.loading-spinner{display:inline-block;width:20px;height:20px;border:2px solid var(--border-color);border-radius:50%;border-top-color:var(--primary-color);animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}body:not(.app-ready) .tools__grid{opacity:0}body.app-ready .tools__grid{opacity:1;transition:opacity .5s ease}.animate-in{animation:slideInUp .6s ease forwards}@keyframes slideInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.nav__search-input:focus-visible,.category-btn:focus-visible,.tool-card:focus-visible,.nav__theme-toggle:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.hero__counter-number{animation:none}}@media (prefers-contrast: high){:root{--border-color: #000000;--card-shadow: 0 0 0 1px rgba(0, 0, 0, .5);--card-shadow-hover: 0 0 0 2px rgba(0, 0, 0, .8)}.tool-card,.category-btn{border-width:2px}}@media print{.header,.nav__toggle,.nav__theme-toggle,.footer,.search-suggestions,.error-notification{display:none}.hero{padding-top:20px}.tools__grid{display:block}.tool-card{break-inside:avoid;margin-bottom:20px;box-shadow:none;border:1px solid #000}.tool-card:hover{transform:none}}[data-theme=dark]{--primary-color: #60a5fa;--primary-hover: #3b82f6;--primary-light: #1e3a8a;--bg-color: #0f172a;--bg-secondary: #1e293b;--bg-tertiary: #334155;--text-color: #f8fafc;--text-secondary: #cbd5e1;--text-muted: #94a3b8;--card-bg: #1e293b;--card-shadow: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 1px 2px 0 rgba(0, 0, 0, .2);--card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, .4), 0 4px 6px -2px rgba(0, 0, 0, .3);--border-color: #334155;--border-light: #475569}[data-theme=dark] .header{background-color:#0f172ae6;border-bottom-color:var(--border-color)}[data-theme=dark] .hero{background:linear-gradient(135deg,var(--bg-color) 0%,var(--bg-secondary) 100%)}[data-theme=dark] .hero__title{background:linear-gradient(135deg,var(--primary-color),#93c5fd);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}[data-theme=dark] .nav__search-input{background-color:var(--bg-tertiary);border-color:var(--border-color);color:var(--text-color)}[data-theme=dark] .nav__search-input:focus{background-color:var(--bg-secondary);border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-light)}[data-theme=dark] .nav__search-input::placeholder{color:var(--text-muted)}[data-theme=dark] .nav__theme-toggle:hover{background-color:var(--bg-secondary)}[data-theme=dark] .categories{background-color:var(--bg-color);border-bottom-color:var(--border-color)}[data-theme=dark] .category-btn{background-color:var(--bg-secondary);border-color:var(--border-color);color:var(--text-color)}[data-theme=dark] .category-btn:hover{background-color:var(--bg-tertiary);border-color:var(--primary-light)}[data-theme=dark] .category-btn.active{background-color:var(--primary-color);color:var(--bg-color);border-color:var(--primary-color)}[data-theme=dark] .tool-card{background-color:var(--card-bg);border-color:var(--border-color)}[data-theme=dark] .tool-card:hover{border-color:var(--primary-light)}[data-theme=dark] .tool-card__tag--hot{background-color:#451a03;color:#fbbf24}[data-theme=dark] .tool-card__tag--new{background-color:#14532d;color:#4ade80}[data-theme=dark] .tool-card__tag--updated{background-color:#1e3a8a;color:#60a5fa}[data-theme=dark] .footer{background-color:var(--bg-secondary);border-top-color:var(--border-color)}[data-theme=dark] .theme-icon:before{content:"☀️"}.theme-icon:before{content:"🌙"}@media (max-width: 768px){[data-theme=dark] .nav__menu{background-color:var(--bg-color);border-bottom-color:var(--border-color)}}*{transition:background-color .3s ease,border-color .3s ease,color .3s ease}[data-theme=dark] ::-webkit-scrollbar{width:8px;height:8px}[data-theme=dark] ::-webkit-scrollbar-track{background:var(--bg-secondary)}[data-theme=dark] ::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}[data-theme=dark] ::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}[data-theme=dark] ::selection{background-color:var(--primary-light);color:var(--text-color)}[data-theme=dark] button:focus,[data-theme=dark] input:focus,[data-theme=dark] a:focus{outline:2px solid var(--primary-color);outline-offset:2px}