/* ==========================================================================
   WORKDEE Smart Office 8.0 — Design System
   โหลดท้ายสุด ทับสไตล์เดิมทั้งหมด (app/workspace/communications/theme-dock)
   หลักการ: ตัวอักษรกระชับ (IBM Plex Sans Thai 14px), ช่องกรอก 40px, ระยะหายใจกว้างขึ้น,
   ออกแบบสำหรับโน้ตบุ๊ก 1280–1440 เป็นหลัก และมือถือ 360–430
   Selector ขึ้นต้น "html body" เพื่อชนะกฎ !important เดิมโดยไม่ต้องแก้ไฟล์เก่า
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --font-ui:'IBM Plex Sans Thai','Noto Sans Thai',Tahoma,sans-serif;
  --font-doc:'TH Sarabun New','Sarabun',Tahoma,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-heading:var(--font-ui);
  --font-body:var(--font-ui);
  --fs-xs:12px;--fs-sm:13px;--fs-base:14px;--fs-md:15px;--fs-lg:17px;--fs-xl:20px;--fs-2xl:24px;
  --lh:1.6;
  --bg:#f5f6f8;--surface:#fff;--surface-2:#f9fafb;--surface-3:#f1f3f6;--sidebar:#fff;
  --text:#18202f;--muted:#5e6878;--muted-2:#8d95a3;
  --line:#e6e9ee;--line-strong:#d5dae2;--border:var(--line);--panel:var(--surface);
  --success:#15803d;--success-soft:#ecfdf3;--warning:#b45309;--warning-soft:#fffbeb;--danger:#dc2626;--danger-soft:#fef2f2;--info:#2563eb;--info-soft:#eff6ff;
  --radius:12px;--radius-sm:9px;--radius-xs:7px;
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
  --shadow:0 12px 32px -12px rgba(16,24,40,.18);
  --shadow-lift:0 20px 44px -16px rgba(16,24,40,.28);
  --ctl-h:40px;--ctl-h-sm:34px;--tap:40px;
  --field-control-min-h:40px;--search-control-h:40px;--compact-search-control-h:38px;
  --sidebar-w:248px;--topbar-h:60px;--content-max:1360px;--gap:16px;
  --ease:cubic-bezier(.22,1,.36,1);--ease-spring:cubic-bezier(.34,1.4,.64,1);--dur-fast:140ms;--dur:220ms;--dur-slow:360ms;
  --safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);
  --tabbar-h:60px;
  --primary-soft:color-mix(in srgb,var(--primary) 8%,transparent);
  --primary-border:color-mix(in srgb,var(--primary) 26%,#fff);
  --primary-hover:color-mix(in srgb,var(--primary) 86%,#000);
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#0e1117;--surface:#161a22;--surface-2:#1b202a;--surface-3:#232936;--sidebar:#12161d;
  --text:#e9edf3;--muted:#a3abb9;--muted-2:#7a8392;--line:#262c38;--line-strong:#343b49;
  --success-soft:rgba(21,128,61,.15);--warning-soft:rgba(180,83,9,.16);--danger-soft:rgba(220,38,38,.15);--info-soft:rgba(37,99,235,.16);
  --shadow:0 12px 32px -12px rgba(0,0,0,.6);--shadow-lift:0 20px 44px -16px rgba(0,0,0,.7);
  --primary-soft:color-mix(in srgb,var(--primary) 22%,transparent);
  --primary-border:color-mix(in srgb,var(--primary) 50%,#000);
  color-scheme:dark;
}

/* ---------- 2. Base typography ---------- */
*,*:before,*:after{box-sizing:border-box}
html body.auth-page{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html body{font-family:var(--font-ui)!important;font-size:var(--fs-base)!important;line-height:var(--lh)!important;color:var(--text);background:var(--bg)!important;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
html body :where(h1,h2,h3,h4,h5,h6),html body button,html body input,html body select,html body textarea,html body table,html body label,html body .btn{font-family:var(--font-ui)!important;letter-spacing:0}
html body :where(h1,h2,h3,h4){line-height:1.35!important;font-weight:600;color:var(--text)}
html body p{line-height:var(--lh)}
html body small,html body .muted{color:var(--muted)}
html body .eyebrow:before,html body .eyebrow:after{content:none!important;display:none!important}
html body .eyebrow::first-letter{font-size:inherit!important;color:inherit!important;float:none!important}
html body .eyebrow{font-size:11px!important;letter-spacing:.08em!important;font-weight:600!important;color:var(--muted)!important;margin:0 0 4px!important;text-transform:uppercase}
html body code,html body kbd,html body .mono-link{font-family:var(--font-mono)!important;font-size:12.5px}
/* เอกสาร ตราประทับ และเนื้อหาราชการ ยังคงใช้ Sarabun */
html body .receipt-preview,html body .receipt-preview *,html body .stamp-preview-box,html body .stamp-preview-box *,
html body .annotation-receipt_stamp,html body .annotation-receipt_stamp *,html body .annotation-organization_stamp,html body .annotation-organization_stamp *,
html body .pdf-annotation,html body .pdf-annotation *,html body .document-print-area,html body .document-print-area *,html body .ocr-preview pre,html body .ocr-saved pre{font-family:var(--font-doc)!important}
::selection{background:color-mix(in srgb,var(--primary) 20%,transparent)}
:focus-visible{outline:2px solid color-mix(in srgb,var(--primary) 60%,transparent);outline-offset:2px}

/* ---------- 3. App shell ---------- */
html body .app-shell{min-height:100dvh}
html body .sidebar{width:var(--sidebar-w)!important;background:var(--sidebar)!important;border-right:1px solid var(--line)!important;box-shadow:none!important;padding:0!important;display:flex;flex-direction:column}
html body .sidebar-head{padding:14px 14px 10px!important;min-height:0!important;border:0!important}
html body .brand{gap:10px!important}
html body .brand-mark{width:34px!important;height:34px!important;border-radius:9px!important;font-size:16px!important;background:var(--primary)!important;color:#fff!important}
html body .brand-copy b{font-size:15px!important;line-height:1.2!important}
html body .brand-copy small{font-size:11px!important}
html body .org-chip{margin:4px 12px 8px!important;padding:8px 10px!important;border-radius:9px!important;background:var(--surface-2)!important;border:1px solid var(--line)!important;gap:8px!important}
html body .org-chip small{font-size:11px!important}
html body .org-chip b{font-size:12.5px!important;line-height:1.4!important;font-weight:600!important}
html body .nav-list{padding:4px 10px!important;gap:2px!important;flex:1;overflow:auto}
html body .sidebar .nav-item{min-height:36px!important;height:auto!important;padding:7px 10px!important;font-size:13.5px!important;font-weight:500!important;border-radius:8px!important;gap:10px!important;color:var(--muted)!important;background:transparent!important;box-shadow:none!important;position:relative;transition:background var(--dur-fast),color var(--dur-fast)}
html body .sidebar .nav-item i{font-size:16px!important;width:18px!important}
html body .sidebar .nav-item:hover{background:var(--surface-3)!important;color:var(--text)!important}
html body .sidebar .nav-item.active{background:var(--primary-soft)!important;color:var(--primary)!important;font-weight:600!important}
html[data-theme="dark"] body .sidebar .nav-item.active{color:#fff!important}
html body .sidebar .nav-item.active:before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--primary)}
html body .sidebar .nav-item em{min-width:18px!important;height:18px!important;font-size:10.5px!important;padding:0 5px!important;border-radius:9px!important;background:var(--danger)!important;color:#fff!important;font-style:normal;margin-left:auto}
html body .sidebar-foot{padding:10px 12px 12px!important;border-top:1px solid var(--line)!important;gap:8px!important}
html body .profile-mini{gap:9px!important}
html body .profile-mini b{font-size:13px!important}
html body .profile-mini small{font-size:11.5px!important}
html body .avatar,html body .top-avatar{width:32px!important;height:32px!important;min-width:32px!important;font-size:13px!important;border-radius:50%!important}
html body .logout-btn{min-height:34px!important;font-size:12.5px!important;border-radius:8px!important;padding:6px 10px!important}

html body .main{margin-left:var(--sidebar-w)!important;min-width:0}
html body .topbar{position:sticky;top:0;z-index:40;height:var(--topbar-h)!important;min-height:var(--topbar-h)!important;padding:var(--safe-top) 24px 0!important;background:color-mix(in srgb,var(--surface) 85%,transparent)!important;backdrop-filter:saturate(1.5) blur(12px);-webkit-backdrop-filter:saturate(1.5) blur(12px);border-bottom:1px solid var(--line)!important;box-shadow:none!important;transition:transform var(--dur) var(--ease)}
html body .topbar-left,html body .topbar-right{gap:8px!important;padding-left:0!important}
html body .icon-btn,html body .topbar .icon-btn{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;border-radius:9px!important;font-size:16px!important;border:1px solid var(--line)!important;background:var(--surface)!important;box-shadow:none!important;position:relative!important;inset:auto!important}
html body .icon-btn:hover{background:var(--surface-3)!important}
html body .command-trigger{height:36px!important;min-height:36px!important;width:min(340px,40vw)!important;padding:0 10px!important;font-size:13px!important;border-radius:9px!important;gap:8px!important;background:var(--surface-2)!important;border:1px solid var(--line)!important;box-shadow:none!important}
html body .command-trigger kbd{font-size:11px!important;padding:1px 6px!important;border-radius:5px!important}
html body .clock{font-size:12.5px!important;color:var(--muted)!important}
html body .content{max-width:var(--content-max)!important;margin:0 auto!important;padding:24px 28px 48px!important;animation:v8-fade var(--dur-slow) var(--ease) both}
@keyframes v8-fade{from{opacity:0}to{opacity:1}}

/* ---------- 4. Page hero ---------- */
html body .page-hero:before,html body .page-hero:after{display:none!important;content:none!important}
html body .page-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 20px!important;padding:0!important;min-height:0!important;background:none!important;border:0!important;box-shadow:none!important}
html body .page-hero h1{font-size:var(--fs-2xl)!important;font-weight:600!important;line-height:1.3!important;margin:0!important;letter-spacing:-.005em!important}
html body .page-hero p:not(.eyebrow){font-size:var(--fs-sm)!important;color:var(--muted)!important;margin:4px 0 0!important;max-width:720px;line-height:1.55!important}
html body .page-hero .btn{flex:0 0 auto}
html body .dashboard-hero{padding:20px 22px!important;border-radius:var(--radius)!important;background:var(--surface)!important;border:1px solid var(--line)!important;box-shadow:var(--shadow-xs)!important;align-items:center!important;position:relative;overflow:hidden}
html body .dashboard-hero:before,html body .dashboard-hero:after{display:none!important}
html body .dashboard-hero h1{font-size:22px!important;width:auto!important}
html body .dashboard-live-label{font-size:11px!important;gap:6px!important;margin-bottom:4px!important;letter-spacing:.06em!important}
html body .dashboard-live-label small{font-size:11px!important}
html body .dashboard-hero-pills{gap:6px!important;margin-top:10px!important}
html body .dashboard-hero-pills span{font-size:12px!important;padding:3px 10px!important;border-radius:999px!important;min-height:0!important}
html body .hero-actions{gap:8px!important}

/* ---------- 5. Surfaces ---------- */
html body .panel{padding:20px!important;border-radius:var(--radius)!important;border:1px solid var(--line)!important;background:var(--surface)!important;box-shadow:var(--shadow-xs)!important;margin-bottom:var(--gap)}
html body .panel:before,html body .panel:after{display:none}
html body .panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 14px!important;padding:0!important;border:0!important}
html body .panel-head h2,html body .panel h2{font-size:var(--fs-lg)!important;font-weight:600!important;margin:0!important}
html body .panel-head p{font-size:var(--fs-sm)!important;color:var(--muted)!important;margin:2px 0 0!important}
html body .panel h3{font-size:var(--fs-md)!important}
html body .metric-grid{gap:12px!important;margin-bottom:var(--gap)!important}
html body .metric-card{min-height:0!important;padding:16px!important;border-radius:var(--radius)!important;border:1px solid var(--line)!important;background:var(--surface)!important;box-shadow:var(--shadow-xs)!important;gap:6px!important;position:relative;overflow:hidden;transition:border-color var(--dur),box-shadow var(--dur),transform var(--dur) var(--ease)}
html body .metric-card:before,html body .metric-card:after{display:none!important}
html body .metric-card span{font-size:12.5px!important;color:var(--muted)!important;font-weight:500!important}
html body .metric-card strong,html body .metric-card b{font-size:26px!important;line-height:1.2!important;font-weight:600!important;font-variant-numeric:tabular-nums;color:var(--text)!important}
html body .metric-card strong.metric-text{font-size:17px!important}
html body .metric-card small{font-size:12px!important;color:var(--muted-2)!important}
html body .metric-card>i{position:absolute!important;top:14px!important;right:14px!important;width:32px!important;height:32px!important;border-radius:8px!important;display:grid!important;place-items:center!important;font-size:15px!important;background:var(--primary-soft)!important;color:var(--primary)!important}
html body a.metric-card:hover,html body .module-card:hover,html body .resource-card:hover{border-color:var(--primary-border)!important;box-shadow:var(--shadow)!important;transform:translateY(-1px)}
html body .module-grid{gap:12px!important}
html body .module-card{min-height:0!important;padding:14px 16px!important;border-radius:var(--radius)!important;gap:12px!important;box-shadow:var(--shadow-xs)!important}
html body .module-card h2{font-size:var(--fs-md)!important;margin:0!important}
html body .module-card p{font-size:12.5px!important;margin:2px 0 0!important}
html body .module-icon{width:36px!important;height:36px!important;border-radius:9px!important;font-size:17px!important}
html body .dashboard-grid,html body .analytics-grid,html body .report-chart-grid{gap:var(--gap)!important}
html body .chart-stage{height:240px!important}
html body .dashboard-grid>.panel,html body .analytics-grid>.panel,html body .report-chart-grid>.panel,html body .system-grid>.panel{margin:0!important;align-self:stretch}
html body .chart-card .chart-stage{position:relative}
html body .empty-state{padding:28px 16px!important;border-radius:var(--radius)!important;border:1px dashed var(--line-strong)!important;background:var(--surface-2)!important}
html body .empty-state i{font-size:28px!important;color:var(--muted-2)}
html body .empty-state h3{font-size:var(--fs-md)!important;margin:6px 0 2px!important}
html body .empty-state p{font-size:var(--fs-sm)!important}
html body .alert{padding:10px 14px!important;border-radius:var(--radius-sm)!important;font-size:var(--fs-sm)!important;gap:10px!important;min-height:0!important}
html body .feature-strip{padding:14px 16px!important;border-radius:var(--radius)!important}

/* ---------- 6. Controls ---------- */
html body .btn{min-height:var(--ctl-h)!important;height:auto!important;padding:0 14px!important;font-size:13.5px!important;font-weight:600!important;line-height:1.2!important;border-radius:9px!important;gap:6px!important;box-shadow:none!important;transition:background var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-fast);position:relative;overflow:hidden;touch-action:manipulation}
html body .btn i{font-size:15px!important}
html body .btn.small,html body .btn.sm{min-height:var(--ctl-h-sm)!important;padding:0 10px!important;font-size:12.5px!important}
html body .btn.primary{background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}
html body .btn.primary:hover{background:var(--primary-hover)!important;box-shadow:0 6px 16px -8px color-mix(in srgb,var(--primary) 80%,transparent)!important}
html body .btn.ghost,html body .btn.dark:not(.primary){background:var(--surface)!important;border:1px solid var(--line-strong)!important;color:var(--text)!important}
html body .btn.ghost:hover{background:var(--surface-3)!important}
html body .btn.danger{background:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}
html body .btn:active{transform:scale(.98)}
html body .btn[disabled],html body .btn.is-loading{opacity:.65;pointer-events:none}
html body .btn.is-loading:after{content:"";width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:v8-spin .7s linear infinite}
@keyframes v8-spin{to{transform:rotate(360deg)}}

