:root{
  --bg:#f4f3fa; --panel:#ffffff; --line:#e6e4f0; --text:#1e1b2e; --muted:#6f6b85;
  --brand:#7c5cff; --brand-2:#a78bfa; --brand-soft:#efeaff; --ok:#16a34a; --warn:#d97706; --danger:#dc2626; --info:#2563eb;
  --radius:14px; --shadow:0 6px 24px rgba(60,40,120,.08);
  --sidebar:232px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:'Sarabun','Noto Sans Thai',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:15px;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0 0 .5rem;font-weight:700}
h1{font-size:1.4rem} h2{font-size:1.15rem} h3{font-size:1rem}
.muted{color:var(--muted)} .small{font-size:.85rem} .right{text-align:right} .center{text-align:center}
.nowrap{white-space:nowrap} .bold{font-weight:700} .hidden{display:none!important}
.mt{margin-top:1rem} .mb{margin-bottom:1rem} .gap{gap:.5rem}
.flex{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap} .between{justify-content:space-between} .col{flex-direction:column;align-items:stretch}
.grow{flex:1 1 auto}
.grid{display:grid;gap:1rem} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* layout */
#app{display:flex;min-height:100vh}
aside.sidebar{width:var(--sidebar);background:#1d1836;color:#e9e6ff;padding:1rem .75rem;position:fixed;inset:0 auto 0 0;overflow:auto;z-index:20;transition:transform .2s}
aside .brand{font-weight:800;font-size:1.15rem;padding:.5rem .75rem 1rem;display:flex;align-items:center;gap:.5rem}
aside .brand .logo{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--brand),#ff7ab6);display:inline-flex;align-items:center;justify-content:center;font-weight:900}
aside nav a{display:flex;align-items:center;gap:.6rem;padding:.6rem .75rem;border-radius:10px;color:#cfc9ee;margin-bottom:2px}
aside nav a:hover{background:rgba(255,255,255,.06);color:#fff}
aside nav a.active{background:var(--brand);color:#fff}
aside nav a .ico{width:22px;text-align:center}
aside nav a .badge{margin-left:auto}
aside .user{margin-top:1rem;padding:.75rem;border-top:1px solid rgba(255,255,255,.1);font-size:.85rem;color:#bdb6e0}
main.content{margin-left:var(--sidebar);flex:1;padding:1.25rem 1.5rem 3rem;min-width:0}
.topbar{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}
.topbar h1{flex:1}
.hamburger{display:none}
@media(max-width:900px){
  aside.sidebar{transform:translateX(-100%)} aside.sidebar.open{transform:none;box-shadow:0 0 0 100vw rgba(0,0,0,.35)}
  main.content{margin-left:0;padding:1rem}
  .hamburger{display:inline-flex}
}

/* components */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem;box-shadow:var(--shadow)}
.card.tight{padding:.75rem}
.card h2,.card h3{margin-bottom:.75rem}
.stat{display:flex;flex-direction:column;gap:.25rem}
.stat .v{font-size:1.5rem;font-weight:800} .stat .l{color:var(--muted);font-size:.85rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.5rem .9rem;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer;font-weight:600;line-height:1.2;white-space:nowrap}
.btn:hover{background:#faf9ff;border-color:#d5d0ea}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff} .btn.primary:hover{background:#6a4be6}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.danger{background:#fff;border-color:#f3c1c1;color:var(--danger)} .btn.danger:hover{background:#fff3f3}
.btn.ghost{background:transparent;border-color:transparent} .btn.ghost:hover{background:var(--brand-soft)}
.btn.sm{padding:.3rem .6rem;font-size:.85rem;border-radius:8px}
.btn.lg{padding:.75rem 1.2rem;font-size:1.05rem}
.btn.block{width:100%}
.badge{display:inline-block;padding:.15rem .5rem;border-radius:999px;font-size:.75rem;font-weight:700;background:var(--brand-soft);color:var(--brand)}
.badge.ok{background:#dcfce7;color:#15803d} .badge.warn{background:#fef3c7;color:#b45309} .badge.danger{background:#fee2e2;color:#b91c1c} .badge.info{background:#dbeafe;color:#1d4ed8} .badge.gray{background:#eee;color:#555}
.pill{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .6rem;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:.85rem}
.pill.active{background:var(--brand);border-color:var(--brand);color:#fff}

label.f{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:var(--muted);font-weight:600}
label.f>span.req::after{content:' *';color:var(--danger)}
input.in,select.in,textarea.in{width:100%;padding:.55rem .7rem;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text);font-weight:400;font-size:.95rem}
input.in:focus,select.in:focus,textarea.in:focus{outline:2px solid var(--brand-2);border-color:var(--brand)}
textarea.in{min-height:80px;resize:vertical}
input.in.sm,select.in.sm{padding:.35rem .5rem;font-size:.9rem}
.form{display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr)} .form .full{grid-column:1/-1}
@media(max-width:600px){.form{grid-template-columns:1fr}}
.check{display:flex;align-items:center;gap:.5rem;font-weight:500;color:var(--text)}
.search{display:flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--line);border-radius:10px;padding:.35rem .6rem;flex:1;min-width:200px}
.search input{border:0;outline:0;flex:1;padding:.25rem;background:transparent}

.table-wrap{overflow:auto;border-radius:var(--radius);border:1px solid var(--line);background:#fff}
table.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
table.tbl th,table.tbl td{padding:.55rem .7rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
table.tbl th{background:#faf9ff;color:var(--muted);font-weight:700;font-size:.8rem;white-space:nowrap;position:sticky;top:0}
table.tbl tr.click{cursor:pointer} table.tbl tr.click:hover{background:#faf9ff}
table.tbl td.num,table.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
table.tbl tfoot td{font-weight:700;background:#faf9ff}
.empty{padding:2rem;text-align:center;color:var(--muted)}

.tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--line);margin-bottom:1rem;overflow:auto}
.tabs button{border:0;background:transparent;padding:.6rem .9rem;cursor:pointer;color:var(--muted);font-weight:600;border-bottom:2px solid transparent;white-space:nowrap}
.tabs button.active{color:var(--brand);border-bottom-color:var(--brand)}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(20,15,40,.45);display:flex;align-items:flex-start;justify-content:center;padding:3vh 1rem;z-index:50;overflow:auto}
.modal{background:#fff;border-radius:16px;width:100%;max-width:640px;box-shadow:0 20px 60px rgba(0,0,0,.25);animation:pop .15s ease-out}
.modal.wide{max-width:960px} .modal.narrow{max-width:420px}
.modal header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--line)}
.modal header h2{margin:0}
.modal .body{padding:1.25rem}
.modal footer{display:flex;justify-content:flex-end;gap:.5rem;padding:.9rem 1.25rem;border-top:1px solid var(--line);flex-wrap:wrap}
@keyframes pop{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.close{border:0;background:transparent;font-size:1.4rem;cursor:pointer;color:var(--muted)}

#toast{position:fixed;bottom:1.25rem;left:50%;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:.5rem;align-items:center}
#toast div{background:#1d1836;color:#fff;padding:.6rem 1rem;border-radius:10px;box-shadow:var(--shadow);animation:pop .2s}
#toast div.ok{background:var(--ok)} #toast div.err{background:var(--danger)}

/* login */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;background:linear-gradient(160deg,#1d1836,#5b3fd6 60%,#ff7ab6)}
.login .card{width:100%;max-width:420px}

/* calendar */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal .d{background:#fff;border:1px solid var(--line);border-radius:8px;min-height:84px;padding:.3rem;font-size:.8rem;cursor:pointer}
.cal .d.other{opacity:.45} .cal .d.today{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.cal .d .n{font-weight:700;color:var(--muted)} .cal .d .ev{display:block;padding:.1rem .3rem;border-radius:5px;margin-top:2px;color:#fff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cal .h{text-align:center;font-size:.8rem;color:var(--muted);font-weight:700;padding:.25rem}
.timeline{display:grid;grid-template-columns:60px 1fr;gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.timeline .slot{border-bottom:1px dashed var(--line);min-height:44px;padding:.15rem .3rem;display:flex;gap:.3rem;flex-wrap:wrap;align-items:flex-start}
.timeline .t{border-bottom:1px dashed var(--line);border-right:1px solid var(--line);font-size:.75rem;color:var(--muted);padding:.2rem .3rem;background:#faf9ff}
.appt{border-radius:8px;padding:.25rem .5rem;font-size:.82rem;cursor:pointer;border-left:4px solid var(--brand);background:var(--brand-soft);min-width:140px}
.appt.requested{border-left-color:var(--warn);background:#fff7e6} .appt.confirmed{border-left-color:var(--info);background:#eaf2ff}
.appt.arrived{border-left-color:#0891b2;background:#e0f7fa} .appt.done{border-left-color:var(--ok);background:#e8f7ee;opacity:.8}
.appt.cancelled,.appt.noshow{border-left-color:#999;background:#f1f1f1;text-decoration:line-through;opacity:.7}

/* POS */
.pos{display:grid;grid-template-columns:1fr 380px;gap:1rem} @media(max-width:1000px){.pos{grid-template-columns:1fr}}
.pos .items .item{padding:.5rem 0;border-bottom:1px solid var(--line)}
.pos .catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem;max-height:60vh;overflow:auto}
.pos .catalog button{text-align:left;padding:.5rem .6rem;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
.pos .catalog button:hover{border-color:var(--brand)} .pos .catalog button .p{color:var(--brand);font-weight:700;font-size:.85rem}
.total{font-size:1.6rem;font-weight:800;text-align:right}

/* LINE chat */
.chat{display:grid;grid-template-columns:320px 1fr;gap:1rem;height:calc(100vh - 140px);min-height:480px}
@media(max-width:900px){.chat{grid-template-columns:1fr;height:auto} .chat .convs.hide-m{display:none} .chat .pane.hide-m{display:none}}
.convs{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.conv{display:flex;gap:.6rem;padding:.6rem .75rem;border-bottom:1px solid var(--line);cursor:pointer;align-items:center}
.conv:hover,.conv.active{background:var(--brand-soft)}
.conv img,.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#ddd;flex:none;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#fff}
.conv .meta{min-width:0;flex:1} .conv .meta .n{font-weight:700;display:flex;justify-content:space-between;gap:.5rem} .conv .meta .m{color:var(--muted);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pane{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:#fff;min-height:400px}
.pane .head{padding:.6rem .9rem;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.pane .msgs{flex:1;overflow:auto;padding:1rem;background:#f7f6fc;display:flex;flex-direction:column;gap:.4rem}
.msg{max-width:72%;padding:.5rem .75rem;border-radius:14px;font-size:.92rem;white-space:pre-wrap;word-break:break-word}
.msg.in{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.out{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:4px}
.msg .t{display:block;font-size:.7rem;opacity:.7;margin-top:.2rem}
.msg img{max-width:100%;border-radius:8px}
.pane .compose{display:flex;gap:.5rem;padding:.6rem;border-top:1px solid var(--line)}
.pane .compose textarea{flex:1;min-height:44px}
.quick{display:flex;gap:.3rem;padding:.3rem .6rem;flex-wrap:wrap;border-top:1px solid var(--line)}

.kv{display:grid;grid-template-columns:auto 1fr;gap:.25rem .75rem;font-size:.92rem} .kv dt{color:var(--muted)} .kv dd{margin:0}
.tier{display:inline-block;padding:.2rem .6rem;border-radius:8px;font-weight:800;background:linear-gradient(135deg,#ffd76e,#f59e0b);color:#3b2a00}
.tier.Member{background:#e5e7eb;color:#333} .tier.Silver{background:linear-gradient(135deg,#e5e7eb,#9ca3af);color:#222} .tier.Platinum{background:linear-gradient(135deg,#c7d2fe,#6366f1);color:#fff}
.progress{height:8px;background:#eee;border-radius:99px;overflow:hidden} .progress i{display:block;height:100%;background:var(--brand)}
.dropzone{border:2px dashed var(--line);border-radius:var(--radius);padding:1.5rem;text-align:center;color:var(--muted);cursor:pointer}
.dropzone:hover{border-color:var(--brand);background:var(--brand-soft)}
.alert{padding:.75rem 1rem;border-radius:10px;background:#fff7e6;border:1px solid #fde1a8;color:#7a4b00}
.alert.info{background:#eaf2ff;border-color:#c7dbff;color:#1e3a8a} .alert.danger{background:#fee2e2;border-color:#fecaca;color:#7f1d1d} .alert.ok{background:#e8f7ee;border-color:#bbf7d0;color:#14532d}
.receipt{font-family:'Sarabun',system-ui;max-width:380px;margin:0 auto;font-size:.9rem}
.receipt table{width:100%;border-collapse:collapse} .receipt td{padding:.15rem 0}
@media print{aside,.topbar,.no-print{display:none!important} main.content{margin:0;padding:0} .modal-bg{position:static;background:none;padding:0} .modal{box-shadow:none;max-width:none} .modal header,.modal footer{display:none}}
.spin{display:inline-block;width:16px;height:16px;border:2px solid #ccc;border-top-color:var(--brand);border-radius:50%;animation:sp .7s linear infinite;vertical-align:middle}
@keyframes sp{to{transform:rotate(360deg)}}
.loading{padding:2rem;text-align:center;color:var(--muted)}
kbd{background:#eee;border-radius:4px;padding:0 .3rem;font-size:.8rem}
.chips{display:flex;flex-wrap:wrap;gap:.3rem}
details.card summary{cursor:pointer;font-weight:700}