/* WORKDEE Smart Office 8.6 — การแสดงผลสำหรับผู้มีปัญหาทางการมองเห็น
 * ค่าถูกตั้งเป็น attribute บน <html> ตั้งแต่ HTML แรก (จากฐานข้อมูลของผู้ใช้ หรือ localStorage บนหน้าเข้าสู่ระบบ)
 *   data-a11y-size="90..160"   ขนาดตัวอักษร/องค์ประกอบ (ใช้ zoom กับพื้นที่เนื้อหา เพราะ CSS เดิมกำหนดขนาดเป็น px)
 *   data-a11y-contrast         high | dark | yellow | gray
 *   data-a11y-underline / spacing / motion / cursor
 */

/* ---------- 1. ขนาดตัวอักษร ---------- */
:root{--wd-zoom:1}
html[data-a11y-size]:not([data-a11y-size="100"]) body .content,
html[data-a11y-size]:not([data-a11y-size="100"]) body .topbar-left,
html[data-a11y-size]:not([data-a11y-size="100"]) body .topbar-right,
html[data-a11y-size]:not([data-a11y-size="100"]) body .sidebar-head,
html[data-a11y-size]:not([data-a11y-size="100"]) body .sidebar .org-chip,
html[data-a11y-size]:not([data-a11y-size="100"]) body .sidebar .nav-list,
html[data-a11y-size]:not([data-a11y-size="100"]) body .sidebar-foot,
html[data-a11y-size]:not([data-a11y-size="100"]) body .modal-dialog,
html[data-a11y-size]:not([data-a11y-size="100"]) body .command-box,
html[data-a11y-size]:not([data-a11y-size="100"]) body .swal2-popup,
html[data-a11y-size]:not([data-a11y-size="100"]) body .fl-tabbar,
html[data-a11y-size]:not([data-a11y-size="100"]) body .auth-card,
html[data-a11y-size]:not([data-a11y-size="100"]) body .auth-brand-copy{zoom:var(--wd-zoom)}
/* ความสูงที่อิงจอภาพต้องหารด้วยค่าขยาย ไม่ให้ล้นจอเมื่อขยาย */
html[data-a11y-size]:not([data-a11y-size="100"]) body .modal-dialog{max-height:calc(92vh / var(--wd-zoom))!important;max-width:calc(96vw / var(--wd-zoom))!important;overflow:auto}
html[data-a11y-size]:not([data-a11y-size="100"]) body .command-box{max-width:calc(94vw / var(--wd-zoom))!important}
html[data-a11y-size]:not([data-a11y-size="100"]) body .topbar{height:auto!important;min-height:var(--topbar-h,56px)}
html[data-a11y-size]:not([data-a11y-size="100"]) body .sidebar{width:min(calc(var(--sidebar-w,272px) * var(--wd-zoom)),92vw)!important}


/* เมื่อขยายตั้งแต่ 120% จอจะ "แคบลง" สำหรับเนื้อหา แต่ media query ของหน้าเดิมไม่รู้ตัว:
   ให้ตารางคอลัมน์หลักเรียงใหม่อัตโนมัติ ไม่ล้นจอด้านขวา */
