*{box-sizing:border-box;margin:0;padding:0}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:#f4f6f9;color:#333;line-height:1.6;transition:background 0.3s ease,color 0.3s ease}body.dark-theme{background:#121a2f;color:#e0e0e0}.container{max-width:1000px;margin:0 auto;padding:40px 20px}header{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:40px;text-align:center}h1{font-size:32px;color:#007acc;margin-bottom:10px}body.dark-theme h1{color:#66b3ff}p{font-size:16px;color:#666}body.dark-theme p{color:#b3b3b3}.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px}.tool-card{background:#fff;padding:20px;border-radius:12px;box-shadow:0 4px 10px rgba(0,0,0,0.05);transition:transform 0.2s ease,box-shadow 0.2s ease,background 0.3s ease,color 0.3s ease;cursor:pointer;text-align:center;min-height:250px;max-height:400px;color:#333}body.dark-theme .tool-card{background:#1f2d47 !important;color:#e0e0e0}body.dark-mode .tool-card{background-color:#1e2a44;color:#e0e0e0;box-shadow:0 4px 12px rgba(0,0,0,0.3)}body.dark-mode .tool-card h2 a{color:#66b3ff}body.dark-mode .tool-card h2 a:hover{color:#90cdf4}body.dark-mode .tool-card p{color:#cccccc}body.dark-mode footer p{color:#888}.tool-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,0.08)}.tool-icon{font-size:40px;margin-bottom:10px}.tool-card h2 a{font-size:20px;color:#007acc;text-decoration:none;transition:color 0.2s ease}body.dark-theme .tool-card h2 a{color:#66b3ff}.tool-card h2 a:hover{text-decoration:underline}.tool-card p{font-size:14px;color:#666}body.dark-theme .tool-card p{color:#b3b3b3}body.dark-theme .tool-card p,body.dark-theme .tool-card h2 a{color:#cfd8e3}body.dark-theme .tool-card h2 a:hover{color:#66b3ff}footer{text-align:center;margin-top:40px}footer p{font-size:14px;color:#999}body.dark-theme footer p{color:#666}#themeToggle{background:transparent;border:none;font-size:24px;cursor:pointer;color:inherit;transition:transform 0.2s ease}#themeToggle:hover{transform:scale(1.2)}@media (max-width:768px){.tools-grid{grid-template-columns:1fr}header{gap:20px}}