/* 中文不加载网络字体：工厂里拉几 MB 的 CJK 字体包会让页面打不开。
     用系统字体，靠字重和字号拉层次。等宽体只给"要照着敲的东西"（用户名、网址）。 */
  :root{
    --paper:#f2f4f3;
    --card:#ffffff;
    --ink:#151a18;
    --ink-2:#5a6663;
    --line:#dbe0dd;
    --alert:#a5322a;
    --alert-bg:#a5322a14;
    --p1:#0f6b3f;   /* 仓管 · 安全绿 */
    --p2:#b4530f;   /* 车间工人 · 设备橙 */
    --p3:#1f4d7a;   /* 车间统计 · 靛蓝 */
    --accent:var(--p1);
    --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
    --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --paper:#0f1412; --card:#171e1b; --ink:#e8efeb; --ink-2:#95a49e; --line:#26312d;
      --alert:#e2897e; --alert-bg:#e2897e1c;
      --p1:#4fb383; --p2:#e0904f; --p3:#79aade;
    }
  }
  :root[data-theme="dark"]{
    --paper:#0f1412; --card:#171e1b; --ink:#e8efeb; --ink-2:#95a49e; --line:#26312d;
    --alert:#e2897e; --alert-bg:#e2897e1c;
    --p1:#4fb383; --p2:#e0904f; --p3:#79aade;
  }

  *{box-sizing:border-box}
  [hidden]{display:none !important}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--sans); font-size:17px; line-height:1.65;
    -webkit-text-size-adjust:100%;
  }
  .wrap{max-width:34rem; margin:0 auto; padding:22px 18px 64px; display:flex; flex-direction:column; gap:26px}

  /* ── 顶部 ─────────────────────────── */
  .top{display:flex; flex-direction:column; gap:10px}
  .factory{
    font:600 12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
    color:var(--ink-2);
  }
  h1{margin:0; font-size:27px; font-weight:800; letter-spacing:-.01em; text-wrap:balance}
  .lede{margin:0; color:var(--ink-2); font-size:15.5px}

  /* ── 选人 ─────────────────────────── */
  .pick{display:flex; flex-direction:column; gap:11px}
  .pick-hd{
    font:600 12px/1 var(--mono); letter-spacing:.1em; color:var(--ink-2);
    text-transform:uppercase;
  }
  .who{
    display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:0 14px;
    width:100%; text-align:left; cursor:pointer;
    background:var(--card); color:inherit;
    border:1px solid var(--line); border-left:5px solid var(--c);
    border-radius:10px; padding:15px 16px;
    font-family:inherit; font-size:17px;
  }
  .who[data-go="c-dou"]{--c:var(--p1)}
  .who[data-go="c-li"]{--c:var(--p2)}
  .who[data-go="c-yu"]{--c:var(--p3)}
  #c-dou{--accent:var(--p1)}
  #c-li{--accent:var(--p2)}
  #c-yu{--accent:var(--p3)}
  .who:hover{border-color:var(--c)}
  .who:focus-visible{outline:3px solid var(--c); outline-offset:2px}
  .who .nm{grid-column:2; grid-row:1; font-size:20px; font-weight:800; letter-spacing:.01em}
  .who .rl{
    grid-column:1; grid-row:1/3; font:600 11px/1 var(--mono); color:var(--c);
    writing-mode:vertical-rl; letter-spacing:.16em; padding:2px 0;
  }
  .who .job{grid-column:2; grid-row:2; color:var(--ink-2); font-size:14.5px}
  .who .go{grid-column:3; grid-row:1/3; color:var(--c); font-size:22px; font-weight:700}

  /* ── 流程一句话 ───────────────────── */
  .chain{
    border-top:1px solid var(--line); padding-top:16px;
    color:var(--ink-2); font-size:14px; line-height:1.9;
  }
  .chain b{color:var(--ink); font-weight:700}

  /* ── 卡片 ─────────────────────────── */
  .card{display:flex; flex-direction:column; gap:22px}
  .back{
    align-self:flex-start; background:none; border:0; padding:6px 0; cursor:pointer;
    color:var(--ink-2); font-family:inherit; font-size:15px;
  }
  .back:hover{color:var(--accent)}
  .back:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}

  .hero{display:flex; flex-direction:column; gap:7px; border-left:5px solid var(--accent); padding-left:15px}
  .hero .rl{font:600 11px/1 var(--mono); letter-spacing:.16em; color:var(--accent); text-transform:uppercase}
  .hero h2{margin:0; font-size:25px; font-weight:800}
  .hero .one{margin:0; font-size:18px; font-weight:600; line-height:1.55}

  .block{display:flex; flex-direction:column; gap:11px}
  h3{
    margin:0; font-size:13px; font-weight:700; letter-spacing:.08em;
    color:var(--ink-2); text-transform:uppercase; font-family:var(--mono);
  }

  .login{
    background:var(--card); border:1px solid var(--line); border-radius:10px;
    margin:0; padding:14px 16px; display:grid; grid-template-columns:auto 1fr; gap:9px 14px; align-items:baseline;
  }
  .login dt{color:var(--ink-2); font-size:14px; white-space:nowrap}
  .login dd{margin:0; font-family:var(--mono); font-weight:600; font-size:15.5px; overflow-wrap:anywhere}
  .login dd.plain{font-family:var(--sans); font-weight:400; font-size:15px; color:var(--ink-2)}

  ol.steps{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:13px; counter-reset:s}
  ol.steps li{
    position:relative; padding-left:calc(1.9rem + 12px); min-width:0;
    counter-increment:s; overflow-wrap:anywhere;
  }
  ol.steps li::before{
    content:counter(s,decimal-leading-zero);
    position:absolute; left:0; top:0; width:1.9rem;
    font:600 13px/1.7 var(--mono); color:var(--accent);
    border-bottom:2px solid var(--accent); padding-bottom:2px;
  }
  ol.steps b{font-weight:700}
  ol.steps code{font-family:var(--mono); font-weight:600; font-size:.94em}

  .done{
    background:var(--accent); color:var(--card);
    border-radius:10px; padding:15px 17px;
    font-size:18px; font-weight:700; line-height:1.5;
  }

  .note{display:flex; flex-direction:column; gap:9px; font-size:15.5px}
  .note p{margin:0}
  .warn{
    background:var(--alert-bg); border-left:4px solid var(--alert);
    border-radius:0 8px 8px 0; padding:12px 14px;
    display:flex; flex-direction:column; gap:7px; font-size:15.5px;
  }
  .warn p{margin:0}
  .warn b{color:var(--alert)}

  .aside{
    border:1px dashed var(--line); border-radius:10px; padding:13px 15px;
    color:var(--ink-2); font-size:15px; display:flex; flex-direction:column; gap:7px;
  }
  .aside p{margin:0}
  .aside b{color:var(--ink)}

  .ask{
    border-top:1px solid var(--line); padding-top:15px;
    font-size:15.5px; color:var(--ink-2);
  }
  .ask b{color:var(--ink)}

  @media (prefers-reduced-motion:no-preference){
    .card,.pick{animation:in .22s ease-out both}
    @keyframes in{from{opacity:.35; transform:translateY(5px)} to{opacity:1; transform:none}}
  }