/* CoCo Cottage – สีและรูปแบบที่ใช้ร่วมกันทุกหน้า */
:root{--navy:#395781;--navy-d:#2b4366;--navy-l:#e9eef6;--ink:#1d2b42;--muted:#66748a;--line:#d9e0ea;--card:#fff;--soft:#f4f6fa;
--green:#86c29a;--green-d:#3f8a5a;--green-l:#e6f3ea;--warn:#c2551f;--warn-l:#fdf0e8;--blue:#2c5d8a;--red:#c62828;--red-l:#fdecec;--gold:#9a6a00;--gold-l:#fff6dd}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Nunito Sans","Noto Sans Thai","Noto Sans Myanmar",system-ui,sans-serif;color:var(--ink);font-size:16px;line-height:1.5}
button{font:inherit;color:inherit}
.th{font-family:"Noto Sans Thai",sans-serif}.my{font-family:"Noto Sans Myanmar",sans-serif;line-height:1.8}
.muted{color:var(--muted);font-size:14px}
.hidden{display:none!important}
.btn{display:block;width:100%;border:0;border-radius:14px;padding:14px;font-weight:800;font-size:17px;background:var(--green);color:#173a26;cursor:pointer}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.red{background:var(--red);color:#fff}.btn.navy{background:var(--navy);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn.sm{display:inline-block;width:auto;padding:8px 14px;font-size:14px;border-radius:10px}
input,select,textarea{font:inherit;color:var(--ink)}
.fld label{display:block;font-size:13px;color:var(--muted);margin-bottom:2px}
.fld input,.fld select,textarea,.inp{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:9px 10px;background:#fff}
textarea{resize:vertical;min-height:64px}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(160px);background:#fff;color:var(--navy-d);padding:12px 18px;border-radius:12px;font-weight:700;transition:.3s;z-index:60;max-width:92vw;box-shadow:0 6px 24px rgba(0,0,0,.25);text-align:center}
.toast.on{transform:translateX(-50%) translateY(0)}
.toast.bad{background:var(--red);color:#fff}
.modal{position:fixed;inset:0;background:rgba(10,20,40,.6);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal.on{display:flex}
.mbox{background:#fff;border-radius:18px;padding:18px;max-width:440px;width:100%;display:grid;gap:10px;max-height:92vh;overflow:auto}
.mbox h3{margin:0}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{border:1.5px solid var(--line);background:var(--soft);border-radius:10px;padding:7px 11px;font-size:14px;cursor:pointer}
.opt.on{border-color:var(--green-d);background:var(--green-l);font-weight:800;color:#24533a}
.st{font-weight:800}.st.new{color:var(--warn)}.st.ack{color:var(--blue)}.st.done{color:var(--green-d)}