.tools-page{background:linear-gradient(135deg,#f0fdf4 0%,#f9fafb 50%,#ecfdf5 100%);min-height:calc(100vh - 4rem)}.tools-container{max-width:1200px;margin:0 auto;padding:2rem 1rem}.tools-header{text-align:center;margin-bottom:3rem}.tools-header h1{background:linear-gradient(135deg,#166534 0%,#22c55e 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:.75rem;font-size:2.5rem;font-weight:800}.tools-header p{color:#6b7280;max-width:600px;margin:0 auto;font-size:1.125rem}.tools-loading{flex-direction:column;justify-content:center;align-items:center;padding:4rem 1rem;display:flex}.tools-loading .loading-spinner{border:3px solid #e5e7eb;border-top-color:var(--color-primary,#22c55e);border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.tools-loading p{color:#6b7280;margin-top:1rem}.tools-error{text-align:center;padding:4rem 1rem}.tools-error h2{color:#dc2626;margin-bottom:.5rem;font-size:1.5rem}.tools-error p{color:#6b7280;margin-bottom:1.5rem}.retry-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);border:none;border-radius:.5rem;padding:.75rem 1.5rem;font-weight:600;transition:all .2s;box-shadow:0 2px 4px #22c55e33}.retry-btn:hover{transform:translateY(-2px);box-shadow:0 4px 8px #22c55e4d}.tools-grid{grid-template-columns:1fr;gap:1.5rem;display:grid}@media (min-width:640px){.tools-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.tools-grid{grid-template-columns:repeat(3,1fr)}}.tool-card{color:inherit;background:#fff;border:1px solid #22c55e14;border-radius:1rem;align-items:flex-start;gap:1rem;padding:1.5rem;text-decoration:none;transition:all .2s;display:flex;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000f}.tool-card:hover{border-color:#22c55e33;transform:translateY(-4px);box-shadow:0 8px 24px #0000001f}.tool-icon{color:#fff;border-radius:.75rem;flex-shrink:0;justify-content:center;align-items:center;width:3.5rem;height:3.5rem;display:flex}.tool-content{flex:1;min-width:0}.tool-content h3{color:#111827;margin-bottom:.25rem;font-size:1.125rem;font-weight:700}.tool-content p{color:#6b7280;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:.75rem;font-size:.875rem;line-height:1.5;display:-webkit-box;overflow:hidden}.tool-meta{flex-wrap:wrap;gap:.5rem;display:flex}.tool-meta span{color:#6b7280;background:#f3f4f6;border-radius:1rem;padding:.25rem .625rem;font-size:.75rem;font-weight:500}.tool-type{text-transform:capitalize}.tool-arrow{color:#9ca3af;flex-shrink:0;transition:color .2s,transform .2s}.tool-card:hover .tool-arrow{color:var(--color-primary,#22c55e);transform:translate(4px)}.tools-empty{text-align:center;background:#fff;border-radius:1rem;padding:4rem 1rem;box-shadow:0 1px 3px #00000014}.empty-icon{color:#9ca3af;margin-bottom:1.5rem}.tools-empty h3{color:#374151;margin-bottom:.5rem;font-size:1.25rem;font-weight:700}.tools-empty p{color:#6b7280;line-height:1.6}@media (max-width:640px){.tools-header h1{font-size:1.75rem}.tools-header p{font-size:1rem}.tool-card{padding:1.25rem}}@media (prefers-color-scheme:dark){.tools-page{background:linear-gradient(135deg,#1a2e1a 0%,#1f2937 50%,#1a2e1a 100%)}.tools-header h1{background:linear-gradient(135deg,#4ade80 0%,#22c55e 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.tools-header p{color:#9ca3af}.tool-card{background:#1f2937;border-color:#374151}.tool-content h3{color:#f9fafb}.tool-content p{color:#9ca3af}.tool-meta span{color:#9ca3af;background:#374151}.tools-empty{background:#1f2937}.tools-empty h3{color:#f9fafb}}