/* 环境检查页 */
.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}

table.kv{width:100%;border-collapse:collapse;font-size:13px}
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}
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}
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}