/* ===== ธีม "ว่างไหม" (Wangmai) — โทนส้มตามโลโก้ ===== */
:root {
  --brand: #FF6517; --brand-2: #FF8A3D; --brand-dk: #D9480B; --brand-bg: #FFF1E8; --sky: #FDA012;
  --red: var(--brand); --red-dk: var(--brand-dk); --red-bg: var(--brand-bg);
  --ink: #1F1A17; --ink2: #3A2E27; --ink3: #5A4A40;
  --paper: #FFF6EF; --card: #FFFFFF; --line: #F3E3D7; --line2: #EBCFBD; --line3: #FBEEE5;
  --muted: #6E6259; --muted2: #85776D;
  --yel: #FFD84D;
  --green: #11915A; --green-dk: #0B6B42; --green-bg: #E3F6EC; --green-ring: #BDEBD3;
  --blue: #1D5FD0; --blue-dk: #163F8C; --blue-bg: #E7EFFC;
  --r: 16px;
  --shadow: 0 6px 22px rgba(110, 50, 15, .08);
  --shadow-b: 0 8px 20px rgba(255, 101, 23, .28);
}
body {
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cg fill='%23FFE4D2'%3E%3Crect x='-60' y='80' width='220' height='220' rx='48' transform='rotate(-18 50 190)'/%3E%3Crect x='700' y='-40' width='260' height='260' rx='56' transform='rotate(22 830 90)'/%3E%3Crect x='740' y='640' width='200' height='200' rx='44' transform='rotate(-12 840 740)'/%3E%3C/g%3E%3Cg fill='%23FFD8BF'%3E%3Crect x='120' y='700' width='90' height='90' rx='22' transform='rotate(30 165 745)'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed; background-size: 900px 900px; background-repeat: repeat;
}
a { color: var(--brand); }
:focus-visible { outline-color: var(--sky); }