html body input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=color]):not([type=range]):not([type=file]),
html body select{height:var(--ctl-h)!important;min-height:var(--ctl-h)!important;padding:0 12px!important;font-size:var(--fs-base)!important;line-height:1.4!important;border-radius:9px!important;border:1px solid var(--line-strong)!important;background:var(--surface)!important;color:var(--text)!important;box-shadow:none!important;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
html body textarea{min-height:96px!important;padding:9px 12px!important;font-size:var(--fs-base)!important;line-height:1.6!important;border-radius:9px!important;border:1px solid var(--line-strong)!important;background:var(--surface)!important;color:var(--text)!important}
html body input::placeholder,html body textarea::placeholder{line-height:1.4!important;color:var(--muted-2)!important}
html body input:focus,html body select:focus,html body textarea:focus{border-color:var(--primary)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent)!important;outline:0}
html body input[type=checkbox],html body input[type=radio]{width:16px!important;height:16px!important;accent-color:var(--primary)}
html body input[type=file]{font-size:var(--fs-sm)!important}
html body label{font-size:var(--fs-sm)!important;font-weight:500!important;line-height:1.5!important;gap:5px!important}
html body label>small,html body .field-hint{font-size:12px!important;color:var(--muted-2)!important;font-weight:400!important}
html body .field-label-line{min-height:0!important;line-height:1.5!important}
html body .required-mark{color:var(--danger)!important}
html body .form-grid{gap:14px 16px!important}
html body .stack{gap:12px!important}
/* ช่องค้นหาแบบมีไอคอน */
html body .search-control{height:var(--ctl-h)!important;min-height:var(--ctl-h)!important;border-radius:9px!important;border:1px solid var(--line-strong)!important;background:var(--surface)!important;overflow:hidden!important;align-items:center!important}
html body .search-control>.search-addon{min-height:0!important;height:100%!important;width:38px!important;flex:0 0 38px!important;border:0!important;background:transparent!important;color:var(--muted-2)!important;font-size:14px!important}
html body .search-control>input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=color]):not([type=range]):not([type=file]),html body .search-control>input[type=search]:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=color]):not([type=range]):not([type=file]){height:100%!important;min-height:0!important;border:0!important;padding:0 12px 0 0!important;box-shadow:none!important;background:transparent!important}
html body .search-control:focus-within{border-color:var(--primary)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent)!important}
html body .compact-search.search-control{height:36px!important;min-height:36px!important}
html body .search-form>.search-control+button,html body .search-form>.search-control+.btn,html body .search-form>button,html body .search-form>.btn{height:var(--ctl-h)!important;min-height:var(--ctl-h)!important}
html body .search-form{gap:8px!important}
/* Document form card-labels */
html body #documentForm .form-grid>label,html body .interactive-form .form-grid>label,html body .form-grid>label{padding:0!important;border:0!important;background:none!important;box-shadow:none!important;border-radius:0!important;transform:none!important}
html body #documentForm .form-grid>label:before,html body #documentForm .form-grid>label:after,html body .interactive-form .form-grid>label:before,html body .interactive-form .form-grid>label:after{display:none!important}
html body .panel>.panel,html body .panel .panel{box-shadow:none!important;background:var(--surface-2)!important}
html body .form-section,html body .document-form-section{padding:0!important;border:0!important;background:none!important;box-shadow:none!important}
/* Segmented */
html body .view-switch{padding:3px!important;border-radius:10px!important;gap:3px!important;background:var(--surface-3)!important;border:0!important}
html body .view-switch .btn{min-height:32px!important;font-size:13px!important;border:0!important;border-radius:7px!important;padding:0 12px!important}
html body .view-switch .btn.active,html body .view-switch .btn.primary{background:var(--surface)!important;color:var(--primary)!important;box-shadow:var(--shadow-sm)!important}
html[data-theme="dark"] body .view-switch .btn.active{color:#fff!important}
html body .settings-subnav,html body .document-settings-subnav{gap:2px!important;padding:3px!important;border-radius:10px!important;margin-bottom:var(--gap)!important;overflow-x:auto;flex-wrap:nowrap!important;scrollbar-width:none}
html body .settings-subnav a,html body .document-settings-subnav a{min-height:32px!important;padding:0 10px!important;font-size:13px!important;border-radius:7px!important;white-space:nowrap}
/* Badges */
html body .status-badge,html body .badge,html body .soft-tag{font-size:12px!important;padding:2px 9px!important;min-height:0!important;line-height:1.6!important;border-radius:999px!important;font-weight:500!important;gap:4px!important}

/* ---------- 7. Tables ---------- */
html body .table-wrap{border:1px solid var(--line)!important;border-radius:10px!important;overflow:auto;-webkit-overflow-scrolling:touch}
html body .table-wrap table{width:100%;border-collapse:separate;border-spacing:0}
html body th{font-size:12px!important;font-weight:600!important;color:var(--muted)!important;padding:9px 12px!important;background:var(--surface-2)!important;border-bottom:1px solid var(--line)!important;white-space:nowrap;text-align:left;position:sticky;top:0;z-index:1}
html body td{font-size:13.5px!important;padding:10px 12px!important;line-height:1.5!important;border-bottom:1px solid var(--line)!important;vertical-align:middle!important}
html body tbody tr:last-child td{border-bottom:0!important}
html body tbody tr{transition:background var(--dur-fast)}
html body tbody tr:hover{background:color-mix(in srgb,var(--primary) 3%,transparent)}
html body td small{font-size:12px!important}
html body td .inline-actions{flex-wrap:nowrap!important;gap:6px!important}
html body td .icon-btn{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;font-size:14px!important}
html body .organization-check-item>span{padding:10px 12px!important;border-radius:10px!important;border:1px solid var(--line)!important;background:var(--surface)!important;box-shadow:none!important;min-height:0!important}
html body .organization-check-item input:checked+span{border-color:var(--primary-border)!important;background:var(--primary-soft)!important;box-shadow:none!important}
html body .organization-check-item>span>i{width:28px!important;height:28px!important;font-size:13px!important;border-radius:7px!important}
html body .organization-check-item b{font-size:13px!important}
html body .organization-check-item small{font-size:11.5px!important}
html body .pagination a,html body .pager a,html body .pager .btn{min-width:32px!important;min-height:32px!important;font-size:13px!important}

/* ---------- 8. Modals (แก้ปัญหา Popup ปฏิทินล้นจอ) ---------- */
html body .modal,html body .command-modal{position:fixed!important;inset:0!important;z-index:1000!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:24px!important;background:rgba(15,20,30,.5)!important;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur) var(--ease),visibility 0s linear var(--dur)}
html body .modal.open,html body .command-modal.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--dur) var(--ease)}
html body .modal-dialog{position:relative!important;width:min(640px,100%)!important;max-width:100%!important;height:auto!important;max-height:calc(100dvh - 48px)!important;overflow:auto!important;overscroll-behavior:contain;margin:0!important;padding:20px 22px!important;border-radius:14px!important;background:var(--surface)!important;border:1px solid var(--line)!important;box-shadow:var(--shadow-lift)!important;transform:translateY(10px) scale(.98);transition:transform var(--dur-slow) var(--ease-spring)}
html body .modal.open .modal-dialog{transform:none}
html body .modal-dialog.small-dialog{width:min(440px,100%)!important}
html body .modal-dialog.preview-dialog{width:min(1100px,100%)!important;height:calc(100dvh - 48px)!important;display:flex;flex-direction:column;padding:14px!important}
html body .preview-dialog .document-preview-frame{flex:1;min-height:0}
html body .preview-dialog iframe{width:100%;height:100%;border:0;border-radius:8px}
html body .booking-preview-dialog{width:min(720px,100%)!important}
html body .modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:-20px -22px 16px!important;padding:16px 22px 12px!important;position:sticky;top:-20px;z-index:2;background:var(--surface);border-bottom:1px solid var(--line)}
html body .modal-head h2{font-size:var(--fs-lg)!important;margin:0!important}
html body .modal-head .eyebrow{margin:0 0 2px!important}
/* รายละเอียดการจองใน Popup: กระชับ อ่านง่าย */
html body .modal .detail-list,html body .modal .detail-list-roomy{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
html body .modal .detail-list>div,html body .modal .detail-list-roomy>div{padding:8px 10px!important;border-radius:8px!important;min-height:0!important;background:var(--surface-2)!important;border:1px solid var(--line)!important}
html body .modal .detail-list small{font-size:11.5px!important}
html body .modal .detail-list b,html body .modal .detail-list strong{font-size:13.5px!important;font-weight:600!important}
html body .modal .span-2{grid-column:1/-1!important}
html body .modal img{max-height:260px;object-fit:cover;border-radius:10px}
html body .modal .gallery-thumbnails img{max-height:64px}
html body .gallery-dialog{width:min(960px,100%)!important}
html body .gallery-stage img{max-height:calc(100dvh - 240px)!important;object-fit:contain;width:100%}
html body .confirm-dialog{text-align:center;padding:24px!important}
html body .confirm-icon{width:48px!important;height:48px!important;font-size:22px!important;margin:0 auto 10px!important}
html body .confirm-dialog h2{font-size:var(--fs-lg)!important}
html body .command-modal{align-items:flex-start!important;padding-top:12vh!important}
html body .command-box{width:min(560px,100%)!important;border-radius:14px!important;padding:8px!important;background:var(--surface)!important;box-shadow:var(--shadow-lift)!important;max-height:70vh;overflow:auto}
html body .command-results a{min-height:38px!important;padding:8px 10px!important;font-size:13.5px!important;border-radius:8px!important;gap:10px!important}
html body .command-results a:hover,html body .command-results a:focus{background:var(--primary-soft)!important;color:var(--primary)!important}
body.v8-modal-open{overflow:hidden}

/* ---------- 9. Calendar ---------- */
html body .booking-calendar{overflow-x:auto}
html body .booking-calendar-grid{grid-template-columns:repeat(7,minmax(0,1fr))!important;min-width:700px!important;border-radius:10px!important}
html body .calendar-weekday{padding:7px 4px!important;font-size:11.5px!important}
html body .calendar-day{min-height:96px!important;padding:6px!important;gap:3px!important}
html body .calendar-day-head{font-size:12px!important}
html body .calendar-event{padding:4px 6px!important;font-size:11.5px!important;line-height:1.35!important;border-radius:6px!important;gap:4px!important;grid-template-columns:14px minmax(0,1fr)!important}
html body .calendar-event:hover{filter:brightness(.96)}
html body .calendar-toolbar{gap:8px!important}
html body .calendar-toolbar b{font-size:var(--fs-md)!important}
html body .booking-summary-card{padding:14px!important;min-height:0!important;border-radius:var(--radius)!important}
html body .booking-summary-card strong,html body .booking-summary-card b{font-size:22px!important}

/* ---------- 10. Auth pages (Login / Change password / Install / Service unavailable) ---------- */
html body.auth-page{min-height:100dvh;margin:0;background:var(--bg)!important;display:block}
.auth-shell{display:grid;grid-template-columns:minmax(360px,44%) 1fr;min-height:100dvh}
.auth-brand{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:36px 44px;color:#fff;background:var(--auth-bg,linear-gradient(150deg,var(--primary) 0%,color-mix(in srgb,var(--primary) 70%,#0b1020) 100%));overflow:hidden}
.has-custom-bg .auth-brand:before{display:none}
.auth-register{margin:16px 0 0;font-size:13.5px;text-align:center;color:var(--muted)}
.auth-register a{color:var(--primary);font-weight:600;text-decoration:none}
html[data-theme=dark] .auth-register a{color:#93b4ff}
.auth-brand:after{content:"";position:absolute;right:-120px;bottom:-140px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 65%);animation:v8-float 12s ease-in-out infinite}
.auth-brand:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(180deg,transparent,#000 40%,transparent)}
@keyframes v8-float{0%,100%{transform:translate(0,0)}50%{transform:translate(-18px,-14px)}}
.auth-brand-top{display:flex;align-items:center;gap:10px;position:relative;z-index:1}
.auth-brand-top b{display:block;font-size:16px;letter-spacing:.02em}
.auth-brand-top small{display:block;font-size:11.5px;opacity:.75}
.auth-mark{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.16);font-size:18px;color:#fff;flex:0 0 auto}
.auth-mark-sm{width:40px;height:40px;background:var(--primary);color:#fff}
.auth-brand-copy{position:relative;z-index:1;max-width:420px}
.auth-brand-copy h2{font-size:28px!important;line-height:1.3!important;font-weight:600;margin:0 0 10px;color:#fff!important}
.auth-brand-copy p{font-size:14px;line-height:1.65;opacity:.85;margin:0 0 20px}
.auth-features{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.auth-features li{display:flex;align-items:center;gap:10px;font-size:13.5px;opacity:.92}
.auth-features i{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.14);font-size:14px}
.auth-brand-foot{position:relative;z-index:1;font-size:12px;opacity:.6}
.auth-panel{display:flex;align-items:center;justify-content:center;padding:32px 24px;min-height:100dvh}
.auth-single .auth-panel{min-height:100dvh}
.auth-card{width:100%;max-width:380px;animation:v8-rise var(--dur-slow) var(--ease) both}
.auth-card-wide{max-width:640px}
@keyframes v8-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.auth-head{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.auth-head small{display:block;font-size:12.5px;color:var(--muted);line-height:1.4}
.auth-head h1{font-size:22px!important;margin:0!important;line-height:1.3!important}
.auth-logo{width:44px;height:44px;border-radius:10px;object-fit:contain;background:var(--surface);border:1px solid var(--line)}
.auth-theme{margin-left:auto;width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--text);display:grid;place-items:center;cursor:pointer}
.auth-alert{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:9px;font-size:13px;line-height:1.5;margin-bottom:14px;border:1px solid}
.auth-alert i{font-size:16px;line-height:1.3}
.auth-alert b{display:block}
.auth-alert.danger{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 30%,transparent);color:var(--danger)}
.auth-alert.warn{background:var(--warning-soft);border-color:color-mix(in srgb,var(--warning) 30%,transparent);color:var(--warning)}
.auth-alert.info{background:var(--info-soft);border-color:color-mix(in srgb,var(--info) 30%,transparent);color:var(--info)}
.auth-alert.success{background:var(--success-soft);border-color:color-mix(in srgb,var(--success) 30%,transparent);color:var(--success)}
.auth-form{display:grid;gap:14px}
.auth-field{display:grid;gap:5px}
.auth-field>span:first-child{font-size:13px;font-weight:500;color:var(--text)}
.auth-input{position:relative;display:flex;align-items:center}
.auth-input>i{position:absolute;left:12px;color:var(--muted-2);font-size:15px;pointer-events:none}
html body .auth-input input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=color]):not([type=range]):not([type=file]){padding-left:38px!important;height:42px!important;min-height:42px!important;width:100%}
html body .auth-field>input{width:100%}
.auth-eye{position:absolute;right:4px;width:34px;height:34px;border:0;background:none;color:var(--muted);border-radius:7px;cursor:pointer;display:grid;place-items:center}
.auth-eye:hover{background:var(--surface-3)}
html body .auth-input input[name=password]:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=color]):not([type=range]):not([type=file]){padding-right:42px!important}
.auth-caps{margin:-6px 0 0;font-size:12px;color:var(--warning)}
.auth-submit{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border:0;border-radius:10px;background:var(--primary);color:#fff;font:600 14.5px/1 var(--font-ui);cursor:pointer;text-decoration:none;transition:background var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-fast);margin-top:4px}
.auth-submit:hover{background:var(--primary-hover);box-shadow:0 8px 20px -10px color-mix(in srgb,var(--primary) 80%,transparent)}
.auth-submit:active{transform:scale(.985)}
.auth-submit[disabled]{opacity:.7;cursor:progress}
.auth-submit i{transition:transform var(--dur) var(--ease)}
.auth-submit:hover i{transform:translateX(3px)}
.auth-help{font-size:12px;color:var(--muted);line-height:1.6;margin:16px 0 0;display:flex;gap:6px}
.auth-link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:13px;color:var(--muted);text-decoration:none}
.auth-link:hover{color:var(--primary)}
.auth-meter{height:4px;border-radius:4px;background:var(--surface-3);margin-top:-8px;overflow:hidden}
.auth-meter span{display:block;height:100%;width:0;background:var(--danger);transition:width var(--dur),background var(--dur)}
.auth-meter span[data-level=ok]{background:var(--warning)}.auth-meter span[data-level=strong]{background:var(--success)}
.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.auth-grid .span-2{grid-column:1/-1}
.auth-form fieldset{border:1px solid var(--line);border-radius:12px;padding:14px 16px 16px;margin:0;background:var(--surface)}
.auth-form legend{font-size:13.5px;font-weight:600;padding:0 6px;display:flex;gap:6px;align-items:center}
.auth-check{display:flex!important;align-items:center;gap:8px!important;font-size:13px!important}
.install-checks{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:14px;background:var(--surface);font-size:13px}
.install-checks summary{cursor:pointer;font-weight:600;display:flex;gap:8px;align-items:center}
.install-checks ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px}
.install-checks li{display:flex;gap:8px;align-items:center}
.install-checks .ok{color:var(--success)}.install-checks .bad{color:var(--danger)}
@media(max-width:960px){.auth-shell{grid-template-columns:1fr}.auth-brand{display:none}.has-custom-bg .auth-panel{background:var(--auth-bg)}.has-custom-bg .auth-card{background:var(--surface);padding:24px 20px;border-radius:16px;box-shadow:var(--shadow-lift)}}
@media(max-height:700px) and (min-width:961px){.auth-brand{padding:24px 36px}.auth-brand-copy h2{font-size:23px!important}.auth-features{gap:6px}.auth-brand-copy p{margin-bottom:12px}}
@media(max-width:560px){.auth-panel{align-items:flex-start;padding:max(28px,var(--safe-top)) 20px 28px}.auth-grid{grid-template-columns:1fr}html body .auth-input input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=color]):not([type=range]):not([type=file]){font-size:16px!important}}

