:root{--bg:#f2f4f7;--surface:#fff;--surface-2:#f7f8fa;--ink:#111a24;--ink-2:#3c4a58;--muted:#6b7887;--line:#e1e6ec;--line-2:#cfd7e0;
--accent:#0d6e8a;--accent-2:#0a5a71;--accent-soft:#e2f1f5;--ok:#157347;--ok-bg:#e3f4ea;--bad:#b3261e;--bad-bg:#fde7e4;--warn:#8a5a00;--warn-bg:#fdf1d8;
--font:"IBM Plex Sans Thai","Noto Sans Thai","Leelawadee UI",system-ui,sans-serif;--display:"Anuphan","IBM Plex Sans Thai",system-ui,sans-serif}
@media (prefers-color-scheme:dark){:root{--bg:#0c1117;--surface:#131a22;--surface-2:#18212b;--ink:#e6edf3;--ink-2:#b9c6d2;--muted:#8796a5;--line:#222c37;--line-2:#2e3a47;
--accent:#4fb6d1;--accent-2:#74c8de;--accent-soft:#12303a;--ok:#5fd395;--ok-bg:#11291d;--bad:#ff8f84;--bad-bg:#351513;--warn:#f0c35a;--warn-bg:#2e240c;color-scheme:dark}}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--font)}
h1,h2{font-family:var(--display);margin:0}h1{font-size:22px}h2{font-size:16px}
a{color:var(--accent)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(17,26,36,.05),0 4px 16px rgba(17,26,36,.05)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.card-b{padding:16px}
.btn{font:inherit;font-size:14px;padding:7px 12px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);cursor:pointer}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.primary:hover{background:var(--accent-2)}
.btn.sm{font-size:13px;padding:4px 9px}
label.f{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink-2)}
input,select,textarea{font:inherit;color:var(--ink);background:var(--surface-2);border:1px solid var(--line-2);border-radius:9px;padding:8px 10px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.err{color:var(--bad);background:var(--bad-bg);padding:8px 10px;border-radius:9px;font-size:14px}
.note{color:var(--warn);background:var(--warn-bg);padding:8px 10px;border-radius:9px;font-size:14px}
.muted{color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;color:var(--muted);font-weight:600}
.pill{display:inline-block;font-size:12px;padding:1px 8px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line)}
.pill.ok{color:var(--ok);background:var(--ok-bg);border-color:transparent}.pill.bad{color:var(--bad);background:var(--bad-bg);border-color:transparent}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:9px;font-size:14px}
[hidden]{display:none!important}