:root{
  --bg:#f3f2ee;--paper:#fff;--ink:#1c1c1a;--mute:#64635e;--line:#bfbdb5;--head:#e8e6de;--accent:#1f4e79;--accent-ink:#fff;
  --g:#fff3c4;--g-ink:#6b4a00;--n:#ffd6bf;--n-ink:#7a2600;--a:#e4e9f2;--a-ink:#33486b;--h:#dff0df;--h-ink:#1f5a26;--x:#ecebe7;--x-ink:#8a8983;--s:#cfe6ff;--s-ink:#0b3a6b;--err:#b3261e;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#16171a;--paper:#1e1f23;--ink:#ececec;--mute:#a2a3a8;--line:#3b3c43;--head:#292a30;--accent:#8fbce6;--accent-ink:#10202f;
  --g:#4a3d12;--g-ink:#ffd97a;--n:#55291a;--n-ink:#ffb597;--a:#273246;--a-ink:#b9c9e6;--h:#1d3a22;--h-ink:#9bdca4;--x:#26272b;--x-ink:#77787e;--s:#153a5e;--s-ink:#bfe0ff;--err:#ff8a80;
}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 "Sarabun","Leelawadee UI","Tahoma",sans-serif;display:flex;flex-direction:column;min-height:100vh}
header{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:flex-end;justify-content:space-between;padding:10px 16px 6px;background:var(--paper);border-bottom:1px solid var(--line)}
h1{font-size:18px;margin:0}
.sub{color:var(--mute);font-size:13px}
.who{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:13px}
input,select,textarea,button{font:inherit;color:inherit}
input[type=text],input[type=number],select,textarea{background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:5px 8px;min-width:0}
button{background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:5px 12px;cursor:pointer}
button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
button:disabled{opacity:.5;cursor:default}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.legend{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:6px 16px;font-size:12.5px;background:var(--paper);border-bottom:1px solid var(--line)}
.chip{display:inline-block;padding:0 8px;border:1px solid var(--line);border-radius:3px;background:var(--paper)}
.hint{color:var(--mute)}
.status{padding:0 16px;font-size:13px}
.status .box{margin:8px 0;padding:8px 12px;border:1px solid var(--line);background:var(--paper)}
.status .box.bad{border-color:var(--err);color:var(--err)}
main{flex:1 0 auto;padding:8px 16px 12px}
.titles{background:var(--paper);border:1px solid var(--line);border-bottom:0;padding:6px 10px;text-align:center;font-weight:600}
.note{background:var(--paper);border:1px solid var(--line);padding:10px 12px;margin:0 0 8px;max-width:900px}
.wrap{background:var(--paper);border:1px solid var(--line);overflow:auto;max-height:max(320px,calc(100vh - 150px))}
table{border-collapse:separate;border-spacing:0;font-size:12.5px;font-variant-numeric:tabular-nums}
th,td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:3px 7px;white-space:nowrap;background:var(--paper)}
thead th{background:var(--head);font-weight:600;text-align:center;position:sticky;top:0;z-index:2}
thead tr.r2 th{top:var(--h1,27px)}
td{cursor:pointer;max-width:340px;overflow:hidden;text-overflow:ellipsis}
td.num{text-align:right}
td.pin{z-index:1;box-shadow:inset -1px 0 0 var(--line)}
thead th.pin{z-index:3}
tr.tot td{font-weight:700;background:var(--head);cursor:default}
td.g,.chip.g{background:var(--g);color:var(--g-ink)}
td.n,.chip.n{background:var(--n);color:var(--n-ink)}
td.a,.chip.a{background:var(--a);color:var(--a-ink)}
td.h,.chip.h{background:var(--h);color:var(--h-ink)}
td.x,.chip.x{background:var(--x);color:var(--x-ink)}
td.s,.chip.s{background:var(--s);color:var(--s-ink);font-weight:600}
td.h,td.x{cursor:default}
td:hover{box-shadow:inset 0 0 0 2px var(--accent)}
td.h:hover,td.x:hover,tr.tot td:hover{box-shadow:none}
.guide{background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--line);padding:6px 10px;margin:0 0 8px;font-size:13px}
.guide.k-main{border-left-color:var(--accent)}
.guide.k-fill{border-left-color:var(--g-ink)}
.start{max-width:1000px}
.start h2{font-size:17px;margin:4px 0 6px}
.start h3{font-size:14px;margin:18px 0 6px}
.start p,.start ol{background:var(--paper);border:1px solid var(--line);margin:0 0 8px;padding:10px 14px}
.start ol{padding-left:34px}
.start li{margin:6px 0}
.start ul{margin:4px 0;padding-left:20px}
.start button{margin-left:6px;padding:2px 10px;font-size:13px}
.start .wrap{max-height:none}
.start td{cursor:default}
.start td:hover{box-shadow:none}
.soft{color:var(--mute)}
td.wraptext{white-space:normal;max-width:520px;min-width:220px}
.tabs button.k-ref{color:var(--mute)}
.tabs button.k-main{font-weight:600}
.tabs button.start{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.tabs button.start[aria-selected=true]{background:var(--paper);color:var(--ink)}
.below{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px;color:var(--mute);font-size:13px}
.tabs{display:flex;gap:2px;overflow-x:auto;padding:4px 12px 6px;background:var(--head);border-top:1px solid var(--line);position:sticky;bottom:0;z-index:5}
.tabs button{border-radius:0 0 4px 4px;border-top:0;white-space:nowrap;font-size:13px;padding:4px 12px}
.tabs button[aria-selected=true]{background:var(--paper);font-weight:700;border-color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}
.tabs button.extra{background:var(--s);color:var(--s-ink)}
dialog{border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);padding:0;width:min(640px,calc(100vw - 24px))}
dialog::backdrop{background:rgba(0,0,0,.45)}
form{display:flex;flex-direction:column;gap:10px;padding:16px}
form h2{font-size:16px;margin:0}
form label{display:flex;flex-direction:column;gap:3px;font-size:13px;flex:1;min-width:0}
form .row{display:flex;flex-wrap:wrap;gap:10px}
form .row>label{min-width:200px}
fieldset{border:1px solid var(--line);border-radius:3px;display:flex;flex-wrap:wrap;gap:4px 16px;padding:6px 10px;margin:0}
legend{font-size:13px;padding:0 4px}
label.radio{flex-direction:row;align-items:center;gap:6px;flex:none}
.ctx{font-size:13px;color:var(--mute);background:var(--head);padding:6px 8px;border-radius:3px}
.quick{display:flex;flex-wrap:wrap;gap:6px}
.quick:empty{display:none}
.quick button{font-size:12.5px;padding:2px 10px;border-style:dashed}
button.link{border:0;background:none;color:var(--accent);text-decoration:underline;padding:0}
input[readonly]{background:var(--head)}
.h3{font-size:14px;margin:18px 0 6px}
.err{color:var(--err);font-size:13px;min-height:1em}
.actions{display:flex;justify-content:flex-end;gap:8px}
@media (max-width:640px){
  header,.legend,.status,main{padding-left:10px;padding-right:10px}
  .wrap{max-height:75vh}
  .hint{flex-basis:100%}
}