html:is([data-a11y-size="120"],[data-a11y-size="125"],[data-a11y-size="130"],[data-a11y-size="135"],[data-a11y-size="140"],[data-a11y-size="145"],[data-a11y-size="150"],[data-a11y-size="155"],[data-a11y-size="160"]) body .content :is(.analytics-grid,.dashboard-grid,.report-chart-grid,.metric-grid,.module-grid,.settings-grid,.detail-grid,.form-layout,.document-form-layout,.v8-two-col,.resource-grid,.form-grid){grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))!important}
html:is([data-a11y-size="120"],[data-a11y-size="125"],[data-a11y-size="130"],[data-a11y-size="135"],[data-a11y-size="140"],[data-a11y-size="145"],[data-a11y-size="150"],[data-a11y-size="155"],[data-a11y-size="160"]) body .content :is(.analytics-grid,.dashboard-grid,.report-chart-grid)>*{grid-column:auto!important}
html:is([data-a11y-size="120"],[data-a11y-size="125"],[data-a11y-size="130"],[data-a11y-size="135"],[data-a11y-size="140"],[data-a11y-size="145"],[data-a11y-size="150"],[data-a11y-size="155"],[data-a11y-size="160"]) body .content .form-grid>.span-2{grid-column:1/-1!important}
html:is([data-a11y-size="120"],[data-a11y-size="125"],[data-a11y-size="130"],[data-a11y-size="135"],[data-a11y-size="140"],[data-a11y-size="145"],[data-a11y-size="150"],[data-a11y-size="155"],[data-a11y-size="160"]) body .content :is(.wd-flow-editor,.wd-reg-layout){grid-template-columns:1fr!important}
html:is([data-a11y-size="120"],[data-a11y-size="125"],[data-a11y-size="130"],[data-a11y-size="135"],[data-a11y-size="140"],[data-a11y-size="145"],[data-a11y-size="150"],[data-a11y-size="155"],[data-a11y-size="160"]) body .content :is(.wd-flow-aside,.wd-reg-list){position:static!important;max-height:none!important}
html:is([data-a11y-size="120"],[data-a11y-size="125"],[data-a11y-size="130"],[data-a11y-size="135"],[data-a11y-size="140"],[data-a11y-size="145"],[data-a11y-size="150"],[data-a11y-size="155"],[data-a11y-size="160"]) body .st-shell{grid-template-columns:1fr!important;gap:14px}
html:is([data-a11y-size="120"],[data-a11y-size="125"],[data-a11y-size="130"],[data-a11y-size="135"],[data-a11y-size="140"],[data-a11y-size="145"],[data-a11y-size="150"],[data-a11y-size="155"],[data-a11y-size="160"]) body .st-side{position:static;max-height:none;overflow:visible;padding:8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-xs)}
html:is([data-a11y-size="120"],[data-a11y-size="125"],[data-a11y-size="130"],[data-a11y-size="135"],[data-a11y-size="140"],[data-a11y-size="145"],[data-a11y-size="150"],[data-a11y-size="155"],[data-a11y-size="160"]) body .st-back{display:none}
html:is([data-a11y-size="120"],[data-a11y-size="125"],[data-a11y-size="130"],[data-a11y-size="135"],[data-a11y-size="140"],[data-a11y-size="145"],[data-a11y-size="150"],[data-a11y-size="155"],[data-a11y-size="160"]) body .st-nav-toggle{display:flex;width:100%;align-items:center;gap:10px;padding:4px 6px;border:0;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;border-radius:8px}
html:is([data-a11y-size="120"],[data-a11y-size="125"],[data-a11y-size="130"],[data-a11y-size="135"],[data-a11y-size="140"],[data-a11y-size="145"],[data-a11y-size="150"],[data-a11y-size="155"],[data-a11y-size="160"]) body .st-nav-toggle>i:first-child{flex:0 0 34px;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:16px}
html:is([data-a11y-size="120"],[data-a11y-size="125"],[data-a11y-size="130"],[data-a11y-size="135"],[data-a11y-size="140"],[data-a11y-size="145"],[data-a11y-size="150"],[data-a11y-size="155"],[data-a11y-size="160"]) body .st-nav-toggle>span{flex:1;min-width:0}
html:is([data-a11y-size="120"],[data-a11y-size="125"],[data-a11y-size="130"],[data-a11y-size="135"],[data-a11y-size="140"],[data-a11y-size="145"],[data-a11y-size="150"],[data-a11y-size="155"],[data-a11y-size="160"]) body .st-nav-toggle small{display:block;font-size:11.5px;color:var(--muted)}
html:is([data-a11y-size="120"],[data-a11y-size="125"],[data-a11y-size="130"],[data-a11y-size="135"],[data-a11y-size="140"],[data-a11y-size="145"],[data-a11y-size="150"],[data-a11y-size="155"],[data-a11y-size="160"]) body .st-nav-toggle b{display:block;font-size:14px;line-height:1.4}
html:is([data-a11y-size="120"],[data-a11y-size="125"],[data-a11y-size="130"],[data-a11y-size="135"],[data-a11y-size="140"],[data-a11y-size="145"],[data-a11y-size="150"],[data-a11y-size="155"],[data-a11y-size="160"]) body .st-side.is-open .st-nav-toggle>i:last-child{transform:rotate(180deg)}
html:is([data-a11y-size="120"],[data-a11y-size="125"],[data-a11y-size="130"],[data-a11y-size="135"],[data-a11y-size="140"],[data-a11y-size="145"],[data-a11y-size="150"],[data-a11y-size="155"],[data-a11y-size="160"]) body .st-nav{display:none;margin-top:8px;padding-top:10px;border-top:1px solid var(--line);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 16px}
html:is([data-a11y-size="120"],[data-a11y-size="125"],[data-a11y-size="130"],[data-a11y-size="135"],[data-a11y-size="140"],[data-a11y-size="145"],[data-a11y-size="150"],[data-a11y-size="155"],[data-a11y-size="160"]) body .st-side.is-open .st-nav{display:grid}
html:is([data-a11y-size="120"],[data-a11y-size="125"],[data-a11y-size="130"],[data-a11y-size="135"],[data-a11y-size="140"],[data-a11y-size="145"],[data-a11y-size="150"],[data-a11y-size="155"],[data-a11y-size="160"]) body .st-nav-home{display:grid!important;grid-column:1/-1;padding-bottom:8px;border-bottom:1px solid var(--line)}
html:is([data-a11y-size="120"],[data-a11y-size="125"],[data-a11y-size="130"],[data-a11y-size="135"],[data-a11y-size="140"],[data-a11y-size="145"],[data-a11y-size="150"],[data-a11y-size="155"],[data-a11y-size="160"]) body .content{max-width:100%!important;overflow-x:clip}
html:is([data-a11y-size="120"],[data-a11y-size="125"],[data-a11y-size="130"],[data-a11y-size="135"],[data-a11y-size="140"],[data-a11y-size="145"],[data-a11y-size="150"],[data-a11y-size="155"],[data-a11y-size="160"]) body .content :is(table){font-size:inherit}