/* Service console (provider) */
.service-switch{display:flex!important;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.service-switch.is-on{border-left:4px solid var(--success)!important}
.service-switch.is-off{border-left:4px solid var(--danger)!important;background:var(--danger-soft)!important}
.service-switch-state{display:flex;align-items:center;gap:12px}
.service-switch-state small{font-size:12px;color:var(--muted)}
.service-switch-state b{display:block;font-size:18px;line-height:1.3}
.service-switch-state p{margin:0;font-size:12.5px;color:var(--muted)}
.service-dot{width:12px;height:12px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 20%,transparent);animation:v8-pulse 2s ease-in-out infinite}
.is-off .service-dot{background:var(--danger);box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 20%,transparent)}
@keyframes v8-pulse{50%{box-shadow:0 0 0 7px transparent}}
.service-switch-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
html body .service-switch-form input{width:min(320px,70vw)}

/* ---------- 11. Feedback & motion ---------- */
.fl-ripple{position:absolute;border-radius:50%;transform:scale(0);background:currentColor;opacity:.16;pointer-events:none;animation:v8-ripple 520ms var(--ease) forwards}
@keyframes v8-ripple{to{transform:scale(2.4);opacity:0}}
[data-reveal]{opacity:0;transition:opacity var(--dur-slow) var(--ease)}
[data-reveal].is-visible{opacity:1}
.fl-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:1300;pointer-events:none}
.fl-progress span{display:block;height:100%;width:0;background:var(--primary);transition:width 240ms var(--ease),opacity 300ms}
.fl-progress.done span{width:100%;opacity:0}
.fl-toasts{position:fixed;right:16px;top:calc(var(--safe-top) + 14px);z-index:1200;display:grid;gap:8px;width:min(360px,calc(100vw - 32px));pointer-events:none}
.fl-toast{pointer-events:auto;display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lift);font-size:13px;animation:v8-rise var(--dur-slow) var(--ease-spring) both}
.fl-toast i{font-size:17px}
.fl-toast.success i{color:var(--success)}.fl-toast.danger i,.fl-toast.error i{color:var(--danger)}.fl-toast.warning i{color:var(--warning)}.fl-toast.info i{color:var(--info)}
.fl-toast.leaving{opacity:0;transform:translateX(12px);transition:all var(--dur)}
.swal2-popup{font-family:var(--font-ui)!important;border-radius:14px!important;font-size:14px!important;width:min(420px,92vw)!important;padding:20px!important}
.swal2-title{font-size:18px!important}
.swal2-html-container{font-size:13.5px!important}
.swal2-actions button{font-size:13.5px!important;border-radius:9px!important}
.fl-totop{display:none;position:fixed;right:18px;bottom:calc(var(--safe-bottom) + 18px);z-index:60;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);box-shadow:var(--shadow);align-items:center;justify-content:center;cursor:pointer}
.fl-totop.is-visible{display:inline-flex}
.fl-tabbar,.fl-fab{display:none}

