/* 由 public/tools 原静态页样式迁移并按 .tool-root 作用域化，勿手工同步旧文件 */

/* 工具页局部变量：全部映射到站点 CSS 变量，深浅色主题自动跟随 */
.tool-root{
  --tl-bg: var(--bg-subtle);
  --tl-panel: var(--bg-elevated);
  --tl-line: var(--border);
  --tl-line-strong: color-mix(in srgb, var(--border) 65%, var(--text) 12%);
  --tl-ink: var(--text);
  --tl-ink-2: var(--text-soft);
  --tl-ink-3: var(--text-faint);
  --tl-accent: var(--brand);
  --tl-accent-soft: var(--brand-soft);
  --tl-ok: #12805c; --tl-warn: #b45309; --tl-bad: #b42318; --tl-bad-soft: #fef3f2;
  --tl-mono: ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --tl-radius: 12px;
  background: var(--tl-bg);
  color: var(--tl-ink);
  font: 15px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 34px;
}
.tool-root, .tool-root *, .tool-root *::before, .tool-root *::after { box-sizing: border-box; }
/* 页头：站点顶栏已承担吸顶，这里只做标题行 */
.tool-root .tool-head{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding:20px 22px 0;
}
.tool-root .tool-head h1{font-size:20px; margin:0; font-weight:650; letter-spacing:.2px}
.tool-root .tool-head .sub{color:var(--tl-ink-3); font-size:12.5px}
.tool-root .tool-head .badge{
  margin-left:auto; font-size:12px; color:var(--tl-accent);
  background:var(--tl-accent-soft); border:1px solid color-mix(in srgb, var(--tl-accent) 22%, transparent);
  border-radius:999px; padding:2px 10px;
}
.tool-root .bar{background:var(--tl-panel); border-bottom:1px solid var(--tl-line); padding:10px 22px;
    display:flex; gap:10px; align-items:center; flex-wrap:wrap; position:sticky; top:var(--header-h); z-index:20}
.tool-root .bar select, .tool-root .bar input[type=search]{font:inherit; font-size:13.5px; padding:5px 8px; border:1px solid var(--tl-line-strong);
    border-radius:7px; background:var(--tl-panel); color:var(--tl-ink)}
