/* Shared styles for all interactive tool pages (forms, tool bars, grids, etc.) */

.tool-bar{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:flex-end;
  margin-top:14px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(18,32,52,.65), rgba(12,20,34,.55));
  box-shadow: 0 0 0 1px rgba(125,249,255,.08), 0 12px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
}
.tool-label{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:rgba(170,183,207,.95);
  font-size:12px;
}
.tool-select,.tool-input{
  min-width:220px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(125,249,255,.16);
  background: linear-gradient(120deg, rgba(125,249,255,.14), rgba(94,160,255,.08) 40%, rgba(15,27,45,.70) 72%);
  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;
}
.tool-select{
  appearance:none;
  color-scheme: dark;
  background-image:
    linear-gradient(120deg, rgba(125,249,255,.14), rgba(94,160,255,.08) 40%, rgba(15,27,45,.70) 72%),
    linear-gradient(45deg, transparent 50%, rgba(125,249,255,.7) 50%),
    linear-gradient(135deg, rgba(125,249,255,.7) 50%, transparent 50%);
  background-position: 0 0, calc(100% - 16px) 52%, calc(100% - 10px) 52%;
  background-size: 200% 100%, 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right:32px;
}
.tool-select option{background:var(--surface); color:var(--text)}
.tool-select:hover,.tool-input:hover{border-color:rgba(125,249,255,.35)}
.tool-select:focus,.tool-input:focus{
  outline:2px solid rgba(125,249,255,.55);
  outline-offset:2px;
  background-position:100% 50%;
  transform: translateY(-1px);
  box-shadow: var(--glow);
  animation: inputGlow 2.2s ease-in-out infinite;
}
.tool-input{min-width:360px}
.tool-hint{min-height:18px; color:var(--muted); font-size:12px; margin-top:10px}

@keyframes inputGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.06)}}

@media (max-width:720px){
  .tool-bar{flex-direction:column; align-items:stretch}
  .tool-select,.tool-input{width:100%; min-width:0}
}

/* Tool directory (tools_index.html) cards */
.tool-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px;
  margin:18px 0 40px;
}
.tool-card{
  position:relative;
  overflow:hidden;
  padding:18px 18px 16px;
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
  transform: translateY(6px);
  opacity:1;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease, border-color .25s ease;
}
.tool-card.is-visible{transform: translateY(0)}
.tool-card:hover{border-color:rgba(138,180,248,.25)}
.tool-card-title{margin:6px 0 6px; font-size:20px; font-family:var(--font-head)}
.tool-card-desc{margin:0; color:var(--muted)}
.tool-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.tool-tag{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:4px 8px;
  border-radius:999px;
  color:rgba(255,210,170,.85);
  border:1px solid rgba(255,180,120,.2);
  background:rgba(255,180,120,.08);
}
.tool-card .btn{margin-top:12px; align-self:flex-start}

@media (min-width:1200px){
  .tool-grid{grid-template-columns:repeat(3, minmax(0,1fr))}
}
@media (max-width:720px){
  .tool-grid{grid-template-columns:1fr}
}