/* Onepim PDF Editor — ตาม Ken Decor Group Design System v1 (Living Blueprint)
   teal #0B8A96 ราว 10% · Bai Jamjuree (หัวเรื่อง) + Anuphan (เนื้อหา/UI) ฝังในโปรแกรม · มุม 4px · เส้น 1px · กริด 8px · density compact */
@font-face{font-family:"Bai Jamjuree";font-weight:700;font-display:swap;src:url("fonts/bai-jamjuree-thai-700-normal.woff2") format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Bai Jamjuree";font-weight:700;font-display:swap;src:url("fonts/bai-jamjuree-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Anuphan";font-weight:400;font-display:swap;src:url("fonts/anuphan-thai-400-normal.woff2") format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Anuphan";font-weight:400;font-display:swap;src:url("fonts/anuphan-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Anuphan";font-weight:700;font-display:swap;src:url("fonts/anuphan-thai-700-normal.woff2") format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Anuphan";font-weight:700;font-display:swap;src:url("fonts/anuphan-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212}

:root{
  --kd-primary:#0B8A96;--kd-primary-dark:#076A74;--kd-primary-darkest:#054E55;--kd-primary-light:#8FD3D8;--kd-primary-tint:#E3F1F2;
  --kd-text:#3D4A4D;--kd-text-muted:rgba(61,74,77,.72);--kd-line:rgba(61,74,77,.16);--kd-line-strong:rgba(61,74,77,.32);
  --kd-bg:#FFFFFF;--kd-bg-alt:#F5F7F6;--kd-on-primary:#FFFFFF;
  --kd-font:"Anuphan","Noto Sans Thai","Leelawadee UI",system-ui,sans-serif;
  --kd-display:"Bai Jamjuree","Anuphan","Noto Sans Thai",sans-serif;
  --kd-radius:4px;--kd-radius-sm:2px;--kd-control-h:32px;
  --kd-dur-fast:120ms;--kd-dur:240ms;--kd-ease:cubic-bezier(.2,0,0,1);
  --kd-danger:#B5524E;--kd-danger-tint:#F3E1E0;
  /* ชื่อเดิมที่โค้ดเก่าใช้ ชี้ไปที่ token ใหม่ */
  --teal:var(--kd-primary);--teal-d:var(--kd-primary-dark);--teal-dd:var(--kd-primary-darkest);--teal-l:var(--kd-primary-light);--teal-t:var(--kd-primary-tint);
  --ink:var(--kd-text);--bg:var(--kd-bg-alt);--w:var(--kd-bg);--line:var(--kd-line);--mute:var(--kd-text-muted);--red:var(--kd-danger)
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font-family:var(--kd-font);background:var(--bg);color:var(--ink);display:flex;flex-direction:column;font-size:13px;line-height:1.5;overflow:hidden;font-variant-numeric:tabular-nums}
b{font-weight:700}
button{font-family:inherit;color:inherit}
:focus-visible{outline:2px solid var(--kd-primary);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* แถบเมนูบาง */
#menubar{display:flex;align-items:center;gap:4px;height:40px;padding:0 8px;background:var(--w);border-bottom:1px solid var(--line);flex:none}
.logo{width:24px;height:24px;border-radius:var(--kd-radius);background:var(--kd-primary);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:700;margin-right:4px}
.app{font-family:var(--kd-display);font-weight:700;font-size:14px;color:var(--kd-primary-darkest);letter-spacing:.2px}
.proj{color:var(--mute);font-size:12px;cursor:pointer;margin-left:8px;max-width:260px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sep{width:1px;height:16px;background:var(--line);margin:0 8px}
.sp{flex:1}
.mb{border:0;background:transparent;padding:4px 8px;min-height:var(--kd-control-h);border-radius:var(--kd-radius);cursor:pointer;font-size:13px;transition:background var(--kd-dur-fast) var(--kd-ease)}
.mb:hover{background:var(--bg)}
#btnSave{color:var(--kd-primary-dark);font-weight:700}
/* ปุ่มหลักหน้าจอ: หนึ่งปุ่มเดียว = บันทึกเป็น PDF */
#btnPdf{background:var(--kd-primary-dark);color:var(--kd-on-primary);font-weight:700}
#btnPdf:hover{background:var(--kd-primary-darkest)}
#btnMeet{border:1px solid var(--kd-primary-dark);color:var(--kd-primary-dark);border-radius:var(--kd-radius)}
#btnMeet:hover{background:var(--kd-primary-tint)}

/* แท็บไฟล์ */
#fileTabs{display:flex;gap:2px;padding:4px 8px 0;background:var(--bg);border-bottom:1px solid var(--line);flex:none;min-height:32px;overflow-x:auto}
.ftab{padding:4px 12px;border:1px solid var(--line);border-bottom:0;border-radius:var(--kd-radius) var(--kd-radius) 0 0;background:#eef2f1;color:var(--mute);cursor:pointer;font-size:12px;white-space:nowrap}
.ftab.on{background:var(--w);color:var(--kd-primary-darkest);font-weight:700;border-top:2px solid var(--kd-primary)}
.ftab.miss{border-style:dashed}

/* พื้นที่ทำงาน */
#workspace{flex:1;display:grid;grid-template-columns:80px 1fr 320px;min-height:0}

/* แถบเครื่องมือซ้าย — ไอคอนเส้น 1.5px ปลายตัดตรง (ภาษาเขียนแบบ) */
#rail{background:var(--w);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:8px 0;gap:2px;overflow-y:auto}
.tool{width:64px;border:0;background:transparent;border-radius:var(--kd-radius);padding:8px 0 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ink);transition:background var(--kd-dur-fast) var(--kd-ease)}
.tool svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter}
.tool span{font-size:11px;line-height:1.2}
.tool:hover{background:var(--bg)}
.tool.on{background:var(--kd-primary-tint);color:var(--kd-primary-darkest);box-shadow:inset 2px 0 0 var(--kd-primary)}
.tool.on svg{stroke:var(--kd-primary)}
.rsep{width:48px;height:1px;background:var(--line);margin:8px 0}

/* ศูนย์กลาง */
#stage{display:flex;flex-direction:column;min-width:0;min-height:0}
#viewer{flex:1;overflow:auto;background:#e6ecea;position:relative;min-height:0}
#empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--mute)}
#empty[hidden]{display:none}
#empty b{color:var(--ink);font-family:var(--kd-display);font-size:16px}
#page{position:relative;margin:16px auto;background:#fff;width:max-content;box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(61,74,77,.08)}
#cv{display:block}
#ov{position:absolute;left:0;top:0}
#ov text{font-family:inherit;font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:3px}
#ov .hit{cursor:pointer}

/* แถบสถานะล่าง = Title Block ย่อ: หน้า · ซูม · "ในเครือ Ken Decor" */
#bar{display:flex;align-items:center;gap:8px;height:40px;padding:0 8px;background:var(--w);border-top:1px solid var(--line);flex:none;font-size:12px}
#bar button{border:1px solid var(--line);background:var(--w);border-radius:var(--kd-radius);min-height:var(--kd-control-h);padding:0 8px;cursor:pointer}
#bar button:hover{background:var(--bg)}
#pageInfo,#zoomInfo{min-width:72px;text-align:center;color:var(--mute)}
#bar::after{content:"ในเครือ Ken Decor";order:99;margin-left:8px;padding-left:8px;border-left:1px solid var(--line);font-size:12px;line-height:16px;color:var(--mute);white-space:nowrap}

/* แผงขวา */
#side{background:var(--w);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0;overflow:hidden}
#views{display:flex;border-bottom:1px solid var(--line);flex:none}
#views a{flex:1;text-align:center;padding:8px 2px;cursor:pointer;color:var(--mute);border-bottom:2px solid transparent;font-size:12px;white-space:nowrap}
#views a:hover{color:var(--ink)}
#views a.on{color:var(--kd-primary-darkest);font-weight:700;border-bottom-color:var(--kd-primary)}
#viewPlan,#viewTakeoff,#viewTasks,#viewPages,#viewIssues{padding:16px;overflow:auto;flex:1;min-height:0}
h4{font-family:var(--kd-display);font-size:12px;font-weight:700;color:var(--kd-primary-dark);margin:16px 0 8px;letter-spacing:.2px}
h4:first-child{margin-top:0}
.field{display:flex;align-items:center;gap:8px;font-size:12.5px}
select,input[type=text],input[type=date]{font:inherit;color:var(--ink);border:1px solid var(--kd-line-strong);border-radius:var(--kd-radius);min-height:var(--kd-control-h);padding:0 8px;background:var(--w);flex:1;min-width:0}
select:focus,input[type=text]:focus,input[type=date]:focus{outline:none;border-color:var(--kd-primary)}
.mute{color:var(--mute);font-size:12px;margin-top:4px}
#swatches{display:flex;gap:8px;flex-wrap:wrap}
.sw{width:24px;height:24px;border-radius:var(--kd-radius);border:1px solid var(--line);cursor:pointer}
.sw.on{outline:2px solid var(--kd-primary);outline-offset:2px}
/* การ์ดรายการ: มุมซ้ายบนมี corner mark (Datum) */
.mk,.task,#isList .is{position:relative}
.mk::before,.task::before,#isList .is::before{content:"";position:absolute;left:-1px;top:-1px;width:8px;height:8px;border-left:2px solid var(--kd-primary);border-top:2px solid var(--kd-primary);pointer-events:none}
.mk{border:1px solid var(--line);border-radius:var(--kd-radius);padding:8px 8px;margin-bottom:8px;cursor:pointer;font-size:12.5px}
.mk:hover{background:var(--bg)}
.mk.sel{border-color:var(--kd-primary);background:var(--kd-primary-tint)}
.mk small{color:var(--mute);display:block;font-size:12px;margin-top:2px}
.chip{display:inline-block;font-size:12px;line-height:16px;font-weight:700;border-radius:var(--kd-radius-sm);padding:0 8px;margin-right:4px;background:var(--bg);color:var(--mute)}
.chip.ok{background:var(--kd-primary-tint);color:var(--kd-primary-darkest)}
.chip.rev{background:var(--kd-danger-tint);color:var(--kd-danger)}
table{width:100%;border-collapse:collapse;font-size:12.5px}
td,th{padding:8px 4px;border-bottom:1px solid var(--line);text-align:left}
th{color:var(--kd-primary-darkest);background:var(--kd-primary-tint);font-weight:700;font-size:12px}
tbody tr:nth-child(even) td{background:var(--kd-bg-alt)}
td.n,th.n{text-align:right}
.note{font-size:12px;color:var(--mute);margin-top:12px}
/* ปุ่มรอง: ขอบ 1px teal-dark พื้นโปร่ง */
.btn{border:1px solid var(--kd-primary-dark);border-radius:var(--kd-radius);min-height:var(--kd-control-h);padding:0 16px;background:transparent;color:var(--kd-primary-dark);cursor:pointer;font-size:12.5px;font-weight:700;margin-top:8px;transition:background var(--kd-dur-fast) var(--kd-ease)}
.btn:hover{background:var(--kd-primary-tint)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.task{border:1px solid var(--line);border-radius:var(--kd-radius);padding:8px;margin-bottom:8px;display:grid;gap:8px}
.grow{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:12px}
.grow span.t{width:96px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.gbar{height:8px;border-radius:var(--kd-radius-sm);background:var(--kd-primary-light)}
.gbar.done{background:var(--kd-primary)}

#toast{position:fixed;left:50%;bottom:56px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:8px 16px;border-radius:var(--kd-radius);font-size:12.5px;z-index:9}

/* โหมดประชุม: ซ่อนแผงขวาและแถบแท็บ ขยายแบบให้เต็มจอ */
body.meet #fileTabs,body.meet #side{display:none}
body.meet #workspace{grid-template-columns:80px 1fr}
body.meet .tool{width:72px;padding:12px 0 8px}
body.meet .tool span{font-size:12px}

/* แถบตัวเลือกเครื่องมือ */
#opts{display:flex;align-items:center;gap:16px;min-height:40px;padding:4px 16px;background:var(--w);border-bottom:1px solid var(--line);flex:none;font-size:12.5px;flex-wrap:wrap}
#opts .ot{font-family:var(--kd-display);font-weight:700;color:var(--kd-primary-darkest);margin-right:4px}
#opts .oh{color:var(--mute)}
#opts .ow{color:var(--kd-danger);font-size:12px}
.og{display:flex;align-items:center;gap:8px}
.ol{color:var(--mute);font-size:12px}
#opts select{flex:none;min-height:28px;padding:0 8px;font-size:12px}
.cs{width:20px;height:20px;border-radius:var(--kd-radius);border:1px solid var(--line);cursor:pointer;display:inline-block}
.cs.on{outline:2px solid var(--kd-primary);outline-offset:2px}
.ob{border:1px solid var(--line);background:var(--w);border-radius:var(--kd-radius);min-height:28px;padding:0 8px;cursor:pointer;font-size:12px}
.ob:hover{background:var(--bg)}
.ob.on{background:var(--kd-primary-tint);border-color:var(--kd-primary);color:var(--kd-primary-darkest);font-weight:700}
body.meet #opts{display:none}
#cmd{margin-left:8px;color:var(--kd-primary-darkest);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}
#ov .hdl{cursor:move}
#btnDxf{color:var(--kd-primary-dark);font-weight:700}

/* แท็บโหมด วาด / แก้ไข */
#modebar{display:flex;gap:2px;padding:0 16px;background:var(--w);border-bottom:1px solid var(--line);flex:none}
#modebar a{padding:8px 24px;cursor:pointer;color:var(--mute);font-family:var(--kd-display);font-weight:700;font-size:13.5px;border-bottom:2px solid transparent}
#modebar a:hover{color:var(--ink)}
#modebar a.on{color:var(--kd-primary-darkest);border-bottom-color:var(--kd-primary)}
.rgrp{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%}
body[data-mode=draw] .rgrp[data-mode=edit],body[data-mode=edit] .rgrp[data-mode=draw]{display:none}
#hud{position:absolute;left:0;top:0;pointer-events:none}
#hud text{font-family:inherit;font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:3px}

/* แถบจบเส้นลอยด้านล่าง */
#stage{position:relative}
#drawbar{position:absolute;left:50%;bottom:48px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;background:var(--w);border:1px solid var(--kd-primary);border-radius:var(--kd-radius);padding:8px 8px;z-index:6;font-size:12.5px;box-shadow:0 4px 16px rgba(61,74,77,.08)}
#drawbar[hidden]{display:none}
#drawbar button{border:1px solid var(--line);background:var(--w);border-radius:var(--kd-radius);min-height:var(--kd-control-h);padding:0 16px;cursor:pointer;font:inherit}
#drawbar button.ok{background:var(--kd-primary-dark);color:#fff;border-color:var(--kd-primary-dark);font-weight:700}
#drawbar button.ok:hover{background:var(--kd-primary-darkest)}
#drawbar small{color:var(--mute);font-size:12px}
.logo img{width:100%;height:100%;object-fit:contain;border-radius:var(--kd-radius)}
.logo span[hidden]{display:none}

.logo.has-img{background:transparent;width:30px;height:34px}
.emptyLogo{width:min(320px,60%);height:auto;margin-bottom:16px;opacity:.95}
.emptyLogo{mix-blend-mode:multiply}

/* ลิขสิทธิ์ / รหัสลิขสิทธิ์ */
.mb.lic{border:1px solid var(--line);border-radius:var(--kd-radius);font-size:12px;padding:0 8px;margin-right:8px}
.mb.lic.ok{color:var(--kd-primary-darkest);border-color:var(--kd-primary-light);background:var(--kd-primary-tint)}
.mb.lic.warn{color:var(--kd-primary-darkest);border-color:var(--kd-danger);background:var(--kd-primary-tint)}
.mb.lic.bad{color:#fff;background:var(--kd-danger);border-color:var(--kd-danger)}
#licModal{position:fixed;inset:0;background:rgba(61,74,77,.45);display:grid;place-items:center;z-index:50}
#licModal[hidden]{display:none}
.licPanel{background:var(--w);border:1px solid var(--line);border-radius:var(--kd-radius);width:min(560px,92vw);max-height:90vh;overflow:auto;padding:24px}
.licHead{font-family:var(--kd-display);font-size:18px;margin-bottom:8px}
.licHead b{color:var(--kd-primary-darkest)}
.licCopy{font-size:12px;color:var(--mute);margin-bottom:16px}
.licBox{border:1px solid var(--line);border-radius:var(--kd-radius);padding:8px 16px;margin-bottom:8px;font-size:13px}
.licBox.ok{border-color:var(--kd-primary-light);background:var(--kd-primary-tint);color:var(--kd-primary-darkest)}
.licBox.warn{border-color:var(--kd-danger);background:var(--kd-primary-tint);color:var(--kd-primary-darkest)}
.licBox.bad{border-color:var(--kd-danger);background:var(--kd-danger-tint);color:var(--kd-danger)}
.licTab{width:100%;font-size:13px;margin-bottom:8px}
.licTab td:first-child{color:var(--mute);width:136px}
.licLbl{display:block;font-size:12px;color:var(--mute);margin:8px 0 4px}
#licText{width:100%;font:12px/1.4 Consolas,monospace;border:1px solid var(--kd-line-strong);border-radius:var(--kd-radius);padding:8px;color:var(--ink);resize:vertical}
.licMsg{min-height:18px;font-size:12.5px;margin:8px 0}
.licMsg.ok{color:var(--kd-primary-darkest)}.licMsg.bad{color:var(--kd-danger)}
.licBtns{display:flex;gap:8px;align-items:center}
.licBtns .btn{margin-top:0}
.licBtns .btn:not(.o){background:var(--kd-primary-dark);color:#fff}
.licBtns .btn:not(.o):hover{background:var(--kd-primary-darkest)}
.licThird{font-size:12px;color:var(--mute);margin-top:16px;border-top:1px solid var(--line);padding-top:8px}

/* หน้า / ประเด็น / เลเซอร์ */
#pgList{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.pg{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--line);border-radius:var(--kd-radius);background:var(--w);cursor:pointer}
.pg.on{border-color:var(--kd-primary);background:var(--kd-primary-tint)}
.pg img,.pg canvas{width:48px;height:auto;border:1px solid var(--line);background:#fff}
.pg .pgi{flex:1;font-size:12px;color:var(--ink)}
.pg .pgb{display:flex;gap:4px}.pg .pgb button{border:1px solid var(--line);background:var(--w);border-radius:var(--kd-radius);min-height:24px;padding:0 8px;cursor:pointer;font-size:12px}
.pg .pgb button:hover{background:var(--kd-primary-tint)}
#isFilter{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0}
#isNav{display:flex;gap:4px;margin:8px 0}#isNav .btn.on{background:var(--kd-danger);border-color:var(--kd-danger);color:#fff}
#isList .is{padding:8px;border:1px solid var(--line);border-radius:var(--kd-radius);margin-bottom:8px;cursor:pointer;background:var(--w);font-size:13px}
#isList .is.sel{border-color:var(--kd-primary);background:var(--kd-primary-tint)}
#isList .is small{display:block;color:var(--mute);font-size:12px;margin-top:2px}
#isList .isb{display:flex;gap:4px;margin-top:8px}#isList .isb button{flex:1;border:1px solid var(--line);background:var(--w);border-radius:var(--kd-radius);min-height:24px;cursor:pointer;font-size:12px}
#isList .isb button.on{background:var(--kd-primary-dark);color:#fff;border-color:var(--kd-primary-dark)}
#laser{position:fixed;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:radial-gradient(circle,#ff3b30 0 35%,rgba(255,59,48,.35) 60%,transparent 70%);pointer-events:none;z-index:9999}
body.laser #viewer{cursor:none}
#optName{min-width:176px;min-height:28px;padding:0 8px;border:1px solid var(--kd-line-strong);border-radius:var(--kd-radius);font:inherit}

/* middle-button pan */
body.midpan #viewer, body.midpan #viewer * { cursor: grabbing !important; }

/* in-app dialog (dialog.js) */
#kdDlg{position:fixed;inset:0;background:rgba(61,74,77,.45);display:grid;place-items:center;z-index:60}
#kdDlg[hidden]{display:none}
#kdDlg .box{background:var(--w);border:1px solid var(--line);border-radius:var(--kd-radius);box-shadow:var(--kd-shadow-md);width:min(420px,92vw);padding:24px}
#kdDlg .msg{font-size:14px;line-height:1.6;white-space:pre-line;margin-bottom:16px;color:var(--ink)}
#kdDlg .in{width:100%;flex:none;margin-bottom:8px}
#kdDlg .in[hidden]{display:none}
#kdDlg .row{display:flex;justify-content:flex-end;gap:8px}
#kdDlg .btn.p{background:var(--kd-primary-dark);color:#fff}
#kdDlg .btn.p:hover{background:var(--kd-primary-darkest)}

/* continuous pages */
#stack{width:max-content;min-width:100%;padding:16px 0}
#stack[hidden]{display:none}
.slot{position:relative;margin:0 auto 16px;background:#fff;box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(61,74,77,.08)}
.slot>canvas.thumb{position:absolute;left:0;top:0;width:100%;height:100%}
.slot>svg.snap{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.slot>svg.snap text{font-family:inherit;font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:3px}
.slot>#page{position:absolute;left:0;top:0;margin:0;box-shadow:none}

/* type-on-drawing box (inlineAsk) */
#page .inl{position:absolute;z-index:5;transform:translateY(-60%);min-width:220px;min-height:0;height:auto;padding:2px 6px;border:1.5px solid var(--kd-primary);border-radius:var(--kd-radius-sm);background:rgba(255,255,255,.96);font-family:var(--kd-font);font-weight:700;color:var(--ink);flex:none;box-shadow:var(--kd-shadow-sm)}

/* drawing area: never select page text while dragging */
#viewer,#stack,#page,#ov,#hud{-webkit-user-select:none;user-select:none}
#page .inl{-webkit-user-select:text;user-select:text}

/* v2.6: ตราประทับ/ลายน้ำ, เปรียบเทียบ */
.kdOv{position:fixed;inset:0;background:rgba(61,74,77,.45);display:grid;place-items:center;z-index:55}
.kdOv .box{background:var(--w);border:1px solid var(--line);border-radius:var(--kd-radius);box-shadow:var(--kd-shadow-md);width:min(460px,94vw);max-height:92vh;overflow:auto;padding:20px}
.kdOv.wide .box{width:min(1180px,96vw)}
.kdOv h3{margin:0 0 6px;font-size:16px}.kdOv h4{margin:12px 0 6px;font-size:13px}
.kdOv label{display:block;font-size:12.5px;margin:8px 0;color:var(--ink)}
.kdOv label input,.kdOv label select{display:block;width:100%;margin-top:3px}
.kdOv .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kdOv .row{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:10px}
.kdOv .strow{display:flex;gap:8px;align-items:center;font-size:12.5px;padding:4px 0;border-bottom:1px solid var(--line)}
.kdOv .strow .btn{margin:0 0 0 auto;min-height:24px;padding:0 8px}
#cmpBox{margin-top:8px;max-height:72vh;overflow:auto;border:1px solid var(--line)}#cmpCv{display:block;width:100%}
#cmpInfo{flex:1;font-size:12.5px;text-align:left}
#page .inl.inlbox{resize:none;white-space:pre-wrap;overflow:hidden;font-weight:400;min-width:220px}

/* แถบเมนูบนแบบ Ribbon (ribbon.js) — แถวแท็บ + แผงปุ่มไอคอนเป็นกลุ่ม แบบโปรแกรมแก้ PDF ทั่วไป */
#menubar.ribbon{display:block;height:auto;padding:0;gap:0}
.rb-top{display:flex;align-items:center;gap:4px;height:36px;padding:0 8px;background:var(--kd-bg-alt);border-bottom:1px solid var(--line)}
.rb-top .logo{margin-right:2px}
.rb-top .app{white-space:nowrap;margin-right:12px}
.rb-tabs{display:flex;align-self:flex-end;gap:2px}
.rb-tab{border:1px solid transparent;border-bottom:0;background:transparent;height:31px;padding:0 16px;font-family:var(--kd-display);font-weight:700;font-size:13px;color:var(--mute);cursor:pointer;border-radius:var(--kd-radius) var(--kd-radius) 0 0;margin-bottom:-1px}
.rb-tab:hover{color:var(--ink);background:var(--w)}
.rb-tab.on{background:var(--w);color:var(--kd-primary-darkest);border-color:var(--line);box-shadow:inset 0 2px 0 var(--kd-primary)}
.rb-fill{flex:1}
.rb-right{display:flex;align-items:center;gap:6px;min-width:0}
.rb-right .proj{margin:0 4px 0 0;max-width:220px}
.rb-right .mb.lic{max-width:190px;min-height:26px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rb-fold{border:0;background:transparent;width:26px;height:26px;border-radius:var(--kd-radius);cursor:pointer;display:grid;place-items:center;color:var(--mute)}
.rb-fold:hover{background:var(--w);color:var(--ink)}
.rb-fold svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform var(--kd-dur-fast) var(--kd-ease)}
.rb-fold.down svg{transform:rotate(180deg)}
.rb-panel{display:flex;height:80px;padding:4px 4px 0;background:var(--w);overflow-x:auto;overflow-y:hidden}
#menubar.collapsed .rb-panel{display:none}
.rb-page{display:flex;align-items:stretch}
.rb-page[hidden],.rb-group[hidden]{display:none}
.rb-group{display:flex;flex-direction:column;padding:0 6px;border-right:1px solid var(--line);flex:none}
.rb-items{display:flex;gap:2px;flex:1;align-items:flex-start}
.rb-col{display:flex;flex-direction:column}
.rb-cap{font-size:11px;line-height:18px;color:var(--mute);text-align:center;white-space:nowrap}
#menubar .mb{white-space:nowrap}
#menubar .mb svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
#menubar .mb.big{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:58px;height:56px;min-height:0;padding:5px 6px 0;font-size:12px;line-height:1.25}
#menubar .mb.big svg{width:26px;height:26px}
#menubar .mb.small{display:flex;align-items:center;gap:6px;height:19px;min-height:0;padding:0 8px 0 4px;font-size:12px;line-height:1}
#menubar .mb.small svg{width:16px;height:16px}
#menubar #btnPdf.big svg{stroke:var(--kd-on-primary)}
#menubar .rb-meet{height:26px;padding:0 8px}
@media (max-width:1400px){ .rb-top .app{display:none} .rb-right .proj{max-width:120px} .rb-right .mb.lic{max-width:110px} }
/* Ribbon ส่วนเพิ่ม: แถบด่วน · ปุ่มเปิด/ปิด · ซ่อนแถบวาด/แก้ไขเดิม · ซ่อนแผง · ค้นหา · พิมพ์ */
.rb-qa{display:flex;align-items:center;gap:0;margin-right:10px;padding-right:8px;border-right:1px solid var(--line)}
#menubar .mb.qa{width:28px;height:28px;min-height:0;padding:0;display:grid;place-items:center}
#menubar .mb.qa span{display:none}
#menubar .mb.qa svg{width:18px;height:18px}
#menubar .mb.on{background:var(--kd-primary-tint);color:var(--kd-primary-darkest);box-shadow:inset 0 0 0 1px var(--kd-primary-light)}
#menubar .mb:disabled{opacity:.45;cursor:default}
body.has-ribbon #modebar{display:none}
body.noside #side{display:none}
body.norail #rail{display:none}
body.noside #workspace{grid-template-columns:80px 1fr}
body.norail #workspace{grid-template-columns:1fr 320px}
body.noside.norail #workspace,body.meet.norail #workspace{grid-template-columns:1fr}
#findBar{display:flex;align-items:center;gap:6px;padding:4px 8px;background:var(--w);border-bottom:1px solid var(--line);flex:none}
#findBar[hidden]{display:none}
#findBar svg{width:18px;height:18px;fill:none;stroke:var(--mute);stroke-width:1.6;flex:none}
#findIn{flex:1;min-width:120px;max-width:420px;height:28px;padding:0 8px;border:1px solid var(--line);border-radius:var(--kd-radius);font:inherit}
#findBar input[type=checkbox]{margin:0;accent-color:var(--kd-primary)}
#findIn:focus{outline:2px solid var(--kd-primary);outline-offset:-1px}
#findBar .btn{height:28px;padding:0 10px;white-space:nowrap}
#findSt{white-space:nowrap;min-width:72px}
#findHl{position:absolute;left:0;top:0;pointer-events:none;z-index:3}
#findHl polygon{fill:rgba(255,213,0,.38);stroke:rgba(214,160,0,.9);stroke-width:.6}
#findHl polygon.cur{fill:rgba(255,128,0,.45);stroke:#d35400;stroke-width:1}
#findBar label{display:flex;align-items:center;gap:4px;white-space:nowrap;cursor:pointer}
#printArea{display:none}
@media print{
  @page{margin:8mm}
  html,body{height:auto!important;overflow:visible!important;display:block!important;background:#fff!important}
  body>*:not(#printArea){display:none!important}
  #printArea{display:block!important}
  #printArea img{display:block;max-width:100%;max-height:100vh;margin:0 auto;object-fit:contain;break-after:page;page-break-after:always}
  #printArea img:last-child{break-after:auto;page-break-after:auto}
}
/* แถบล่าง: ปุ่มและข้อความบรรทัดเดียว ("พอดีจอ" เคยตัดเป็น 2 บรรทัด) */
#bar>*:not(#cmd){flex:none;white-space:nowrap}
/* Ribbon บนจอแคบ: ชื่อแท็บบรรทัดเดียว · ≤1180px ปุ่มเล็กเหลือแต่ไอคอน (ชื่อเต็มอยู่ใน tooltip) */
.rb-tab{white-space:nowrap}
.rb-panel{scrollbar-width:thin}
@media (max-width:1180px){
  .rb-tab{padding:0 10px}
  .rb-right .proj{display:none}
  .rb-panel .mb.small span{display:none}
  #menubar .rb-panel .mb.small{padding:0 4px}
  #menubar .mb.big{min-width:52px;padding:5px 4px 0}
  .rb-group{padding:0 4px}
}
/* กลุ่ม 4: เลือกข้อความ · สารบัญ · แท็บแผงขวา 6 แท็บ */
body.seltext #viewer,body.seltext #viewer *{cursor:text!important}
#selBox{position:fixed;z-index:50;border:1px dashed var(--kd-primary-dark);background:rgba(11,138,150,.08);pointer-events:none}
#selHl{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:4}
#selHl polygon{fill:rgba(11,138,150,.22);stroke:rgba(5,78,85,.6);stroke-width:.5}
#views a{padding:8px 0;font-size:11.5px}
#viewBookmarks{padding:12px 16px;overflow:auto;flex:1;min-height:0}
#viewBookmarks h4{margin:0 0 6px}
.bmTree{max-height:45vh;overflow:auto}
.bmo a,.bmm a{cursor:pointer;color:var(--kd-primary-darkest);display:block;padding:3px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bmo a:hover,.bmm a:hover{text-decoration:underline}
.bmm{display:flex;align-items:center;gap:6px}
.bmm a{flex:1;min-width:0}
.bmm .mute{white-space:nowrap;font-size:11px}
.bmm .ob{padding:0 6px;min-height:22px}
/* checkbox / radio rows in dialogs: box then text on one line (the generic rule stretches inputs to full width) */
.kdOv label input[type=checkbox],.kdOv label input[type=radio]{display:inline-block;width:auto;margin:0 6px 0 0;vertical-align:middle}
#lyList label{display:flex!important;align-items:center;justify-content:flex-start;gap:8px;margin:0;padding:4px 0}
#lyList label input{flex:none;margin:0}
#lyList label[hidden]{display:none!important}
/* markups list (markups.js) */
.kdOv .btn.pri{background:var(--kd-primary-dark);color:#fff}.kdOv .btn.pri:hover{background:var(--kd-primary-darkest)}
.mkBox{display:flex;flex-direction:column;max-height:90vh}
.mkHead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.mkHead h3{margin:0}.mkHead .sp{flex:1}.mkHead .btn{margin-top:0}
.mkFilt{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0}.mkFilt select,.mkFilt input{flex:0 1 auto;min-width:110px}.mkFilt input[type=search]{flex:1 1 200px;font:inherit;border:1px solid var(--kd-line-strong);border-radius:var(--kd-radius);min-height:var(--kd-control-h);padding:0 8px}
.mkWrap{flex:1;min-height:200px;overflow:auto;border:1px solid var(--line);border-radius:var(--kd-radius)}
.mkTbl{width:100%;border-collapse:collapse;font-size:12.5px}.mkTbl th{position:sticky;top:0;background:var(--kd-bg-alt);cursor:pointer;white-space:nowrap;user-select:none;text-align:left;padding:6px 8px;border-bottom:1px solid var(--line-strong,var(--kd-line-strong));z-index:1}
.mkTbl th.asc::after{content:' ▲';font-size:9px}.mkTbl th.desc::after{content:' ▼';font-size:9px}
.mkTbl td{padding:4px 8px;border-bottom:1px solid var(--line);vertical-align:middle}.mkTbl tbody tr{cursor:pointer}.mkTbl tbody tr:hover td{background:var(--kd-primary-tint)}.mkTbl tr.sel td{background:var(--kd-primary-tint);font-weight:700}
.mkTbl td i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}.mkTbl td.num{text-align:right;font-variant-numeric:tabular-nums}.mkTbl td.tx{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkTbl td.fn{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mkTbl td.dt{white-space:nowrap}
.mkTbl select{min-height:24px;padding:0 4px;flex:none}
/* take-off pro (takeoff.js, plan 2.1-2.5) */
#tkBar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 8px}#tkBar label{font-size:12px;display:flex;gap:6px;align-items:center}#tkBar select{min-height:26px}
#tkBar .btn{min-height:26px;padding:0 10px;margin:0}
.tkWrap{overflow-x:auto;max-width:100%}.tkWrap table{min-width:100%}
.tkIn{width:64px;min-height:22px;padding:0 4px;text-align:right;font:inherit;font-size:12px}
.kdOv .tkCols{width:100%;border-collapse:collapse;font-size:12.5px}.kdOv .tkCols th,.kdOv .tkCols td{border-bottom:1px solid var(--line);padding:4px 6px;text-align:left}.kdOv .tkCols code{font-size:12px}
.kdOv label.chk{display:flex;gap:8px;align-items:center}.kdOv label.chk input{width:auto;display:inline;margin:0}
body.tkPick #ov{cursor:crosshair}