/* ============================================================
   质量部内部工具集 · 统一样式表
   仅限公司内部使用
   ============================================================ */

:root{
  /* 主色：工业深蓝 */
  --c-brand:        #1b4f8a;
  --c-brand-dark:   #143c69;
  --c-brand-light:  #e8f0f9;
  --c-brand-mid:    #4a7fb5;

  /* 状态色（中国习惯：红涨绿跌，此处用于质量判定） */
  --c-ok:           #1a7f4b;
  --c-ok-bg:        #e9f6ee;
  --c-warn:         #b8741a;
  --c-warn-bg:      #fdf4e4;
  --c-bad:          #c0392b;
  --c-bad-bg:       #fdecea;
  --c-info:         #1b4f8a;
  --c-info-bg:      #e8f0f9;

  /* 中性色 */
  --c-bg:           #f4f6f8;
  --c-surface:      #ffffff;
  --c-surface-2:    #f8fafb;
  --c-border:       #d5dbe2;
  --c-border-soft:  #e6eaef;
  --c-text:         #1c2833;
  --c-text-mid:     #4d5d6e;
  --c-text-dim:     #7b8794;

  --radius:         6px;
  --radius-sm:      4px;
  --shadow-card:    0 1px 3px rgba(28,40,51,.08), 0 1px 2px rgba(28,40,51,.04);
  --shadow-pop:     0 4px 16px rgba(28,40,51,.13);

  --font: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC",
          "Noto Sans CJK SC", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "Courier New", monospace;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--font);
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ============ 顶栏 ============ */
.topbar{
  position:sticky; top:0; z-index:200;
  background:linear-gradient(135deg,var(--c-brand-dark),var(--c-brand));
  color:#fff;
  box-shadow:0 2px 8px rgba(20,60,105,.22);
}
.topbar-inner{
  max-width:1580px; margin:0 auto;
  padding:0 20px;
  display:flex; align-items:center; gap:18px;
  height:58px;
}
.logo{
  display:flex; align-items:center; gap:11px;
  font-size:16px; font-weight:700; letter-spacing:.4px;
  white-space:nowrap;
}
.logo-mark{
  width:30px; height:30px; flex:0 0 30px;
  border-radius:5px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; letter-spacing:-.5px;
}
.logo-sub{
  font-size:11px; font-weight:400; opacity:.72;
  padding-left:11px; margin-left:11px;
  border-left:1px solid rgba(255,255,255,.28);
  letter-spacing:.5px;
}
.topnav{
  display:flex; gap:2px; margin-left:auto; flex-wrap:wrap;
}
.topnav a{
  color:rgba(255,255,255,.82); text-decoration:none;
  font-size:13px; padding:7px 13px; border-radius:var(--radius-sm);
  transition:background .16s, color .16s;
  white-space:nowrap;
}
.topnav a:hover{ background:rgba(255,255,255,.14); color:#fff; }
.topnav a.active{ background:rgba(255,255,255,.2); color:#fff; font-weight:600; }

/* 页面内的返回条 */
.crumb{
  max-width:1580px; margin:0 auto;
  padding:14px 20px 0;
}
.crumb a{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--c-brand); text-decoration:none;
  font-size:13px; padding:5px 12px;
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:var(--radius-sm); transition:all .16s;
}
.crumb a:hover{ background:var(--c-brand-light); border-color:var(--c-brand-mid); }

/* ============ 布局 ============ */
.wrap{
  max-width:1580px; margin:0 auto;
  padding:18px 20px 60px;
}
.page-head{ margin-bottom:16px; }
.page-head h1{
  font-size:20px; margin:0 0 5px; font-weight:700;
  color:var(--c-brand-dark);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.page-head p{
  margin:0; color:var(--c-text-mid); font-size:13px;
}

.tag{
  display:inline-block; font-size:11px; font-weight:600;
  padding:2px 8px; border-radius:10px;
  background:var(--c-brand-light); color:var(--c-brand);
  border:1px solid #c7d9ec; vertical-align:middle;
}
.tag-gray{ background:#eef1f4; color:var(--c-text-dim); border-color:var(--c-border-soft); }
.tag-ok{ background:var(--c-ok-bg); color:var(--c-ok); border-color:#b8dfc8; }
.tag-warn{ background:var(--c-warn-bg); color:var(--c-warn); border-color:#ecd5ab; }
.tag-bad{ background:var(--c-bad-bg); color:var(--c-bad); border-color:#f2c2ba; }

.cols{ display:grid; gap:16px; }
.cols-2{ grid-template-columns:minmax(340px,410px) minmax(0,1fr); }
.cols-2b{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:1180px){
  .cols-2,.cols-2b,.cols-3{ grid-template-columns:minmax(0,1fr); }
}

/* ============ 卡片 ============ */
.card{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  margin-bottom:16px;
  overflow:hidden;
}
.card-head{
  display:flex; align-items:center; gap:10px;
  padding:11px 16px;
  background:var(--c-surface-2);
  border-bottom:1px solid var(--c-border-soft);
  font-size:13.5px; font-weight:700; color:var(--c-brand-dark);
}
.card-head .num{
  width:20px; height:20px; flex:0 0 20px;
  border-radius:50%; background:var(--c-brand); color:#fff;
  font-size:11.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.card-head .spacer{ margin-left:auto; }
.card-body{ padding:15px 16px; }
.card-body.tight{ padding:0; }

/* ============ 表单 ============ */
.field{ margin-bottom:12px; }
.field:last-child{ margin-bottom:0; }
.field label{
  display:block; font-size:12px; font-weight:600;
  color:var(--c-text-mid); margin-bottom:4px;
}
.field label .req{ color:var(--c-bad); margin-left:2px; }
.field .hint{
  font-size:11.5px; color:var(--c-text-dim);
  margin-top:4px; line-height:1.5;
}

input[type=text],input[type=number],select,textarea{
  width:100%; padding:7px 10px;
  border:1px solid var(--c-border);
  border-radius:var(--radius-sm);
  font-family:var(--font); font-size:13px;
  color:var(--c-text); background:#fff;
  transition:border-color .16s, box-shadow .16s;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--c-brand-mid);
  box-shadow:0 0 0 2.5px rgba(74,127,181,.15);
}
textarea{
  font-family:var(--font-mono); font-size:12.5px;
  line-height:1.55; resize:vertical;
}
select[multiple]{ padding:4px; }

.row{ display:grid; gap:10px; }
.row-2{ grid-template-columns:1fr 1fr; }
.row-3{ grid-template-columns:repeat(3,1fr); }
.row-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:640px){ .row-2,.row-3,.row-4{ grid-template-columns:1fr; } }

.check-row{
  display:flex; align-items:flex-start; gap:8px;
  font-size:12.5px; color:var(--c-text-mid);
  padding:5px 0; cursor:pointer;
}
.check-row input[type=checkbox]{ margin-top:3px; flex:0 0 auto; }
.check-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px 14px; }

/* 分段按钮组 */
.seg{
  display:inline-flex; border:1px solid var(--c-border);
  border-radius:var(--radius-sm); overflow:hidden; background:#fff;
  flex-wrap:wrap;
}
.seg button{
  border:0; background:transparent; cursor:pointer;
  padding:6px 13px; font-size:12.5px; font-family:var(--font);
  color:var(--c-text-mid);
  border-right:1px solid var(--c-border-soft);
  transition:background .14s,color .14s;
}
.seg button:last-child{ border-right:0; }
.seg button:hover{ background:var(--c-brand-light); }
.seg button.on{
  background:var(--c-brand); color:#fff; font-weight:600;
}

/* ============ 按钮 ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 17px;
  border:1px solid var(--c-brand);
  background:var(--c-brand); color:#fff;
  border-radius:var(--radius-sm);
  font-family:var(--font); font-size:13px; font-weight:600;
  cursor:pointer; transition:all .16s; white-space:nowrap;
}
.btn:hover{ background:var(--c-brand-dark); border-color:var(--c-brand-dark); }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-ghost{
  background:#fff; color:var(--c-brand); border-color:var(--c-border);
}
.btn-ghost:hover{ background:var(--c-brand-light); border-color:var(--c-brand-mid); color:var(--c-brand-dark); }
.btn-sm{ padding:5px 11px; font-size:12px; }
.btn-block{ width:100%; }
.btn-row{ display:flex; gap:8px; flex-wrap:wrap; }

/* ============ 表格 ============ */
.tbl-wrap{ overflow:auto; max-height:560px; }
table.tbl{
  width:100%; border-collapse:collapse;
  font-size:12.5px;
}
table.tbl th{
  position:sticky; top:0; z-index:1;
  background:#eef2f6; color:var(--c-brand-dark);
  font-weight:700; text-align:left;
  padding:8px 10px; white-space:nowrap;
  border-bottom:1.5px solid var(--c-border);
  font-size:12px;
}
table.tbl td{
  padding:6px 10px;
  border-bottom:1px solid var(--c-border-soft);
  vertical-align:top;
}
table.tbl tbody tr:hover{ background:var(--c-brand-light); }
table.tbl td.num,table.tbl th.num{ text-align:right; font-family:var(--font-mono); }
table.tbl td.ctr,table.tbl th.ctr{ text-align:center; }
table.tbl .hl{ background:#fff8e6; font-weight:600; }

/* ============ 统计结果块 ============ */
.kpis{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
}
.kpi{
  background:var(--c-surface-2);
  border:1px solid var(--c-border-soft);
  border-left:3px solid var(--c-brand-mid);
  border-radius:var(--radius-sm);
  padding:9px 12px;
}
.kpi .k{
  font-size:11px; color:var(--c-text-dim);
  display:block; margin-bottom:3px; line-height:1.35;
}
.kpi .v{
  font-size:17px; font-weight:700; font-family:var(--font-mono);
  color:var(--c-brand-dark); line-height:1.25;
}
.kpi .u{ font-size:11px; color:var(--c-text-dim); font-weight:400; margin-left:2px; }
.kpi-sub{ margin-top:3px; font-size:11px; color:var(--c-text-dim); line-height:1.45; }
.kpi.ok{ border-left-color:var(--c-ok); }
.kpi.ok .v{ color:var(--c-ok); }
.kpi.warn{ border-left-color:var(--c-warn); }
.kpi.warn .v{ color:var(--c-warn); }
.kpi.bad{ border-left-color:var(--c-bad); }
.kpi.bad .v{ color:var(--c-bad); }

/* 提示条 */
.note{
  border-radius:var(--radius-sm);
  padding:10px 13px; font-size:12.5px;
  border:1px solid; margin-bottom:12px; line-height:1.65;
}
.note:last-child{ margin-bottom:0; }
.note b{ font-weight:700; }
.note-info{ background:var(--c-info-bg); border-color:#c7d9ec; color:#173f6e; }
.note-ok{ background:var(--c-ok-bg); border-color:#b8dfc8; color:#14603a; }
.note-warn{ background:var(--c-warn-bg); border-color:#ecd5ab; color:#8a5710; }
.note-bad{ background:var(--c-bad-bg); border-color:#f2c2ba; color:#93271b; }
.note ul{ margin:6px 0 0; padding-left:20px; }
.note li{ margin:2px 0; }

/* 结论卡 */
.verdict{
  border-radius:var(--radius); border:1.5px solid;
  padding:14px 17px; margin-bottom:14px;
}
.verdict .vt{ font-size:15px; font-weight:700; margin-bottom:6px; }
.verdict .vd{ font-size:12.8px; line-height:1.7; }
.verdict-ok{ background:var(--c-ok-bg); border-color:#8fcdaa; color:#14603a; }
.verdict-warn{ background:var(--c-warn-bg); border-color:#e3c58c; color:#8a5710; }
.verdict-bad{ background:var(--c-bad-bg); border-color:#e9a99f; color:#93271b; }

/* ============ 图表 ============ */
.chart-box{
  background:var(--c-surface-2);
  border:1px solid var(--c-border-soft);
  border-radius:var(--radius-sm);
  padding:10px 8px 4px; margin-bottom:12px;
}
.chart-box:last-child{ margin-bottom:0; }
.chart-title{
  font-size:12.5px; font-weight:700; color:var(--c-brand-dark);
  padding:0 8px 6px;
}
canvas{ display:block; width:100%; }

/* ============ 工具网格（首页） ============ */
.tool-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.tool-card{
  display:flex; flex-direction:column;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  padding:17px 18px;
  text-decoration:none; color:inherit;
  transition:box-shadow .18s, transform .18s, border-color .18s;
  position:relative;
}
.tool-card:hover{
  box-shadow:var(--shadow-pop);
  transform:translateY(-2px);
  border-color:var(--c-brand-mid);
}
.tool-card .tc-ico{
  width:36px; height:36px; border-radius:7px;
  background:var(--c-brand-light); color:var(--c-brand);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:800; margin-bottom:11px;
  border:1px solid #c7d9ec;
}
.tool-card h3{
  margin:0 0 6px; font-size:15px; color:var(--c-brand-dark);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.tool-card p{
  margin:0; font-size:12.5px; color:var(--c-text-mid);
  line-height:1.65; flex:1;
}
.tool-card .tc-foot{
  margin-top:12px; padding-top:10px;
  border-top:1px dashed var(--c-border-soft);
  font-size:11.5px; color:var(--c-text-dim);
  display:flex; gap:6px; flex-wrap:wrap;
}
.tool-card.disabled{ opacity:.62; cursor:not-allowed; }
.tool-card.disabled:hover{ transform:none; box-shadow:var(--shadow-card); border-color:var(--c-border); }

/* ============ 折叠面板 ============ */
details.acc{
  border:1px solid var(--c-border-soft);
  border-radius:var(--radius-sm);
  margin-bottom:8px; background:var(--c-surface-2);
}
details.acc summary{
  cursor:pointer; padding:9px 13px;
  font-size:12.8px; font-weight:600; color:var(--c-brand-dark);
  list-style:none; user-select:none;
  display:flex; align-items:center; gap:7px;
}
details.acc summary::-webkit-details-marker{ display:none; }
details.acc summary::before{
  content:"▸"; color:var(--c-brand-mid);
  font-size:11px; transition:transform .18s;
}
details.acc[open] summary::before{ transform:rotate(90deg); }
details.acc .acc-body{
  padding:2px 13px 12px 26px;
  font-size:12.4px; color:var(--c-text-mid); line-height:1.7;
}
details.acc .acc-body p{ margin:5px 0; }
details.acc .acc-body code{
  font-family:var(--font-mono); font-size:12px;
  background:#eef2f6; padding:1px 5px; border-radius:3px;
  color:var(--c-brand-dark);
}
details.acc .acc-body ul{ margin:5px 0; padding-left:20px; }
details.acc .acc-body li{ margin:2px 0; }

/* ============ 徽标 / 空状态 ============ */
.empty{
  text-align:center; padding:44px 20px;
  color:var(--c-text-dim); font-size:13px;
}
.empty .ei{ font-size:32px; opacity:.35; display:block; margin-bottom:10px; }

/* 说明性要点列表（几何工具的计算说明等） */
.bullets{ margin:0; padding-left:20px; }
.bullets li{ margin:6px 0; line-height:1.65; font-size:13px; color:var(--c-text); }
.bullets li strong{ color:var(--c-brand); }

.spin{
  display:inline-block; width:13px; height:13px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff; border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* 图例 */
.legend{
  display:flex; gap:14px; flex-wrap:wrap;
  font-size:11.5px; color:var(--c-text-mid);
  padding:6px 10px 2px;
}
.legend span{ display:inline-flex; align-items:center; gap:5px; }
.legend i{
  width:15px; height:3px; border-radius:2px; display:inline-block;
}

/* 尺寸标注小图 */
.thread-fig{ margin:0 auto 12px; display:block; max-width:100%; }

/* ---------- 面板与引导文字 ---------- */
.panel{ display:block; }
.panel[hidden]{ display:none; }

/* hidden 属性的统一兜底。
   浏览器默认的 [hidden]{display:none} 只是 UA 样式表里的一条普通规则，
   任何带 display 的类（.btn{display:flex}、.tag{display:inline-block} 等）
   都会把它覆盖掉，元素看似隐藏实则仍在页面上占位。
   这里用 !important 统一压住，避免逐类补 [hidden] 规则。
   注意：.panel[hidden] 上面的规则保留，语义更清晰。 */
[hidden]{ display:none !important; }

.lead{
  margin:0 0 16px; padding:0 2px;
  font-size:13px; line-height:1.75; color:var(--c-text-mid);
  max-width:96ch;
}
.lead strong{ color:var(--c-text); }

/* ---------- 工具卡片（首页入口） ---------- */
.tool-grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
}
.tool-card{
  display:block; padding:14px 16px;
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:var(--radius); box-shadow:var(--shadow-card);
  text-decoration:none; color:inherit; cursor:pointer;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.tool-card:hover{
  border-color:var(--c-brand); box-shadow:var(--shadow-pop); transform:translateY(-1px);
}
.tool-card-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:7px;
}
.tool-card-head h4{
  margin:0; font-size:14.5px; font-weight:700; color:var(--c-brand-dark);
  letter-spacing:.2px;
}
.tool-card-head .tag{ flex:none; }
.tool-card p{
  margin:0; font-size:12.5px; line-height:1.65; color:var(--c-text-dim);
}
.tool-go{
  display:inline-flex; align-items:center; gap:4px;
  margin-top:10px; font-size:12px; font-weight:600; color:var(--c-brand);
}
.tool-card:hover .tool-go{ color:var(--c-brand-dark); }

/* ---------- 公差带小标签 ---------- */
.tol-chips{ display:flex; gap:6px; flex-wrap:wrap; margin:2px 0 12px; }
.tol-chip{
  padding:3px 9px; font-size:12px; font-family:var(--font-mono);
  background:var(--c-brand-light); color:var(--c-brand-dark);
  border:1px solid #cfe0f0; border-radius:99px; cursor:pointer;
  transition:background .15s, border-color .15s;
}
.tol-chip:hover{ background:#dbe8f5; border-color:var(--c-brand-mid); }
.tol-chip.on{ background:var(--c-brand); color:#fff; border-color:var(--c-brand); }

/* ============================================================================
 * 报告式分析（SPC 全要素报告）
 * ========================================================================== */
.report-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
  flex-wrap:wrap;
  padding:14px 16px; margin-bottom:14px;
  background:linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-dark) 100%);
  border-radius:var(--radius); color:#fff; box-shadow:var(--shadow-card);
}
.report-head-title{ font-size:17px; font-weight:700; letter-spacing:.3px; }
.report-head-sub{ margin-top:4px; font-size:12px; opacity:.85; }
.report-head-brand{ font-size:11.5px; opacity:.9; text-align:right; line-height:1.5; }

/* 要素编号徽标 */
.sec-tag2{
  display:inline-block; margin-right:8px; padding:1px 7px;
  font-size:10.5px; font-weight:700; font-family:var(--font-mono);
  background:var(--c-brand-light); color:var(--c-brand-dark);
  border:1px solid #cfe0f0; border-radius:3px; vertical-align:1px;
}
.sec-no{
  display:inline-block; min-width:22px; margin-right:7px; padding:1px 5px;
  font-size:10px; font-weight:700; font-family:var(--font-mono); text-align:center;
  background:var(--c-brand); color:#fff; border-radius:3px;
}
.sec-lead{
  margin:0 0 12px; padding:9px 12px; font-size:12.5px; line-height:1.75;
  color:var(--c-text-mid); background:var(--c-surface-2);
  border-left:3px solid var(--c-brand-mid); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}

/* 图表网格 */
.charts-grid-3{ display:grid; grid-template-columns:repeat(auto-fit, minmax(330px,1fr)); gap:12px; }
.charts-grid-2{ display:grid; grid-template-columns:repeat(auto-fit, minmax(360px,1fr)); gap:12px; }
.chart-cell{
  border:1px solid var(--c-border-soft); border-radius:var(--radius-sm);
  background:var(--c-surface); overflow:hidden;
}
.chart-cell-title{
  padding:8px 11px; font-size:12.5px; font-weight:600; color:var(--c-text);
  background:var(--c-surface-2); border-bottom:1px solid var(--c-border-soft);
  display:flex; align-items:center;
}
.chart-cell-svg{ padding:8px 9px 2px; }
.chart-cell-cap{
  padding:7px 11px 10px; font-size:11.5px; line-height:1.72; color:var(--c-text-dim);
  border-top:1px dashed var(--c-border-soft); margin-top:4px;
}
.chart-cell-cap b{ color:var(--c-text-mid); }

/* 三列统计：给「分布分位数」列更宽的下限（它含 3 列表格且标签较长） */
.stats-grid-3{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  gap:14px; align-items:start;
}
.stats-grid-3 > *{ min-width:0; }
.stats-grid-3 .statscol{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.statscol h5{
  margin:0 0 7px; font-size:12.5px; font-weight:700; color:var(--c-brand-dark);
  padding-bottom:5px; border-bottom:2px solid var(--c-brand-light);
}
/* 表内标签禁止在词中间断行（中文长标签宁可换行在斜杠/括号处） */
.statscol td:first-child, .statscol th:first-child{ word-break:keep-all; }
.statscol td:nth-child(2){ white-space:nowrap; }
.statscol .tbl{ min-width:100%; }
.panel-sub{
  font-size:12px; font-weight:600; color:var(--c-text-mid);
  margin:0 0 6px; padding-left:2px;
}
.row-hl{ background:var(--c-brand-light) !important; }
.row-hl td{ font-weight:600; }

/* 指标卡 */
.metric-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:10px; margin-bottom:12px; }
.metric-card{
  padding:12px 13px; border:1px solid var(--c-border-soft); border-radius:var(--radius-sm);
  background:var(--c-surface); border-left:3px solid var(--c-border);
}
.metric-card--ok{ border-left-color:var(--c-ok); background:var(--c-ok-bg); }
.metric-card--warn{ border-left-color:var(--c-warn); background:var(--c-warn-bg); }
.metric-card--fail{ border-left-color:var(--c-bad); background:var(--c-bad-bg); }
.metric-card-label{ font-size:11.5px; color:var(--c-text-dim); margin-bottom:3px; }
.metric-card-value{
  font-size:22px; font-weight:700; font-family:var(--font-mono);
  color:var(--c-text); line-height:1.2;
}
.metric-card--ok .metric-card-value{ color:var(--c-ok); }
.metric-card--warn .metric-card-value{ color:var(--c-warn); }
.metric-card--fail .metric-card-value{ color:var(--c-bad); }
.metric-card-sub{ margin-top:4px; font-size:11px; color:var(--c-text-dim); line-height:1.5; }

/* 结论框 */
.conclusion-box{
  padding:13px 15px; border-radius:var(--radius-sm);
  border:1px solid var(--c-border-soft); background:var(--c-surface-2);
}
.conclusion-box--pass{ background:var(--c-ok-bg); border-color:#b6ddc5; }
.conclusion-box--fail{ background:var(--c-bad-bg); border-color:#f0c4be; }
.conclusion-box-title{
  font-size:13.5px; font-weight:700; margin-bottom:8px; color:var(--c-text);
}
.conclusion-box--pass .conclusion-box-title{ color:var(--c-ok); }
.conclusion-box--fail .conclusion-box-title{ color:var(--c-bad); }
ul.concl{ margin:0; padding-left:19px; }
ul.concl li{ font-size:12.5px; line-height:1.85; color:var(--c-text-mid); margin-bottom:3px; }
ul.concl li b{ color:var(--c-text); }

/* 导出工具条 */
.export-bar{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  padding:8px 11px; margin-bottom:12px;
  background:var(--c-surface-2); border:1px solid var(--c-border-soft);
  border-radius:var(--radius-sm);
}
.export-bar-label{
  font-size:11.5px; font-weight:600; color:var(--c-text-dim); margin-right:3px;
}
.export-bar-title{
  font-size:11.5px; font-weight:700; color:var(--c-brand);
  letter-spacing:.06em; text-transform:uppercase; margin-right:3px;
  padding-right:9px; border-right:1px solid var(--c-border-soft);
}
.export-bar-hint{
  font-size:11px; color:var(--c-text-dim); margin-left:auto; line-height:1.5;
}
.export-bar .btn-sm{ font-size:11.5px; padding:4px 10px; }

/* 站点页脚 */
.site-footer{
  margin-top:26px; padding:18px 20px;
  background:var(--c-surface); border-top:1px solid var(--c-border-soft);
}
.site-footer-inner{
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.site-footer-brand{ display:flex; align-items:center; gap:10px; }
.site-footer-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:var(--radius-sm);
  background:var(--c-brand); color:#fff; font-weight:700; font-size:13px;
  letter-spacing:.5px; flex-shrink:0;
}
.site-footer-name{ font-size:12.5px; font-weight:600; color:var(--c-text); }
.site-footer-sub{ font-size:11px; color:var(--c-text-dim); margin-top:2px; }
.site-footer-meta{ font-size:11px; color:var(--c-text-dim); display:flex; gap:7px; flex-wrap:wrap; }

/* ============================================================================
 * 进入密码闸门（配合 mima.js / gate.js）
 * ----------------------------------------------------------------------------
 * gate.js 在 <head> 里就把 data-qc-locked 挂到 <html> 上，所以这里一上来
 * 就能把整页内容藏住，不会出现「先渲染一大屏、再被密码框盖住」的闪烁。
 * 锁着的时候 body 的直接子元素全部隐藏，只留下密码页本身（#qcGate）。
 * ========================================================================== */
html[data-qc-locked]{ overflow:hidden; }
html[data-qc-locked] body > *:not(#qcGate){ display:none !important; }

.qc-gate{
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  padding:22px; box-sizing:border-box;
  background:linear-gradient(160deg,#eef3f8 0%,#dde7f2 100%);
}
.qc-gate-box{
  width:100%; max-width:352px; box-sizing:border-box; text-align:center;
  background:#fff; border:1px solid var(--c-border-soft); border-radius:14px;
  box-shadow:0 18px 48px rgba(18,48,84,.16); padding:26px 24px 20px;
}
.qc-gate-mark{
  width:46px; height:46px; margin:0 auto 12px; border-radius:12px;
  background:var(--c-brand); color:#fff; font-size:16px; font-weight:800; letter-spacing:.5px;
  display:flex; align-items:center; justify-content:center;
}
.qc-gate-title{ font-size:16px; font-weight:800; color:var(--c-brand-dark); }
.qc-gate-sub{ font-size:11.5px; color:var(--c-text-dim); margin-top:3px; }
.qc-gate-label{ display:block; text-align:left; font-size:12px; font-weight:600; color:var(--c-text-mid); margin:20px 0 6px; }
.qc-gate-row{ display:flex; gap:8px; }
.qc-gate-row input{
  flex:1; min-width:0; box-sizing:border-box; border:1px solid var(--c-border);
  border-radius:var(--radius-sm); padding:9px 11px; font-family:var(--font); font-size:13px; color:var(--c-text);
}
.qc-gate-row input:focus{ outline:0; border-color:var(--c-brand-mid); box-shadow:0 0 0 3px rgba(74,127,181,.16); }
.qc-gate-row .btn{ flex:none; }
.qc-gate-msg{ min-height:17px; margin-top:9px; font-size:11.5px; line-height:1.6; color:var(--c-text-dim); text-align:left; }
.qc-gate-msg.bad{ color:var(--c-bad); }
.qc-gate-note{
  margin-top:12px; padding-top:11px; border-top:1px dashed var(--c-border-soft);
  font-size:11px; line-height:1.7; color:var(--c-text-dim); text-align:left;
}

/* ============================================================================
 * 响应式：平板与手机
 * ========================================================================== */
@media (max-width: 1024px){
  .wrap{ padding-left:14px; padding-right:14px; }
  .charts-grid-3, .charts-grid-2{ grid-template-columns:1fr; }
  .stats-grid-3{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  :root{ --radius:5px; }
  .topbar-inner{ flex-direction:column; align-items:flex-start; gap:0; height:auto; padding:10px 14px 0; }
  .topnav{
    width:100%; margin-left:0; flex-wrap:wrap;
    overflow-x:visible; padding-bottom:8px; gap:4px;
  }
  .topnav a{ white-space:nowrap; font-size:12.5px; padding:6px 11px; }
  .logo-sub{ display:none; }
  /* 关键：单列时必须写 minmax(0,1fr) 而不是 1fr。
     1fr ≡ minmax(auto,1fr)，auto 下限 = 内容的 min-content，
     会被内部 .seg / .check-grid / textarea 撑到 400px+，把整页顶宽出横向滚动条。
     同时给网格直接子项显式 min-width:0，彻底切断 min-content 传递。 */
  .cols, .cols-2, .cols-2b, .cols-3{ grid-template-columns:minmax(0,1fr) !important; }
  .cols > *, .cols-2 > *, .cols-2b > *, .cols-3 > *{ min-width:0; }
  .row-2, .row-3, .row-4{ grid-template-columns:minmax(0,1fr) !important; }
  .row-2 > *, .row-3 > *, .row-4 > *{ min-width:0; }
  .kpis{ grid-template-columns:repeat(auto-fit, minmax(130px,1fr)); gap:8px; }
  .metric-grid{ grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); }
  .report-head{ flex-direction:column; align-items:flex-start; }
  .report-head-brand{ text-align:left; }
  h1{ font-size:19px; }
  /* 图表：宽度跟随容器（不自撑），需要时在卡片内部横向滚动，
     绝不把 <body> 顶宽导致整页左右晃动 */
  .chart-cell{ min-width:0; }
  .chart-cell-svg{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .chart-cell-svg svg{ min-width:0; width:100%; }
  .tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .site-footer-inner{ flex-direction:column; align-items:flex-start; gap:10px; }
  .export-bar{ position:static; }
  .export-bar-hint{ margin-left:0; width:100%; }
  /* 兜底：任何面板内容都不得把页面顶宽 */
  .panel, .card, .card-body, .cols, .cols-2, .cols-3{ min-width:0; max-width:100%; }
}
@media (max-width: 420px){
  .wrap{ padding-left:10px; padding-right:10px; }
  .metric-card-value{ font-size:19px; }
  .chart-cell-svg svg{ min-width:0; }
  .kpis{ grid-template-columns:1fr 1fr; }
}

/* 打印 */
@media print{
  .topbar,.topnav,.crumb,.btn,.btn-row,.seg,.tool-grid,
  .export-bar,.site-footer,.empty{ display:none !important; }
  body{ background:#fff; }
  .panel[hidden]{ display:block !important; }
  .card,.chart-cell,.metric-card,.conclusion-box{ box-shadow:none; break-inside:avoid; }
  .report-head{ background:#1b4f8a !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .charts-grid-3,.charts-grid-2{ display:block; }
  .chart-cell{ margin-bottom:10px; }
  @page{ margin:12mm; }
}