*{box-sizing:border-box}body{margin:0;font-family:Sarabun,system-ui,sans-serif;display:flex;min-height:100vh;background:#f4f6f9;color:#1f2937;font-size:17px}
nav{width:220px;background:#4c1d95;color:#fff;padding:20px 14px;flex-shrink:0}nav h1{font-size:19px;margin:0 0 6px}nav .demo{background:#ffdf85;color:#000;font-size:13px;padding:4px 8px;border-radius:6px;margin-bottom:18px;display:inline-block}nav a{display:block;padding:12px 14px;border-radius:10px;margin-bottom:6px;color:#e9d5ff;text-decoration:none}nav a.on{background:#7c3aed;color:#fff;font-weight:700}
main{flex:1;padding:22px 28px}h2{font-size:26px;margin:0 0 4px}.sub{color:#6b7280;margin-bottom:16px}.card{background:#fff;border-radius:14px;padding:16px;box-shadow:0 1px 3px #0002;margin-bottom:16px}.row{display:flex;gap:16px;flex-wrap:wrap}
button,.btn{font:inherit;background:#7c3aed;color:#fff;padding:11px 22px;border-radius:12px;font-weight:700;border:0;cursor:pointer;text-decoration:none;display:inline-block}.btn.g,button.g{background:#16a34a}button.o{background:#fff;color:#7c3aed;border:2px solid #7c3aed}button.r{background:#dc2626}
.chip{font:inherit;display:inline-block;padding:7px 15px;border-radius:20px;border:2px solid #d1d5db;margin:0 6px 6px 0;background:#fff;color:#1f2937;font-weight:400}.chip.on{border-color:#7c3aed;background:#ede9fe;color:#5b21b6;font-weight:700}
input,select{font:inherit;padding:9px;border:2px solid #d1d5db;border-radius:10px;width:100%}input[type=range],input[type=checkbox]{width:auto}label{font-weight:700;display:block;margin:8px 0 4px}
.tpl{display:inline-flex;flex-direction:column;align-items:center;width:110px;padding:8px;border:2px solid #d1d5db;border-radius:12px;margin:0 8px 8px 0;cursor:pointer;background:#fff;color:#1f2937}.tpl.on{border-color:#7c3aed;background:#ede9fe}
.msg{margin-top:10px;padding:10px;border-radius:10px;background:#ecfdf5;color:#065f46;display:none}.msg.show{display:block}.msg.err{background:#fef2f2;color:#991b1b}
.prev{max-width:100%;max-height:300px;border:1px dashed #9ca3af;border-radius:8px;background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 0/20px 20px}
table{width:100%;border-collapse:collapse}td,th{padding:8px;border-bottom:1px solid #e5e7eb;text-align:left}

/* มือถือ + ฟอร์มป๊อปอัป (แก้ 31 ต.ค. 17:50: ปุ่มในฟอร์มล้นจอมือถือ กดไม่ได้) */
dialog{border:0;border-radius:14px;padding:18px;width:min(440px,94vw);max-height:88vh;overflow:auto;margin:auto}
dialog::backdrop{background:#0006}
dialog input,dialog select{margin-bottom:4px}
@media(max-width:760px){body{display:block;font-size:16px}nav{width:auto;padding:10px}nav a{display:inline-block;padding:8px 10px;margin:2px}main{padding:14px}table{display:block;overflow-x:auto;white-space:nowrap}}

/* ธีมดำทอง (31 ต.ค. 22:20) — พื้นหลังดำ เมนูดำทอง; พื้นที่ทำงาน/พรีวิว (.card, dialog, ตาราง) ยังเป็นสีขาว; สีตัวอักษรผ่าน WCAG AA */
:root{--bk:#0d0d0f;--bk2:#17171b;--gd:#C9A227;--gd2:#D4A017;--gdh:#B8901A;--gdk:#7A5C00;--ink:#1f2937}
body{background:var(--bk);color:#f3eee0}
nav{background:#000;border-right:1px solid #3a2f0b}nav h1,nav h1 a{color:var(--gd2)!important}nav a{color:#ece7da}nav a:hover{background:#1c1a12}nav a.on{background:var(--gd);color:#000}
nav .demo{background:var(--gd2);color:#000}
main>h2,main>h1{color:var(--gd2)}main>.sub,main>p{color:#cfc8b4}main a{color:var(--gd2)}
.card{background:#fff;color:var(--ink);border:1px solid #3a2f0b;box-shadow:0 2px 10px #0008}.card .sub,dialog .sub{color:#4b5563}.card a,dialog a{color:#7a5c00}
dialog{background:#fff;color:var(--ink)}
button,.btn{background:var(--gd);color:#000}button:hover,.btn:hover{background:var(--gdh)}button:disabled{background:#6b6b6b;color:#f3f3f3;cursor:not-allowed}
.btn.g,button.g{background:#15803d;color:#fff}button.r{background:#b91c1c;color:#fff}
button.o{background:#fff;color:#6b5000;border:2px solid var(--gdk)}
.chip.on,.tpl.on{border-color:var(--gdk);background:#fdf6dc;color:#5c4400}
input:focus,select:focus,button:focus-visible,a:focus-visible{outline:3px solid var(--gd2);outline-offset:2px}
main>table,main>.row>table{background:#fff;color:var(--ink)}
#regBar{color:var(--ink)}
a.btn,.card a.btn,main a.btn{color:#000}a.btn.o,.card a.btn.o{background:#fff;color:#6b5000;border:2px solid var(--gdk)}

nav a{display:flex;align-items:center;gap:10px}nav .ni{color:var(--gd);flex-shrink:0}nav a.on .ni{color:#000}
@media(max-width:760px){nav a{display:inline-flex}}

/* ฟอนต์ Prompt (Kiw เลือก 31 ต.ค. 23:37): หัวข้อ 500 · เนื้อความ 300 · ตัวหนา 600 — ไฟล์ในเว็บเอง (Thai+Latin, OFL) */
@font-face{font-family:Prompt;src:url(fonts/prompt-300.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:Prompt;src:url(fonts/prompt-500.woff2) format('woff2');font-weight:400 500;font-display:swap}
@font-face{font-family:Prompt;src:url(fonts/prompt-600.woff2) format('woff2');font-weight:600 900;font-display:swap}
body,button,input,select,textarea,.chip,.btn{font-family:Prompt,Sarabun,system-ui,sans-serif}
body{font-weight:300}
h1,h2,h3,h4,nav h1{font-weight:500}
label,button,.btn,nav a.on,th{font-weight:500}
b,strong{font-weight:600}