:root{ --bg:#f2f4f7; --card:#fff; --line:#dfe3e8; --text:#1f2329; --sub:#6b7280;
         --blue:#1668dc; --green:#2e7d32; --red:#d93025; --orange:#e8710a; }
  *{box-sizing:border-box;margin:0;padding:0}
  body{background:var(--bg);color:var(--text);font:16px/1.6 "Microsoft YaHei UI",
       "Microsoft YaHei",system-ui,sans-serif;min-height:100vh}
  button{font-family:inherit;cursor:pointer}
  button:disabled{cursor:not-allowed;opacity:.45}
  .hidden{display:none!important}
  header{background:#fff;border-bottom:1px solid var(--line);padding:10px 20px;
         display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:10}
  header .logo{font-size:19px;font-weight:700;color:var(--blue)}
  .badge{border:1px solid var(--line);border-radius:20px;padding:4px 14px;font-size:14px;
         background:#fafbfc}
  .badge b{font-size:16px;color:var(--blue)}
  .badge.low b{color:var(--red)}
  header .right{margin-left:auto;display:flex;align-items:center;gap:10px}
  .btn-ghost{background:none;border:1px solid var(--line);border-radius:6px;padding:6px 14px;
             font-size:14px;color:var(--sub)}
  main{max-width:820px;margin:0 auto;padding:20px 16px 60px}
  .card{background:var(--card);border:1px solid var(--line);border-radius:10px;
        padding:18px 20px;margin-bottom:16px}
  .card h2{font-size:15px;color:var(--sub);font-weight:600;margin-bottom:12px}
  #loginWrap{max-width:400px;margin:10vh auto 0}
  #loginWrap .t{text-align:center;font-size:24px;font-weight:700;color:var(--blue);
                margin-bottom:20px}
  .field{margin-bottom:14px}
  .field label{display:block;font-size:14px;color:var(--sub);margin-bottom:6px}
  .field input{width:100%;padding:12px 14px;font-size:17px;border:1px solid var(--line);
               border-radius:8px;outline:none}
  .field input:focus{border-color:var(--blue)}
  .btn-primary{width:100%;background:var(--blue);color:#fff;border:none;border-radius:8px;
               padding:13px;font-size:17px;font-weight:600}
  .err-line{font-size:14px;color:var(--red);margin-top:10px;min-height:20px}
  .hint{font-size:13px;color:var(--sub);margin-top:10px;line-height:1.7}
  .row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .dot{width:12px;height:12px;border-radius:50%;background:#c3c9d0;flex:none}
  .dot.on{background:var(--green)}
  #serialState{font-size:17px;font-weight:600}
  #serialDetail{font-size:14px;color:var(--sub)}
  .btn-blue{background:var(--blue);color:#fff;border:none;border-radius:8px;padding:11px 26px;
            font-size:16px;font-weight:600}
  select,.cc-input{padding:12px 14px;font-size:17px;border:1px solid var(--line);
                   border-radius:8px;outline:none;background:#fff}
  .cc-input{width:200px;font-size:28px;font-weight:700;text-align:center;
            border:2px solid var(--line)}
  .cc-input:focus{border-color:var(--blue)}
  .cc-input.bad{border-color:var(--red)}
  .cc-err{font-size:14px;color:var(--red);margin-top:8px;min-height:20px}
  .op-btns{display:flex;gap:14px;margin-top:18px}
  #btnAuto{flex:1;background:var(--green);color:#fff;border:none;border-radius:10px;
           padding:22px;font-size:26px;font-weight:700;letter-spacing:4px}
  #btnStop{width:130px;background:#fff;color:var(--red);border:2px solid var(--red);
           border-radius:10px;font-size:20px;font-weight:700}
  #banner{border-radius:10px;padding:20px 22px;margin-bottom:16px;display:flex;gap:16px;
          align-items:center;border:1px solid var(--line);background:#fff}
  #banner .ico{font-size:34px;line-height:1;flex:none}
  #banner .big{font-size:22px;font-weight:700}
  #banner .small{font-size:15px;margin-top:6px;color:var(--sub)}
  #banner.running{background:#e8f1fd;border-color:#bcd6f7}
  #banner.running .big{color:var(--blue)}
  #banner.ok{background:#e6f4ea;border-color:#b7dfc0}
  #banner.ok .big{color:var(--green)}
  #banner.err{background:#fdecea;border-color:#f5c6c2}
  #banner.err .big{color:var(--red)}
  #banner.warn{background:#fef7e0;border-color:#f3e0ac}
  #banner.warn .big{color:var(--orange)}
  #log{background:#14171c;color:#cdd3db;border-radius:8px;font-family:Consolas,monospace;
       font-size:13px;line-height:1.6;padding:12px 14px;height:220px;overflow-y:auto;
       white-space:pre-wrap;word-break:break-all}
  #log .ok{color:#7cc47f} #log .err{color:#ff8a80} #log .warn{color:#ffcc66}
  #log .rx{color:#bc8cff} #log .tx{color:#79b8ff} #log .t{color:#5f6b7a}
  .log-head{display:flex;align-items:center;margin-bottom:8px}
  .log-head span{font-size:14px;color:var(--sub)}
  .log-head button{margin-left:auto}
  .price{font-size:15px;color:var(--sub)}
  .price b{color:var(--red);font-size:18px}

  .row-end{margin-left:auto;display:flex;gap:10px}
  .mt14{margin-top:14px}
  .muted{color:var(--sub)}
  .danger{color:var(--red)}