/* หน้าที่: กำหนดสี ระยะห่าง ตัวอักษร และการเข้าถึงร่วมกันทุกระบบ โดยไม่แก้ข้อมูลธุรกิจ */
.friendly-body {
  --xp-accent: var(--page-accent, #6657e8);
  --xp-ink: #17263e;
  --xp-muted: #52627a;
  --xp-line: #d5deec;
  --xp-paper: #fff;
  --xp-radius: 22px;
  --xp-shadow: inset 0 1px 0 #fff, 0 3px 0 #dae2ee70, 0 12px 28px #21345809;
  --xp-shadow-raised: inset 0 1px 0 #fff, 0 5px 0 #d0dbea80, 0 20px 38px #21345815;
  --xp-focus: #5548ca;
  --xp-ease: cubic-bezier(.2,.75,.2,1);
  font-family: 'Prompt', 'Noto Sans SC', sans-serif;
  font-size: 16px;
  color: var(--xp-ink);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.friendly-body *, .friendly-body *::before, .friendly-body *::after { box-sizing: border-box; }
.friendly-body [hidden] { display: none !important; }
.friendly-body :where(h1,h2,h3,h4) { line-height: 1.45; letter-spacing: -.025em; word-break: normal; overflow-wrap: anywhere; }
.friendly-body :where(p,label,td,th) { line-height: 1.75; }
.friendly-body :where(button,input,select,textarea) { font-family: inherit; }
.friendly-body :where(button,[role=button]) { cursor: pointer; touch-action: manipulation; }
.friendly-body :where(button,[role=button],a,input,select,textarea,summary):focus-visible {
  outline: 3px solid var(--xp-focus) !important; outline-offset: 4px;
}
.friendly-body :where(button,input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=color]),select) { min-height: 44px; }
.friendly-body :where(button):disabled { cursor: not-allowed; }
.friendly-body :where(button):disabled { filter: saturate(.4); }
.friendly-body :where(input,select,textarea) { min-width: 0; max-width: 100%; }
.friendly-body :where(input,textarea)::placeholder { color: #748198; opacity: 1; }
.friendly-body :where(img,video) { max-width: 100%; }
.friendly-body :where(.form-grid,.op-grid,.my-form-row,.module-card-grid)>* { min-width: 0; }
/* หน้าที่: ใช้ขนาดตัวอักษรที่อ่านได้กับข้อมูลใช้งานจริง และเก็บพื้นที่แตะให้สม่ำเสมอ */
.friendly-body :where(.module-toolbar,.form-grid,.op-toolbar,.my-form-row) :where(label,button,select) { font-size: .875rem; }
.friendly-body :where(.system-navigation,.module-actions,.my-actions,.op-actions) :where(a,button,summary) { min-height: 44px; }
.friendly-body :where(input,textarea):user-invalid { border-color: #b93750; box-shadow: 0 0 0 3px #b9375012; }
.friendly-body .xp-ui-icon { display: block; flex: 0 0 auto; width: 22px; height: 22px; pointer-events: none; }
.friendly-body [data-nav-toggle][aria-expanded=false] .xp-menu-close,
.friendly-body [data-nav-toggle][aria-expanded=true] .xp-menu-bars { display: none; }
.friendly-body :where(.table-wrap,.table-responsive,.my-table-wrap,.op-scroll,[data-ui-scroll]) {
  overflow: auto; max-width: 100%; overscroll-behavior-inline: contain;
  scrollbar-width: thin; scrollbar-color: #958bba #f0edf8;
}
.experience-skip { position: fixed; top: 8px; left: 8px; z-index: 10000; padding: 12px 18px; color: #fff; background: #332774; border-radius: 12px; transform: translateY(-160%); }
.experience-skip:focus { transform: none; }
.experience-motion-toggle {
  width: 44px; height: 44px; min-width: 44px; flex: 0 0 44px; display: inline-grid; place-items: center;
  border: 1px solid #dddfee; border-radius: 14px; background: #f3f1ff; color: #6350b6;
  box-shadow: 0 3px 0 #ddd8f0; transition: background .2s, box-shadow .2s; order: 3;
}
.experience-motion-toggle:hover { background: #e9e3ff; }
.experience-motion-toggle:active { box-shadow: 0 1px 0 #ddd8f0; }
.experience-motion-toggle[aria-pressed=false] { color: #6e7889; background: #f0f2f6; }
.experience-motion-toggle[aria-pressed=true] .xp-play-icon,.experience-motion-toggle[aria-pressed=false] .xp-pause-icon { display: none; }
.experience-motion-toggle:disabled { opacity: .65; }
.friendly-body>.experience-motion-toggle { position: fixed; z-index: 200; top: 16px; left: 20px; }
.experience-progress { position: fixed; z-index: 200; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; transform-origin: left; transform: scaleX(var(--xp-progress,0)); background: linear-gradient(90deg,#9380ff,#71d6ea,#e4b477); }
.friendly-body[data-ui-surface=workspace] .experience-progress { display: none; }
/* ปิด animation ทุกแหล่งเมื่อผู้ใช้เลือกลดการเคลื่อนไหว รวมทั้งสไตล์เก่าที่ยังใช้กับโมดูลธุรกิจ */
.friendly-body[data-experience-motion=off] *, .friendly-body[data-experience-motion=off] *::before,
.friendly-body[data-experience-motion=off] *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
.friendly-body[data-experience-motion=off] :where(.xp-tilt,.xp-reveal,[data-motion-reveal]) { transform: none !important; opacity: 1 !important; filter: none !important; }
.friendly-body[data-experience-motion=off] :where(.xp-press,.fg2-quick-actions>a,.fg2-branch-chip,.food-card,.room-card) { translate: none !important; }
.friendly-body[data-experience-paused=true] *, .friendly-body[data-experience-paused=true] *::before,
.friendly-body[data-experience-paused=true] *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .friendly-body *, .friendly-body *::before, .friendly-body *::after { animation: none !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .friendly-body :where(.xp-tilt,.xp-reveal,[data-motion-reveal]) { opacity: 1 !important; filter: none !important; transform: none !important; }
  .friendly-body :where(.xp-press,.fg2-quick-actions>a,.fg2-branch-chip,.food-card,.room-card) { translate: none !important; }
}
@media(max-width:760px) {
  .friendly-body { --xp-radius: 18px; }
  .friendly-body :where(input:not([type=checkbox]):not([type=radio]),select,textarea) { font-size: 16px; }
  .experience-motion-toggle { width: 44px; border-radius: 12px; }
}