/* 环境检测页 */
.env-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--bg-main);border-radius:12px;padding:14px 18px;box-shadow:var(--shadow);margin-bottom:14px}
.env-head .st{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;white-space:nowrap}
.env-head .dot{width:20px;height:20px;border-radius:50%;background:var(--ok);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;flex:none}
.env-head .sum{font-size:13px;color:var(--text-secondary)}
.env-head .btn{margin-left:auto}
/* 进度条和百分比绑在同一个 flex 容器里，换行时不会被拆到两行去 */
.bar-wrap{display:flex;align-items:center;gap:10px;flex:1;min-width:200px}
.bar{flex:1;min-width:120px;height:7px;border-radius:4px;background:var(--bg-secondary);overflow:hidden}
/* 必须 display:block —— span 默认是行内元素，行内元素忽略 width/height，
   这条之前漏了，所以进度/分数条一直是空的 */
.bar-fill{display:block;position:relative;height:100%;border-radius:4px;background:linear-gradient(90deg,#3aa7f0,#22c55e);transition:width .5s}
.bar-fill.warn{background:linear-gradient(90deg,#fbbf24,#f59e0b)}
.bar-fill.danger{background:linear-gradient(90deg,#fb923c,#ef4444)}
.bar-fill.critical{background:linear-gradient(90deg,#ef4444,#b91c1c)}
/* 检测进行中：宽度由 rAF 逐帧驱动，所以关掉 CSS 过渡，
   斜纹 + 前端高光负责表现“正在跑”，即使某一阶段卡住也不会看起来死掉 */
.bar-fill.scan{transition:none;background-image:
  repeating-linear-gradient(135deg,rgba(255,255,255,.3) 0 8px,rgba(255,255,255,0) 8px 16px),
  linear-gradient(90deg,#3aa7f0,#22c55e);
  background-size:22.6px 100%,100% 100%;animation:bar-stripe .6s linear infinite}
.bar-fill.scan::after{content:"";position:absolute;right:0;top:0;bottom:0;width:26px;border-radius:4px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6));animation:bar-head 1.1s ease-in-out infinite}
@keyframes bar-stripe{from{background-position:0 0,0 0}to{background-position:22.6px 0,0 0}}
@keyframes bar-head{0%,100%{opacity:.25}50%{opacity:1}}
.bar-pct{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;min-width:46px;text-align:right;
  color:var(--text-secondary);flex:none;white-space:nowrap}
.bar-pct.on{color:var(--accent)}
/* 状态圆点：检测中变成转圈，出错变红 */
.env-head .dot.busy{box-sizing:border-box;background:transparent;border:2px solid var(--border);
  border-top-color:var(--accent);animation:dot-spin .7s linear infinite}
.env-head .dot.bad{background:var(--err)}
@keyframes dot-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .bar-fill.scan,.bar-fill.scan::after,.env-head .dot.busy{animation:none}
}

.env-log{background:#0b1020;color:#cbd5e1;border-radius:10px;padding:10px 14px;font-family:var(--mono);font-size:12px;line-height:1.9;height:104px;overflow-y:auto;margin-bottom:16px}
.env-log .lt{color:#64748b;margin-right:12px}
.env-log .lg{color:#4ade80;margin-right:14px;display:inline-block;min-width:44px}
.env-log .lm{color:#cbd5e1}

.env-grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
@media (min-width:1000px){.env-grid{grid-template-columns:290px 1fr}}
/* Grid 子项必须允许收缩，否则长 UA 字符串会把整列撑出容器 */
.env-grid>*,.env-cols>*{min-width:0}
.env-grid .card,.env-cols .card{min-width:0;overflow:hidden}
.env-cols{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:760px){.env-cols{grid-template-columns:1fr 1fr}}

.sc-card{background:var(--bg-main);border-radius:12px;box-shadow:var(--shadow);padding:20px;text-align:center;margin-bottom:16px}
.sc-label{font-size:12px;color:var(--text-secondary)}
.sc-num{font-size:52px;font-weight:700;line-height:1.1;margin:4px 0;font-variant-numeric:tabular-nums}
.sc-num.ok{color:var(--ok)}.sc-num.warn{color:var(--warn)}.sc-num.danger,.sc-num.critical{color:var(--err)}
.sc-grade{display:inline-block;padding:4px 14px;border-radius:14px;font-size:13px;background:var(--bg-secondary)}
.sc-grade.ok{background:rgba(21,128,61,.12);color:var(--ok)}
.sc-grade.warn{background:rgba(180,83,9,.12);color:var(--warn)}
.sc-grade.danger,.sc-grade.critical{background:rgba(198,40,40,.12);color:var(--err)}
.sc-meta{display:flex;justify-content:space-between;margin-top:16px;font-size:12px;color:var(--text-secondary)}
.sc-meta b{display:block;font-size:16px;color:var(--text);font-weight:600}

.issue{border-left:3px solid var(--border);background:var(--bg-main);border-radius:8px;padding:11px 13px;margin-bottom:10px}
.issue .ih{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.issue .ih b{font-size:13.5px}
.issue .tag{margin-left:auto;font-size:11px;padding:2px 8px;border-radius:9px;background:var(--bg-secondary);color:var(--text-secondary);white-space:nowrap}
.issue p{margin:0;font-size:12.5px;line-height:1.75;color:var(--text-secondary)}
.issue .act{margin-top:7px;font-family:var(--mono);font-size:11.5px;color:var(--description);background:var(--bg-secondary);padding:6px 8px;border-radius:6px;word-break:break-all}
.issue.s-critical{border-left-color:#b91c1c}.issue.s-critical .tag{background:rgba(185,28,28,.14);color:#b91c1c}
.issue.s-danger{border-left-color:#ef4444}.issue.s-danger .tag{background:rgba(239,68,68,.13);color:#ef4444}
.issue.s-warn{border-left-color:#f59e0b}.issue.s-warn .tag{background:rgba(245,158,11,.15);color:#b45309}
.issue.s-info{border-left-color:#94a3b8}
.none{font-size:13px;color:var(--text-secondary);padding:18px 4px;text-align:center}

/* min-width:0 是必须的：style.css 里全局 table 有 min-width:560px（给宽表格横向滚动用的），
   kv 表格挤在三栏卡片里只有 365px 宽，不覆盖掉就会撑出卡片，右边的内容被裁掉 */
table.kv{width:100%;min-width:0;border-collapse:collapse;font-size:13px;table-layout:fixed}
table.kv th{text-align:left;font-weight:400;color:var(--text-secondary);padding:9px 10px 9px 0;width:34%;vertical-align:top;white-space:nowrap}
table.kv td{padding:9px 0;vertical-align:top;border-bottom:1px solid var(--border);word-break:break-word;overflow-wrap:anywhere}
table.kv th{border-bottom:1px solid var(--border)}
table.kv tr:last-child th,table.kv tr:last-child td{border-bottom:0}
table.kv .mono{font-family:var(--mono);font-size:12.5px}
table.kv .wrap{word-break:break-all}
.yes{color:var(--ok)}.no{color:var(--err)}.dim{color:var(--text-secondary);font-size:12px}
/* 场景适用性：同一批检测数据，按用途分别给结论——
   电商用户关心的是"这个环境能不能拿来做 X"，而不是一个笼统的总分 */
.scene{padding:11px 0;border-bottom:1px solid var(--border)}
.scene:first-child{padding-top:0}
.scene:last-child{border-bottom:0;padding-bottom:0}
.scene-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.scene-head b{font-size:14px;color:var(--text)}
.scene-tag{font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:10px;white-space:nowrap;flex:none}
.scene-tag.ok{background:rgba(21,128,61,.12);color:var(--ok)}
.scene-tag.warn{background:rgba(180,83,9,.13);color:var(--warn)}
.scene-tag.bad{background:rgba(239,68,68,.13);color:var(--err)}
.scene-why{margin-top:5px;font-size:12px;line-height:1.6;color:var(--text-secondary)}
.scene-why b{color:var(--err);font-weight:600}

/* 风控值色带：整条绿→红渐变，游标指向实际数值 */
.riskbar{margin-top:7px;max-width:250px}
.rb-track{position:relative;height:8px;border-radius:4px;
  background:linear-gradient(90deg,#16a34a 0%,#84cc16 24%,#eab308 48%,#f97316 72%,#dc2626 100%)}
.rb-mark{position:absolute;top:-3px;width:4px;height:14px;border-radius:2px;
  background:var(--text);box-shadow:0 0 0 2px var(--bg-main);transform:translateX(-50%)}
.rb-legend{display:flex;justify-content:space-between;margin-top:4px;font-size:11px;color:var(--text-secondary)}

/* 每行结论标记：绿=这项没问题，红=有问题，黄=存疑；带「怎么改」的可点开弹窗 */
.rowv{display:block;margin-top:5px;font-size:12px;line-height:1.55}
.rowv i{font-style:normal;display:inline-block;width:14px;height:14px;line-height:14px;text-align:center;
  border-radius:50%;font-size:10px;margin-right:5px;vertical-align:1px;color:#fff;flex:none}
.rowv.ok{color:var(--ok)}    .rowv.ok i{background:var(--ok)}
.rowv.bad{color:var(--err)}  .rowv.bad i{background:var(--err)}
.rowv.warn{color:var(--warn)}.rowv.warn i{background:var(--warn)}
.rowv u{margin-left:6px;cursor:pointer;text-decoration:none;border-bottom:1px dashed currentColor;font-weight:600;white-space:nowrap}
.rowv u:hover{opacity:.7}

/* 「怎么改」弹窗 */
.env-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.env-modal.show{display:flex}
.em-box{background:var(--bg-main);border-radius:12px;max-width:560px;width:100%;max-height:80vh;
  display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.em-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;
  border-bottom:1px solid var(--border);font-weight:700;font-size:15px;color:var(--text)}
.em-close{border:0;background:none;font-size:24px;line-height:1;cursor:pointer;color:var(--text-secondary);padding:0 4px}
.em-close:hover{color:var(--text)}
.em-body{padding:16px 20px;overflow-y:auto;font-size:13.5px;line-height:1.75;color:var(--description)}
.em-body p{margin:0 0 11px}
.em-body p:last-child{margin-bottom:0}

/* 中文字体：一个字体一个小标签，Windows 中文版专属字体单独标橙色 */
.fchips{display:flex;flex-wrap:wrap;gap:5px}
.fchip{display:inline-block;padding:1px 8px;border-radius:9px;font-size:11.5px;line-height:17px;
  background:var(--bg-secondary);color:var(--description);white-space:nowrap}
.fchip.win{background:rgba(249,115,22,.15);color:#c2410c;font-weight:600}
.fchip.more{color:var(--text-secondary);background:none;padding-left:2px}
.fnote{margin-top:7px;font-size:11.5px;color:var(--text-secondary);line-height:1.6}
html[data-theme=dark] .fchip.win{color:#fdba74}
@media (prefers-color-scheme:dark){html:not([data-theme=light]) .fchip.win{color:#fdba74}}

table.kv .pill{display:inline-block;padding:2px 9px;border-radius:10px;font-size:11.5px;background:var(--bg-secondary);color:var(--description)}
table.kv .pill.bad{background:rgba(239,68,68,.13);color:#dc2626}
table.kv .pill.good{background:rgba(21,128,61,.12);color:var(--ok)}
table.kv .pill.cn{background:rgba(79,70,229,.12);color:#4338ca;margin-left:6px}
table.kv .pill.intl{background:rgba(22,163,74,.12);color:#15803d;margin-left:6px}
html[data-theme=dark] table.kv .pill.cn{color:#a5b4fc}
html[data-theme=dark] table.kv .pill.intl{color:#86efac}
.env-note{font-size:12px;color:var(--text-secondary);margin:10px 0 0;line-height:1.75}

/* 电商核心一致性指示灯 */
.core-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.core-item{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:12px;font-size:12px;background:var(--bg-secondary);color:var(--text-secondary)}
.core-item i{font-style:normal;font-weight:700}
.core-item.ok{background:rgba(21,128,61,.12);color:var(--ok)}
.core-item.bad{background:rgba(198,40,40,.12);color:var(--err)}
.core-item.na{opacity:.6}
.core-tip{font-size:11px;color:var(--text-secondary);margin-top:7px}