/* ปุ่ม การ์ด ช่องกรอก */
.btn { border-radius: 12px; border-color: var(--line2); }
.btn.primary { background: linear-gradient(135deg, var(--brand-2), var(--brand)); border-color: transparent; box-shadow: var(--shadow-b); }
.btn.primary:disabled { box-shadow: none; }
.btn.dark { background: var(--ink); border-color: var(--ink); }
.btn.green { box-shadow: 0 6px 16px rgba(17, 145, 90, .25); border-color: transparent; }
.card { border: 0; border-radius: var(--r); box-shadow: var(--shadow); }
.tag { border-radius: 999px; padding: 3px 12px; background: var(--brand); }
.pill.gray { background: var(--line3); }
.input, label.field input, label.field select, label.field textarea, .stepper { border-radius: 12px; border-color: var(--line2); }
.input:focus, label.field input:focus, label.field select:focus, label.field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px #FF65171f; }
.seg { background: #F7E7DC; border-radius: 12px; }
.seg button, .seg a { border-radius: 9px; }
.seg [aria-pressed="true"], .seg .on { color: var(--brand); box-shadow: 0 2px 8px rgba(110, 50, 15, .1); }
.notice { border-radius: 12px; }
.modal { border-radius: 22px 22px 0 0; }
@media (min-width: 700px) { .modal { border-radius: 22px; } }
.modal-back { background: rgba(40, 25, 15, .55); }
.modal .x { border-radius: 12px; background: var(--line3); }
.toast { background: var(--ink); border-radius: 14px; }

/* ผังโต๊ะ */
.floor { background: #FFFBF8; border: 0; border-radius: 20px; box-shadow: var(--shadow); }
.floor .decor { border-radius: 12px; color: var(--muted2); }
.floor .decor.wall { background: #F0D9C9; }
.floor .decor.label { background: #FCEFE6; }
.floor .decor.area { background: repeating-linear-gradient(135deg, #FCEFE6 0 8px, #FFF8F3 8px 16px); }
.floor .tbl { border-radius: 14px; border-color: #E9CDBB; }

/* ===== หน้าลูกค้า ===== */
body > .top {
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; border-bottom: 0;
  border-radius: 0 0 26px 26px; padding: 12px 16px 16px; box-shadow: var(--shadow-b);
}
.top .brand { background: #fff; border-radius: 14px; padding: 5px 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.top .brand img { height: 34px; }
.top .shop { color: #fff; }
.top .sub { color: #FFE3D1; }
.top .topbtn { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .35); color: #fff; }
.pkgs button, .dates button, .slots button { border-radius: 14px; border-color: var(--line); box-shadow: 0 2px 8px rgba(110, 50, 15, .05); }
.pkgs button[aria-pressed="true"] { background: linear-gradient(135deg, var(--brand-2), var(--brand)); box-shadow: var(--shadow-b); }
.pkgs button[aria-pressed="true"] small { color: #FFE3D1; }
.dates button[aria-pressed="true"], .slots button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }
.slots button:disabled { background: #F4ECE6; border-color: #F4ECE6; }
.floor .tbl.no { background: #F2E8E1; }
.floor .tbl.rule { background: #F8F0EA; border-color: #E6CFC0; }
.floor .tbl.sel { background: linear-gradient(135deg, var(--brand-2), var(--brand)); box-shadow: 0 0 0 6px #FFD2B8; }
.bar { border-top: 0; box-shadow: 0 -8px 26px rgba(110, 50, 15, .1); border-radius: 22px 22px 0 0; }
.otpbox input { border-radius: 12px; }
.consent { border: 1.5px solid var(--line2); border-radius: 14px; }
.ticketpage { background: linear-gradient(160deg, var(--brand-2), var(--brand) 55%, var(--brand-dk)); }
.ticket { border-radius: 22px; box-shadow: 0 16px 40px rgba(90, 35, 5, .35); }
.ticket .qr { border-radius: 16px; border-color: var(--line); }
.ticket .cut { border-top-color: var(--line2); }
.ticketpage .btn { border-radius: 14px; }
.ticketpage .btn.white { color: var(--brand); }
.ticketpage .btn.outline { border-color: rgba(255, 255, 255, .5); }
.ticketpage .note { background: rgba(255, 255, 255, .14); border-radius: 14px; }
.powered { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--muted2); }
.powered img { height: 22px; }

/* ===== หน้าพนักงาน ===== */
header.top.staff {
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; border-bottom: 0; padding: 10px 14px; box-shadow: var(--shadow-b);
}
.top .logochip { background: #fff; border-radius: 14px; padding: 5px 10px; display: flex; align-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.top .logochip img { height: 34px; }
.top .clock { color: #fff; }
.top .date { color: #FFE3D1; }
.top nav { background: rgba(255, 255, 255, .16); border-radius: 14px; }
.top nav a { color: #FFF3EA; border-radius: 10px; }
.top nav a.on { background: #fff; color: var(--brand); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.top nav a .badge { background: #1D5FD0; }
.top .newbtn { background: #fff; color: var(--brand); border-color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }
.top .me { background: rgba(255, 255, 255, .16); color: #fff; border-radius: 12px; }
.top .me i { background: var(--yel); }
.hero .a { border-radius: 18px; }
.hero .free { background: linear-gradient(135deg, #16A864, var(--green)); box-shadow: 0 8px 20px rgba(17, 145, 90, .3); }
.hero .next { border: 0; box-shadow: var(--shadow); }
.alert { border-radius: 18px; box-shadow: var(--shadow); }
.alert.due { background: linear-gradient(135deg, var(--brand-2), var(--brand)); }
.alert .btn { border-radius: 12px; }
table.list { border: 0; border-radius: 16px; box-shadow: var(--shadow); }
table.list th { background: #FFF7F1; }
.tl .now { background: #1D5FD0; }
/* หน้าเข้าระบบ */
.login { background: linear-gradient(160deg, var(--brand-2), var(--brand) 55%, var(--brand-dk)); }
.login .logocard { background: #fff; border-radius: 28px; padding: 18px 28px; box-shadow: 0 16px 40px rgba(90, 35, 5, .3); }
.login .logocard img { height: 150px; display: block; }
.login .ttl { background: rgba(255, 255, 255, .16); border-radius: 999px; padding: 6px 22px; font-size: 24px; }
.people button { background: #fff; color: var(--ink); border: 0; border-radius: 18px; box-shadow: 0 8px 20px rgba(90, 35, 5, .2); }
.people button[aria-pressed="true"] { background: #fff; border: 0; box-shadow: 0 0 0 4px var(--yel), 0 8px 20px rgba(90, 35, 5, .2); }
.people i { background: var(--brand-bg); color: var(--brand); }
.people small { color: var(--muted); }
.dots span { border-color: rgba(255, 255, 255, .6); }
.pad button { background: rgba(255, 255, 255, .16); border-radius: 16px; }
.pad button.go { background: #fff; color: var(--brand); font-weight: 700; }
.switch input:checked + span { background: var(--brand); }

/* ปรับเพิ่ม */
body > .top { flex-wrap: wrap; row-gap: 12px; }
body > .top .grow { order: 3; flex-basis: 100%; }
body > .top .brand img { height: 28px; }
body > .top .topbtn { margin-left: auto; }
.top .shop { font-size: 24px; }
.floor .tbl.cleaning { background: #F7EFE9; border-color: #CDB2A0; color: var(--muted); }
.login .small, .login a { color: #FFE3D1 !important; }
.people { display: flex; flex-wrap: wrap; justify-content: center; }
.people button { width: 170px; }
body > .top { position: relative; }
#app .floor .tbl { line-height: 1.02; }
#app .floor .tbl .n { font-size: 30px; }
#app .floor .tbl .s2 { font-size: 15px; }
.floor .tbl.closed { background: #F7EFE9; }
.tgrid button { border-radius: 12px; }
.tgrid button:disabled { background: #F7EFE9; border-color: #EFE2D8; }
.slotsrow button { border-radius: 12px; }
.slotsrow button:disabled { background: #FAF3EE; }
.tl .bar.buf { background: repeating-linear-gradient(135deg, #EBCFBD 0 4px, #FFF6EF 4px 8px); }
table.list tr.click:hover { background: #FFF8F4; }
.chips button { border-radius: 999px; }

.alert.due { background: linear-gradient(135deg, #2F7BEA, #1D5FD0); }
.top nav a .badge { background: #1D5FD0; }
.notice.info { background: var(--brand-bg); color: #9A3A06; }