:root{--g:#2f7d5b;--gl:#e6f2ec;--bd:#e3e3e3;--tx:#222;--mu:#6b6b6b;--bg:#f7f7f5;--rd:#c0392b}
*{box-sizing:border-box}
body{margin:0;font-family:Sarabun,'Noto Sans Thai',sans-serif;background:var(--bg);color:var(--tx);font-size:15px}
a{color:var(--g)}
header.top{background:#fff;border-bottom:1px solid var(--bd);padding:10px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;position:sticky;top:0;z-index:5}
header.top h1{font-size:18px;margin:0;flex:1;min-width:180px}
body.shop header.top{background:#1f3b2f;color:#fff;border-color:#1f3b2f}
main{max-width:900px;margin:0 auto;padding:16px}
.card{background:#fff;border:1px solid var(--bd);border-radius:14px;padding:16px;margin-bottom:14px}
.card h2{font-size:16px;margin:0 0 10px}
.note{font-size:13px;color:var(--mu);margin-top:6px}
.step{color:var(--mu);font-size:13px;margin-bottom:4px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{border:1.5px solid var(--bd);background:#fff;border-radius:10px;padding:9px 13px;cursor:pointer;font:inherit;text-align:left;color:inherit}
.opt small{display:block;color:var(--mu)}
.opt.on{border-color:var(--g);background:var(--gl)}
.opt:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.days{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.day{min-width:60px;text-align:center;padding:7px 4px}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px}
.slot{padding:8px 0;text-align:center}
input,select,textarea{font:inherit;padding:9px 11px;border:1.5px solid var(--bd);border-radius:9px;width:100%;background:#fff;color:inherit}
label{display:block;font-size:13px;color:var(--mu);margin:8px 0 3px}
.btn{background:var(--g);color:#fff;border:0;border-radius:10px;padding:10px 16px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block;text-align:center}
.btn:disabled{background:#aaa;cursor:not-allowed}
.btn.sec{background:#fff;color:var(--g);border:1.5px solid var(--g)}
.btn.danger{background:var(--rd)}
.btn.sm{padding:6px 10px;font-size:13px}
.row{display:flex;gap:10px;flex-wrap:wrap}.row>*{flex:1;min-width:130px}
.err{color:var(--rd);font-size:13px;margin-top:6px;min-height:1em}
.box{background:#fff8e1;border:1px dashed #e0b84d;padding:10px;border-radius:10px;font-size:14px;margin:10px 0}
.hide{display:none!important}
.tabs{display:flex;gap:3px;background:#ffffff22;border-radius:10px;padding:3px;flex-wrap:wrap}
.tabs button{border:0;background:none;padding:6px 11px;border-radius:8px;font:inherit;cursor:pointer;font-size:14px;color:inherit}
.tabs button.on{background:#fff;color:#1f3b2f;font-weight:600}
table{border-collapse:collapse;width:100%}td,th{padding:6px 4px;border-bottom:1px solid #f0f0f0;text-align:left;font-size:14px}
td input[type=time]{width:110px;padding:5px}
.legend{font-size:12px;color:var(--mu);display:flex;gap:12px;margin:8px 0;flex-wrap:wrap}
.legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px;background:var(--c)}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#222;color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;opacity:0;transition:.3s;pointer-events:none;z-index:30;max-width:90%}
.toast.show{opacity:1}
.modal{position:fixed;inset:0;background:#0007;display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}
.modal .mbox{background:#fff;border-radius:16px;max-width:430px;width:100%;padding:20px;box-shadow:0 10px 40px #0004;color:#222}
.modal h3{margin:0 0 8px;font-size:18px}.modal .bd{color:#555;font-size:14px;line-height:1.5}
.modal .row{margin-top:16px}
/* calendars */
.cal{display:grid;border:1px solid var(--bd);border-radius:10px;overflow:hidden;font-size:12px;background:#fff}
.cal .h{background:#fafafa;border-bottom:1px solid var(--bd);padding:6px;font-weight:600;text-align:center}
.cal .h small{display:block;font-weight:400;color:var(--mu)}
.cal .h.today{background:var(--gl)}
.col{position:relative;border-left:1px solid var(--bd)}
.tcol .t{border-bottom:1px solid #f0f0f0;padding:2px 4px;color:var(--mu)}
.col .t{border-bottom:1px solid #f0f0f0}
.ev{position:absolute;left:3px;right:3px;border-radius:6px;padding:3px 5px;overflow:hidden;font-size:11.5px;line-height:1.3;cursor:pointer;background:#d4ecdf;border-left:3px solid var(--g)}
.ev.pending{background:#eee;border-left-color:#999;color:#555}
.ev.block{background:#fde2df;border-left-color:var(--rd)}
.ev.unpaid{background:#fff1d6;border-left-color:#c27a00!important}
.ev.awaiting{background:#ece3f7;border-left-color:#8a5cc2!important}
.calbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0}
.calbar .ttl{font-weight:700;font-size:16px;flex:1;min-width:150px;text-align:center}
.mcal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.mcal .wd{text-align:center;font-size:12px;color:var(--mu);padding:3px}
.mc{border:1px solid var(--bd);border-radius:8px;min-height:84px;padding:4px;font-size:11px;background:#fff;cursor:pointer;overflow:hidden}
.mc:hover{border-color:var(--g)}.mc.out{opacity:.35}.mc.today{outline:2px solid var(--g)}
.mc.closed{background:#f1f1f1}.mc .n{font-weight:700;font-size:13px;display:flex;justify-content:space-between}
.mc .cnt{background:var(--g);color:#fff;border-radius:99px;padding:0 6px;font-size:10.5px}
.mc .li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:3px solid;padding-left:3px;margin-top:2px}
.mc .cl{color:#888;font-size:10.5px}
.mday{border-radius:8px;min-height:56px;padding:5px;font-size:12px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid transparent}
.mday b{font-size:14px}.mday small{font-size:10.5px;line-height:1.2}
.mday.free{background:#e3f4ea;border-color:#bfe3cd;cursor:pointer}
.mday.few{background:#fff3c4;border-color:#f0dc8a;cursor:pointer}
.mday.full{background:#fde2df;color:#a33}
.mday.closed{background:#ececec;color:#888}
.mday.past,.mday.notyet{color:#bbb}
.welcome{border-radius:14px;padding:12px 14px;margin-bottom:12px;background:var(--gl)}
.list-row{display:flex;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid #f0f0f0;flex-wrap:wrap}
.list-row>.grow{flex:1;min-width:160px}
.swatch{width:14px;height:14px;border-radius:4px;display:inline-block;vertical-align:-2px}

.pw{position:relative}.pw input{padding-right:46px}
.pw .eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:none;font-size:18px;cursor:pointer;padding:6px 8px;line-height:1}
.req{color:var(--rd);margin-left:2px}
input.bad,textarea.bad{border-color:var(--rd)!important;background:#fff6f5}
.ferr{color:var(--rd);font-size:13px;margin-top:3px}