:root{--bg-primary: #f4f7fa;--bg-secondary: #ffffff;--image-primary: #10b981;--card-border-light: #cbd5e1;--card-border-dark: #334155}body{background-color:var(--bg-primary)}body.dark{background-color:#0f172a}.bg-pattern{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;background-image:radial-gradient(#94a3b8 1px,transparent 1px);background-size:24px 24px;opacity:.25;pointer-events:none}body.dark .bg-pattern{background-image:radial-gradient(#ffffff 1px,transparent 1px);opacity:.15}main .tool-card{background:#fff;border:1px solid var(--card-border-light);border-radius:1.25rem;padding:1.75rem;box-shadow:0 4px 6px -1px #0000000d;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;display:flex;flex-direction:column;text-decoration:none;height:100%;overflow:hidden}body.dark main .tool-card{background:#1e293b;border-color:var(--card-border-dark)}main .tool-card:hover{transform:translateY(-5px);box-shadow:0 20px 25px -5px #10b98126;border-color:var(--image-primary)}main .tool-icon{width:3.5rem;height:3.5rem;border-radius:1rem;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:1rem;transition:all .3s ease}main .tool-card:hover .tool-icon{transform:scale(1.1) rotate(3deg)}main .tool-card h3{font-size:1.25rem;font-weight:700;margin-bottom:.5rem;color:#0f172a}body.dark main .tool-card h3{color:#f8fafc}main .tool-card p{font-size:.925rem;color:#475569;margin-bottom:1.5rem;line-height:1.5;flex-grow:1}body.dark main .tool-card p{color:#94a3b8}main .action-text{font-weight:700;font-size:.9rem;display:flex;align-items:center;transition:transform .3s ease}main .tool-card:hover .action-text{transform:translate(4px)}.badge-edit,.badge-opt,.badge-conv,.badge-fun{position:absolute;top:12px;right:12px;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;z-index:10}.badge-edit{background:#fee2e2;color:#dc2626}.badge-opt{background:#d1fae5;color:#059669}.badge-conv{background:#e0e7ff;color:#4338ca}.badge-fun{background:#fef3c7;color:#d97706}@keyframes fade-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fade-in .6s ease-out forwards}@media(max-width:768px){main .tool-card{padding:1.5rem}}