/* ---------- 2. โหมดสี ---------- */
/* 2.1 คอนทราสต์สูง (พื้นขาว ตัวอักษรดำ) */
html[data-a11y-contrast="high"]:root{
  --bg:#fff!important;--surface:#fff!important;--surface-2:#fff!important;--surface-3:#eef0f3!important;--sidebar:#fff!important;
  --text:#000!important;--muted:#1d1d1f!important;--muted-2:#2b2b2e!important;--line:#1d1d1f!important;--line-strong:#000!important;
  --primary:#0a2db8!important;--primary-hover:#071f80!important;--primary-soft:#e3e8ff!important;--primary-border:#0a2db8!important;
  --danger:#b00012!important;--success:#00602a!important;--warning:#7a4100!important;color-scheme:light!important;
}
html[data-a11y-contrast="high"] body{background:#fff!important;color:#000!important}
html[data-a11y-contrast="high"] body :where(.panel,.metric-card,.module-card,.app-tile,.st-item,.wd-flow-card,.wd-reg-item,.wd-stat,.wd-history-row,.modal-dialog,.command-box,.topbar,input,select,textarea,.icon-btn,.btn.ghost,.wd-choice>span,.wd-chip>span){border:2px solid #000!important;box-shadow:none!important}
html[data-a11y-contrast="high"] body :where(small,.muted,p,label,th,td,dt,dd,.eyebrow){color:#000!important;opacity:1!important}
html[data-a11y-contrast="high"] body .sidebar{background:#000!important}
html[data-a11y-contrast="high"] body .sidebar *{color:#fff!important}
html[data-a11y-contrast="high"] body .sidebar .nav-item.active{background:#fff!important;border:2px solid #fff!important}
html[data-a11y-contrast="high"] body .sidebar .nav-item.active *{color:#000!important}
html[data-a11y-contrast="high"] body .btn.primary{background:#0a2db8!important;border:2px solid #000!important;color:#fff!important}
html[data-a11y-contrast="high"] body .content a:not(.btn):not(.icon-btn):not(.app-tile-link):not(.st-item):not(.wd-stat){color:#0a2db8!important;text-decoration:underline!important}

/* 2.2 พื้นดำ ตัวอักษรขาว / 2.3 พื้นดำ ตัวอักษรเหลือง — บังคับทุกองค์ประกอบ (ยกเว้นรูป วิดีโอ กราฟ PDF) */
html[data-a11y-contrast="dark"]{--a11y-fg:#ffffff;--a11y-accent:#7cc4ff}
html[data-a11y-contrast="yellow"]{--a11y-fg:#ffe600;--a11y-accent:#ffe600}
html:is([data-a11y-contrast="dark"],[data-a11y-contrast="yellow"]){color-scheme:dark;--bg:#000;--surface:#000;--surface-2:#000;--surface-3:#111;--text:var(--a11y-fg);--muted:var(--a11y-fg);--line:var(--a11y-fg);--line-strong:var(--a11y-fg);--primary:var(--a11y-accent)}
html:is([data-a11y-contrast="dark"],[data-a11y-contrast="yellow"]) body,
html:is([data-a11y-contrast="dark"],[data-a11y-contrast="yellow"]) body *:not(img):not(svg):not(svg *):not(canvas):not(video):not(iframe):not(.pdf-pages *):not(.signature-pad *):not(.wd-a11y-swatch):not(.wd-a11y-swatch *){
  background-color:#000!important;background-image:none!important;color:var(--a11y-fg)!important;border-color:var(--a11y-fg)!important;
  text-shadow:none!important;box-shadow:none!important
}
html:is([data-a11y-contrast="dark"],[data-a11y-contrast="yellow"]) body :is(small,.muted,p,label,dt,.eyebrow,.wd-pill){opacity:1!important}
html:is([data-a11y-contrast="dark"],[data-a11y-contrast="yellow"]) body :where(.panel,.metric-card,.module-card,.app-tile,.st-item,.wd-flow-card,.wd-reg-item,.wd-stat,.wd-history-row,.modal-dialog,.command-box,input,select,textarea,.btn,.icon-btn,.wd-choice>span,.wd-chip>span,.sidebar,.topbar,.wd-a11y-panel){border:2px solid var(--a11y-fg)!important}
html:is([data-a11y-contrast="dark"],[data-a11y-contrast="yellow"]) body :is(.btn.primary,.nav-item.active,.wd-tabs a.active,.wd-quick-btn.is-on,.wd-a11y-option[aria-pressed="true"]),
html:is([data-a11y-contrast="dark"],[data-a11y-contrast="yellow"]) body :is(.btn.primary,.nav-item.active,.wd-tabs a.active,.wd-quick-btn.is-on,.wd-a11y-option[aria-pressed="true"]) *{background-color:var(--a11y-fg)!important;color:#000!important}
html:is([data-a11y-contrast="dark"],[data-a11y-contrast="yellow"]) body :is(.wd-choice input:checked+span,.wd-chip input:checked+span,.wd-reg-item.is-active){outline:4px solid var(--a11y-fg)!important;outline-offset:-1px}
html:is([data-a11y-contrast="dark"],[data-a11y-contrast="yellow"]) body .content a:not(.btn):not(.icon-btn){text-decoration:underline!important}
html:is([data-a11y-contrast="dark"],[data-a11y-contrast="yellow"]) body .wd-switch input:checked+.wd-switch-ui{background-color:var(--a11y-fg)!important}
html:is([data-a11y-contrast="dark"],[data-a11y-contrast="yellow"]) body .wd-switch-ui:after{background-color:var(--a11y-fg)!important}
html:is([data-a11y-contrast="dark"],[data-a11y-contrast="yellow"]) body .wd-switch input:checked+.wd-switch-ui:after{background-color:#000!important}
html:is([data-a11y-contrast="dark"],[data-a11y-contrast="yellow"]) ::placeholder{color:var(--a11y-fg)!important;opacity:.75!important}
html:is([data-a11y-contrast="dark"],[data-a11y-contrast="yellow"]) .sidebar-overlay{background:rgba(0,0,0,.7)!important}

/* 2.4 โทนขาวดำ (สำหรับผู้ที่แยกสีได้ยาก) — ใช้ filter ที่ root จึงไม่กระทบตำแหน่ง fixed */
html[data-a11y-contrast="gray"]{filter:grayscale(1) contrast(1.12)}

/* ---------- 3. ตัวช่วยเพิ่มเติม ---------- */
html[data-a11y-underline] body :is(.content,.auth-card) a:not(.btn):not(.icon-btn):not(.app-tile-link):not(.st-item){text-decoration:underline!important;text-underline-offset:3px;text-decoration-thickness:2px}
html[data-a11y-underline] body .sidebar .nav-item span{text-decoration:underline;text-underline-offset:3px}
html[data-a11y-spacing] body{letter-spacing:.03em!important;word-spacing:.12em!important}
html[data-a11y-spacing] body :is(p,li,dd,td,label,small,.alert span){line-height:2!important}
html[data-a11y-spacing] body :is(h1,h2,h3){line-height:1.6!important}
html[data-a11y-motion] *,html[data-a11y-motion] *::before,html[data-a11y-motion] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-a11y-motion]::view-transition-group(*),html[data-a11y-motion]::view-transition-old(*),html[data-a11y-motion]::view-transition-new(*){animation:none!important}
html[data-a11y-cursor],html[data-a11y-cursor] *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewBox='0 0 20 24'%3E%3Cpath d='M1 1v19l5-5 3.5 8 3-1.3-3.4-7.7H16z' fill='%23000' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 2 2,auto!important}
html[data-a11y-cursor] :is(a,button,label,summary,select,[role=button]),html[data-a11y-cursor] :is(a,button,label,summary,select,[role=button]) *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewBox='0 0 20 24'%3E%3Cpath d='M1 1v19l5-5 3.5 8 3-1.3-3.4-7.7H16z' fill='%231d4ed8' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 2 2,pointer!important}
html[data-a11y-cursor] :is(input:not([type=checkbox]):not([type=radio]),textarea){cursor:text!important}

/* โฟกัสคีย์บอร์ดชัดเจนเสมอเมื่อเปิดโหมดช่วยการมองเห็นใด ๆ */
html:is([data-a11y-contrast],[data-a11y-underline],[data-a11y-cursor]) :focus-visible{outline:3px solid #ff7a00!important;outline-offset:2px!important}

/* ---------- 4. แผงปรับการแสดงผล ---------- */
.wd-a11y-panel{position:fixed;z-index:1200;top:calc(var(--topbar-h,56px) + 10px);right:max(12px,env(safe-area-inset-right));width:min(380px,calc(100vw - 24px));max-height:calc(100vh - var(--topbar-h,56px) - 24px);overflow:auto;padding:18px;border-radius:18px;background:var(--surface,#fff);color:var(--text,#11122a);border:1px solid var(--line,#e4e6ee);box-shadow:0 24px 60px rgba(15,23,42,.22);font-size:15px;line-height:1.5;opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top right;pointer-events:none;visibility:hidden;transition:opacity .18s ease,transform .22s cubic-bezier(.22,1,.36,1),visibility 0s linear .22s}
.wd-a11y-panel.is-open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .18s ease,transform .22s cubic-bezier(.22,1,.36,1)}
.wd-a11y-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.wd-a11y-head h2{margin:0;font-size:18px;line-height:1.4}
.wd-a11y-head p{margin:2px 0 0;font-size:13px;color:var(--muted,#71758a)}
.wd-a11y-close{flex:0 0 auto;width:36px;height:36px;border-radius:10px;border:1px solid var(--line,#e4e6ee);background:transparent;color:inherit;display:grid;place-items:center}
.wd-a11y-group{padding:14px 0;border-top:1px solid var(--line,#e4e6ee)}
.wd-a11y-group>h3{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--muted,#71758a)}
.wd-a11y-size{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:10px}
.wd-a11y-size button{height:44px;border-radius:12px;border:1px solid var(--line-strong,#d7dae5);background:var(--surface,#fff);color:inherit;font-weight:700}
.wd-a11y-size button:first-child{font-size:14px}.wd-a11y-size button:last-child{font-size:20px}
html body .wd-a11y-size input[type=range]{width:100%;height:28px!important;min-height:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;accent-color:var(--primary,#2f5bea)}
html body .wd-a11y-size input[type=range]:focus-visible{outline:2px solid var(--primary,#2f5bea)!important;outline-offset:4px;border-radius:6px}
.wd-a11y-size-value{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:13px;color:var(--muted,#71758a)}
.wd-a11y-size-value b{font-size:15px;color:var(--text,#11122a)}
.wd-a11y-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.wd-a11y-option{min-height:40px;padding:6px 8px;border-radius:10px;border:1px solid var(--line-strong,#d7dae5);background:var(--surface,#fff);color:inherit;font-size:13px;line-height:1.3;transition:border-color .15s ease,background .15s ease}
.wd-a11y-option[aria-pressed="true"]{border:2px solid var(--primary,#2f5bea);background:var(--primary-soft,#eef0ff);font-weight:600}
.wd-a11y-modes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.wd-a11y-modes .wd-a11y-option{display:flex;align-items:center;gap:10px;text-align:left;padding:8px 10px;min-height:52px}
.wd-a11y-swatch{flex:0 0 auto;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-weight:700;font-size:15px;border:1px solid rgba(0,0,0,.25)}
.wd-a11y-swatch.is-normal{background:linear-gradient(135deg,#fff 50%,#2f5bea 50%);color:#11122a}
.wd-a11y-swatch.is-high{background:#fff;color:#000;border:2px solid #000}
.wd-a11y-swatch.is-dark{background:#000;color:#fff}
.wd-a11y-swatch.is-yellow{background:#000;color:#ffe600}
.wd-a11y-swatch.is-gray{background:linear-gradient(135deg,#f2f2f2 50%,#6b6b6b 50%);color:#000}
.wd-a11y-toggles{display:grid;gap:4px}
.wd-a11y-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:4px 2px;font-size:14px;cursor:pointer}
.wd-a11y-toggle span{display:flex;align-items:center;gap:10px}
.wd-a11y-toggle span i{width:22px;text-align:center;color:var(--muted,#71758a)}
.wd-a11y-toggle input{position:absolute;opacity:0;width:1px;height:1px}
.wd-a11y-toggle em{position:relative;flex:0 0 auto;width:44px;height:26px;border-radius:99px;background:var(--line-strong,#cfd3de);transition:background .18s ease}
.wd-a11y-toggle em:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s cubic-bezier(.22,1,.36,1)}
.wd-a11y-toggle input:checked+em{background:var(--primary,#2f5bea)}
.wd-a11y-toggle input:checked+em:after{transform:translateX(18px)}
.wd-a11y-toggle input:focus-visible+em{outline:3px solid var(--primary,#2f5bea);outline-offset:2px}
.wd-a11y-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px;border-top:1px solid var(--line,#e4e6ee);font-size:13px}
.wd-a11y-status{color:var(--muted,#71758a);display:flex;align-items:center;gap:6px}
.wd-a11y-status.is-saved{color:var(--success,#15803d)}
.wd-a11y-reset{border:0;background:transparent;color:var(--primary,#2f5bea);font-weight:600;padding:8px 4px;text-decoration:underline;text-underline-offset:3px}
/* ปุ่มลอยบนหน้าเข้าสู่ระบบ/สมัครสมาชิก (ไม่มีแถบด้านบน) */
.wd-a11y-fab{position:fixed;z-index:1100;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:var(--primary,#2f5bea);color:#fff;font:inherit;font-size:14px;font-weight:600;box-shadow:0 12px 32px rgba(15,23,42,.28)}
.wd-a11y-fab i{font-size:20px}
body.auth-page .wd-a11y-panel{top:auto;bottom:76px;transform-origin:bottom right}
@media(max-width:560px){.wd-a11y-fab span{display:none}.wd-a11y-fab{padding:0;width:52px;justify-content:center}}
@media(prefers-reduced-motion:reduce){.wd-a11y-panel,.wd-a11y-toggle em,.wd-a11y-toggle em:after{transition:none}}