@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600&display=swap');
:root{
  --bg:#f6f7f4;--card:#fff;--line:#e3e8e1;--line-2:#eef1ec;
  --ink:#27352f;--ink-2:#5f6c64;--ink-3:#8a948d;
  --green:#214d3d;--green-soft:#e6efe7;--orange:#c4672a;--orange-soft:#fbeee4;
  --r:12px;
  font-family:'Noto Sans TC',system-ui,sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none;
}
*{box-sizing:border-box}
body{margin:0;font-size:15px;line-height:1.6}
button{font:inherit;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px}
.hidden{display:none!important}
.boot{min-height:100vh;display:grid;place-items:center;color:var(--ink-3);font-size:14px}

.mark{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--orange);color:#fff;font-weight:600;font-size:18px}

.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:100%;max-width:360px}
.login-card h1{font-size:24px;font-weight:600;margin:20px 0 8px}
.login-card p{color:var(--ink-2);margin:0 0 24px}
.login-msg{min-height:24px;margin-top:16px!important;color:var(--orange)!important;font-size:14px}

.page{max-width:880px;margin:0 auto;padding:24px 24px 64px}
.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:600;font-size:16px}
.account{display:flex;align-items:center;gap:16px;font-size:14px;color:var(--ink-2)}
.link-btn{border:0;background:none;padding:4px 0;color:var(--ink-2);font-size:14px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.link-btn:hover{color:var(--ink)}

.ledger{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 28px}
.ledger-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.ledger-head h1{font-size:22px;font-weight:600;margin:0}
.sub{margin:4px 0 0;color:var(--ink-3);font-size:14px}
.stamp{display:flex;align-items:baseline;gap:6px;padding:8px 14px;border:1.5px solid var(--line);border-radius:8px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.stamp b{font-size:24px;font-weight:600;line-height:1;color:var(--ink)}
.stamp span{font-size:13px}
.stamp.done{border-color:var(--green);color:var(--green);transform:rotate(-2deg)}
.stamp.done b{color:var(--green)}

.tasks{list-style:none;margin:0;padding:0}
.task{display:grid;grid-template-columns:28px 1fr auto;gap:16px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line-2)}
.task:last-child{border-bottom:0}
.task.loading{display:block;color:var(--ink-3);font-size:14px}
.mark-s{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1.5px solid currentColor}
.mark-s svg{width:20px;height:20px}
.task-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.task-label{font-weight:500}
.task-detail{font-size:14px;color:var(--ink-2);overflow-wrap:anywhere}
.task-time{font-size:14px;color:var(--ink-3);font-variant-numeric:tabular-nums;padding-top:2px}
.s-ok .mark-s{color:var(--green);background:var(--green-soft)}
.s-failed .mark-s{color:var(--orange);background:var(--orange-soft)}
.s-failed .task-detail{color:var(--orange)}
.s-not_run .mark-s{color:var(--orange)}
.s-not_run .task-detail{color:var(--orange)}
.s-wait .mark-s{color:var(--ink-3);border-style:dashed}

.ledger-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:16px;border-top:1px solid var(--line)}
.week{display:flex;gap:12px}
.day{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;color:var(--ink-3)}
.day i{width:12px;height:12px;border-radius:3px;background:var(--line-2);border:1px solid var(--line)}
.day.full i{background:var(--green);border-color:var(--green)}
.day.part i{background:var(--green-soft);border-color:#b9cdbd}
.day.bad i{background:var(--orange-soft);border-color:var(--orange)}
.day.cur{color:var(--ink);font-weight:500}

.desks{margin-top:40px}
.desks h2{font-size:16px;font-weight:600;margin:0 0 12px}
.desk-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.desk{display:flex;flex-direction:column;gap:4px;padding:16px 20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;transition:border-color .15s ease-out}
.desk:hover{border-color:#b9c4bc}
.desk-name{font-weight:600}
.desk-items{font-size:14px;color:var(--ink-2)}
.desk-host{font-size:12px;color:var(--ink-3);margin-top:8px}
.aside{font-size:14px;color:var(--ink-3);margin:16px 0 0}
.aside a{color:var(--ink-2)}

@media (max-width:720px){
  .page{padding:16px 16px 48px}
  .top{margin-bottom:20px}
  .ledger{padding:20px 16px}
  .task{grid-template-columns:28px 1fr;gap:12px}
  .task-time{grid-column:2;padding-top:0}
  .desk-list{grid-template-columns:1fr}
  .ledger-foot{flex-wrap:wrap}
  .week{gap:8px}
}