/* I7：统一工具台页面样式。
   卡片网格 / 卡片本体全部复用 static/ecommerce_tools.css 的 .et-* 类，
   这里只补三件它没有的东西：页头、旧版小标、<a> 当按钮用。 */

.tools-main {
  padding-bottom: 48px;
}

.tools-hero {
  padding: 28px 4px 10px;
}

.tools-hero h1 {
  margin: 0 0 6px;
  font-size: 2rem;
  color: #111827;
}

.tools-sub {
  margin: 0;
  font-size: 0.95rem;
  color: #6b7280;
}

.tools-section-note {
  margin: -10px 0 18px;
  font-size: 13px;
  color: #6b7280;
}

/* 「旧版」小标：观感跟侧栏 .if-sidebar-mark.if-mark-legacy 一致（灰色，蓝色是 NEW 的语义） */
.tools-legacy-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 2px 6px;
  border-radius: 3px;
  background: #6b7280;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  z-index: 2;
}

/* .et-card-btn 原本是给 <button> 写的，这里让 <a> 用同一套皮肤 */
a.et-card-btn {
  display: block;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
}

/* J12：工具台「即将上线」卡片。
   置灰本体复用 ecommerce_tools.css 的 .et-card-coming-soon
   （opacity .55 + pointer-events:none + grayscale，正好是老板要的"点不进去/感觉不能点"），
   这里只补：不可点时按钮是 <span>，要跟 <a> 一样撑满居中，并且去掉 hover 变化。 */
.et-card-coming-soon .et-card-btn {
  display: block;
  box-sizing: border-box;
  text-align: center;
}

.et-card-coming-soon .et-card-btn:hover {
  opacity: 1;
}