:root{--color-bg:#f5f7ff;--color-surface:#fff;--color-surface-hover:#fafbff;--color-text:#1e293b;--color-text-secondary:#475569;--color-text-muted:#94a3b8;--color-border:#f1f5f9;--color-border-hover:#e2e8f0;--shadow-card:0 1px 3px #0000000a, 0 1px 2px #00000008;--shadow-card-hover:0 12px 28px -6px #0000001a, 0 4px 12px -4px #0000000f;--shadow-search:0 1px 3px #0000000d;--shadow-search-focus:0 1px 2px #0000000a, 0 4px 16px #4f46e51a;--color-search-bg:#fff;--color-empty:#94a3b8;--gradient-bg:radial-gradient(circle at 15% 20%, #4f46e508 0%, transparent 50%), radial-gradient(circle at 85% 75%, #7c3aed08 0%, transparent 50%), radial-gradient(circle at 50% 50%, #2563eb05 0%, transparent 70%);--color-card-icon-bg:#f8fafc;--color-card-icon-bg-hover:#eef2ff;--color-result-bg:#f8fafc;--shadow-md:0 4px 12px #0000000f;--color-primary:#4f46e5;--color-primary-hover:#4338ca;--font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--radius-sm:10px;--radius-md:14px;--radius-lg:20px;--radius-full:50px;--transition:.2s cubic-bezier(.4, 0, .2, 1)}@media (prefers-color-scheme:dark){:root{--color-bg:#0f172a;--color-surface:#1e293b;--color-surface-hover:#253348;--color-text:#e2e8f0;--color-text-secondary:#94a3b8;--color-text-muted:#64748b;--color-border:#334155;--color-border-hover:#475569;--shadow-card:0 1px 3px #0003, 0 1px 2px #00000026;--shadow-card-hover:0 12px 28px -6px #0006, 0 4px 12px -4px #0000004d;--shadow-search:0 1px 3px #0003;--shadow-search-focus:0 1px 2px #0003, 0 4px 16px #4f46e533;--color-search-bg:#1e293b;--color-empty:#64748b;--gradient-bg:radial-gradient(circle at 15% 20%, #6366f10f 0%, transparent 50%), radial-gradient(circle at 85% 75%, #a78bfa0d 0%, transparent 50%), radial-gradient(circle at 50% 50%, #60a5fa08 0%, transparent 70%);--color-card-icon-bg:#253348;--color-card-icon-bg-hover:#312e81;--color-result-bg:#253348;--shadow-md:0 4px 12px #00000040;--color-primary:#818cf8;--color-primary-hover:#6366f1}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;font-family:var(--font-family);color:var(--color-text);background:var(--color-bg);background-image:var(--gradient-bg);flex-direction:column;align-items:center;padding:2.5rem 1.5rem 4rem;font-size:16px;line-height:1.5;transition:background-color .3s,color .3s;display:flex}#app{flex-direction:column;align-items:center;width:100%;display:flex}header{text-align:center;margin-bottom:2rem}header h1{letter-spacing:-.6px;color:var(--color-text);margin-bottom:.25rem;font-size:2rem;font-weight:800}header p{color:var(--color-text-muted);font-size:.95rem;font-weight:400}.search-wrapper{width:100%;max-width:520px;margin:0 auto 2rem;position:relative}.search-input{width:100%;height:46px;font-size:.95rem;font-family:var(--font-family);color:var(--color-text);background:var(--color-search-bg);border:1px solid var(--color-border);border-radius:var(--radius-full);box-shadow:var(--shadow-search);transition:all var(--transition);outline:none;padding:0 18px 0 44px}.search-input::placeholder{color:var(--color-text-muted)}.search-input:focus{box-shadow:var(--shadow-search-focus);border-color:#818cf8}.search-icon{object-fit:contain;pointer-events:none;width:18px;height:18px;transition:opacity var(--transition);position:absolute;top:50%;left:16px;transform:translateY(-50%)}.search-input:focus~.search-icon,.search-wrapper:focus-within .search-icon{color:#818cf8}.tool-grid{grid-template-columns:repeat(4,1fr);gap:16px;width:100%;max-width:1100px;display:grid}.empty-state{text-align:center;color:var(--color-empty);grid-column:1/-1;padding:3rem 1rem;font-size:.95rem;display:none}.empty-state.visible{display:block}.empty-state .empty-icon{opacity:.5;margin-bottom:.75rem;font-size:3rem}.tool-card{background:var(--color-surface);border-radius:var(--radius-sm);box-shadow:var(--shadow-card);border:1px solid var(--color-border);transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition), background-color .3s ease;opacity:0;align-items:center;gap:14px;padding:18px 20px;text-decoration:none;animation:.4s forwards fadeInUp;display:flex;position:relative;overflow:hidden;transform:translateY(12px)}.tool-card:hover{box-shadow:var(--shadow-card-hover);border-color:var(--color-border-hover);background:var(--color-surface-hover);transform:translateY(-3px)}.tool-card .accent-bar{width:3px;transition:top var(--transition), bottom var(--transition), width var(--transition);border-radius:0 3px 3px 0;position:absolute;top:12px;bottom:12px;left:0}.tool-card:hover .accent-bar{width:4px;top:6px;bottom:6px}.tool-card .card-icon{object-fit:contain;background:var(--color-card-icon-bg);width:40px;height:40px;transition:background var(--transition), transform var(--transition);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;padding:6px;display:flex}.tool-card:hover .card-icon{background:var(--color-card-icon-bg-hover);transform:scale(1.08)}.tool-card .card-text{flex-direction:column;gap:2px;min-width:0;display:flex}.tool-card .card-title{color:var(--color-text);font-size:.95rem;font-weight:600;line-height:1.3}.tool-card .card-desc{color:var(--color-text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;font-weight:400;line-height:1.4;overflow:hidden}.back-btn{width:160px;height:44px;font-size:.95rem;font-weight:600;font-family:var(--font-family);color:#fff;border-radius:var(--radius-md);transition:all var(--transition);background:#4f46e5;justify-content:center;align-items:center;margin:2.5rem auto 0;text-decoration:none;display:inline-flex;box-shadow:0 2px 8px #4f46e54d}.back-btn:hover{background:#4338ca;transform:translateY(-2px);box-shadow:0 6px 18px #4f46e566}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}@media (width<=1024px){.tool-grid{grid-template-columns:repeat(3,1fr);gap:14px}}@media (width<=700px){body{padding:1.5rem 1rem 3rem}header{margin-bottom:1.5rem}header h1{font-size:1.65rem}header p{font-size:.85rem}.search-wrapper{max-width:100%;margin-bottom:1.5rem}.tool-grid{grid-template-columns:repeat(2,1fr);gap:12px}.tool-card{gap:10px;padding:15px 16px}.tool-card .card-icon{border-radius:8px;width:34px;height:34px;font-size:1rem}.tool-card .card-title{font-size:.88rem}.tool-card .card-desc{font-size:.75rem}}@media (width<=440px){body{padding:1.2rem .8rem 2.5rem}header h1{font-size:1.4rem}header p{font-size:.8rem}.tool-grid{grid-template-columns:1fr;gap:10px;max-width:400px}.tool-card{gap:12px;padding:16px 18px}.tool-card .card-title{font-size:.95rem}}