/* CJK faces are appended to both stacks so Chinese renders consistently for the
   factory. Every one of them is already installed on the machine — nothing is
   downloaded. This page must never fetch from a third-party host: behind the GFW
   those requests hang rather than fail, and the page just looks dead. */
:root{
    --bg:#0d0d0d; --panel:#151515; --panel2:#1b1b1b; --ink:#ededed; --mute:#7d7d7d;
    --line:#2a2a2a; --line2:#333; --done:#3fb950; --crit:#e5534b; --warn:#d29922;
    --accent:#ededed;
    --mono:"SF Mono",ui-monospace,"Cascadia Mono","Roboto Mono",Menlo,Consolas,
      "PingFang SC","Microsoft YaHei","Noto Sans CJK SC",monospace;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,
      "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%}
  body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.5;
    padding:clamp(16px,4vw,48px);max-width:1000px;margin:0 auto}
  ::selection{background:#333;color:#fff}

  /* Header */
  .top{border:1px solid var(--line2);background:var(--panel);padding:22px 24px;margin-bottom:26px}
  .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--mute)}
  h1{font-family:var(--mono);font-size:clamp(30px,7vw,52px);font-weight:700;letter-spacing:-.02em;
    line-height:1;margin:8px 0 4px;text-transform:lowercase}
  .sub{color:var(--mute);font-size:14px;max-width:60ch}
  .sub b{color:var(--ink);font-weight:600}

  /* Progress */
  .progwrap{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
  .progrow{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);
    font-size:12px;letter-spacing:.06em;color:var(--mute);margin-bottom:8px}
  .progrow .count{color:var(--ink);font-size:13px}
  .bar{height:8px;background:#000;border:1px solid var(--line2);overflow:hidden}
  .bar>span{display:block;height:100%;width:0;background:var(--done);transition:width .35s ease}

  /* Controls */
  .controls{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 4px}
  .btn{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    background:var(--panel2);color:var(--mute);border:1px solid var(--line2);padding:8px 14px;
    cursor:pointer;transition:.15s}
  .btn:hover{color:var(--ink);border-color:#555}
  .btn:focus-visible{outline:2px solid var(--done);outline-offset:2px}
  .btn.primary{color:var(--ink);border-color:#555}
  .btn.primary:hover{border-color:var(--done);color:var(--done)}
  .status{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
    display:inline-flex;align-items:center;gap:7px;padding:8px 4px;color:var(--mute)}
  .status::before{content:"";width:8px;height:8px;background:var(--mute);flex-shrink:0}
  .status[data-state="clean"]{color:var(--done)}
  .status[data-state="clean"]::before{background:var(--done)}
  .status[data-state="dirty"]{color:var(--warn)}
  .status[data-state="dirty"]::before{background:var(--warn)}
  .status[data-state="error"]{color:var(--crit)}
  .status[data-state="error"]::before{background:var(--crit)}
  .hint{font-family:var(--mono);font-size:11px;color:var(--mute);line-height:1.7;
    border:1px solid var(--line);background:var(--panel);padding:10px 13px;margin:0 0 26px;
    letter-spacing:.03em;display:none}
  .hint.show{display:block}
  .hint b{color:var(--ink)}

  /* Legend */
  .legend{display:flex;flex-wrap:wrap;gap:16px;font-family:var(--mono);font-size:11px;
    color:var(--mute);margin:16px 0 26px;letter-spacing:.04em}
  .legend span{display:inline-flex;align-items:center;gap:6px}
  .dot{width:9px;height:9px;display:inline-block}
  .dot.c{background:var(--crit)} .dot.d{background:var(--done)} .dot.w{background:var(--warn)}

  /* Phase */
  .phase{border:1px solid var(--line2);margin-bottom:16px;background:var(--panel)}
  .phead{display:flex;align-items:center;gap:14px;padding:14px 18px;cursor:pointer;
    border-bottom:1px solid transparent;user-select:none}
  .phase.open .phead{border-bottom-color:var(--line)}
  .pnum{font-family:var(--mono);font-size:12px;color:var(--mute);letter-spacing:.1em}
  .ptitle{font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.02em;
    text-transform:uppercase;flex:1}
  .ptag{font-family:var(--mono);font-size:11px;color:var(--mute);font-weight:400;text-transform:none;
    letter-spacing:0;display:block;margin-top:2px}
  .pcount{font-family:var(--mono);font-size:12px;color:var(--mute)}
  .chev{color:var(--mute);font-family:var(--mono);transition:transform .2s;font-size:12px}
  .phase.open .chev{transform:rotate(90deg)}
  .pbody{display:none}
  .phase.open .pbody{display:block}

  /* Item row */
  .item{display:flex;gap:14px;padding:14px 18px;border-top:1px solid var(--line);align-items:flex-start}
  .item:first-child{border-top:none}
  .item.done{background:var(--panel2)}
  .check{flex-shrink:0;width:22px;height:22px;border:1px solid var(--line2);background:#000;
    cursor:pointer;display:grid;place-items:center;font-family:var(--mono);font-size:13px;
    color:transparent;transition:.15s;margin-top:1px}
  .check:hover{border-color:#666}
  .check:focus-visible{outline:2px solid var(--done);outline-offset:2px}
  .item.done .check{background:var(--done);border-color:var(--done);color:#0d0d0d}
  .body{flex:1;min-width:0}
  .rowtop{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .id{font-family:var(--mono);font-size:12px;color:var(--mute);letter-spacing:.05em}
  .name{font-size:15px;font-weight:600}
  .item.done .name{color:var(--mute);text-decoration:line-through;text-decoration-color:#444}
  .flag{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
    padding:2px 7px;border:1px solid;line-height:1.4}
  .flag.crit{color:var(--crit);border-color:var(--crit)}
  .desc{color:var(--mute);font-size:13px;margin-top:4px}
  .note{display:block;width:100%;margin-top:10px;background:#000;border:1px solid var(--line);
    color:var(--ink);font-family:var(--mono);font-size:12px;padding:8px 10px;resize:vertical;
    min-height:0;line-height:1.5}
  .note::placeholder{color:#4d4d4d}
  .note:focus{outline:none;border-color:#555}

  /* Footer */
  .foot{font-family:var(--mono);font-size:11px;color:var(--mute);text-align:center;
    margin-top:30px;line-height:1.8;letter-spacing:.04em}
  .foot b{color:var(--ink)}
  .saved{position:fixed;bottom:18px;right:18px;background:var(--done);color:#0d0d0d;
    font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    padding:8px 14px;opacity:0;transition:opacity .3s;pointer-events:none}
  .saved.show{opacity:1}

/* ═══════════════════════════════════════════════════════════════════
   Hosted version — logo, read-only notes, change log, language toggle
   ═══════════════════════════════════════════════════════════════════ */

/* Brand bar */
.brandbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.logo{height:46px;width:auto;display:block}
.topright{display:flex;align-items:center;gap:6px;flex-shrink:0}
.iconbtn{background:var(--panel2);border:1px solid var(--line2);color:var(--mute);
  width:34px;height:34px;display:grid;place-items:center;cursor:pointer;
  font-family:var(--mono);font-size:14px;line-height:1;transition:.15s;padding:0}
.iconbtn:hover{color:var(--ink);border-color:#555}
.iconbtn:focus-visible{outline:2px solid var(--done);outline-offset:2px}
.iconbtn.on{color:var(--ink);border-color:#666}
.langbtn{width:auto;padding:0 11px;font-size:11px;letter-spacing:.08em}

/* Notes — read-only display that grows with its content.
   This replaces the old rows="1" textarea, which clipped mid-line. */
.notewrap{margin-top:10px;display:flex;gap:8px;align-items:flex-start}
.noteview{flex:1;min-width:0;background:#000;border:1px solid var(--line);
  color:var(--ink);font-family:var(--mono);font-size:12px;padding:8px 10px;
  line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.noteview.empty{color:#4d4d4d;font-style:italic}
.noteedit{flex:1;min-width:0;background:#000;border:1px solid #555;color:var(--ink);
  font-family:var(--mono);font-size:12px;padding:8px 10px;line-height:1.6;
  resize:none;overflow:hidden;display:block}
.noteedit:focus{outline:none;border-color:var(--done)}
.noteactions{display:flex;gap:6px;margin-top:6px}
.mini{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--panel2);color:var(--mute);border:1px solid var(--line2);
  padding:5px 10px;cursor:pointer;transition:.15s}
.mini:hover{color:var(--ink);border-color:#555}
.mini.go{color:var(--done);border-color:#2d5c36}
.mini.go:hover{border-color:var(--done)}

/* Save status */
.savestate{position:fixed;bottom:18px;right:18px;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;padding:8px 14px;opacity:0;
  transition:opacity .25s;pointer-events:none;z-index:60;border:1px solid}
.savestate.show{opacity:1}
.savestate.ok{background:var(--done);color:#0d0d0d;border-color:var(--done)}
.savestate.busy{background:var(--panel2);color:var(--mute);border-color:var(--line2)}
.savestate.bad{background:var(--crit);color:#0d0d0d;border-color:var(--crit)}

/* Change-log drawer */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;
  transition:opacity .25s;z-index:40}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100dvh;width:min(600px,94vw);z-index:50;
  background:var(--panel);border-left:1px solid var(--line2);
  transform:translateX(101%);transition:transform .25s ease;
  display:flex;flex-direction:column}
.drawer.open{transform:none}
.dhead{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--line);flex-shrink:0}
.dtitle{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase}
.dbody{overflow-y:auto;padding:6px 18px 22px}
.logrow{padding:12px 0;border-bottom:1px solid var(--line);font-size:12px}
.logrow:last-child{border-bottom:none}
.logmeta{display:flex;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:11px;
  color:var(--mute);margin-bottom:5px}
.logmeta .lid{color:var(--ink)}
.logwhat{color:var(--ink);line-height:1.5}
.logval{font-family:var(--mono);font-size:11px;display:block;margin-top:4px;
  padding:5px 8px;background:#000;border:1px solid var(--line);white-space:pre-wrap;
  overflow-wrap:anywhere}
.logval.old{color:#7d5a5a}
.logval.new{color:#5a7d63}
.empty-log{color:var(--mute);font-family:var(--mono);font-size:12px;padding:20px 0}

/* Login */
.login{max-width:380px;margin:14vh auto 0}
.login .logo{height:52px;margin-bottom:26px}
.loginbox{border:1px solid var(--line2);background:var(--panel);padding:24px}
.loginbox p{color:var(--mute);font-size:13px;margin-bottom:16px}
.loginbox input{width:100%;background:#000;border:1px solid var(--line2);color:var(--ink);
  font-family:var(--mono);font-size:14px;padding:11px 12px;margin-bottom:12px}
.loginbox input:focus{outline:none;border-color:#666}
.loginbox button{width:100%;background:var(--panel2);color:var(--ink);
  border:1px solid var(--line2);font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;padding:12px;cursor:pointer;transition:.15s}
.loginbox button:hover{border-color:var(--done);color:var(--done)}
.loginerr{color:var(--crit);font-family:var(--mono);font-size:11px;margin-bottom:12px;
  letter-spacing:.04em}

@media (max-width:620px){
  .brandbar{flex-direction:column;align-items:flex-start}
  .logo{height:38px}
}