:root{--blue:#0b4f9c;--blue2:#1a6fd0;--ink:#15202b;--muted:#66788a;--line:#e3e9f0;--bg:#f4f7fb;--green:#0f8a5f;--yellow:#b7791f;--red:#c53030;--grey:#8a97a5}
*{box-sizing:border-box}body{margin:0;font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--ink);font-size:14px}
a{color:var(--blue);text-decoration:none}
.top{background:linear-gradient(135deg,#0b4f9c,#1a6fd0);color:#fff;padding:12px 22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.top .logo{font-weight:700;font-size:17px;letter-spacing:.5px}
.top .demo{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);padding:3px 9px;border-radius:20px;font-size:12px}
.nav{display:flex;gap:4px;flex-wrap:wrap;padding:8px 18px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.nav a{padding:7px 12px;border-radius:8px;color:#33475b;font-size:13px}
.nav a:hover{background:#eef4fc}.nav a.active{background:var(--blue);color:#fff}
.wrap{max-width:1240px;margin:0 auto;padding:18px}
.h1{font-size:20px;margin:6px 0 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sub{color:var(--muted);font-size:12px;font-weight:400}
.grid{display:grid;gap:12px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.g4,.g3,.g2{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.g4,.g3,.g2{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:0 1px 2px rgba(16,40,70,.04)}
.kpi .n{font-size:26px;font-weight:700;margin:4px 0}.kpi .l{color:var(--muted);font-size:12px}
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:12px;font-weight:600}
.b-green{background:#e6f6ef;color:var(--green)}.b-yellow{background:#fdf3e2;color:var(--yellow)}
.b-red{background:#fdeaea;color:var(--red)}.b-grey{background:#eef1f4;color:var(--grey)}
.b-A{background:#e6f6ef;color:var(--green)}.b-B{background:#e8f1fd;color:var(--blue)}
.b-C{background:#fdf3e2;color:var(--yellow)}.b-X{background:#fdeaea;color:var(--red)}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:top}
th{color:var(--muted);font-weight:600;background:#fafcfe;font-size:12px}
tr:hover td{background:#fafcff}
.right{text-align:right}.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,Menlo,monospace}
.lights{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:1000px){.lights{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.lights{grid-template-columns:repeat(2,1fr)}}
.light{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;border-top:4px solid var(--grey)}
.light.ok{border-top-color:var(--green)}.light.diff{border-top-color:var(--yellow)}.light.bad{border-top-color:var(--red)}.light.na{border-top-color:var(--grey)}
.light .c{font-weight:700;font-size:13px;color:var(--muted)}.light .n{font-size:13px;margin:2px 0 6px;font-weight:600}
.light .v{font-size:12px;color:var(--muted)}
.btn{display:inline-block;background:var(--blue);color:#fff;border:0;border-radius:8px;padding:8px 14px;font-size:13px;cursor:pointer}
.btn.ghost{background:#fff;color:var(--blue);border:1px solid var(--blue)}
.btn.sm{padding:5px 10px;font-size:12px}
input,select,textarea{border:1px solid #cdd8e3;border-radius:8px;padding:8px 10px;font-size:13px;width:100%;background:#fff}
label{display:block;color:var(--muted);font-size:12px;margin:10px 0 4px}
.form{max-width:560px}
.row{display:flex;gap:10px;flex-wrap:wrap}.row>*{flex:1;min-width:160px}
.timeline{list-style:none;padding:0;margin:0}.timeline li{padding:8px 0 8px 18px;border-left:2px solid var(--line);position:relative;margin-left:6px}
.timeline li:before{content:"";position:absolute;left:-6px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--blue2)}
.note{background:#f0f6fd;border:1px solid #d5e5f8;border-radius:10px;padding:10px 12px;color:#274a72;font-size:13px}
.warn{background:#fff8ec;border:1px solid #f3dfba;border-radius:10px;padding:10px 12px;color:#7a5312;font-size:13px}
.tag{font-size:12px;color:var(--muted)}
.footer{color:var(--muted);font-size:12px;text-align:center;padding:26px 10px}
@media(max-width:640px){
  .who{display:none}
  .nav{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;padding:6px 10px}
  .nav a{flex:0 0 auto;padding:7px 10px}
  .top{padding:10px 14px;gap:10px}
  .top .logo{font-size:15px}
  .wrap{padding:12px}
  .lights{grid-template-columns:1fr}
  .h1{font-size:17px}
  .kpi .n{font-size:22px}
  th,td{padding:7px 8px}
  .card{padding:12px}
}

/* ---- 工厂手机端（低数字素养/老龄用户）---- */
@media (max-width: 640px) {
  body { font-size: 15px; }
  .wrap { padding: 10px 12px 28px; }
  .top { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
  .top .demo { font-size: 12px; }
  .nav { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .nav a { flex: 0 0 auto; padding: 12px 12px; font-size: 14px; }
  .h1 { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 22px; }
  .h1 .btn, .h1 .badge { width: 100%; justify-content: center; }
  .row > * { flex: 1 1 100%; min-width: 0; }
  select, input, textarea { max-width: 100%; min-width: 0; }
  .btn { min-height: 44px; font-size: 15px; padding: 10px 14px; }
  .btn.sm { min-height: 38px; font-size: 14px; }
  th, td { font-size: 13px; padding: 10px 8px; }
  th { font-size: 12.5px; }
  .tag { font-size: 13px; color: #4b5c6e; }
  .kpi .n { font-size: 28px; }
  .card { padding: 14px; }
  .grid.g2, .grid.g3, .grid.g4 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .wrap { width: 100%; max-width: 100%; }
  .h1 { display: block; }
  .h1 > span { margin-left: 0 !important; width: 100%; display: flex; flex-direction: column; gap: 6px; }
  .h1 > .sub { display: block; }
  .h1 .btn { width: 100%; justify-content: center; }
  .card table { min-width: 0; }
}