/* Toolful v5 · homepage: brand search center + seven equal tools */
.hero-workspace {
  width: min(100%, 980px);
  margin-inline: auto;
  padding: clamp(88px, 12vw, 150px) var(--gutter) 72px;
}
.hero-kicker {
  margin-bottom: 18px;
  color: var(--c-text-3);
  font: 600 var(--fs-xs) var(--font-mono);
  letter-spacing: .18em;
}
.hero-workspace h1 {
  max-width: 900px;
  font-size: var(--fs-hero);
  font-weight: 740;
  letter-spacing: -.055em;
}
.hw-sub {
  margin-top: 14px;
  color: var(--c-text-2);
  font-size: clamp(18px, 2vw, 23px);
  letter-spacing: -.015em;
}
.cmd-search {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 68px;
  margin-top: 42px;
  padding: 0 18px;
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.cmd-search:focus-within {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 4px var(--c-focus-ring-soft), var(--shadow-2);
  transform: translateY(-1px);
}
.cmd-search-icon { width: 22px; height: 22px; color: var(--c-text-3); }
.cmd-input {
  width: 100%;
  min-height: 64px;
  padding: 0;
  color: var(--c-heading);
  font-size: var(--fs-md);
  background: transparent;
  border: 0;
  outline: 0;
}
.cmd-k {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  color: var(--c-text-3);
  font: 550 var(--fs-xs) var(--font-mono);
  background: var(--c-surface-subtle);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
}
.cmd-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  left: 0;
  z-index: 50;
  padding: 8px;
  background: var(--c-surface-elevated);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
}
.cmd-opt {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 8px 12px;
  color: var(--c-text-1);
  border-radius: var(--r);
}
.cmd-opt:hover, .cmd-opt.is-active { background: var(--c-hover-subtle); }
.cmd-opt-num { color: var(--c-text-3); font: var(--fs-xs) var(--font-mono); }
.cmd-opt-name { display: block; color: var(--c-heading); font-weight: 650; }
.cmd-opt-desc { display: block; overflow: hidden; color: var(--c-text-2); font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.cmd-opt-go { color: var(--c-text-3); }
.cmd-empty {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  left: 0;
  z-index: 51;
  min-height: 58px;
  padding: 16px 18px;
  color: var(--c-text-2);
  background: var(--c-surface-elevated);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  box-shadow: var(--shadow-2);
}
.hero-trust {
  display: flex;
  gap: 10px 26px;
  flex-wrap: wrap;
  margin-top: 20px;
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}
.hero-trust span { display: inline-flex; gap: 8px; align-items: center; }
.hero-trust span::before {
  width: 5px;
  height: 5px;
  content: "";
  background: var(--c-success);
  border-radius: 50%;
}

.tool-list.container { width: min(100%, 980px); margin-top: 0; }
.tool-list > .qt-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
}
.qt-head h2 { font-size: var(--fs-2xl); }
.dir-cat {
  margin-top: 30px;
  padding-bottom: 10px;
  color: var(--c-text-3);
  font: 600 var(--fs-xs) var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--c-divider);
}
.dir-cat + .tool-row { border-top: 0; }
.tool-list .tool-row {
  grid-template-columns: 48px 46px minmax(0, 1fr) 32px;
  min-height: 92px;
  padding-inline: 8px;
}
.tool-list .tl-name { font-size: var(--fs-md); }
.tool-list .tl-desc { margin-top: 2px; }

.faq-list { margin-top: 22px; }
.article--editorial { margin-top: var(--rhythm-1) !important; padding-top: var(--rhythm-2); border-top: 1px solid var(--c-divider); }

/* SEO 指南入口：位于工具目录之后，保持轻量，不挤占首屏任务空间 */
.guide-directory { margin-top: var(--rhythm-2); }
.guide-directory-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.guide-directory-head h2 { font-size: var(--fs-xl); }
.guide-directory-head p { color: var(--c-text-3); font-size: var(--fs-sm); }
.guide-directory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--c-divider); }
.guide-directory-grid a {
  display: flex; justify-content: space-between; gap: 14px; min-height: 54px; padding: 15px 4px;
  color: var(--c-text-2); border-bottom: 1px solid var(--c-divider);
}
.guide-directory-grid a:nth-child(odd) { margin-right: 20px; }
.guide-directory-grid a:hover { color: var(--c-heading); }
.guide-directory-grid span { color: var(--c-text-3); }

@media (max-width: 767px) {
  .hero-workspace { padding: 64px var(--gutter) 48px; }
  .hero-kicker { margin-bottom: 12px; }
  .hero-workspace h1 { font-size: 42px; }
  .hw-sub { margin-top: 10px; font-size: var(--fs-md); }
  .cmd-search { min-height: 58px; margin-top: 30px; padding-inline: 14px; }
  .cmd-input { min-height: 56px; font-size: var(--fs-base); }
  .cmd-k { display: none; }
  .cmd-search { grid-template-columns: 22px minmax(0, 1fr); }
  .hero-trust { display: grid; gap: 8px; margin-top: 18px; }
  .tool-list > .qt-head { margin-bottom: 12px; }
  .qt-head h2 { font-size: var(--fs-xl); }
  .dir-cat { margin-top: 24px; }
  .tool-list .tool-row {
    grid-template-columns: 34px 40px minmax(0, 1fr) 20px;
    min-height: 82px;
    padding-inline: 0;
  }
  .tool-list .tl-name { font-size: var(--fs-base); }
  .article--editorial { margin-top: 64px !important; }
  .guide-directory-head { display: block; }
  .guide-directory-head p { margin-top: 6px; }
  .guide-directory-grid { grid-template-columns: 1fr; }
  .guide-directory-grid a:nth-child(odd) { margin-right: 0; }
}