/* AI review panel */
.ai-review-panel{margin:12px 0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.ai-review-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;font-size:13px}
.ai-stats{display:flex;flex-wrap:wrap;gap:6px}
.ai-stat{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:12px;color:var(--muted)}
.ai-stat.good{color:var(--success);background:var(--success-soft)}.ai-stat.warn{color:var(--warning);background:var(--warning-soft)}
.ai-review-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.ai-review-list li{display:grid;grid-template-columns:44px 1fr;gap:2px 10px;align-items:center;padding:7px 10px;border-radius:8px;background:var(--surface);border-left:3px solid var(--warning);font-size:13px}
.ai-review-list li.low{border-left-color:var(--danger)}
.ai-review-list li b{color:var(--warning);font-variant-numeric:tabular-nums}.ai-review-list li.low b{color:var(--danger)}
.ai-review-list li span{font-family:var(--font-doc);word-break:break-word}
.ai-review-list li small{grid-column:2;font-size:11.5px;color:var(--muted-2)}
.ai-needs-review{box-shadow:0 0 0 3px color-mix(in srgb,var(--warning) 22%,transparent)!important}

/* ---------- 12. Laptop (≤1280) ---------- */
@media(max-width:1280px){
  :root{--sidebar-w:228px}
  html body .content{padding:20px 22px 44px!important}
  html body .metric-card strong,html body .metric-card b{font-size:24px!important}
}
/* ---------- 13. Tablet (≤1024) ---------- */
@media(max-width:1024px){
  html body .dashboard-grid,html body .analytics-grid,html body .document-form-layout,html body .detail-grid,html body .form-layout{grid-template-columns:1fr!important}
  html body .booking-modal-layout{grid-template-columns:1fr!important}
  html body .metric-grid,html body .dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ---------- 14. Mobile (≤820) ---------- */
@media(max-width:820px){
  :root{--topbar-h:56px;--ctl-h:42px}
  html body{padding-bottom:calc(var(--tabbar-h) + var(--safe-bottom))!important}
  html body.fl-no-tabbar,html body.auth-page{padding-bottom:0!important}
  html body .sidebar{width:min(84vw,300px)!important;transform:translateX(-105%)!important;transition:transform var(--dur-slow) var(--ease)!important;z-index:70!important;padding-top:var(--safe-top)!important}
  html body .sidebar.open{transform:none!important;box-shadow:var(--shadow-lift)!important}
  html body .sidebar-overlay{z-index:65!important}
  html body .main{margin-left:0!important}
  html body .topbar{padding:var(--safe-top) 12px 0!important}
  html body .topbar.fl-hide{transform:translateY(-100%)}
  html body .command-trigger{width:36px!important;padding:0!important;justify-content:center}
  html body .command-trigger span,html body .command-trigger kbd,html body .clock{display:none!important}
  html body .content{padding:16px 14px 32px!important}
  html body .page-hero{flex-direction:column;align-items:stretch;margin-bottom:14px!important}
  html body .page-hero h1{font-size:20px!important}
  html body .fl-fab-moved{display:none!important}
  html body .dashboard-hero-actions:has(.fl-fab-moved){grid-template-columns:1fr!important}
  html body .page-hero>.btn{width:100%}
  html body .panel{padding:14px!important;border-radius:12px!important}
  html body .panel-head{flex-direction:column;align-items:stretch;gap:8px}
  html body .panel-head>.soft-tag,html body .panel-head>.badge,html body .panel-head>.status-badge,html body .panel-head>span{align-self:flex-start}
  html body .metric-grid,html body .dashboard-metrics{grid-template-columns:1fr 1fr!important;gap:10px!important}
  html body .metric-card{padding:12px!important}
  html body .metric-card strong,html body .metric-card b{font-size:21px!important}
  html body .metric-card>i{width:26px!important;height:26px!important;font-size:13px!important;top:10px!important;right:10px!important}
  html body .metric-card small{display:none}
  html body .dashboard-hero{padding:16px!important;flex-direction:column;align-items:stretch!important}
  html body .dashboard-hero h1{font-size:19px!important}
  html body .dashboard-hero-pills{display:none!important}
  html body .hero-actions,html body .dashboard-hero-actions{display:grid!important;grid-template-columns:1fr 1fr;width:100%}
  html body .form-grid,html body .check-grid{grid-template-columns:1fr!important}
  html body .form-grid .span-2{grid-column:auto!important}
  html body input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=file]),html body select,html body textarea{font-size:16px!important}
  html body .search-form{flex-direction:column;align-items:stretch}
  html body .chart-stage{height:210px!important}
  html body .inline-actions{flex-wrap:wrap;gap:6px}
  html body .document-detail-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:6px;width:100%}
  html body .document-detail-actions .btn{width:100%}
  html body .report-filter,html body .audit-filter,html body .comm-filter{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;align-items:end}
  html body .report-filter>*,html body .audit-filter>*,html body .comm-filter>*{min-width:0!important;width:100%!important}
  html body .report-filter .btn,html body .audit-filter .btn,html body .comm-filter .btn{width:100%}
  html body .report-filter input,html body .audit-filter input,html body .comm-filter input,html body .audit-filter select,html body .comm-filter select{width:100%!important;min-width:0!important}
  html body .metric-card>div{padding-right:30px}
  html body .metric-card span{display:block;line-height:1.35!important}
  /* Modal → bottom sheet */
  html body .modal{align-items:flex-end!important;padding:0!important}
  html body .modal-dialog:not(.preview-dialog){width:100%!important;max-height:88dvh!important;border-radius:16px 16px 0 0!important;padding:16px 16px calc(16px + var(--safe-bottom))!important;transform:translateY(100%)}
  html body .modal.open .modal-dialog:not(.preview-dialog){transform:none}
  html body .modal-dialog:not(.preview-dialog) .modal-head{margin:-16px -16px 12px!important;padding:10px 16px 10px!important;top:-16px}
  html body .modal-dialog:not(.preview-dialog) .modal-head:before{content:"";position:absolute;left:50%;top:5px;transform:translateX(-50%);width:36px;height:4px;border-radius:4px;background:var(--line-strong)}
  html body .modal .detail-list,html body .modal .booking-preview-summary,html body .modal .detail-list-roomy{grid-template-columns:1fr 1fr!important}
  html body .modal-dialog.preview-dialog{width:100%!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;padding:10px!important}
  html body .command-modal{padding:calc(var(--safe-top) + 8px) 8px 0!important;align-items:flex-start!important}
  /* Calendar: 7 ช่องเต็มจอ */
  html body .booking-calendar{overflow:visible}
  html body .booking-calendar-grid{min-width:0!important}
  html body .calendar-weekday{padding:6px 1px!important;font-size:10.5px!important}
  html body .calendar-day{min-height:64px!important;padding:3px!important}
  html body .calendar-day-head{font-size:11px!important}
  html body .calendar-event{grid-template-columns:1fr!important;padding:2px 3px!important;font-size:9.5px!important;line-height:1.25!important}
  html body .calendar-event i{display:none!important}
  html body .calendar-event span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html body .booking-summary-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}
  html body .booking-summary-card{padding:10px!important}
  html body .booking-summary-card strong,html body .booking-summary-card b{font-size:18px!important}
  /* Bottom tab bar */
  .fl-tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:55;height:calc(var(--tabbar-h) + var(--safe-bottom));padding:4px var(--safe-right) var(--safe-bottom) var(--safe-left);background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line)}
  .fl-tabbar a,.fl-tabbar button{appearance:none;background:none;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted);font:500 10.5px/1.2 var(--font-ui);text-decoration:none;position:relative;border-radius:10px;overflow:hidden}
  .fl-tabbar i{font-size:19px;line-height:1;transition:transform var(--dur) var(--ease-spring)}
  .fl-tabbar .active{color:var(--primary);font-weight:600}
  html[data-theme="dark"] .fl-tabbar .active{color:#fff}
  .fl-tabbar .active i{transform:translateY(-1px)}
  .fl-tabbar .active:after{content:"";position:absolute;top:0;width:20px;height:2px;border-radius:2px;background:var(--primary)}
  .fl-tabbar em{position:absolute;top:3px;right:calc(50% - 20px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--danger);color:#fff;font-size:9.5px;font-style:normal;font-weight:700;display:grid;place-items:center}
  .fl-tabbar span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fl-fab{display:inline-flex;align-items:center;gap:6px;position:fixed;right:14px;bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 12px);z-index:56;height:46px;padding:0 16px 0 14px;border-radius:23px;background:var(--primary);color:#fff;border:0;font:600 13.5px/1 var(--font-ui);box-shadow:0 10px 24px -8px color-mix(in srgb,var(--primary) 80%,transparent);text-decoration:none;max-width:calc(100vw - 28px);animation:v8-rise var(--dur-slow) var(--ease-spring) both;transition:padding var(--dur)}
  .fl-fab i{font-size:18px}
  .fl-fab.is-compact{padding:0 14px}.fl-fab.is-compact span{display:none}
  .fl-totop{left:14px;right:auto;bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 14px)}
  .fl-sticky-actions{position:sticky;bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 6px);z-index:30;display:flex;gap:8px;margin:12px -14px -6px;padding:8px 14px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  .fl-sticky-actions .btn{flex:1}
  .fl-toasts{left:12px;right:12px;width:auto}
}