.tool-root .bar select:focus, .tool-root .bar input:focus{outline:0; border-color:var(--tl-accent); box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.tool-root .bar input[type=search]{min-width:210px}
.tool-root .bar .lbl{font-size:12.5px; color:var(--tl-ink-3)}
.tool-root .bar .sp{flex:1}
.tool-root .btn{border:1px solid var(--tl-line-strong); background:var(--tl-panel); color:var(--tl-ink-2); border-radius:7px;
    padding:5px 11px; font:inherit; font-size:12.8px; cursor:pointer}
.tool-root .btn:hover{background:var(--tl-bg)}
.tool-root .btn.on{background:var(--tl-accent-soft); border-color:color-mix(in srgb, var(--tl-accent) 32%, transparent); color:var(--tl-accent)}
.tool-root .stat{background:var(--tl-panel); border-bottom:1px solid var(--tl-line); padding:9px 22px; display:flex;
    gap:18px; align-items:center; flex-wrap:wrap; font-size:12.8px; color:var(--tl-ink-2)}
.tool-root .stat b{color:var(--tl-accent); font-size:15px; font-family:var(--tl-mono)}
.tool-root .stat .prog{flex:1; min-width:160px; height:6px; background:var(--tl-line); border-radius:999px; overflow:hidden}
.tool-root .stat .prog i{display:block; height:100%; width:0; background:var(--tl-ok); transition:width .2s}
.tool-root .stat .tip{color:var(--tl-ink-3); font-size:12.3px}
.tool-root .wrap{max-width:1180px; margin:0 auto; padding:16px 22px 80px}
.tool-root .tipcard{background:var(--tl-bg); border:1px solid var(--tl-line); border-radius:var(--tl-radius); padding:11px 14px;
    font-size:13px; color:var(--tl-ink-2); margin-bottom:14px; display:none}
.tool-root .tipcard b{color:var(--tl-ink)}
.tool-root .sec{margin:22px 0 8px; font-size:13px; color:var(--tl-ink-3); letter-spacing:.4px; display:flex; gap:8px; align-items:center}
.tool-root .sec:after{content:""; flex:1; height:1px; background:var(--tl-line)}
.tool-root .row{background:var(--tl-panel); border:1px solid var(--tl-line); border-radius:9px; padding:11px 13px; margin-bottom:8px;
    display:grid; grid-template-columns:22px minmax(0,1fr); gap:10px; transition:border-color .15s, background .15s}
.tool-root .row:hover{border-color:var(--tl-line-strong)}
.tool-root .row.done{background:var(--tl-bg); border-color:var(--tl-line)}
.tool-root .row.done .what{text-decoration:line-through; text-decoration-color:var(--tl-line-strong)}
.tool-root .row input{margin:4px 0 0; width:15px; height:15px; accent-color:var(--tl-ok); cursor:pointer}
.tool-root .hd{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; margin-bottom:3px}
.tool-root .id{font-family:var(--tl-mono); font-size:12px; color:var(--tl-ink-3); border:1px solid var(--tl-line);
    border-radius:5px; padding:0 6px; background:var(--tl-bg)}
.tool-root .cat{font-size:11.5px; font-weight:700; border-radius:5px; padding:0 6px; line-height:1.6}
.tool-root .cat.A{color:#9d261d; background:var(--tl-bad-soft); border:1px solid #f8d3cf}
.tool-root .cat.B{color:#8a4b06; background:#fff8ed; border:1px solid #f6dfb8}
.tool-root .cat.C{color:#0f6b4d; background:#effaf4; border:1px solid #cdefe0}
.tool-root .fam{font-size:11.3px; color:#4b6ea8; background:color-mix(in srgb, var(--tl-accent) 6%, var(--tl-panel)); border:1px solid color-mix(in srgb, var(--tl-accent) 18%, transparent); border-radius:999px; padding:0 7px}
.tool-root .what{font-weight:600; font-size:14px}
/* 「怎么查 / 不合格后果 / 审查记录」三行统一布局：固定标签列，内容左缘对齐。
   注意：base.css 有全局 .kv{display:grid;grid-template-columns:96px}，必须在此显式覆盖，
   否则「怎么查」行内容被推到 96px 之后，与「不合格后果」行内排布间距不一致。 */
.tool-root .kv, .tool-root .bad, .tool-root .note{
  display:grid; grid-template-columns:66px minmax(0,1fr); gap:0 8px; align-items:baseline}
.tool-root .kv{margin-top:5px; font-size:13px; color:var(--tl-ink-2); line-height:1.72}
.tool-root .kv em{font-style:normal; color:var(--tl-ink-3); font-size:12.2px}
.tool-root .bad{margin-top:5px; font-size:12.7px; color:#9d261d; line-height:1.72}
.tool-root .bad em{font-style:normal; color:#c0766e; font-size:12.2px}
.tool-root .ref{margin-top:5px; font-size:11.8px; color:var(--tl-ink-3); font-family:var(--tl-mono)}
/* 审查记录：勾选后出现，导出报告时写入；textarea 自适应高度，选中态不变灰 */
.tool-root .note{margin-top:5px; align-items:start}
.tool-root .note em{font-style:normal; color:var(--tl-accent); font-size:12.2px; line-height:1.72}
.tool-root .note textarea{font:inherit; font-size:12.5px; line-height:1.6; padding:6px 9px; width:100%;
  min-height:64px; max-height:240px; resize:vertical;
  border:1px dashed var(--tl-line-strong); border-radius:6px; background:var(--tl-panel); color:var(--tl-ink);
  display:block}
.tool-root .row.done .note textarea{background:var(--tl-panel)}
.tool-root .note textarea:focus{outline:0; border-style:solid; border-color:var(--tl-accent)}
.tool-root .note textarea::placeholder{color:var(--tl-ink-3)}
/* 分页 */
.tool-root .pg{display:flex; gap:6px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:18px}
.tool-root .pg .btn{min-width:32px; padding:4px 10px}
.tool-root .pg .btn.cur{background:var(--tl-accent-soft); color:var(--tl-accent); font-weight:600;
  border-color:color-mix(in srgb, var(--tl-accent) 32%, transparent)}
.tool-root .pg .btn:disabled{opacity:.45; cursor:default}
.tool-root .pg .info{font-size:12.3px; color:var(--tl-ink-3); margin:0 8px}
.tool-root .empty{text-align:center; color:var(--tl-ink-3); font-size:13.5px; padding:60px 0}
.tool-root footer.foot{color:var(--tl-ink-3); font-size:12px; padding:0 22px 30px; max-width:1180px; margin:0 auto; line-height:1.8}
@media (max-width:760px){.tool-root .wrap{padding:12px}
.tool-root .bar{padding:9px 12px}
.tool-root .bar select, .tool-root .bar input[type=search]{flex:1 1 auto; min-width:0}
.tool-root .stat{padding:9px 12px; gap:12px}}
@media print{.tool-root .bar, .tool-root .stat, .tool-root .btn, .tool-root header.top .badge{display:none}
.tool-root .row{break-inside:avoid; border-color:var(--tl-line-strong)}}
/* ---------- 容器内布局适配 ---------- */
.tool-root .tool-head{padding:18px 2px 0}
.tool-root .bar{margin-top:16px; border:1px solid var(--tl-line); border-radius:12px; padding:10px 14px}
.tool-root .stat{border:1px solid var(--tl-line); border-radius:12px; margin-top:10px; padding:9px 14px}
.tool-root .wrap{padding:16px 2px 50px; max-width:none; margin:0}
.tool-root footer.foot{padding:0 2px 10px; max-width:none; margin:0 auto}
@media (max-width:760px){.tool-root .tool-head{padding:12px 2px 0}.tool-root .bar{margin-top:12px}}

/* ---------- 手机：筛选条改成规整的六格网格，控件不再忽宽忽窄 ---------- */
@media (max-width:760px){
  .tool-root .bar{
    position:static;              /* 控件堆起来后不再吸顶，避免占掉半屏 */
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:8px;
    padding:10px 12px;
  }
  .tool-root .bar .lbl,
  .tool-root .bar .sp{display:none}
  .tool-root .bar select,
  .tool-root .bar input[type=search],
  .tool-root .bar .btn{
    width:100%; min-width:0; height:38px; font-size:13.5px;
  }
  .tool-root .bar #fInd,
  .tool-root .bar #fQ{grid-column:1 / -1}
  .tool-root .bar #fSec,
  .tool-root .bar #fCat{grid-column:span 3}
  .tool-root .bar .btn{grid-column:span 2}
}

/* 勾选框顶对齐：清单行很长时不至于飘到卡片中间 */
.tool-root .row > input[type=checkbox]{align-self:start}