/* ============================================================
 * tools_site.css - 工具集与「新能源助手」站点外框的衔接层
 * 说明：tools.css 由源工具集自动生成（作用域限定 .tools-wrap）；
 *       本文件为手写补充，最后加载，负责子导航样式与视觉对齐。
 *       改动请写在本文件，勿改自动生成的 tools.css。
 * ============================================================ */

/* ---------- 模块子导航（替代源工具集的顶部 nav-bar） ---------- */
.tools-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tools-subnav .nav-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.4;
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .14s;
  white-space: nowrap;
}
.tools-subnav .nav-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
}
.tools-subnav .nav-btn.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.tools-subnav .nav-btn.back {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
  font-weight: 500;
}
.tools-subnav .nav-btn.back:hover {
  background: var(--brand);
  color: #fff;
}
/* ---------- 深色模式：19 个免费工具页根容器 ----------
 * 站点 body 背景为硬编码浅色渐变（style.css 未做 dark 覆盖），
 * 工具标题/描述为浅色文字，直接落在浅底上不可读。
 * 深色下给工具根容器（.tk / .xny-p90）自身铺深色底即可。 */
html[data-theme="dark"] .tk,
html[data-theme="dark"] .xny-p90 {
  background: var(--surface, #121c2e);
  border: 1px solid var(--border, #24334e);
  border-radius: var(--radius, 12px);
  margin-top: 14px;
}
.tw-panel { padding-top: 14px; padding-bottom: 14px; }

/* ---------- 正文宽度：与原工具页一致，布满浏览器宽度 ----------
 * 各 tk_*.css 根容器默认 max-width:1180px 居中；
 * 本文件在 tk_*.css 之后加载，同优先级后者胜，覆盖为通栏。 */
.tk, .xny-p90 { max-width: none; }

/* ---------- 工具区容器：与 .panel 同宽同风格 ---------- */
.tools-wrap {
  max-width: none;
  margin: 0 auto 20px;
  padding: 0 4px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate-800);
}
/* 源工具集的 .card 在本站内改用站点圆角与阴影，避免两套视觉打架 */
.tools-wrap .card {
  border-radius: 14px;
}
/* 首屏直出的当前模块（EXTRA_HEAD 内联 #xxx-section{display:block}）
   在脚本接管后由 .active 控制；两者并存不冲突 */
.tools-wrap .tool-section.active { display: block; }

/* 图表容器在窄屏下不溢出 */
.tools-wrap canvas { max-width: 100%; }
.tools-wrap table { max-width: 100%; }

@media (max-width: 860px) {
  .tools-subnav .nav-btn { font-size: 12.5px; padding: 6px 11px; }
}

/* ---------- 工具版本徽章（h1 标题内；与设计页 .tool-ver 徽章体系一致） ---------- */
h1 .tool-ver {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .6em;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--brand, #059669);
  background: var(--brand-soft, rgba(16, 185, 129, .12));
  border: 1px solid var(--brand, #059669);
  border-radius: 999px;
  padding: 2px 10px;
  margin-left: .6em;
  vertical-align: middle;
  white-space: nowrap;
  transform: translateY(-.12em);
}