:root {
  --bg: #f6f4f1; --card: #fff; --ink: #1f1d1b; --muted: #6b6560; --line: #e4dfd9;
  --red: #c8102e; --red-soft: #fbe9ec; --blue: #1d5fb8; --blue-soft: #e8f0fb; --green: #1f8a4c; --green-soft: #e6f5ec;
  --amber: #b86a00; --amber-soft: #fdf1df; --code: #faf8f5;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 Sarabun, system-ui, sans-serif; }
a { color: var(--blue); }
code, pre, .mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 13px; }
pre { white-space: pre-wrap; word-break: break-word; background: var(--code); border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin: 8px 0; }
h2 { margin: 8px 0 12px; font-size: 26px; }
h3 { margin: 0 0 10px; font-size: 19px; }
h4 { margin: 14px 0 6px; font-size: 16px; }
table { border-collapse: collapse; width: 100%; margin: 6px 0; }
th, td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
th { background: #f1ede8; font-weight: 600; font-size: 14px; }
.top { position: sticky; top: 0; z-index: 10; background: var(--red); color: #fff; display: flex; align-items: center; gap: 16px; padding: 8px 16px; flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 18px; white-space: nowrap; }
.brand span { font-weight: 400; opacity: .85; font-size: 14px; }
#nav { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; flex: 1; }
#nav a { color: #fff; text-decoration: none; padding: 6px 10px; border-radius: 8px; font-size: 15px; }
#nav a.on, #nav a:hover { background: rgba(255,255,255,.18); }
#nav .who { margin-left: auto; opacity: .9; font-size: 14px; }
.livebar { position: sticky; top: 48px; z-index: 9; background: #241f1c; color: #fff; padding: 8px 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 15px; }
.livebar #clock { font-variant-numeric: tabular-nums; background: #3a332e; padding: 2px 8px; border-radius: 6px; }
.livebar #clock.soon { background: var(--amber); }
.livebar #clock.over { background: var(--red); }
.livebar .msg { background: #fff3; padding: 2px 8px; border-radius: 6px; }
main { max-width: 1100px; margin: 0 auto; padding: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin: 14px 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.row.end { justify-content: space-between; margin-top: 18px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.grid5 { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.scroll { overflow-x: auto; }
.box { border-radius: 10px; padding: 10px 12px; margin: 10px 0; background: #f1ede8; }
.box.r { background: var(--red-soft); border-left: 4px solid var(--red); }
.box.b { background: var(--blue-soft); border-left: 4px solid var(--blue); }
.box.g { background: var(--green-soft); border-left: 4px solid var(--green); }
.box.a { background: var(--amber-soft); border-left: 4px solid var(--amber); }
.teach { background: #2b2622; color: #f3ece6; border-radius: 12px; padding: 12px 14px; margin: 12px 0; }
.teach pre { color: var(--ink); }
.btn { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 9px; padding: 8px 14px; font: inherit; cursor: pointer; text-decoration: none; min-height: 40px; }
.btn:hover { border-color: #c9c0b7; }
.btn.sm { padding: 4px 10px; font-size: 14px; min-height: 34px; }
.btn.ghost { background: transparent; }
.btn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.pass { background: var(--green); color: #fff; border-color: var(--green); }
.btn.fail { background: var(--red); color: #fff; border-color: var(--red); }
.btn[disabled] { opacity: .5; cursor: default; }
.field { display: block; margin: 8px 0; }
.field.inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lab { display: block; font-weight: 600; font-size: 15px; margin-bottom: 3px; }
.field.inline .lab { margin: 0; }
.inp { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid #d8d1ca; border-radius: 8px; background: #fffdfb; }
td .inp { min-width: 120px; padding: 5px 7px; font-size: 14px; }
select.inp { width: auto; max-width: 100%; }
textarea.inp { resize: vertical; }
.inp:focus { outline: 2px solid var(--blue); outline-offset: -1px; background: #fff; }
.inp[readonly] { background: #f3f0ec; }
.meta { font-size: 12px; color: var(--muted); min-height: 0; }
.key { margin-top: 4px; font-size: 14px; background: #fff8d6; border: 1px dashed #d8b600; border-radius: 6px; padding: 4px 8px; }
.key.tonly { background: #eee; border-color: #bbb; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 -4px; }
.tab { border: 1px solid var(--line); background: #fff; border-radius: 9px 9px 0 0; padding: 6px 14px; font: inherit; cursor: pointer; }
.tab.on { background: var(--ink); color: #fff; }
.reading table { font-size: 15px; }
.reading pre { font-size: 12.5px; }
.hero { background: linear-gradient(135deg, #fff, var(--red-soft)); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 14px 0; }
.tday { display: block; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px; color: var(--ink); text-decoration: none; min-height: 112px; }
.tday.session { border-color: var(--red); background: var(--red-soft); }
.tday.today { box-shadow: 0 0 0 3px var(--blue); }
.tday.locked { opacity: .5; }
.tday.done { border-color: var(--green); }
.tday .tn { font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; gap: 4px; }
.tday .tt { font-weight: 700; margin: 4px 0; line-height: 1.3; }
.tday .ts { font-size: 13px; color: var(--muted); }
.ladderbar { display: flex; gap: 6px; flex-wrap: wrap; }
.lstep { flex: 1; min-width: 90px; border: 1px solid var(--line); border-radius: 10px; padding: 8px; text-align: center; }
.lstep b { display: block; }
.lstep.ok { background: var(--green-soft); border-color: var(--green); }
.steps { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 8px; }
.step { flex: 0 0 auto; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 6px 10px; font: inherit; cursor: pointer; max-width: 210px; }
.step b { display: block; font-size: 13px; }
.step span { font-size: 13.5px; display: block; line-height: 1.3; }
.step.on { background: var(--ink); color: #fff; }
.step.live { box-shadow: 0 0 0 3px var(--red); }
.stephead { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.stephead h3 { margin: 0; font-size: 22px; }
.pill { background: #ece6df; border-radius: 99px; padding: 2px 10px; font-size: 14px; }
.pill.live { background: var(--red); color: #fff; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.gcard { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.gcard.r { border-top: 5px solid var(--blue); }
.gcard.t { border-top: 5px solid var(--red); }
.gcard.a { border-top: 5px solid var(--amber); }
.gcard.pass { background: var(--green-soft); }
.gcard.fail { background: var(--red-soft); }
.gcard.star { background: #fff8d6; }
.gcard .cid { font-weight: 700; display: flex; justify-content: space-between; }
.gcard .lv { font-weight: 400; font-size: 13px; color: var(--muted); }
.gcard pre.code { font-size: 12px; margin: 0; }
.gcard .cb { display: flex; gap: 6px; flex-wrap: wrap; }
.res { font-size: 12px; margin: 0; }
.res.warn { background: var(--red-soft); }
.res.okk { background: var(--green-soft); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip { border: 1px solid #cfc6bd; background: #fff; border-radius: 99px; padding: 4px 12px; font: 14px 'JetBrains Mono', monospace; cursor: pointer; }
.chip.on { background: var(--ink); color: #fff; }
.chip.k { box-shadow: inset 0 -3px 0 var(--green); }
.chip.x { box-shadow: inset 0 -3px 0 var(--red); text-decoration: line-through; }
.ans { font-size: 13px; font-weight: 700; }
.ans.keep { color: var(--green); }
.ans.cut { color: var(--red); }
.trace td { min-width: 150px; }
.qr svg { width: 180px; height: 180px; display: block; }
.prompt { font-size: 13px; max-height: 320px; overflow: auto; }
.md { font-size: 13px; max-height: 480px; overflow: auto; }
.pre { white-space: pre-wrap; background: #faf8f5; border-radius: 6px; padding: 6px 8px; margin: 2px 0 8px; }
.peer { border-top: 1px solid var(--line); padding: 8px 0; }
.peer summary { cursor: pointer; font-weight: 600; }
.lab-stage { height: 560px; border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; background: #fff; margin: 8px 0; }
.lab-frame { width: 100%; height: 100%; border: 0; background: #fff; }
.lab-empty { display: grid; place-items: center; height: 100%; color: var(--muted); }
.console { background: #1d1a18; color: #e8e2dc; font: 12.5px 'JetBrains Mono', monospace; border-radius: 8px 8px 0 0; padding: 8px; height: 130px; overflow: auto; white-space: pre-wrap; }
.console .error { color: #ff8f8f; }
.console .warn { color: #ffd27a; }
.console .cmd { color: #8fc3ff; }
.console .res { color: #b6f0b6; background: none; }
.console + .inp { border-radius: 0 0 8px 8px; background: #2a2522; color: #fff; border-color: #2a2522; }
.codeview { margin-top: 10px; }
.lines { max-height: 520px; overflow: auto; font-size: 12.5px; padding: 0; }
.lines div { padding: 0 8px; white-space: pre-wrap; }
.lines .ln { display: inline-block; width: 3.2em; color: #a49b92; user-select: none; }
.lines .hit { background: #fff3a8; }
.lines .mark-b { background: var(--blue-soft); font-weight: 700; }
.lines .mark-f { background: var(--green-soft); font-weight: 700; }
tr.pass td { background: var(--green-soft); }
tr.fail td { background: var(--red-soft); }
tr.new td { animation: flash 2.5s ease-out; }
@keyframes flash { from { background: #fff3a8; } to { background: transparent; } }
td.st.PAID { color: var(--blue); font-weight: 700; }
td.st.COMPLETED { color: var(--green); font-weight: 700; }
td.st.CANCELLED, td.st.EXPIRED { color: var(--muted); }
.thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.thumbs img { height: 90px; border-radius: 6px; border: 1px solid var(--line); }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 10px; z-index: 50; }
.toast.bad { background: var(--red); }
.ok { color: var(--green); font-weight: 600; }
details summary { cursor: pointer; }
.pform { border: 1px dashed #cfc6bd; border-radius: 10px; padding: 8px 12px; margin: 8px 0; }
.ev { break-inside: avoid; }
@media (max-width: 760px) {
  body { font-size: 15.5px; }
  main { padding: 10px 16px; }
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .grid2, .grid4 { grid-template-columns: 1fr; }
  .lab-stage { height: 480px; }
  #nav .who { display: none; }
  .top { padding: 6px 10px; gap: 8px; flex-wrap: nowrap; }
  .brand { font-size: 16px; }
  #nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #nav a { white-space: nowrap; padding: 6px 8px; font-size: 14px; }
  .livebar { top: 0; position: relative; }
  .brand span { display: none; }
}
@media print {
  .top, .livebar, .noprint, .btn { display: none !important; }
  body { background: #fff; }
  .card { border: 0; padding: 0; }
}