/* ---------- 15. Responsive table → card (≤760) ---------- */
@media(max-width:760px){
  html body .table-wrap:not(.table-keep){border:0!important;overflow:visible}
  html body .table-wrap:not(.table-keep) table{display:block;min-width:0!important}
  html body .table-wrap:not(.table-keep) thead{display:none}
  html body .table-wrap:not(.table-keep) tbody{display:grid;gap:8px}
  html body .table-wrap:not(.table-keep) tr{display:block;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:4px 12px;box-shadow:var(--shadow-xs)}
  html body .table-wrap:not(.table-keep) tr.is-tappable:active{background:var(--surface-2)}
  html body .table-wrap:not(.table-keep) td{display:grid!important;grid-template-columns:minmax(84px,34%) 1fr;gap:8px;padding:7px 0!important;border:0!important;border-bottom:1px dashed var(--line)!important;font-size:13px!important;white-space:normal}
  html body .table-wrap:not(.table-keep) td:last-child{border-bottom:0!important}
  html body .table-wrap:not(.table-keep) td:before{content:attr(data-label);color:var(--muted);font-size:11.5px;font-weight:500}
  html body .table-wrap:not(.table-keep) td:not([data-label]),html body .table-wrap:not(.table-keep) td[data-label=""]{grid-template-columns:1fr}
  html body .table-wrap:not(.table-keep) td:not([data-label]):before,html body .table-wrap:not(.table-keep) td[data-label=""]:before{content:none}
  html body .table-wrap:not(.table-keep) td.checkbox-cell{grid-template-columns:auto 1fr;padding:6px 0!important}
  html body .table-wrap:not(.table-keep) td.fl-title-cell{grid-template-columns:1fr;font-size:14px!important;font-weight:600}
  html body .table-wrap:not(.table-keep) td.fl-title-cell:before{content:none}
  html body .table-wrap:not(.table-keep) td.fl-actions-cell{grid-template-columns:1fr;padding-top:8px!important}
  html body .table-wrap:not(.table-keep) td.fl-actions-cell .inline-actions{display:flex;gap:6px}
  html body .table-wrap:not(.table-keep) td.fl-actions-cell .btn,html body .table-wrap:not(.table-keep) td.fl-actions-cell .icon-btn{flex:1}
  html body .table-wrap .fl-cell{min-width:0}
  html body .table-wrap .fl-cell>small{display:block}
  html body .table-wrap:not(.table-keep) td .status-badge,html body .table-wrap:not(.table-keep) td .badge{justify-self:start}
  .table-scroll-hint{font-size:11.5px;color:var(--muted);padding:4px 0}
}
@media(max-width:820px) and (max-height:480px){.fl-tabbar{display:none}html body{padding-bottom:0!important}.fl-fab{bottom:calc(var(--safe-bottom) + 12px)}}

