.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin-top:2rem}.tool-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:1.5rem;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.tool-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary)}.tool-card-icon{width:48px;height:48px;background:linear-gradient(135deg,var(--primary) 0%,#a855f7 100%);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;font-size:1.5rem}.tool-card h3{font-size:1.1rem;margin-bottom:.5rem;color:var(--text-main)}.tool-card p{font-size:.9rem;color:var(--text-muted);margin:0;line-height:1.5}.tool-container{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow-sm)}.tool-header{margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border-subtle)}.tool-header h1{font-size:1.75rem;margin-bottom:.5rem}.tool-header p{color:var(--text-muted);margin:0}.tool-io{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem}@media(max-width:768px){.tool-io{grid-template-columns:1fr}}.tool-section{display:flex;flex-direction:column}.tool-section label{font-weight:600;font-size:.9rem;margin-bottom:.5rem;color:var(--text-main)}.tool-textarea{width:100%;min-height:250px;padding:1rem;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:.875rem;line-height:1.6;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#f8fafc;color:var(--text-main);resize:vertical;transition:border-color .2s,box-shadow .2s}.tool-textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}.tool-input{width:100%;padding:.75rem 1rem;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:.875rem;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#f8fafc;color:var(--text-main);transition:border-color .2s,box-shadow .2s}.tool-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}.tool-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem}.tool-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.25rem;font-size:.9rem;font-weight:600;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease;font-family:inherit}.tool-btn-primary{background:var(--primary);color:#fff;box-shadow:0 2px 4px #6366f14d}.tool-btn-primary:hover{background:#4f46e5;transform:translateY(-1px);box-shadow:0 4px 8px #6366f166}.tool-btn-secondary{background:#fff;color:var(--text-main);border:1px solid var(--border-subtle)}.tool-btn-secondary:hover{background:#f1f5f9;border-color:var(--primary);color:var(--primary)}.tool-btn-danger{background:#fee2e2;color:#dc2626;border:1px solid #fecaca}.tool-btn-danger:hover{background:#fecaca}.tool-status{padding:.75rem 1rem;border-radius:var(--radius-md);font-size:.9rem;margin-bottom:1rem;display:none}.tool-status.success{display:block;background:#dcfce7;color:#166534;border:1px solid #bbf7d0}.tool-status.error{display:block;background:#fee2e2;color:#dc2626;border:1px solid #fecaca}.tool-status.info{display:block;background:#dbeafe;color:#1e40af;border:1px solid #bfdbfe}.tool-output{background:#1e293b;color:#e2e8f0;padding:1rem;border-radius:var(--radius-md);font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:.875rem;line-height:1.6;overflow-x:auto;white-space:pre-wrap;word-break:break-all;min-height:100px}.regex-flags{display:flex;gap:1rem;margin-bottom:1rem}.flag-toggle{display:flex;align-items:center;gap:.5rem;cursor:pointer}.flag-toggle input{width:18px;height:18px;accent-color:var(--primary)}.match-highlight{background:#6366f14d;border-radius:2px;padding:0 2px}.jwt-section{margin-bottom:1rem}.jwt-section h3{font-size:.9rem;color:var(--text-muted);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em}.jwt-content{background:#1e293b;color:#e2e8f0;padding:1rem;border-radius:var(--radius-md);font-family:JetBrains Mono,monospace;font-size:.8rem;overflow-x:auto}.back-link{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.5rem;color:var(--text-muted);font-size:.9rem;transition:color .2s}.back-link:hover{color:var(--primary)}