/* หน้าที่: ชั้นออกแบบตามอุปกรณ์ ใช้ร่วมทุกหน้าโดยไม่เปลี่ยนข้อมูลหรือสิทธิ์ของระบบ */
.friendly-body{--device-gutter:clamp(16px,2.4vw,36px);--device-radius:20px;--device-bottom:0px}
.friendly-body:not([data-ui-surface=display]) #main-content{min-width:0}
.friendly-body:not([data-ui-surface=display]) :where(h1,h2,h3){text-wrap:balance}
.friendly-body[data-ui-surface=workspace] :where(.dashboard-content,.my-main,.operations,.line-workspace,.security-workspace,.switch-workspace){padding-inline:var(--device-gutter)}
.friendly-body[data-ui-surface=workspace] :where(.module-toolbar,.op-toolbar,.line-toolbar,.my-filters,.overview-toolbar){gap:12px;align-items:end;flex-wrap:wrap}
.friendly-body[data-ui-surface=workspace] :where(.module-toolbar,.op-toolbar,.line-toolbar,.my-filters,.overview-toolbar)>*{min-width:0;max-width:100%}
.friendly-body[data-ui-surface=workspace] :where(.form-grid,.my-form-row,.identity-grid,.line-form-grid){gap:18px}
.friendly-body[data-ui-surface=workspace] :where(.panel,.my-card,.op-card,.line-panel,.security-panel,.module-item){border-radius:var(--device-radius);border-color:#dce3ee;box-shadow:0 4px 20px #253b5a06}
.friendly-body[data-ui-surface=workspace] :where(input,textarea,select){scroll-margin-block:calc(var(--ui-bar,76px) + 24px) 110px}
.friendly-body[data-ui-surface=workspace] :where(td,th){line-height:1.65}
.friendly-body[data-ui-surface=workspace] :where(.module-pagination,.op-pages,.line-pager,.my-pagination){flex-wrap:wrap;gap:8px;align-items:center}
.friendly-body[data-ui-surface=workspace] :where(.module-pagination,.op-pages,.line-pager,.my-pagination) button{min-width:44px;min-height:44px}
.friendly-body[data-ui-surface=workspace] :where(.op-scroll,.table-wrap,.table-responsive,.my-table-wrap,.attendance-table-scroll,[data-ui-scroll]){border-radius:14px;scrollbar-width:thin;scrollbar-color:#a3afd0 #eef2f8}
.friendly-body .ui-scroll-help{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#eef2fb;border:1px solid #dce4f5;border-radius:10px;color:#425c88;font-size:12px}
.friendly-body[data-workspace-density=compact] :where(.my-two,.line-split,.line-settings-layout,.line-message-layout,.op-pos,.employee-profile-grid){grid-template-columns:minmax(0,1fr)!important}
.friendly-body[data-workspace-density=compact] :where(.line-preview-panel,.op-cart){position:static;max-height:none}
.friendly-body[data-workspace-density=compact] :where(.my-stats,.op-stats,.stat-grid){grid-template-columns:repeat(2,minmax(0,1fr))!important}
.friendly-body[data-workspace-density=compact] :where(.my-form-row,.identity-grid,.line-form-grid){grid-template-columns:minmax(0,1fr)!important}
.friendly-body[data-workspace-density=comfortable] :where(.module-card-grid,.my-gallery){grid-template-columns:repeat(2,minmax(0,1fr))}
.workspace-app-dock{display:none}
/* หน้าที่: ล็อกพื้นหลังเมื่อเปิด popup เพื่อไม่ให้แถบเลื่อนของหน้าและแบบฟอร์มซ้อนกัน */
html:has(.friendly-body dialog[open]),.friendly-body:has(dialog[open]){overflow:hidden!important}
.device-connection-notice{position:fixed;top:calc(var(--ui-bar,76px) + 8px);left:50%;transform:translateX(-50%);z-index:155;width:min(480px,calc(100% - 32px));padding:12px 16px;border:1px solid #d6a553;border-radius:14px;background:#fff5db;color:#604618;box-shadow:0 8px 28px #18263e1c;font-size:14px;text-align:center;pointer-events:none}
.friendly-body :where(.op-dialog,.my-dialog,.line-dialog,.admin-modal,.booking-modal,.poster-dialog,.attendance-status-dialog){max-height:min(92dvh,calc(var(--device-viewport-height,100dvh) - 24px));overscroll-behavior:contain}
.friendly-body :where(.op-dialog,.line-dialog)>form>footer{position:sticky;bottom:0;z-index:4;background:#fff;padding-block:14px max(14px,env(safe-area-inset-bottom));border-top:1px solid #e0e5f0;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px}
.friendly-body :where(.op-dialog,.my-dialog,.line-dialog) h2{font-size:clamp(20px,2vw,26px);line-height:1.5;overflow-wrap:anywhere}
@media(min-width:1100px){.friendly-body[data-ui-surface=workspace] .overview{padding:28px clamp(24px,2.5vw,40px)}.friendly-body[data-ui-surface=workspace] .overview-hero{min-height:220px}.friendly-body[data-ui-surface=auth] .auth-form{width:min(480px,100%)} }
/* หน้าที่: Tablet ใช้พื้นที่สองคอลัมน์และแถบทางลัดที่เอื้อมถึง ไม่ย่อ Desktop ทั้งหน้า */
@media(min-width:700px) and (max-width:1099px){.friendly-body{--device-gutter:24px}.friendly-body .fg2-venues-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.friendly-body[data-ui-surface=workspace] :where(.overview-hero,.my-hero){padding:26px}.friendly-body[data-ui-surface=workspace] .overview-hero{min-height:210px}.friendly-body[data-ui-surface=workspace] .overview-orbit{flex-basis:140px;height:140px}.friendly-body[data-ui-surface=workspace] .my-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1099px){
 .friendly-body:not([data-ui-surface=display]) :where(button,select,summary,[role=button]){touch-action:manipulation}
 .friendly-body[data-ui-surface=workspace]{--device-bottom:calc(88px + env(safe-area-inset-bottom));padding-bottom:var(--device-bottom)}
 .workspace-app-dock{position:fixed;z-index:145;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;justify-content:space-evenly;gap:4px;width:min(580px,calc(100% - 24px));padding:7px;background:#fffffff5;border:1px solid #dde4f3;border-radius:22px;box-shadow:0 6px 28px #23345322;backdrop-filter:blur(18px);font-family:Prompt,sans-serif}
 .workspace-app-dock :where(a,button){flex:1;min-width:0;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px;border:0;border-radius:15px;background:transparent;color:#536681;text-decoration:none;font:500 10px/1.5 Prompt,sans-serif;cursor:pointer}
 .workspace-app-dock svg{width:21px;height:21px}.workspace-app-dock [aria-current=page]{color:#5645ad;background:#eeebfb}.workspace-app-dock :where(a,button):active{background:#e9eef9}.workspace-app-dock :focus-visible{outline:3px solid #8c7de0;outline-offset:1px}
 .friendly-body[data-ui-surface=workspace] :where(.toast-stack,.my-toasts,.op-toasts,.switch-toasts){bottom:calc(var(--device-bottom) + 8px);max-height:40dvh}
 .friendly-body[data-ui-surface=workspace] .cloud-sync-state{bottom:calc(var(--device-bottom) + 8px);font-size:11px}
 body.backend-sidebar-open .workspace-app-dock{visibility:hidden}
 body[data-keyboard-open] :where(.workspace-app-dock,.mobile-dock){visibility:hidden;pointer-events:none}
 body:has(dialog[open]) .workspace-app-dock{visibility:hidden}
 .friendly-body[data-ui-surface=workspace] .workspace-page-name{font-size:13px}
 .friendly-body[data-ui-surface=public] :where(.discover-slide img,.discover-card img){object-fit:contain}
 .friendly-body[data-ui-surface=public] .discover-showcase{border-radius:20px}
}
/* หน้าที่: Mobile เน้นหนึ่งงานต่อหนึ่งหน้าจอ แบบฟอร์มคอลัมน์เดียวและ popup แบบ bottom sheet */
@media(max-width:699px){
 .friendly-body{--device-gutter:16px;--device-radius:18px}
 .friendly-body[data-ui-surface=workspace] :where(.overview,.line-workspace,.security-workspace,.switch-workspace){padding:20px 16px}
 .friendly-body[data-ui-surface=workspace] :where(.module-header,.op-header,.line-heading){align-items:flex-start;flex-wrap:wrap;gap:12px}
 .friendly-body[data-ui-surface=workspace] :where(h1,.module-header h1,.op-header h1){font-size:clamp(23px,6vw,30px);line-height:1.45}
 .friendly-body[data-ui-surface=workspace] :where(.module-toolbar,.op-toolbar,.line-toolbar,.my-filters,.overview-toolbar){display:flex!important;flex-direction:column;align-items:stretch}
 .friendly-body[data-ui-surface=workspace] :where(.module-toolbar,.op-toolbar,.line-toolbar,.my-filters,.overview-toolbar)>*{width:100%;flex:auto!important}
 .friendly-body[data-ui-surface=workspace] :where(.module-toolbar,.op-toolbar,.line-toolbar,.my-filters,.overview-toolbar) :where(input,select){width:100%;min-width:0}
 .friendly-body[data-ui-surface=workspace] :where(.overview-hero,.my-hero){padding:22px 18px;min-height:0;border-radius:22px}
 .friendly-body[data-ui-surface=workspace] .overview-orbit{display:none}.friendly-body[data-ui-surface=workspace] .overview-welcome{font-size:14px}.friendly-body[data-ui-surface=workspace] .overview-summary{gap:10px;margin-bottom:24px}
 .friendly-body[data-ui-surface=workspace] :where(.overview-summary>article,.my-card,.line-panel){padding:18px 16px}
 .friendly-body[data-ui-surface=workspace] .form-grid{grid-template-columns:minmax(0,1fr)!important}
 .friendly-body[data-ui-surface=workspace] .form-grid>.full{grid-column:auto}
 .friendly-body[data-ui-surface=workspace] .system-navbar{gap:8px;padding:8px 12px 10px}.friendly-body[data-ui-surface=workspace] .system-navbar-link{font-size:12px;min-height:44px}.friendly-body[data-ui-surface=workspace] .system-navbar-search{font-size:12px}
 .friendly-body :where(.op-dialog,.my-dialog,.line-dialog,.admin-modal,.booking-modal){inset:auto 0 0;margin:0;width:100%;max-width:100%;border:0;border-radius:24px 24px 0 0;padding:18px 16px max(18px,env(safe-area-inset-bottom));box-shadow:0 -16px 60px #18294933}
 .friendly-body .admin-modal-box{max-height:calc(var(--device-viewport-height,100dvh) - 70px);padding:12px 2px 20px;border-radius:0}
 .friendly-body dialog.admin-modal,.friendly-body dialog.booking-modal{height:auto;max-height:calc(var(--device-viewport-height,100dvh) - 16px);padding:0;background:#fff;border:0;outline:0;overflow:hidden}
 .friendly-body dialog.admin-modal .admin-modal-box,.friendly-body dialog.booking-modal .booking-box{max-height:calc(var(--device-viewport-height,100dvh) - 16px);box-shadow:none}
 .friendly-body .booking-box{padding:12px 2px 20px}.friendly-body :where(.op-dialog,.line-dialog)>form>footer>button{flex:1;min-height:48px}
 .friendly-body[data-ui-surface=auth]{padding-top:58px}.friendly-body[data-ui-surface=auth] .auth-visual{min-height:0;padding:24px 20px 48px}.friendly-body[data-ui-surface=auth] .auth-message{margin-top:24px}.friendly-body[data-ui-surface=auth] .auth-message h1{font-size:30px}.friendly-body[data-ui-surface=auth] .auth-message p{font-size:14px;line-height:1.8}.friendly-body[data-ui-surface=auth] .auth-form{border-radius:24px;padding:26px 20px}.friendly-body[data-ui-surface=auth] .auth-brand{margin-top:4px}
 .friendly-body[data-ui-surface=public] :where(.fg2-hero,.venue-hero){min-height:0;padding:112px 20px 36px}.friendly-body[data-ui-surface=public] :where(.fg2-hero-copy h1,.venue-hero h1){font-size:clamp(30px,8.5vw,42px);line-height:1.4}.friendly-body[data-ui-surface=public] .fg2-hero-copy{padding:12px 0}.friendly-body[data-ui-surface=public] .fg2-hero-grid{gap:24px}.friendly-body[data-ui-surface=public] :where(.section,.fg2-section){padding-inline:18px;padding-block:48px}.friendly-body[data-ui-surface=public] :where(.section-heading,.fg2-section-head){gap:16px}.friendly-body[data-ui-surface=public] .venue-hero-actions{display:flex;flex-wrap:wrap;gap:10px}.friendly-body[data-ui-surface=public] .venue-hero-actions>a,.friendly-body[data-ui-surface=public] .venue-hero-actions>button{flex:1;min-width:130px;min-height:50px}
 .friendly-body[data-ui-surface=public] .mobile-dock{border-radius:22px;padding:7px}.friendly-body[data-ui-surface=public] .site-footer{padding-inline:20px}
}
@media(pointer:coarse){.friendly-body:not([data-ui-surface=display]) :where(button,summary){min-height:48px}.friendly-body:not([data-ui-surface=display]) :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){font-size:16px;min-height:48px}.friendly-body[data-ui-surface=workspace] :where(td,th){padding-block:13px}.friendly-body .backend-sidebar-link{min-height:50px}.friendly-body[data-ui-surface=public] :where(.fg2-experience-console,.venue-logo-hero){transform:none!important}}
@media(prefers-reduced-motion:reduce){.workspace-app-dock,.friendly-body dialog[open]{animation:none!important;transition:none!important}}
@media print{.workspace-app-dock,.device-connection-notice{display:none!important}.friendly-body[data-ui-surface=workspace]{padding-bottom:0}}