.tool-hero{ padding-block: var(--sp-9) var(--sp-7); background: linear-gradient(180deg, var(--c-bg), var(--c-bg-alt)); }
.tool-hero .container{ max-width: 920px; text-align: center; }
.tool-hero h1{ margin-bottom: var(--sp-3); }
.tool-hero .lead{ margin-inline:auto; max-width: 62ch; }

.tool-stage{
  background: var(--c-surface);
  border:1px solid var(--c-border);
  border-radius: var(--r-5);
  padding: var(--sp-7);
  box-shadow: var(--sh-2);
  margin-top: var(--sp-6);
  max-width: 720px; margin-inline:auto;
  text-align: left;
}
.tool-stage .uploader{ padding: var(--sp-7) var(--sp-5); }
.tool-stage__filelist{
  list-style:none; margin: 0 0 var(--sp-4); padding:0;
  display:flex; flex-direction:column; gap: var(--sp-2);
}
.tool-stage__filelist li{
  display:flex; align-items:center; justify-content:space-between; gap: var(--sp-3);
  background: var(--c-surface-2); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-4); font-size: var(--fs-300);
}
.tool-stage__filelist .fname{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tool-stage__filelist .fmeta{ color: var(--c-text-subtle); font-size: var(--fs-200); flex:none; }
.tool-stage__actions{ display:flex; gap: var(--sp-3); flex-wrap:wrap; margin-top: var(--sp-4); }
.tool-stage__field{ display:flex; flex-direction:column; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.tool-stage__field label{ font-size: var(--fs-300); font-weight: var(--fw-medium); color: var(--c-text); }
.tool-stage__field input[type="text"],
.tool-stage__field input[type="number"],
.tool-stage__field input[type="range"],
.tool-stage__field select,
.tool-stage__field input[type="color"]{
  padding: 8px 10px; border:1px solid var(--c-border-strong); border-radius: var(--r-2);
  background: var(--c-bg); color: var(--c-text); font-family:inherit; font-size: var(--fs-300);
  width:100%;
}
.tool-stage__grid{ display:grid; gap: var(--sp-4); grid-template-columns: 1fr 1fr; }
@media (max-width:560px){ .tool-stage__grid{ grid-template-columns:1fr; } }

.tool-steps{ list-style:none; padding:0; margin:0; display:grid; gap: var(--sp-5); grid-template-columns: repeat(3,1fr); }
.tool-steps li{ background: var(--c-surface); border:1px solid var(--c-border); border-radius: var(--r-4); padding: var(--sp-5); }
.tool-steps .num{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background: var(--c-primary); color:#fff; font-size: var(--fs-300); font-weight:600; margin-bottom: var(--sp-3); }
.tool-steps h3{ font-size: var(--fs-500); margin-bottom: var(--sp-2); }
@media (max-width:820px){ .tool-steps{ grid-template-columns:1fr; } }

.related-tools{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-3); margin-top: var(--sp-5); }
.related-tools a{
  display:flex; align-items:center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); background: var(--c-surface);
  border:1px solid var(--c-border); border-radius: var(--r-3);
  color: var(--c-text); font-size: var(--fs-300); font-weight: var(--fw-medium);
}
.related-tools a:hover{ border-color: var(--c-border-strong); text-decoration:none; }
@media (max-width:820px){ .related-tools{ grid-template-columns: 1fr 1fr; } }

.breadcrumbs{ font-size: var(--fs-200); color: var(--c-text-subtle); margin-bottom: var(--sp-4); }
.breadcrumbs ol{ list-style:none; padding:0; margin:0; display:flex; gap: var(--sp-2); flex-wrap:wrap; }
.breadcrumbs li{ margin:0; }
.breadcrumbs a{ color: var(--c-text-subtle); }
.breadcrumbs li + li::before{ content:"/"; margin-right: var(--sp-2); color: var(--c-border-strong); }