/* ---------- 16. Print & reduced motion ---------- */
@media print{.fl-tabbar,.fl-fab,.fl-totop,.fl-progress,.fl-toasts,.topbar,.sidebar,.sidebar-overlay{display:none!important}html body .main{margin:0!important}html body{padding:0!important;background:#fff!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}[data-reveal]{opacity:1}}

/* ---------- 17. PDF annotations (8.1): TH Sarabun New, ไม่มีกรอบข้อความลงนาม, เลือกสีได้ ---------- */
html body .pdf-annotation .annotation-body,html body .pdf-annotation .annotation-body *{font-family:'TH Sarabun New','Sarabun',sans-serif!important}
html body .pdf-annotation.annotation-comment{border:1px dashed transparent!important;background:transparent!important;box-shadow:none!important;color:#0003ff}
html body .pdf-annotation.annotation-comment:hover,html body .pdf-annotation.annotation-comment.selected{border-color:color-mix(in srgb,currentColor 45%,transparent)!important}
html body .pdf-annotation.annotation-comment .annotation-body{display:block!important;padding:6px 8px!important;line-height:1.3!important;text-align:left!important;white-space:pre-wrap}
html body .pdf-annotation.annotation-comment .annotation-signer{font-size:.86em;margin-top:2px}
html body .pdf-annotation.annotation-receipt_stamp{border-width:2px!important;border-style:solid!important}
.annotation-color-control{display:grid;gap:6px;font-size:13px;font-weight:500}
.swatch-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.swatch{width:26px;height:26px;border-radius:50%;border:2px solid var(--surface);background:var(--sw);box-shadow:0 0 0 1px var(--line-strong);cursor:pointer;padding:0}
.swatch.active{box-shadow:0 0 0 2px var(--primary)}
html body .swatch-row input[type=color]{width:34px!important;height:28px!important;min-height:28px!important;padding:2px!important;border-radius:7px!important;cursor:pointer}

/* ---------- 18. Flow picker popup (8.1) ---------- */
.flow-start-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px;border:1px dashed var(--line-strong);border-radius:10px;background:var(--surface-2)}
.flow-start-cta p{margin:0;font-size:13px}
html body .flow-picker-dialog{width:min(680px,100%)!important}
.flow-picker-form{display:grid;gap:12px}
.flow-options{display:grid;gap:10px;max-height:min(52dvh,520px);overflow:auto;padding:2px}
.flow-option{display:block!important;cursor:pointer}
.flow-option input{position:absolute;opacity:0;pointer-events:none}
.flow-option-card{display:grid;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);transition:border-color var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast)}
.flow-option:hover .flow-option-card{border-color:var(--primary-border)}
.flow-option input:checked+.flow-option-card{border-color:var(--primary);background:var(--primary-soft);box-shadow:0 0 0 1px var(--primary)}
.flow-option input:focus-visible+.flow-option-card{outline:2px solid var(--primary);outline-offset:2px}
.flow-option-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.flow-option-head b{font-size:14.5px;margin-right:auto}
.flow-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;counter-reset:none}
.flow-steps li{display:flex;align-items:center;gap:7px;padding:5px 10px 5px 5px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:12.5px;position:relative}
.flow-steps li+li:before{content:"→";position:absolute;left:-11px;color:var(--muted-2);font-size:11px}
.flow-steps li+li{margin-left:8px}
.flow-steps b{font-weight:600;display:block;line-height:1.3}
.flow-steps small{display:block;font-size:11px;color:var(--muted);line-height:1.3}
.flow-step-no{width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;flex:0 0 auto}
@media(max-width:820px){.flow-steps{flex-direction:column}.flow-steps li+li{margin-left:0}.flow-steps li+li:before{display:none}.flow-start-cta .btn{width:100%}}

