:root{
  --ground:#EEF2EE; --surface:#FFFFFF; --surface-2:#F1F5F1; --surface-3:#E4EBE5;
  --ink:#14201A; --ink-2:#53665D; --ink-3:#84968C;
  --line:#DCE4DE; --line-2:#C3D0C8;
  --brand:#0D5334; --brand-2:#17754A; --brand-soft:#E3EFE8; --on-brand:#FFFFFF;
  --court:#2A6F8E; --court-soft:#E4EFF4;
  --gold:#8F6410; --gold-soft:#F8EFD9;
  --red:#A93526; --red-soft:#F9E7E4;
  --shadow-l:0 -6px 30px rgba(20,32,26,.10);
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --body:"IBM Plex Sans Thai","Noto Sans Thai",system-ui,sans-serif;
  --disp:"Bai Jamjuree","IBM Plex Sans Thai",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--body);font-size:15px;line-height:1.6}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select{font:inherit;color:inherit}
.hide{display:none!important}
.phone{max-width:470px;margin:0 auto;background:var(--surface);min-height:100vh;
  display:flex;flex-direction:column;box-shadow:0 0 0 1px var(--line)}

header{padding:calc(14px + env(safe-area-inset-top,0px)) 18px 12px;
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:11px;
  position:sticky;top:0;z-index:5;background:var(--surface)}
.hlogo{height:26px;width:auto;display:block;flex:0 0 auto}
header .ht{min-width:0;flex:1}
header h1{font-family:var(--disp);font-size:15.5px;font-weight:600;margin:0;line-height:1.25}
header .sub{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.04em}
.tbtn{flex:0 0 auto;border:1px solid var(--line);border-radius:9px;padding:6px 11px;
  font-size:12.5px;color:var(--ink-2)}
.tbtn:active{background:var(--surface-2)}

main{flex:1;padding:15px 18px 180px}
.rowlab{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 8px}

.days{display:flex;gap:6px;overflow-x:auto;margin:0 -18px 18px;padding:0 18px 4px;scrollbar-width:none}
.days::-webkit-scrollbar{display:none}
.day{flex:0 0 54px;border:1px solid var(--line);border-radius:11px;background:var(--surface);
  padding:8px 0 7px;text-align:center}
.day .dow{font-family:var(--mono);font-size:10px;color:var(--ink-3)}
.day .dd{font-family:var(--disp);font-size:19px;font-weight:600;line-height:1.25}
.day .mo{font-family:var(--mono);font-size:9.5px;color:var(--ink-3)}
.day[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.day[aria-pressed="true"] .dow,.day[aria-pressed="true"] .mo{color:rgba(255,255,255,.75)}
.day.gone{opacity:.42}
.day:focus-visible,.slot:focus-visible,.cta:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px}

.grid{display:grid;gap:5px}
.gh{font-family:var(--mono);font-size:10px;color:var(--ink-3);text-align:center;padding-bottom:3px}
.gt{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;
  display:flex;align-items:center;justify-content:flex-end;padding-right:5px}
.slot{border:1px solid var(--line-2);border-radius:9px;background:var(--surface);min-height:52px;
  padding:5px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.slot .p{font-family:var(--mono);font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums}
.slot .t{font-size:9.5px;color:var(--ink-3);line-height:1.2;text-align:center}
.slot:active{transform:scale(.96)}
.slot.sel{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.slot.sel .t{color:rgba(255,255,255,.78)}
.slot.busy{background:var(--surface-2);border:1px dashed var(--line-2);color:var(--ink-3)}
.slot.busy .p{font-size:10.5px;font-weight:400}
.slot.ev{background:var(--court-soft);border-color:var(--court);color:var(--court)}
.slot.ev .p{font-size:10px;line-height:1.2}
.slot.past{background:var(--surface-2);border:0;color:var(--ink-3);opacity:.55}
.slot.past .p{font-size:10.5px;font-weight:400}

.legend{display:flex;flex-wrap:wrap;gap:9px 15px;margin-top:14px;font-size:11.5px;color:var(--ink-2)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:4px;border:1px solid var(--line-2);
  margin-right:5px;vertical-align:-2px}
.l-free{background:var(--surface)} .l-sel{background:var(--brand);border-color:var(--brand)}
.l-busy{background:var(--surface-2);border-style:dashed}
.l-ev{background:var(--court-soft);border-color:var(--court)}

.facts{margin-top:20px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);
  display:grid;grid-template-columns:repeat(3,1fr)}
.facts div{padding:10px 8px;text-align:center;border-right:1px solid var(--line)}
.facts div:last-child{border-right:0}
.facts span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.facts b{font-family:var(--disp);font-size:13.5px;font-weight:600;line-height:1.5}

.bar{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);
  padding:12px 18px calc(14px + env(safe-area-inset-bottom,0px));
  box-shadow:var(--shadow-l);display:flex;align-items:center;gap:13px}
.bar .info{flex:1;min-width:0}
.bar .l1{font-family:var(--disp);font-size:14.5px;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.bar .l2{font-size:12px;color:var(--ink-3)}
.bar .sum{font-family:var(--mono);font-size:19px;font-variant-numeric:tabular-nums}
.cta{background:var(--brand);color:var(--on-brand);border-radius:11px;padding:12px 20px;
  font-family:var(--disp);font-weight:600;font-size:15px;flex:0 0 auto}
.cta[disabled]{background:var(--surface-3);color:var(--ink-3)}

.scrim{position:fixed;inset:0;background:rgba(10,20,15,.5);z-index:20}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:21;max-width:470px;margin:0 auto;
  background:var(--surface);border-radius:20px 20px 0 0;
  padding:8px 20px calc(22px + env(safe-area-inset-bottom,0px));
  max-height:92vh;overflow-y:auto;box-shadow:var(--shadow-l)}
