* { box-sizing: border-box; margin: 0; font-family: system-ui, "Noto Sans Thai", sans-serif; }
body { background: #f6f7f9; color: #222; padding: 12px; max-width: 640px; margin: 0 auto; }
h1 { font-size: 1.2rem; margin: 8px 0; }
h2 { font-size: 1rem; margin: 16px 0 8px; color: #555; }
.card { background: #fff; border-radius: 12px; padding: 14px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.status-ok { color: #06a755; font-weight: 700; }
.status-wait { color: #f5a623; font-weight: 700; }
.status-bad { color: #e85d4a; font-weight: 700; }
.status-line { font-size: 1.05rem; margin-top: 2px; }
.meta { color: #666; font-size: .9rem; margin-top: 6px; }
.hist-label { font-size: .8rem; color: #888; font-weight: 700; margin-top: 14px; }
.hist { display: flex; gap: 5px; margin-top: 6px; }
.hist .day { flex: 1; text-align: center; border-radius: 10px; padding: 6px 0 4px; background: #f2f2f2; }
.hist .day b { display: block; font-size: .62rem; color: #999; font-weight: 600; }
.hist .day span { display: block; font-size: .85rem; font-weight: 700; color: #444; }
.hist .day em { display: block; font-style: normal; font-size: .85rem; line-height: 1.4; }
.hist .day.ok { background: #d9f2e3; }
.hist .day.bad { background: #fbdcd6; }
.hist .day.skip { background: #ececec; }
.hist .day.none { opacity: .4; }
.hist .day.today { outline: 2px solid #06a755; outline-offset: -1px; }
.hist-legend { font-size: .68rem; color: #999; margin-top: 6px; }
button, input, select { font-size: 1rem; padding: 10px; border-radius: 10px; border: 1px solid #ccc; width: 100%; margin-top: 6px; }
button { background: #06c755; color: #fff; border: none; font-weight: 700; }
button.secondary { background: #e8e8e8; color: #222; }
label { font-size: .85rem; color: #666; display: block; margin-top: 10px; }
.code { font-size: 1.6rem; letter-spacing: .3em; text-align: center; font-weight: 800; padding: 8px; }
a.cardlink { display: block; text-align: center; margin-top: 8px; color: #0a6cff; }
#toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%);
  background: #06a755; color: #fff; padding: 16px 32px; border-radius: 999px;
  font-size: 1.15rem; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.3);
  opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 999;
  max-width: 90vw; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#toast.show { opacity: 1; }
.chk { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: .95rem; color: #444; }
.chk input { width: 22px; height: 22px; margin: 0; accent-color: #06a755; }
#toast.err { background: #d64533; white-space: normal; }