/* ---------- 19. 8.1 components ---------- */
.v8-two-col{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)!important}
.v8-fieldset,.lbg-modes{border:1px solid var(--line);border-radius:10px;padding:10px 14px;display:flex;flex-wrap:wrap;gap:8px 18px;margin:0}
.v8-fieldset legend,.lbg-modes legend{font-size:13px;font-weight:600;padding:0 6px}
html body .check-row{display:flex!important;align-items:center;gap:8px!important;font-weight:500}
/* login background */
.login-bg-form{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px;align-items:start}
.login-bg-preview{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:background var(--dur)}
.lbp-brand{padding:14px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;font-size:11px}
.lbp-brand .auth-mark{width:22px;height:22px;font-size:11px;border-radius:6px}
.lbp-form{background:var(--surface);display:grid;align-content:center;gap:6px;padding:14px}
.lbp-form i{display:block;height:9px;border-radius:4px;background:var(--surface-3)}.lbp-form i:last-child{background:var(--primary);height:12px}
.lbg-mode{cursor:pointer}.lbg-mode input{position:absolute;opacity:0}
.lbg-mode span{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line-strong);border-radius:999px;font-size:13px}
.lbg-mode input:checked+span{border-color:var(--primary);background:var(--primary-soft);color:var(--primary);font-weight:600}
html body .login-bg-form input[type=color]{height:38px!important;min-height:38px!important;padding:3px!important;width:100%}
/* internal systems */
.app-tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.app-tile{position:relative;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow-xs);transition:border-color var(--dur),box-shadow var(--dur),transform var(--dur) var(--ease)}
.app-tile:hover{border-color:var(--primary-border);box-shadow:var(--shadow);transform:translateY(-2px)}
.app-tile.is-inactive{opacity:.6}
.app-tile-link{display:flex;align-items:center;gap:12px;padding:14px;color:inherit;text-decoration:none}
.app-tile-logo{width:48px;height:48px;border-radius:12px;flex:0 0 48px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:22px;overflow:hidden;border:1px solid var(--line)}
.app-tile-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.app-tile-copy{min-width:0;flex:1}.app-tile-copy b{display:block;font-size:14px;line-height:1.35}
.app-tile-copy small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-tile-go{color:var(--muted-2);font-size:13px}
.app-tile-admin{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:0 10px 10px}
/* forms */
.forms-filter{display:flex;gap:8px;margin-bottom:14px}.forms-filter select{max-width:220px}
.form-list{display:grid;gap:8px}
.form-cat{font-size:13px!important;color:var(--muted)!important;margin:10px 0 2px!important;font-weight:600!important}
.form-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.form-item.is-inactive{opacity:.6}
.form-icon{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;font-size:19px;background:var(--surface-2);color:var(--primary);flex:0 0 38px}
.form-copy{flex:1;min-width:0}.form-copy b{display:block;font-size:14px}.form-copy small{display:block;font-size:12px;color:var(--muted)}
.form-item .inline-actions{flex-wrap:nowrap}
/* verify */
.verify-drop{display:grid!important;place-items:center;text-align:center;gap:6px!important;padding:28px 16px!important;border:2px dashed var(--line-strong);border-radius:12px;background:var(--surface-2);cursor:pointer;transition:border-color var(--dur),background var(--dur)}
.verify-drop.is-over,.verify-drop:hover{border-color:var(--primary);background:var(--primary-soft)}
.verify-drop input{position:absolute;opacity:0;width:1px;height:1px}
.verify-drop i{font-size:30px;color:var(--primary)}.verify-drop small{font-weight:400}
.verify-or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}.verify-or:before,.verify-or:after{content:"";flex:1;height:1px;background:var(--line)}
.verify-result{border-left:4px solid var(--muted)!important}
.verify-result.is-approved{border-left-color:var(--success)!important}.verify-result.is-rejected{border-left-color:var(--danger)!important}.verify-result.is-pending{border-left-color:var(--warning)!important}
.verify-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.verify-head>i{font-size:30px;line-height:1}.is-approved .verify-head>i{color:var(--success)}.is-rejected .verify-head>i{color:var(--danger)}.is-pending .verify-head>i{color:var(--warning)}
.verify-head h2{font-size:18px!important;margin:0 0 2px!important}.verify-head p{margin:0;font-size:13px;color:var(--muted)}
code.hash{display:block;word-break:break-all;font-size:11.5px}
.mono{font-family:var(--font-mono)!important;letter-spacing:.04em}
.verify-steps{margin:0;padding-left:18px;display:grid;gap:8px;font-size:13.5px}
.registration-list{display:grid;gap:12px}
.registration-approve{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.provider-account-panel .panel-head h2 i{color:var(--primary)}
@media(max-width:1024px){.v8-two-col{grid-template-columns:1fr!important}.login-bg-form{grid-template-columns:1fr}}
@media(max-width:820px){.forms-filter{flex-direction:column}.forms-filter select{max-width:none}.form-item{flex-wrap:wrap}.form-item .inline-actions{width:100%}.form-item .inline-actions .btn{flex:1}.app-tile-grid{grid-template-columns:1fr}}

/* ---------- 20. Settings navigation v2 (8.2): แบ่งกลุ่ม ไม่อัดกัน ---------- */
.settings-shell{display:grid;grid-template-columns:236px minmax(0,1fr);gap:24px;align-items:start}
.settings-main{min-width:0}
html body .settings-subnav.settings-nav-v2{display:block!important;flex-wrap:initial!important;gap:0!important;padding:8px!important;margin:0 0 var(--gap)!important;border:1px solid var(--line)!important;border-radius:12px!important;background:var(--surface)!important;box-shadow:var(--shadow-xs)!important;overflow:visible!important}
html body .settings-shell>.settings-nav-v2{position:sticky;top:calc(var(--topbar-h) + 16px);margin:0!important;max-height:calc(100dvh - var(--topbar-h) - 32px);overflow-y:auto!important;scrollbar-width:thin}
.settings-nav-groups{display:grid;gap:2px}
.content>.settings-nav-v2 .settings-nav-groups{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px 16px}
.settings-nav-group{display:grid;gap:1px;padding-bottom:6px}
.settings-nav-group+.settings-nav-group{border-top:1px solid var(--line);padding-top:4px}
.settings-nav-group p{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--muted-2);margin:6px 10px 4px;text-transform:uppercase}
html body .settings-nav-v2 .settings-nav-group a{display:flex!important;align-items:center;justify-content:flex-start!important;text-align:left!important;width:100%;gap:9px;min-height:34px!important;height:auto!important;padding:6px 10px!important;border-radius:8px!important;font-size:13px!important;font-weight:500;line-height:1.35;color:var(--muted)!important;background:transparent!important;white-space:normal!important;text-decoration:none;box-shadow:none!important;transition:background var(--dur-fast),color var(--dur-fast)}
html body .settings-nav-v2 .settings-nav-group a i{font-size:15px;width:18px;flex:0 0 18px;text-align:center}
html body .settings-nav-v2 .settings-nav-group a:hover{background:var(--surface-3)!important;color:var(--text)!important}
html body .settings-nav-v2 .settings-nav-group a.active{background:var(--primary-soft)!important;color:var(--primary)!important;font-weight:600}
html[data-theme=dark] body .settings-nav-v2 .settings-nav-group a.active{color:#fff!important}
.settings-nav-links a{font-size:12.5px!important}
.settings-nav-toggle{display:none;width:100%;align-items:center;gap:10px;padding:6px 8px;border:0;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;border-radius:8px}
.settings-nav-toggle>i:first-child{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:15px}
.settings-nav-toggle span{flex:1;min-width:0}.settings-nav-toggle small{display:block;font-size:11px;color:var(--muted)}.settings-nav-toggle b{display:block;font-size:14px;line-height:1.3}
.settings-nav-toggle>i:last-child{transition:transform var(--dur) var(--ease);color:var(--muted)}
.settings-nav-v2.is-open .settings-nav-toggle>i:last-child{transform:rotate(180deg)}
/* หน้าหลักการตั้งค่า: แบ่งหมวด */
.settings-home{display:grid;gap:22px}
.settings-home-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.settings-home-head h2{font-size:15px!important;margin:0!important}.settings-home-head p{margin:0;font-size:12.5px;color:var(--muted)}
html body .settings-home .module-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))!important;margin:0!important}
@media(max-width:1100px){
  .settings-shell{grid-template-columns:1fr;gap:12px}
  html body .settings-shell>.settings-nav-v2{position:static;max-height:none;overflow:visible!important}
  .settings-nav-toggle{display:flex}
  .settings-nav-v2 .settings-nav-groups{display:none!important;margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
  .settings-nav-v2.is-open .settings-nav-groups{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:4px 12px;animation:v8-rise var(--dur) var(--ease) both}
  .settings-nav-v2.is-open .settings-nav-group+.settings-nav-group{border-top:0}
}
@media(max-width:560px){.settings-nav-v2.is-open .settings-nav-groups{grid-template-columns:1fr}}

/* ---------- 21. OCR panel (8.2) ---------- */
.ocr-panel .panel-head h2 i{color:var(--primary)}
.ocr-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.ocr-mode{display:flex;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);opacity:.75}
.ocr-mode.is-on{opacity:1;border-color:var(--success);background:var(--success-soft)}
.ocr-mode>i{font-size:22px;color:var(--primary)}.ocr-mode b{display:block;font-size:14px}.ocr-mode small{display:block;font-size:12.5px;color:var(--muted);margin:2px 0 6px;line-height:1.5}
.ocr-test{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ocr-install h3{font-size:14.5px!important;margin:4px 0 10px!important}
.ocr-install-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px}
.ocr-install-grid>div{padding:12px 14px;border:1px solid var(--line);border-radius:10px}
.ocr-install-grid b{display:flex;gap:6px;align-items:center;font-size:13.5px}.ocr-install-grid p{font-size:13px;margin:6px 0;line-height:1.6}
.code-copy{display:flex;align-items:center;gap:6px;background:#0f172a;color:#e2e8f0;border-radius:8px;padding:6px 6px 6px 12px}
.code-copy code{flex:1;color:#e2e8f0;background:none;font-size:12px;word-break:break-all}
html body .code-copy .icon-btn{background:rgba(255,255,255,.08)!important;border-color:transparent!important;color:#e2e8f0;width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important}
@media(max-width:820px){.ocr-modes,.ocr-install-grid{grid-template-columns:1fr}}

html body .metric-card>div{padding-right:38px}
html body .panel-head>.status-badge{white-space:nowrap;flex:0 0 auto}