/* ธีมดำทองตามต้นแบบ MARICH /workspace/wt/som-marich-kiwcut/index.html
   พาเลต #0c0b0a / #141311 / #e8c77c / #c9a25a · ฟอนต์ Kanit + Cinzel
   พื้นที่ทำงาน (.card, dialog, ตารางในฟอร์ม) ยังขาว อ่านง่าย */
:root{
  --bk:#0c0b0a;--bk2:#141311;--gd:#e8c77c;--gd2:#f0d28c;--gda:#c9a25a;--muted:#9a8a6a;
  --card:#fff;--ink:#1f2937;--ok:#15803d;--warn:#c9a25a;--bad:#b91c1c;
  --bg:var(--bk);--pri:var(--gda);--pri-d:#8a6e3a;--nav:var(--bk);
}
*{box-sizing:border-box}
body{margin:0;font:300 16px/1.45 Kanit,system-ui,sans-serif;background:repeating-linear-gradient(90deg,var(--bk) 0 12px,var(--bk2) 12px 14px);color:var(--gd);min-height:100vh}
a{color:var(--gda)}
h1,h2,h3,h4{font-weight:500;color:var(--gd2)}
nav.top h1,.brand-cinzel{font-family:Cinzel,serif;font-weight:500;letter-spacing:.12em;color:var(--gd2)}
nav.top{background:var(--bk);color:var(--gd);padding:12px 18px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;border-bottom:1px solid #c9a25a33}
nav.top h1{font-size:18px;margin:0 12px 0 0}
nav.top a{color:var(--gd);text-decoration:none;padding:8px 12px;border-radius:10px;border:1px solid transparent}
nav.top a.on,nav.top a:hover{background:transparent;color:var(--gd2);border-color:var(--gda)}
main{padding:18px 22px;max-width:1100px;margin:0 auto}
.banner{background:#0c0b0acc;color:var(--gd2);border:1px solid var(--gda);padding:8px 12px;border-radius:8px;font-weight:500;text-align:center;margin-bottom:12px;letter-spacing:.08em}
.card{background:var(--card);color:var(--ink);border:1px solid #c9a25a55;border-radius:14px;padding:16px;box-shadow:0 2px 10px #0008;margin-bottom:16px}
.card .sub,.card p.sub{color:#4b5563}.sub{color:var(--muted);margin-bottom:12px}
.card a{color:#8a6e3a}
.row{display:flex;gap:16px;flex-wrap:wrap}
button,.btn{font:500 14px Kanit,system-ui,sans-serif;background:#0c0b0acc;color:var(--gd2);padding:10px 20px;border-radius:20px;border:1.5px solid var(--gda);cursor:pointer;text-decoration:none;display:inline-block;box-shadow:0 0 14px #c9a25a33}
button:hover,.btn:hover{background:var(--bk2);color:var(--gd2)}
.btn.g,button.g{background:#15803d;color:#fff;border-color:#15803d;box-shadow:none}
button.r,.btn.r{background:#b91c1c;color:#fff;border-color:#b91c1c;box-shadow:none}
button.o,.btn.o{background:#fff;color:#8a6e3a;border:1.5px solid var(--gda);box-shadow:none}
.chip{font:inherit;display:inline-block;padding:7px 15px;border-radius:20px;border:1.5px solid #d1d5db;margin:0 6px 6px 0;background:#fff;color:var(--ink)}
.chip.on{border-color:var(--gda);background:#fdf6dc;color:#5c4400;font-weight:500}
input,select,textarea{font:inherit;padding:9px;border:2px solid #d1d5db;border-radius:10px;width:100%;background:#fff;color:var(--ink)}
label{font-weight:500;display:block;margin:8px 0 4px;color:inherit}
.card label{color:var(--ink)}
table{width:100%;border-collapse:collapse}td,th{padding:8px;border-bottom:1px solid #e5e7eb;text-align:left;color:var(--ink)}
th{font-weight:500}
.msg{padding:8px 12px;border-radius:8px;background:#fdf6dc;color:#5c4400;margin:8px 0}
.msg.err{background:#fef2f2;color:#991b1b}
.msg.show{display:block}
.preview-box{border:2px dashed #c9a25a66;border-radius:12px;min-height:220px;display:flex;align-items:center;justify-content:center;background:#fff}
.slot{border:2px solid #e5e7eb;border-radius:12px;padding:10px;margin:6px 0;background:#fff;color:var(--ink)}
.slot.mine{border-color:var(--gda);background:#fdf6dc}
.st{display:inline-block;padding:2px 8px;border-radius:8px;font-size:12px;background:#eee;color:var(--ink)}
.st.priority{background:#fdf6dc;color:#5c4400}
.st.ok{background:#dcfce7;color:#166534}
.st.warn{background:#fef9c3;color:#854d0e}
.st.bad{background:#fee2e2;color:#991b1b}
.cal-day.mine{border-color:var(--gda)!important;background:#fdf6dc}
dialog{border:0;border-radius:14px;padding:18px;width:min(440px,94vw);max-height:88vh;overflow:auto;margin:auto;background:#fff;color:var(--ink)}
dialog::backdrop{background:#0008}
input:focus,select:focus,button:focus-visible,a:focus-visible{outline:3px solid var(--gda);outline-offset:2px}
@media(max-width:760px){main{padding:12px}nav.top a{padding:6px 8px;font-size:14px}table{display:block;overflow-x:auto;white-space:nowrap}}