/* ============================================
   tool.css - 工具页面样式
   复用 tutorial.css 的变量和组件样式
   by yuyu
   ============================================ */

/* ---- 页面布局 ---- */
.tool-body {
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ---- 标题区（往下移） ---- */
.tool-hero {
  text-align: center;
  padding: 100px 24px 24px;
}

.tool-hero-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 8px;
  letter-spacing: 2px;
}

/* by yuyu */
/* ---- 蓝色渐变线下方文字 ---- */
.tool-hero-text {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 24px 0 0;
  letter-spacing: 1px;
}

.tool-hero-en {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ---- 工具卡片区域 ---- */
.tool-section {
  max-width: 1000px;
  margin: 0 auto;
  padding: 16px 24px 40px;
  display: flex;
  flex-direction: column;
}

/* ---- 下载软件按钮组（复用 tutorial.css 的 .card-links 布局） ---- */
.tool-links {
  margin-top: 14px;
}

/* ---- tool.html 专属：下载按钮组下方横线增加间距 ---- */
.tool-links + .neumo-divider {
  margin-top: 80px;
}

/* by yuyu */
/* ---- 游戏按钮组与返回首页按钮之间间距 ---- */
.neumo-groups + .tool-home-btn-wrap {
  margin-top: 60px;
}

/* by yuyu */
/* ---- 返回首页按钮容器（居中，不拉伸） ---- */
.tool-home-btn-wrap {
  text-align: center;
  padding: 0 24px 20px;
}

/* ---- 返回首页区 ---- */
.tool-footer-section {
  text-align: center;
  padding: 32px 24px 24px;
}

/* ---- 页脚 ---- */
.tool-footer {
  text-align: center;
  padding: 20px 24px;
  border-top: 1px solid var(--border-color);
}

.tool-footer p {
  margin: 2px 0;
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

/* ---- 响应式 ---- */
@media (max-width: 768px) {
  .tool-hero-title {
    font-size: 26px;
  }
  .tool-hero {
    padding: 72px 16px 16px;
  }
  .tool-section {
    padding: 12px 16px 30px;
  }
}