/* Site-wide shared components not limited to tool pages */

.breadcrumbs{display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:rgba(170,183,207,.95); font-size:12px}
.crumb{color:rgba(170,183,207,.95)}
.crumb:hover{color:var(--text)}
.crumb-sep{opacity:.55}

.search{display:flex; flex-direction:column; gap:6px; max-width:520px; position:relative}
.search::after{content:""; position:absolute; inset:6px 10px; border-radius:999px; background:linear-gradient(90deg, transparent, rgba(125,249,255,.28), transparent); opacity:0; pointer-events:none}
.search:focus-within::after{opacity:.8; animation: scanline 2.6s linear infinite}
.search-input{
  width:100%;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid rgba(125,249,255,.16);
  background:linear-gradient(120deg, rgba(125,249,255,.16), rgba(94,160,255,.08) 40%, rgba(15,27,45,.70) 70%);
  background-size:200% 100%;
  color:var(--text);
  box-shadow: 0 0 0 1px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.02);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background-position .5s ease;
}
.search-input::placeholder{color:rgba(139,147,167,.9)}
.search-input:hover{border-color:rgba(125,249,255,.35)}
.search-input:focus{border-color:rgba(125,249,255,.65); background-position:100% 50%; transform: translateY(-1px); box-shadow: var(--glow); animation: inputGlow 2.2s ease-in-out infinite}
.search-hint{min-height:18px; color:var(--muted); font-size:12px}

@keyframes scanline{from{transform:translateX(-20%)}to{transform:translateX(20%)}}
@keyframes inputGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.06)}}