/* Shared tool navigation. The markup is in components/tool-topnav.html. */
.tool-pills-nav { display:flex; flex-direction:column; gap:18px; margin:0 0 32px; }
.tool-pills-logo { align-self:flex-start; color:#fff; font-size:clamp(38px,5.2vw,60px); font-weight:900; letter-spacing:-.02em; text-decoration:none; transition:color .2s,text-shadow .2s; }
.tool-pills-logo:hover { color:var(--mint); text-shadow:0 0 20px rgba(0,255,178,.55); text-decoration:none; }
.tool-pills { display:flex; width:100%; flex-wrap:wrap; justify-content:center; gap:13px; }
.tool-pills a { flex-shrink:0; padding:11px 15px; border:1px solid rgba(232,223,255,.25); border-radius:999px; background:rgba(30,18,47,.4); color:#e8dfff; font-family:var(--mono,'SF Mono',monospace); font-size:12px; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; white-space:nowrap; backdrop-filter:blur(12px); transition:background .2s,color .2s,border-color .2s; }
.tool-pills a:hover { background:rgba(255,255,255,.12); text-decoration:none; }
.tool-pills a.active { background:linear-gradient(110deg,rgba(255,127,197,.35),rgba(159,117,255,.35)); border-color:rgba(255,155,210,.5); }
@media (max-width:760px) { .tool-pills { justify-content:center; } }