.grab{width:38px;height:4px;border-radius:99px;background:var(--line-2);margin:0 auto 14px}
.sheet h2{font-family:var(--disp);font-size:19px;font-weight:600;margin:0 0 3px}
.sheet .note{font-size:13px;color:var(--ink-2);margin:0 0 16px}
.recap{border:1px solid var(--line);border-radius:12px;background:var(--surface-2);
  padding:12px 14px;margin-bottom:16px}
.recap .r{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:3px 0}
.recap .r span:first-child{color:var(--ink-2)}
.recap .r b{font-weight:600;font-variant-numeric:tabular-nums}
.recap .tot{border-top:1px solid var(--line);margin-top:8px;padding-top:9px}
.recap .tot b{font-family:var(--mono);font-size:17px}
label.f{display:block;margin-bottom:12px}
label.f span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
label.f input{width:100%;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);
  padding:11px 13px;font-size:15px}
label.f input:focus{outline:2px solid var(--brand-2);border-color:var(--brand)}
.err{color:var(--red);font-size:12.5px;margin:-4px 0 12px;min-height:1px}
.wide{width:100%;display:flex;justify-content:center;padding:14px}
.ghost{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);border-radius:11px;
  padding:12px;font-family:var(--disp);font-weight:600;font-size:14.5px;width:100%;margin-top:9px}

.paypanel{text-align:center}
.qrbox{width:200px;height:200px;margin:2px auto 10px;border-radius:14px;background:#fff;
  border:1px solid var(--line-2);display:grid;place-items:center;padding:10px}
.qrbox img,.qrbox canvas{width:100%;height:100%;image-rendering:pixelated}
.qrcap{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);margin:0 0 12px}
.acct{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);margin-bottom:14px;line-height:1.75}
.acct b{color:var(--ink)}
.timer{display:inline-flex;align-items:center;gap:7px;background:var(--gold-soft);color:var(--gold);
  border-radius:999px;padding:6px 14px;font-family:var(--mono);font-size:12.5px;margin-bottom:14px;
  font-variant-numeric:tabular-nums}
.drop{border:1.5px dashed var(--line-2);border-radius:12px;padding:18px 14px;text-align:center;
  color:var(--ink-2);font-size:13.5px;margin-bottom:12px;background:var(--surface-2)}
.drop b{display:block;font-family:var(--disp);font-size:15px;color:var(--ink);margin-bottom:2px}
.drop.on{border-color:var(--brand);border-style:solid;background:var(--brand-soft);color:var(--brand)}

.done{text-align:center;padding:4px 0}
.tick{width:60px;height:60px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;margin:0 auto 12px}
.tick svg{width:29px;height:29px}
.code{font-family:var(--mono);font-size:25px;letter-spacing:.1em;margin:8px 0 4px}

.blist{display:flex;flex-direction:column;gap:9px}
.bcard{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface)}
.bcard .top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.bcard .when{font-family:var(--disp);font-size:15px;font-weight:600}
.bcard .meta{font-size:12.5px;color:var(--ink-3);font-family:var(--mono)}
.pill{font-family:var(--mono);font-size:10px;letter-spacing:.05em;padding:3px 9px;border-radius:999px;
  white-space:nowrap;flex:0 0 auto}
.pill.ok{background:var(--brand-soft);color:var(--brand)}
.pill.wait{background:var(--gold-soft);color:var(--gold)}
.pill.bad{background:var(--red-soft);color:var(--red)}
.empty{text-align:center;color:var(--ink-3);font-size:13.5px;padding:26px 10px}
.foot{padding:0 18px 24px;font-size:11.5px;color:var(--ink-3);text-align:center;line-height:1.7}
.spin{display:inline-block;width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ═══════════ แท็บเล็ต · ไอแพด · จอคอม ═══════════ */
@media(min-width:700px){
  body{font-size:16px}
  .phone{max-width:860px}
  header{padding-left:26px;padding-right:26px;gap:14px}
  .hlogo{height:30px}
  header h1{font-size:18px}
  header .sub{font-size:11px}
  main{padding:22px 26px 170px}
  .bar{padding-left:26px;padding-right:26px}

  .days{margin:0 -26px 20px;padding:0 26px 4px}
  .day{flex:0 0 66px;padding:10px 0 9px}
  .day .dd{font-size:22px}

  .grid{gap:7px}
  .slot{min-height:62px}
  .slot .p{font-size:14px}
  .slot .t{font-size:11px}
  .gt{font-size:13px}
  .gh{font-size:11.5px}

  .facts{max-width:520px}
  .blist{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;align-items:start}
  .tiles{gap:11px}
  .tile .val{font-size:24px}
  .tabs{padding-left:26px;padding-right:26px}

  /* แผ่นเลื่อน → กล่องกลางจอ */
  .sheet{max-width:560px;top:50%;bottom:auto;transform:translateY(-50%);
    border-radius:18px;max-height:88vh;padding:22px 26px 26px}
  .grab{display:none}
  .frow{gap:14px}
  .slipimg{max-width:340px;margin-left:auto;margin-right:auto}
}
@media(min-width:1100px){
  .phone{max-width:1020px}
  main{padding:26px 34px 170px}
  header,.bar,.tabs{padding-left:34px;padding-right:34px}
  .days{margin:0 -34px 22px;padding:0 34px 4px}
  .blist{grid-template-columns:repeat(3,1fr)}
  .slot{min-height:70px}
}