:root{--tool-glow:rgba(0,255,157,.18)}
.tools-main{min-height:calc(100vh - 190px);padding:90px 0 110px}
.tools-hero{text-align:center;max-width:850px;margin:0 auto 55px}
.terminal-prompt{font-family:'JetBrains Mono',monospace;color:var(--primary);font-size:1rem;margin-bottom:15px}
.tools-hero h1{font-family:'JetBrains Mono',monospace;color:var(--primary);font-size:3.5rem;margin-bottom:18px}
.tools-hero p{font-size:1.2rem;color:var(--text-muted)}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px;max-width:1000px;margin:auto}
.tool-card{display:block;text-decoration:none;background:var(--bg-code);border:1px solid var(--border);border-radius:16px;padding:32px;color:var(--text);transition:.3s}
.tool-card:hover{transform:translateY(-8px);border-color:var(--primary);box-shadow:0 15px 35px var(--tool-glow)}
.tool-command{font-family:'JetBrains Mono',monospace;color:var(--primary);font-size:.95rem}
.tool-card h2{font-family:'JetBrains Mono',monospace;color:var(--text);font-size:1.65rem;margin:14px 0}
.tool-card p{color:var(--text-muted)}
.tool-page{max-width:850px;margin:0 auto}
.tool-page h1{font-family:'JetBrains Mono',monospace;color:var(--primary);font-size:2.8rem;margin-bottom:10px}
.tool-description{color:var(--text-muted);margin-bottom:30px}
.tool-panel{background:var(--bg-code);border:1px solid var(--border);border-radius:14px;padding:28px}
.tool-panel label{display:block;font-family:'JetBrains Mono',monospace;color:var(--primary);margin-bottom:8px}
.tool-panel input,.tool-panel select{width:100%;padding:13px;background:var(--bg-dark);border:1px solid var(--border);border-radius:8px;color:var(--text);font:1rem 'JetBrains Mono',monospace;margin-bottom:20px}
.result{margin-top:20px;padding:20px;border:1px solid var(--primary);border-radius:10px;background:rgba(0,255,157,.05)}
.result strong{color:var(--primary)}
.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:600px){.tools-hero h1{font-size:2.4rem}.mode-grid{grid-template-columns:1fr}.tools-main{padding-top:55px}}

/* Keep the Services dropdown vertical. The global navigation makes all ul elements flex containers. */
.nav-menu .has-dropdown > .dropdown {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.nav-menu .has-dropdown > .dropdown li {
    width: 100%;
}

.nav-menu .has-dropdown > .dropdown a {
    width: 100%;
}


/* Tools dropdown */
.nav-menu .tools-dropdown {
    min-width: 270px;
    max-height: 75vh;
    overflow-y: auto;
}