@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700&display=swap');

/* ------- UI chrome (ไม่เกี่ยวกับตัวเอกสาร) ------- */
:root{
  /* SarabanAI — color roles */
  --ui-font:"Kanit", "Kanit Fallback", "Noto Sans Thai", "Leelawadee UI", system-ui, sans-serif;
  --bg:#eef1f6;
  --bg-subtle:#f7f9fc;
  --panel:#ffffff;
  --panel-soft:#f8faff;
  --panel-raised:#ffffff;
  --line:#d9dee8;
  --line-strong:#c7d2e2;
  --ink:#1f2733;
  --ink-strong:#132238;
  --muted:#6b7686;
  --brand:#1d4e89;
  --brand-strong:#17406f;
  --brand-soft:#eaf2ff;
  --brand-ink:#ffffff;
  --danger:#b3261e;
  --danger-soft:#fff0ef;
  --success:#17683b;
  --success-soft:#f0fbf4;
  --warning:#7a5312;
  --warning-soft:#fdf6ec;
  --focus:#3b82f6;

  /* SarabanAI — typography */
  --text-xs:11px;
  --text-sm:12px;
  --text-md:14px;
  --text-body:15px;
  --text-lg:18px;
  --text-xl:24px;
  --text-display:34px;
  --leading-tight:1.25;
  --leading-body:1.5;
  --leading-relaxed:1.65;

  /* SarabanAI — spacing scale: 4px base */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;

  /* SarabanAI — shape, depth and motion */
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:16px;
  --radius-pill:999px;
  --shadow-1:0 1px 2px rgba(16,24,40,.06);
  --shadow-2:0 8px 24px rgba(16,24,40,.08);
  --shadow-3:0 18px 48px rgba(22,48,89,.14);
  --shadow:var(--shadow-1),var(--shadow-2);
  --motion-fast:160ms;
  --motion-base:230ms;
  --motion-slow:320ms;
  --ease-smooth:cubic-bezier(.23,1,.32,1);
  --ease-enter:cubic-bezier(.16,1,.3,1);

  /* SarabanAI — workspace dimensions */
  --topbar-h:60px;
  --sidebar-w:190px;
  --form-w:400px;
  --content-max:1500px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--ui-font);
  font-size:15px;
  color:var(--ink);
  background:var(--bg);
  overflow:hidden;
}

/* ---------- Topbar ---------- */
.topbar{
  height:var(--topbar-h);
  display:flex; align-items:center; gap:16px;
  padding:0 14px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
  position:relative; z-index:20;
}
.brand{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.brand-mark{
  width:34px;height:34px;border-radius:9px;
  background:var(--brand); color:var(--brand-ink);
  display:grid;place-items:center; font-weight:700; font-size:15px;
}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{font-size:15px}
.brand-text small{color:var(--muted);font-size:11.5px}

/* ---------- Left navigation ---------- */
.app-sidebar{
  background:#f7f9fc;
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; min-height:0;
  padding:14px 10px;
}
.sidebar-title{
  padding:0 8px 9px;
  color:var(--muted); font-size:12px; font-weight:700;
  letter-spacing:.04em;
}
.mainnav{
  display:flex; flex-direction:column; gap:4px;
  flex:0 1 auto; min-height:0; overflow-y:auto; padding:0;
}
.mainnav button{
  flex:0 0 auto; width:100%;
  border:1px solid transparent; background:transparent;
  padding:10px 11px; border-radius:8px;
  font-family:inherit; font-size:14px; color:var(--muted);
  cursor:pointer; white-space:nowrap; text-align:left;
}
.mainnav button:hover{background:#e9eef6;color:var(--ink)}
.mainnav button[aria-selected="true"]{
  background:var(--brand); color:#fff; font-weight:600;
}
/* หน้าที่ยังไม่ได้สร้าง — จางลงให้เห็นว่ากดแล้วยังไม่มีอะไร */
.mainnav button.todo{color:var(--muted); opacity:.55}

/* ปุ่มบนแถบหัวเว็บมี 5 ปุ่ม พอจอแคบกว่า ~890px จะดันจนทั้งหน้าเลื่อนแนวนอนได้
   ให้กลุ่มปุ่มเลื่อนในตัวเองแทน หน้าหลักจึงไม่มี scrollbar แนวนอน
   min-width:0 จำเป็น ไม่งั้น flex item ไม่ยอมหดต่ำกว่าความกว้างเนื้อหา */
.topactions{display:flex;gap:8px;flex:0 1 auto;min-width:0;overflow-x:auto}
.topactions .btn{flex:0 0 auto}

.btn{
  font-family:inherit; font-size:14px;
  padding:8px 14px; border-radius:8px;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  cursor:pointer;
}
.btn:hover{background:#f6f8fb}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.btn.primary:hover{background:#17406f}
.btn.ghost{background:transparent}
.btn.tiny{padding:3px 9px;font-size:13px}
.linkbtn{
  background:none;border:none;padding:2px 4px;cursor:pointer;
  font-family:inherit;font-size:13px;color:var(--brand);text-decoration:underline;
}
.linkbtn.danger{color:var(--danger)}
/* ปุ่มจัดระเบียบเนื้อหา — ตอนกำลังเรียก AI ให้เห็นชัดว่ากดซ้ำไม่ได้ */
.linkbtn[disabled]{opacity:.5;cursor:progress}
.panel-head-actions{flex-wrap:wrap}
.iconbtn{background:none;border:none;font-size:16px;cursor:pointer;color:var(--muted);padding:4px 8px}

/* [hidden] ของเบราว์เซอร์อยู่ใน UA stylesheet ซึ่งมีลำดับความสำคัญต่ำสุด
   จึงแพ้ display:flex / display:grid ที่ประกาศไว้ในไฟล์นี้ (เช่น .panel .preview .library)
   ผลคือสั่ง el.hidden = true แล้วของไม่หาย สองหน้าซ้อนทับกัน
   ประกาศทับไว้ตรงนี้ให้ hidden ใช้ได้จริงทุกที่ในเว็บ */
[hidden]{display:none !important}

/* ---------- Layout ---------- */
.layout{
  height:calc(100% - var(--topbar-h));
  display:grid;
  grid-template-columns:var(--sidebar-w) var(--form-w) 1fr;
}

.panel{
  background:var(--panel);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  min-height:0;
}
.panel-head{
  padding:12px 16px 10px;
  border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
}
.panel-head h2{margin:0;font-size:15px}
.panel-head-actions{display:flex;gap:6px}
.preview-quick-actions{
  align-items:center;flex:0 1 auto;min-width:0;white-space:nowrap;
  gap:3px;padding:3px;border:1px solid #dce5f1;border-radius:11px;
  background:linear-gradient(180deg,#f9fbfe 0%,#f1f5fa 100%);
  box-shadow:0 1px 2px rgba(24,43,77,.05);
}
.preview-quick-actions .linkbtn{
  min-height:29px;padding:5px 9px;border:1px solid transparent;border-radius:8px;
  color:#36506f;background:transparent;font-size:12.5px;font-weight:650;
  line-height:1;text-decoration:none;transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
.preview-quick-actions .linkbtn:hover{background:#fff;border-color:#d6e0ed;color:#173f71;box-shadow:0 1px 3px rgba(24,43,77,.10)}
.preview-quick-actions #btnTidy{color:#2256a7}
.preview-quick-actions #btnTidy:hover{background:#eaf2ff;border-color:#cbdcff}
.preview-quick-actions #btnSample{color:#3b5874}
.preview-quick-actions .linkbtn.danger{color:#a1413c}
.preview-quick-actions .linkbtn.danger:hover{background:#fff0ef;border-color:#f0cdca;color:#962d27}
.preview-quick-actions .linkbtn[disabled]{box-shadow:none}
.panel-foot{
  padding:8px 16px; border-top:1px solid var(--line);
  font-size:12px; color:var(--muted);
}

.form{overflow-y:auto; padding:14px 16px 28px; flex:1 1 auto; min-height:0}
.form .group{margin:0 0 18px}
.form .group > legend, .form .group > .group-title{
  font-size:12px; font-weight:700; letter-spacing:.04em;
  color:var(--brand); text-transform:none;
  margin:0 0 8px; padding:0;
  border-bottom:1px solid var(--line); width:100%; padding-bottom:4px;
}

.fld{display:block;margin:0 0 11px}
.fld > span{display:block;font-size:13px;color:var(--muted);margin:0 0 4px}
.fld input[type=text], .fld input[type=number], .fld input[type=date], .fld select, .fld textarea{
  width:100%; font-family:var(--ui-font); font-size:14.5px;
  padding:8px 10px; border:1px solid var(--line); border-radius:7px;
  background:#fff; color:var(--ink);
}
.fld textarea{resize:vertical; line-height:1.5}
.fld input:focus, .fld textarea:focus, .fld select:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,78,137,.12);
}
.fld .fldhint{display:block;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.4}
/* คำเตือนใต้ช่องตั้งค่า เช่น เบราว์เซอร์ทำการกระจายแบบไทยไม่ได้ */
.fld .fldhint.warn{color:#7a5312;background:#fdf6ec;border:1px solid #f0dcb8;
  border-radius:6px;padding:6px 8px;margin-top:5px}
.chk{display:flex;align-items:center;gap:8px;font-size:14px;margin:0 0 10px;cursor:pointer}
.chk input{width:16px;height:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.hint{font-size:12.5px;color:var(--muted);line-height:1.5;margin:6px 0 0}

/* ---------- AI ช่วยร่าง ---------- */
.ai-draft{
  margin:0 0 16px; padding:12px;
  background:#f2f6fc; border:1px solid #dbe4f2; border-radius:9px;
}
.ai-draft-title{font-size:13px;font-weight:700;color:var(--brand)}
.ai-draft-note{margin:3px 0 9px;font-size:12px;line-height:1.45;color:var(--muted)}
.ai-draft-input{
  width:100%;font:inherit;font-size:14px;line-height:1.5;resize:vertical;
  padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);
}
.ai-draft-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,78,137,.12)}
.ai-draft-actions{display:flex;justify-content:flex-end;margin-top:9px}
.ai-draft .btn:disabled{cursor:wait;opacity:.7}

/* ---------- คลังเอกสารและแม่แบบ ----------
   หน้าเต็มความกว้าง ไม่ใช่ modal เหมือน ร่าง เพราะเป็นหน้าแรกของเว็บ

   หน้าตาอ้างอิงภาพที่ผู้ใช้ส่งมาเมื่อ 22 ส.ค. 2569 — หัวเรื่องใหญ่ ปุ่มหลักมุมขวา
   รายการเป็นแถวยาว ไม่ใช่การ์ด แต่ละแถวมีไอคอนสี่เหลี่ยมมนนำหน้า */
.layout.view-library,.layout.view-template{grid-template-columns:var(--sidebar-w) 1fr}
.library{display:flex;flex-direction:column;min-height:0;background:#fff}
.template-library .lib-actions{flex-wrap:wrap}
.template-library .lib-actions .chk{margin:0 0 0 4px}
.tpl-save-card{margin:0 0 12px;border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fbfcfe}
.tpl-save-card legend{font-size:13px;font-weight:700;color:var(--brand);padding:0 6px}
.tpl-save-card .draft-new{margin-bottom:0}
.template-library .tpl-groups .draft-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
  gap:12px;max-height:none;margin:0;
}
.template-library .tpl-groups .draft-list li{margin:0;background:#fff;min-height:58px}

.lib-scroll{flex:1 1 auto;min-height:0;overflow:auto}

.lib-head{padding:22px 32px 0;max-width:1500px}
.lib-crumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-bottom:10px}
.lib-crumb button{
  border:0;background:transparent;padding:2px 4px;border-radius:6px;
  font-family:inherit;font-size:13px;color:var(--muted);cursor:pointer;
}
.lib-crumb button:hover:not(:disabled){background:#eef2f8;color:var(--ink)}
.lib-crumb button:disabled{cursor:default}
.lib-crumb .sep{color:#c3cbd8}
.lib-crumb .here{color:var(--ink)}

.lib-headrow{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.lib-headtext{min-width:0}
.lib-title{margin:0;font-size:34px;line-height:1.25;letter-spacing:-.5px}
.lib-sub{margin:8px 0 0;font-size:14px;color:var(--muted)}

/* ปุ่มหลักของหน้า — ใหญ่กว่าปุ่มบนแถบหัวเว็บ มีไอคอนนำหน้า */
.lib-cta{
  display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;
  padding:12px 20px;border-radius:12px;font-size:15px;
  box-shadow:0 1px 2px rgba(16,24,40,.10), 0 6px 16px rgba(28,68,120,.18);
}
.lib-headbtns{display:flex;gap:10px;flex:0 0 auto;flex-wrap:wrap}
/* ปุ่มรองข้างปุ่มหลัก — ขนาดเท่ากันแต่เป็นพื้นขาว ไม่แย่งสายตา */
.ghostcta{background:#fff;color:var(--ink);border-color:var(--line);font-weight:600}
.ghostcta:hover{background:#f6f8fb}
.ghostcta .cta-icon{background:#eef3fa;color:var(--brand)}
.lib-cta .cta-icon{
  display:grid;place-items:center;width:20px;height:20px;border-radius:6px;
  background:rgba(255,255,255,.22);font-size:15px;line-height:1;font-weight:700;
}
.ui-icon{display:block;width:1em;height:1em;flex:0 0 auto}
.cta-icon .ui-icon{width:15px;height:15px}
.btn-icon{display:inline-grid;place-items:center;margin-right:5px;vertical-align:-2px}
.btn-icon .ui-icon{width:15px;height:15px}
.mainnav button{display:flex;align-items:center;gap:10px}
.mainnav .nav-icon{width:17px;height:17px;opacity:.9}
.lib-tile .ui-icon{width:21px;height:21px}
.lib-ico .ui-icon{width:17px;height:17px}
.dashboard-stat-icon .ui-icon{width:20px;height:20px}
.dashboard-item-icon .ui-icon{width:17px;height:17px}
.dashboard-guide-icon .ui-icon{width:25px;height:25px}
.help-section-icon .ui-icon{width:18px;height:18px}
.ai-chat-toggle .ui-icon{display:inline-block;width:16px;height:16px;vertical-align:-3px;margin-right:4px}

.lib-actions{display:flex;gap:8px;align-items:center;margin:20px 0 0}
.lib-search{display:flex;align-items:center;gap:7px;min-width:280px;padding:0 11px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--muted)}
.lib-search:focus-within{outline:2px solid #cfe0f5;outline-offset:1px;border-color:var(--brand)}
.lib-search .lib-input{min-width:0;width:100%;border:0;padding-left:0}.lib-search .lib-input:focus{outline:0;border-color:transparent}
.lib-input{
  font-family:inherit;font-size:14px;padding:9px 12px;
  border:1px solid var(--line);border-radius:10px;background:#fff;min-width:210px;
}
.lib-input:focus{outline:2px solid #cfe0f5;outline-offset:1px;border-color:var(--brand)}

.lib-body{padding:18px 32px 40px;max-width:1500px}
.lib-group + .lib-group{margin-top:26px}
.lib-group h3{margin:0 0 10px;font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.3px}
/* เรียงหลายคอลัมน์ ไม่ใช่แถวยาวเต็มความกว้าง
   ชื่อเอกสารสั้นกว่าความกว้างจอมาก แถวเดียวต่อบรรทัดจึงเหลือที่ว่างกลางแถวเยอะ
   minmax 360px กันไม่ให้คอลัมน์แคบจนป้ายโฟลเดอร์กับปุ่มด้านขวาเบียดกัน */
.lib-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:12px}
.lib-load-more{
  display:block;margin:14px auto 0;padding:9px 16px;border:1px solid var(--line);
  border-radius:10px;background:#fff;color:var(--brand);font:600 13px/1.3 inherit;cursor:pointer;
}
.lib-load-more:hover{background:#eef3fa;border-color:#c8d6e8}

/* ---------- ตาราง Excel ในเว็บ ---------- */
.sheet-editor-modal{padding:18px}
.sheet-editor-card{width:min(1280px,100%);height:min(820px,calc(100vh - 36px));display:flex;flex-direction:column}
.sheet-editor-head{flex:0 0 auto}.sheet-editor-head h3{margin:0}.sheet-editor-head p{margin:3px 0 0;color:var(--muted);font-size:12px}
.sheet-editor-tools{display:flex;align-items:center;gap:8px;flex:0 0 auto;padding:10px 18px;border-bottom:1px solid var(--line);background:#f8faff}
.sheet-editor-tools label{display:flex;align-items:center;gap:6px;color:#4f6176;font-size:13px;font-weight:650}
.sheet-editor-tools select{font:inherit;max-width:260px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:#fff}
#sheetEditorStatus{margin-left:auto;color:var(--muted);font-size:12px}
.sheet-grid-wrap{flex:1 1 auto;min-height:0;overflow:auto;background:#edf2f8;padding:14px}
.sheet-grid{border-collapse:separate;border-spacing:0;background:#fff;box-shadow:0 2px 9px rgba(25,45,75,.08)}
.sheet-grid th,.sheet-grid td{border-right:1px solid #dce4ef;border-bottom:1px solid #dce4ef;padding:0;min-width:112px;height:30px}
.sheet-grid tr:first-child th{border-top:1px solid #dce4ef}.sheet-grid th:first-child{border-left:1px solid #dce4ef}
.sheet-grid .sheet-corner,.sheet-grid .sheet-row-head,.sheet-grid .sheet-col-head{background:#f4f7fb;color:#607087;font:650 11px var(--ui-font);text-align:center;min-width:42px}
.sheet-grid .sheet-row-head{min-width:42px}.sheet-grid .sheet-col-head{height:28px}
.sheet-grid input{display:block;width:100%;height:30px;border:0;background:transparent;padding:5px 7px;font:13px var(--ui-font);color:#1f2d3d;outline:0}
.sheet-grid input:focus{position:relative;z-index:1;background:#fff;border:2px solid #2b67e8;padding:3px 5px;box-shadow:0 0 0 2px rgba(43,103,232,.16)}
.sheet-template-list{display:grid;gap:9px}.sheet-template-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}.sheet-template-row strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sheet-template-row span{color:var(--muted);font-size:12px}

/* แถวรายการ — คลิกที่แถวเพื่อเปิด ปุ่มด้านขวาหยุด event ไว้เอง */
.lib-row{
  display:flex;align-items:center;gap:11px;min-width:0;
  border:1px solid var(--line);border-radius:12px;background:#fff;
  padding:10px 12px;cursor:pointer;
  transition:border-color .12s, box-shadow .12s, background .12s;
}
.lib-row:hover{border-color:#c8d6e8;box-shadow:0 1px 2px rgba(16,24,40,.06), 0 8px 20px rgba(16,24,40,.06)}
.lib-row:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.lib-tile{
  flex:0 0 auto;display:grid;place-items:center;
  width:36px;height:36px;border-radius:9px;
  background:#eef3fa;color:var(--brand);font-size:17px;line-height:1;
}
.lib-row:not(.folder) .lib-tile{
  color:#fff;background:linear-gradient(145deg,#3a90ff,#225cc8);
  box-shadow:0 5px 12px rgba(42,100,202,.24);
}
.lib-row.doc-type-excel .lib-tile{background:linear-gradient(145deg,#27b66f,#087a4a);box-shadow:0 5px 12px rgba(17,128,73,.24)}
.lib-row.folder .lib-tile{background:linear-gradient(145deg,#ffd95a,#edab20);color:#754600;box-shadow:0 5px 12px rgba(198,136,17,.20)}
.lib-row:not(.folder) .lib-tile .ui-icon{filter:drop-shadow(0 1px 1px rgba(0,0,0,.14))}
.lib-row.folder .lib-tile{background:#fdf4e3;color:#a5701a}

.lib-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
/* ตัดด้วย ... เมื่อยาวเกินคอลัมน์ ไม่ปล่อยให้ตัดบรรทัดจนแถวสูงไม่เท่ากัน
   ชื่อเต็มดูได้จาก title ที่ตั้งไว้ตอนสร้างแถว */
.lib-name, .lib-meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lib-name{font-size:14.5px;font-weight:700}
.lib-meta{font-size:12.5px;color:var(--muted)}

.lib-side{flex:0 0 auto;display:flex;align-items:center;gap:4px}

/* ป้ายกลม ๆ ด้านขวา — ใช้บอกว่าเอกสารอยู่โฟลเดอร์ไหน และย้ายได้จากตรงนี้เลย */
.lib-pill{
  font-family:inherit;font-size:12px;color:var(--muted);
  padding:5px 9px;border-radius:999px;
  border:1px solid var(--line);background:#f6f8fb;cursor:pointer;
  max-width:118px;
}
.lib-pill:hover{background:#eef2f8}

/* ปุ่มไอคอนล้วน — เปลี่ยนชื่อ กับ ลบ */
.lib-ico{
  display:grid;place-items:center;width:28px;height:28px;
  border:1px solid transparent;border-radius:8px;background:transparent;
  font-size:14px;line-height:1;color:var(--muted);cursor:pointer;
}
.lib-ico:hover{background:#f1f4f9;color:var(--ink)}
.lib-ico.danger{color:#b4232a}
.lib-ico.danger:hover{background:#fdeceb}

.lib-empty{
  border:1px dashed var(--line);border-radius:14px;background:#fbfcfe;
  color:var(--muted);font-size:14px;line-height:1.7;padding:28px 24px;
}
/* ---------- Preview ---------- */
.preview{
  display:flex;flex-direction:column;min-height:0;min-width:0;
  background:var(--bg);
}
.preview-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:6px 14px; border-bottom:1px solid var(--line);
  background:#f7f9fc; font-size:13px; color:var(--muted);
}
.zoomctl{display:flex;align-items:center;gap:6px}
.preview-edit-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
.preview-edit-actions #btnEditPreview[hidden]{display:none}
.preview-float-actions{display:none;align-items:center;gap:6px}
.ribbon-document-actions{display:flex;align-items:center;gap:4px;margin-left:8px;padding-left:10px;border-left:1px solid #d6dce5}
.ribbon-document-actions .word-tool{min-height:29px;padding:4px 7px;font-size:12px}
.word-tool.review-clear{color:#b42318}
.word-tool.review-clear:hover{background:#fff0ef;border-color:#f0cdca;color:#962d27}
#zoomLabel{min-width:46px;text-align:center}
.paper.paper-editing{outline:2px solid rgba(29,78,137,.35);outline-offset:-2px;cursor:text}
.paper.paper-editing:focus{outline-color:var(--brand)}
.word-toolbar{
  border-bottom:1px solid var(--line);background:#fff;color:#1f2937;
}
.word-toolbar[hidden]{display:none}
.word-ribbon-tabs{display:flex;gap:2px;padding:0 14px;border-bottom:1px solid #d6dce5;background:#f4f6f9}
.word-ribbon-tab{border:0;border-bottom:3px solid transparent;background:transparent;padding:8px 12px 6px;color:#344054;font:600 13px inherit;cursor:pointer}
.word-ribbon-tab:hover,.word-ribbon-tab:focus{background:#e9eef5;outline:none}.word-ribbon-tab.active{color:var(--brand);border-bottom-color:var(--brand)}
.word-ribbon-panel{display:flex;flex-wrap:wrap;align-items:stretch;gap:7px;padding:7px 14px}.word-ribbon-panel[hidden]{display:none}
.word-tool-group{display:flex;align-items:center;gap:3px;padding:0 8px 0 0;border-right:1px solid var(--line)}
.word-tool-group:last-child{border-right:0}
.word-tool,.word-size{
  min-height:30px;border:1px solid transparent;border-radius:4px;background:transparent;
  color:inherit;font:inherit;font-size:13px;cursor:pointer;padding:4px 7px;
}
.word-tool:hover,.word-tool:focus,.word-size:focus,.word-font:focus,.word-search:focus{outline:none;border-color:#bfd0e7;background:#eef4fb}
.word-bold{font-weight:800;font-size:16px}.word-italic{font-style:italic;font-size:16px}.word-underline{text-decoration:underline;font-size:16px}
.word-tool[data-editor-command="justifyLeft"]{text-align:left}.word-tool[data-editor-command="justifyCenter"]{text-align:center}.word-tool[data-editor-command="justifyRight"]{text-align:right}.word-tool[data-editor-command="justifyFull"]{letter-spacing:-1px}
.word-size{border-color:var(--line);background:#fff;padding:3px 5px}
.word-font,.word-search{min-height:30px;border:1px solid var(--line);border-radius:4px;background:#fff;color:inherit;font:inherit;font-size:13px;padding:3px 5px}.word-font{max-width:132px}.word-search{width:142px}
.word-color,.word-highlight{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;border:1px solid transparent;border-radius:4px;cursor:pointer;font-weight:700}.word-color:hover,.word-highlight:hover{border-color:#bfd0e7;background:#eef4fb}.word-color input,.word-highlight input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}.word-color{border-bottom:3px solid #111827}.word-highlight{color:#aa7b00;border-bottom:3px solid #ffe37a}
.word-shape-picker{position:relative}.word-shape-menu{position:absolute;z-index:30;top:calc(100% + 5px);left:0;width:350px;max-height:62vh;overflow:auto;padding:10px 11px;border:1px solid #98a4b3;border-radius:6px;background:#fff;box-shadow:0 10px 25px rgba(15,23,42,.22)}.word-shape-menu[hidden]{display:none}.word-shape-menu strong{display:block;padding:7px 2px 4px;border-bottom:1px solid #d9e0e8;color:#1f2937;font-size:12px}.shape-grid{display:grid;grid-template-columns:repeat(9,32px);gap:3px;padding:6px 0}.shape-grid button{width:32px;height:30px;border:1px solid transparent;border-radius:3px;background:#fff;color:#35404d;font-size:23px;line-height:1;cursor:pointer}.shape-grid button:hover,.shape-grid button:focus{border-color:#7aa4d4;background:#eaf3ff;outline:none}
.word-label{display:flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap}.word-find-group{flex-wrap:wrap}.word-table-tools{flex-wrap:wrap}.word-tool-label{padding:0 4px;color:var(--muted);font-size:12px;font-weight:700;white-space:nowrap}.word-tool.table-danger{color:var(--danger)}.word-tool.table-danger:hover,.word-tool.table-danger:focus{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}.paper .word-table{width:100%;border-collapse:collapse;margin:8px 0}.paper .word-table td,.paper .word-table th{border:1px solid #334155;padding:5px 7px;min-width:2.5cm;vertical-align:top}.paper .word-table th{font-weight:700;background:#f1f5f9}.paper .editor-image{display:block;max-width:100%;height:auto;margin:8px 0}.paper .word-shape-layer{position:absolute;inset:0;z-index:5;pointer-events:none}.paper .editor-shape-wrap{position:absolute;display:block;width:min(8cm,100%);margin:0;overflow:visible;cursor:move;user-select:none;pointer-events:auto}.paper .editor-shape-wrap.selected{outline:1px dashed #1d4e89;outline-offset:3px}.paper .editor-shape{display:block;width:100%;height:auto;overflow:visible}.paper .shape-resize-handle{display:none;position:absolute;right:-7px;bottom:-7px;width:12px;height:12px;border:2px solid #fff;background:#1d4e89;border-radius:2px;box-shadow:0 0 0 1px #1d4e89;cursor:nwse-resize}.paper .editor-shape-wrap.selected .shape-resize-handle{display:block}.paper .word-page-break{height:0;break-before:page;page-break-before:always}
@media print{.paper .shape-resize-handle{display:none!important}.paper .editor-shape-wrap{outline:0!important;cursor:default}}
.paper-wrap{
  flex:1 1 auto; min-height:0; overflow:auto;
  padding:24px; display:flex; justify-content:center; align-items:flex-start;
}

/* ---------- Modal ---------- */
.modal{
  position:fixed;inset:0;z-index:50;
  background:rgba(15,23,42,.48);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:24px;
}
.modal[hidden]{display:none}
.modal-card{
  background:#fff;border:1px solid rgba(255,255,255,.72);border-radius:18px;
  box-shadow:0 24px 72px rgba(15,23,42,.28),0 3px 12px rgba(15,23,42,.13);
  width:min(620px,100%); max-height:calc(100vh - 48px); display:flex;flex-direction:column;
  animation:modal-pop .18s cubic-bezier(.2,.8,.2,1) both;
}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0;font-size:16px}
.modal-body{padding:18px 20px;overflow-y:auto}
.modal-foot{display:flex;justify-content:space-between;gap:8px;padding:14px 20px;border-top:1px solid var(--line)}
@keyframes modal-pop{from{opacity:0;transform:translateY(14px) scale(.975)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal fieldset{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:0 0 14px}
.modal legend{font-size:13px;font-weight:700;color:var(--brand);padding:0 6px}

.garuda-row{display:flex;gap:14px;align-items:flex-start}
.garuda-preview{
  width:92px;height:92px;flex:0 0 auto;border:1px dashed var(--line);border-radius:8px;
  display:grid;place-items:center;background:#fafbfd;padding:6px;
}
.garuda-preview img, .garuda-preview svg{max-width:100%;max-height:100%}
.garuda-actions{flex:1 1 auto;display:flex;flex-direction:column;gap:8px;align-items:flex-start}

.draft-new{display:flex;gap:8px;margin:0 0 14px}
.draft-new input{
  flex:1 1 auto;font-family:inherit;font-size:14px;padding:8px 10px;
  border:1px solid var(--line);border-radius:7px;
}
.draft-list{list-style:none;margin:0 0 14px;padding:0;max-height:320px;overflow-y:auto}
.draft-list li{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border:1px solid var(--line);border-radius:8px;margin-bottom:6px;
}
.draft-list .dname{flex:1 1 auto;min-width:0}
.draft-list .dname strong{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.draft-list .dname small{color:var(--muted);font-size:12px}
.draft-list .empty{justify-content:center;color:var(--muted);border-style:dashed}
.io-row{display:flex;gap:8px;justify-content:flex-end}

.toast{
  position:fixed;left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);
  background:rgba(24,32,45,.97);color:#fff;padding:14px 20px;border-radius:14px;
  font-size:15px;z-index:80;box-shadow:0 18px 48px rgba(15,23,42,.34);
  max-width:min(92vw,620px);text-align:center;animation:toast-pop .16s ease-out both;
}
.toast[hidden]{display:none}
@keyframes toast-pop{from{opacity:0;transform:translate(-50%,-44%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.action-modal{z-index:90}
.action-modal-card{width:min(520px,100%)}
.action-modal-message{margin:0;white-space:pre-line;font-size:15px;line-height:1.65;color:var(--ink)}
.action-modal-input{margin-top:16px}
.action-modal-input input{width:100%;font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--line);border-radius:9px}
.action-modal-input input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,78,137,.13)}
.action-modal-foot{justify-content:flex-end}
.drive-knowledge-status{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.45}
.drive-knowledge-status.has-files{color:#1d4e89}
.drive-preview-meta{margin:0 0 12px;color:var(--muted);font-size:13px}
.drive-preview-text{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.7 var(--ui-font);color:var(--ink)}
.drive-preview-workbook{min-width:0}
.drive-preview-sheetbar{display:flex;align-items:center;gap:8px;margin:0 0 10px;color:var(--muted);font-size:13px}
.drive-preview-sheetbar label{font-weight:700;color:var(--ink)}
.drive-preview-sheetbar select{min-width:160px;max-width:min(340px,48vw);padding:7px 28px 7px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel-raised);color:var(--ink);font:inherit}
.drive-preview-sheet-hint{margin-left:auto;font-size:12px;text-align:right}
.drive-preview-context{margin:0 0 12px;padding:12px 14px;border-left:4px solid var(--brand);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--brand-soft)}
.drive-preview-context p{margin:0;color:var(--ink);font-size:14px;font-weight:600;line-height:1.55}.drive-preview-context p+p{margin-top:4px;font-size:13px;font-weight:400;color:var(--muted)}
.drive-preview-grid-wrap{max-height:min(64vh,680px);overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel);outline:none}
.drive-preview-grid-wrap:focus-visible{box-shadow:0 0 0 3px var(--focus-ring);border-color:var(--brand)}
.drive-preview-grid{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;font-size:13px;line-height:1.42}
.drive-preview-grid th,.drive-preview-grid td{min-width:118px;max-width:360px;padding:9px 12px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);vertical-align:top;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere}
.drive-preview-grid thead th{position:sticky;top:0;z-index:2;background:var(--panel-raised);font-weight:700;text-align:center}
.drive-preview-grid tbody th{position:sticky;left:0;z-index:1;min-width:46px;padding-inline:8px;background:var(--panel-raised);font-weight:700;text-align:center}
.drive-preview-grid thead th:first-child{left:0;z-index:3;min-width:46px;padding-inline:8px}
.drive-preview-grid .drive-preview-data-header th:first-child{left:auto;z-index:2;min-width:118px;padding-inline:12px}
.drive-preview-grid tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--brand-soft) 42%,var(--panel))}
.drive-preview-grid tr:last-child>*{border-bottom:0}.drive-preview-grid tr>*:last-child{border-right:0}
#drivePreviewModal.is-excel-preview .modal-card{width:min(1440px,calc(100vw - 36px));max-height:calc(100vh - 36px)}
#drivePreviewModal.is-excel-preview .modal-body{overflow:auto}
@media (max-width:620px){
  .drive-preview-sheetbar{align-items:flex-start;flex-wrap:wrap}.drive-preview-sheet-hint{width:100%;margin-left:0;text-align:left}
  .drive-preview-grid-wrap{max-height:56vh}.drive-preview-grid th,.drive-preview-grid td{min-width:104px;padding:7px 8px}
  #drivePreviewModal.is-excel-preview .modal-card{width:100%;max-height:calc(100vh - 20px)}
}

/* ---------- แชต AI ลอยมุมขวาล่าง ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ai-chat-toggle{
  position:fixed;right:22px;bottom:22px;z-index:70;
  border:0;border-radius:999px;padding:12px 17px;
  background:#1d4e89;color:#fff;font:600 14px var(--ui-font);cursor:pointer;
  box-shadow:0 8px 22px rgba(20,57,101,.28);
}
.ai-chat-toggle:hover{background:#17406f}
.ai-chat-toggle[aria-expanded="true"]{display:none}
.ai-chat{
  position:fixed;right:22px;bottom:22px;z-index:70;
  width:min(370px,calc(100vw - 32px));height:min(530px,calc(100vh - 44px));
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 36px rgba(16,24,40,.22);
}
.ai-chat[hidden]{display:none}
.ai-chat-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;background:#1d4e89;color:#fff}
.ai-chat-head strong,.ai-chat-head small{display:block}
.ai-chat-head strong{font-size:15px}.ai-chat-head small{margin-top:1px;font-size:11.5px;opacity:.84}
.ai-chat-head .iconbtn{color:#fff}
.ai-chat-messages{flex:1 1 auto;overflow-y:auto;padding:14px;background:#f6f8fb;display:flex;flex-direction:column;gap:9px}
.ai-chat-empty{align-self:center;margin:auto 0;color:var(--muted);font-size:13px;text-align:center;line-height:1.5}
.ai-chat-message{max-width:87%;padding:8px 10px;border-radius:11px;font-size:13.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.ai-chat-message.user{align-self:flex-end;background:#1d4e89;color:#fff;border-bottom-right-radius:3px}
.ai-chat-message.assistant{align-self:flex-start;background:#fff;border:1px solid #e0e5ee;color:var(--ink);border-bottom-left-radius:3px}
.ai-chat-message.pending{color:var(--muted);font-style:italic}
.ai-chat-form{display:flex;gap:8px;padding:10px 12px 8px;border-top:1px solid var(--line);background:#fff}
.ai-chat-form textarea{min-width:0;flex:1 1 auto;resize:none;font:inherit;font-size:13.5px;line-height:1.45;padding:7px 9px;border:1px solid var(--line);border-radius:8px}
.ai-chat-form textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,78,137,.12)}
.ai-chat-form .btn{align-self:flex-end;padding:8px 11px}
.ai-chat-form .btn:disabled{cursor:wait;opacity:.7}
.ai-chat-note{margin:0;padding:0 12px 10px;background:#fff;color:var(--muted);font-size:11px;line-height:1.35}

@media (max-width:1080px){
  .layout{grid-template-columns:170px 340px 1fr}
}
@media (max-width:860px){
  body{overflow:auto}
  .layout,.layout.view-library,.layout.view-template{grid-template-columns:1fr;height:auto}
  .app-sidebar{border-right:none;border-bottom:1px solid var(--line);padding:10px 12px}
  .sidebar-title{padding:0 4px 6px}
  .mainnav{flex-direction:row;overflow-x:auto;overflow-y:hidden}
  .mainnav button{width:auto}
  .panel{border-right:none;border-bottom:1px solid var(--line)}
  .form{max-height:none;overflow:visible}
  .paper-wrap{padding:12px}

  .ai-chat-toggle{right:16px;bottom:16px}
  .ai-chat{right:16px;bottom:16px}
}

.modal .orgnote{
  margin:0 0 14px; padding:10px 12px;
  background:#f2f6fc; border:1px solid #dbe4f2; border-radius:8px;
  color:var(--ink);
}
.fld em{font-style:normal;color:var(--brand)}

/* ---------- แม่แบบ ---------- */
.modal-card.wide{width:min(760px,100%)}
.print-guide-card{width:min(540px,100%)}
.print-guide p{margin:0 0 12px;line-height:1.6}
.print-guide ol{margin:0 0 14px;padding-left:22px;line-height:1.8}
.print-guide li strong{color:var(--brand)}
.print-filename{padding:8px 10px;border:1px solid #dbe4f2;border-radius:8px;background:#f2f6fc}
.print-filename strong{color:var(--brand);overflow-wrap:anywhere}
.tpl-toolbar{display:flex;justify-content:flex-end;margin:0 0 8px}
.tpl-toolbar .chk{margin:0;font-size:13px;color:var(--muted)}
.tpl-groups{margin:0 0 16px}
.tpl-group-title{
  font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--brand);
  margin:14px 0 6px;padding-bottom:4px;border-bottom:1px solid var(--line);
}
.tpl-groups .draft-list{max-height:none;margin:0}
.tpl-groups .draft-list li{flex-wrap:wrap}
.tpl-groups .draft-list .dname{flex:1 1 220px}
.tpl-groups .draft-list .dname small{white-space:normal;line-height:1.35}

/* ---------- ตรวจคำย่อ ---------- */
.abbrev{
  border-radius:8px; padding:10px 12px; margin:0 0 16px;
  font-size:13px; line-height:1.5;
}
.abbrev[hidden]{display:none}
.abbrev.ok{background:#f1f7f2;border:1px solid #cfe3d4;color:#31603c}
.abbrev.warn{background:#fdf6ec;border:1px solid #f0dcb8;color:#7a5312}
.abbrev-head{font-weight:700;margin:0 0 6px}
.abbrev ul{list-style:none;margin:0;padding:0}
.abbrev li{
  display:flex;align-items:center;gap:8px;
  padding:6px 0;border-top:1px solid rgba(0,0,0,.07);
}
.abbrev-text{flex:1 1 auto;min-width:0}
.abbrev-text strong{display:block;font-weight:600}
.abbrev-text small{display:block;color:var(--muted);font-size:12px;word-break:break-word}


/* หน้าคลังไม่ใช่เอกสาร ห้ามหลุดไปอยู่ในกระดาษที่สั่งพิมพ์
   ปกติกดพิมพ์จากหน้าคลังจะถูกพากลับไปหน้าเอกสารก่อนอยู่แล้ว บรรทัดนี้กันไว้อีกชั้น */
@media print{
  .library{display:none !important}
}


/* =====================================================================
   SarabanAI visual refresh — UI เท่านั้น ไม่ใช้กับหน้ากระดาษตอนพิมพ์
   ===================================================================== */
:root{
  --bg:#f5f7fb;
  --panel:#ffffff;
  --line:#e3e8f1;
  --ink:#1c2434;
  --muted:#718096;
  --brand:#2457d6;
  --brand-strong:#1742b5;
  --brand-soft:#edf3ff;
  --brand-ink:#ffffff;
  --danger:#c13b4a;
  --shadow:0 2px 6px rgba(24,43,77,.05),0 14px 32px rgba(24,43,77,.07);
  --topbar-h:70px;
}

body{background:var(--bg);color:var(--ink);letter-spacing:.005em}
.topbar{
  height:var(--topbar-h);padding:0 22px;gap:20px;
  background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);
  box-shadow:0 1px 10px rgba(24,43,77,.04);
}
.brand{gap:11px}
.brand-mark{
  width:38px;height:38px;border-radius:11px;
  background:linear-gradient(145deg,#2d6cf0 0%,#1742b5 100%);
  box-shadow:0 6px 14px rgba(36,87,214,.22);
}
.brand-text strong{font-size:16px;letter-spacing:-.01em}
.brand-text small{font-size:11.5px;color:#8793a6}
.topactions{gap:10px}

.app-sidebar{
  padding:22px 14px;background:#fbfcff;border-right:1px solid var(--line);
  box-shadow:8px 0 24px rgba(24,43,77,.025);position:relative;z-index:5;
}
.sidebar-title{padding:0 10px 12px;color:#8a96a8;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.mainnav{gap:6px}
.mainnav button{
  padding:11px 13px;border-radius:11px;color:#77849a;font-size:14px;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.mainnav button:hover{background:#f0f4fb;color:var(--ink)}
.mainnav button[aria-selected="true"]{
  background:linear-gradient(135deg,#2b67e8 0%,#1d4fca 100%);
  color:#fff;font-weight:700;box-shadow:0 7px 16px rgba(36,87,214,.2);
}
.mainnav button:active,.btn:active,.lib-cta:active{transform:scale(.98)}

.layout{grid-template-columns:220px 420px 1fr}
.layout.view-library,.layout.view-template{grid-template-columns:220px 1fr}
.panel{background:#fff;border-right:1px solid var(--line)}
.panel-head{padding:18px 20px 14px;border-bottom:1px solid #edf0f5}
.panel-head h2{font-size:16px;letter-spacing:-.01em}
.form{padding:18px 20px 34px}
.form .group{margin-bottom:22px}
.form .group > legend,.form .group > .group-title{font-size:11px;color:var(--brand);letter-spacing:.09em;margin-bottom:10px;padding-bottom:7px}
.fld{margin-bottom:13px}
.fld > span{font-size:12.5px;color:#738198;margin-bottom:5px}
.fld input[type=text],.fld input[type=number],.fld input[type=date],.fld select,.fld textarea{
  padding:9px 11px;border-color:#dfe5ef;border-radius:10px;background:#fff;
  box-shadow:0 1px 2px rgba(24,43,77,.025);transition:border-color .16s ease,box-shadow .16s ease;
}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:#6d92eb;box-shadow:0 0 0 3px rgba(36,87,214,.12)}
.chk{font-size:13.5px}
.ai-draft{margin-bottom:20px;padding:15px;background:linear-gradient(180deg,#f0f5ff 0%,#f8fbff 100%);border:1px solid #dce7ff;border-radius:14px;box-shadow:0 5px 16px rgba(36,87,214,.05)}
.ai-draft-title{font-size:13.5px;color:var(--brand)}
.ai-draft-input{padding:9px 11px;border-color:#dce5f7;border-radius:10px}

.btn{padding:9px 15px;border-radius:10px;border-color:#dfe5ef;background:#fff;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.btn:hover{background:#f7f9fd;border-color:#cfd8e7}
.btn.primary{background:linear-gradient(135deg,#2b67e8 0%,#1d4fca 100%);border-color:#2457d6;box-shadow:0 5px 12px rgba(36,87,214,.16)}
.btn.primary:hover{background:linear-gradient(135deg,#245edb 0%,#173eae 100%);box-shadow:0 7px 16px rgba(36,87,214,.22)}
.btn.ghost{background:#fff}
.btn-close-editor{color:#b42318!important;background:#fff1f0!important;border-color:#f2c5c1!important;font-weight:700}
.btn-close-editor:hover{color:#fff!important;background:#c9342c!important;border-color:#c9342c!important;box-shadow:0 3px 9px rgba(180,35,24,.20)}
.linkbtn{color:var(--brand)}

.preview{background:#eef2f8}
.preview-bar{padding:10px 18px;background:rgba(255,255,255,.9);border-bottom:1px solid var(--line)}
.paper-wrap{padding:32px;background:#eef2f8}
.word-toolbar{box-shadow:0 2px 8px rgba(24,43,77,.04)}
.word-ribbon-tabs{background:#f8faff}
.word-ribbon-tab.active{color:var(--brand);border-bottom-color:var(--brand)}

.library{background:#f7f9fd}
.lib-head,.lib-body{width:100%;max-width:1320px;margin-left:auto;margin-right:auto}
.lib-head{padding:30px 40px 0}
.lib-body{padding:22px 40px 48px}
.lib-crumb{margin-bottom:12px;color:#8793a6}
.lib-title{font-size:38px;letter-spacing:-.04em;color:#19243a}
.lib-sub{margin-top:7px;color:#7b8799}
.lib-headrow{gap:24px}
.lib-cta{padding:12px 18px;border-radius:12px;background:linear-gradient(135deg,#2b67e8 0%,#1d4fca 100%);box-shadow:0 8px 18px rgba(36,87,214,.18)}
.lib-cta:hover{background:linear-gradient(135deg,#245edb 0%,#173eae 100%)}
.ghostcta{background:#fff;border-color:#dfe5ef;box-shadow:0 2px 7px rgba(24,43,77,.04)}
.ghostcta:hover{background:#f9fbff;border-color:#cfd8e7}
.lib-actions{margin-top:24px;gap:10px}
.lib-search,.lib-input{border-color:#dfe5ef;border-radius:11px;box-shadow:0 2px 7px rgba(24,43,77,.025)}
.lib-search{padding:0 12px}
.lib-input{padding:10px 12px}
.lib-search:focus-within,.lib-input:focus{outline:3px solid rgba(36,87,214,.11);border-color:#7b9be8}
.lib-body .lib-group h3{margin-bottom:12px;color:#8a96a8;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.lib-list{gap:14px;grid-template-columns:repeat(auto-fill,minmax(390px,1fr))}
.lib-row{
  gap:13px;padding:13px 14px;border-color:#e1e7f0;border-radius:14px;
  box-shadow:0 2px 6px rgba(24,43,77,.035);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.lib-row:hover{border-color:#bdd0f4;box-shadow:0 8px 22px rgba(36,87,214,.09);transform:translateY(-1px)}
.lib-tile{width:40px;height:40px;border-radius:11px;background:var(--brand-soft);color:var(--brand)}
.lib-row.folder .lib-tile{background:#fff5df;color:#ad7a20}
/* รหัสสีชนิดไฟล์: Word ฟ้า · Excel เขียว · โฟลเดอร์เหลือง */
.lib-row:not(.folder) .lib-tile{color:#fff;background:linear-gradient(145deg,#3a90ff,#225cc8);box-shadow:0 5px 12px rgba(42,100,202,.24)}
.lib-row.doc-type-excel .lib-tile{background:linear-gradient(145deg,#27b66f,#087a4a);box-shadow:0 5px 12px rgba(17,128,73,.24)}
.lib-row.folder .lib-tile{background:linear-gradient(145deg,#ffd95a,#edab20);color:#754600;box-shadow:0 5px 12px rgba(198,136,17,.20)}
.lib-name{font-size:14.5px;color:#24304a}
.lib-meta{color:#8894a6}
.lib-pill{background:#f5f7fb;border-color:#e1e7f0}
.lib-empty{border-color:#d9e2f0;border-radius:14px;background:#fff;padding:34px 28px;box-shadow:0 2px 8px rgba(24,43,77,.025)}
.template-library .tpl-groups .draft-list li{border-color:#e1e7f0;border-radius:14px;box-shadow:0 2px 6px rgba(24,43,77,.035)}
.tpl-save-card{border-color:#dfe6f1;border-radius:14px;background:#fff;box-shadow:0 2px 8px rgba(24,43,77,.035)}

.modal{background:rgba(18,30,54,.42);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.modal-card{border-color:#eef2f8;border-radius:20px;box-shadow:0 24px 72px rgba(18,30,54,.22),0 4px 14px rgba(18,30,54,.1)}
.modal-head{padding:18px 22px;border-bottom-color:#edf0f5}
.modal-body{padding:20px 22px}
.modal-foot{padding:15px 22px;border-top-color:#edf0f5}
.toast{right:24px;left:auto;top:auto;bottom:24px;transform:none;border-radius:12px;padding:12px 16px;box-shadow:0 14px 32px rgba(18,30,54,.2)}
@keyframes toast-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.ai-chat-toggle{right:24px;bottom:24px;background:linear-gradient(135deg,#2b67e8 0%,#1d4fca 100%);box-shadow:0 8px 22px rgba(36,87,214,.24)}
.ai-chat-toggle:hover{background:linear-gradient(135deg,#245edb 0%,#173eae 100%)}
.ai-chat{right:24px;bottom:24px;border-color:#e1e7f0;border-radius:16px;box-shadow:0 16px 38px rgba(18,30,54,.18)}
.ai-chat-head{background:linear-gradient(135deg,#2b67e8 0%,#1d4fca 100%)}

@media (max-width:1180px){
  .layout{grid-template-columns:198px 370px 1fr}
  .layout.view-library,.layout.view-template{grid-template-columns:198px 1fr}
  .lib-head,.lib-body{padding-left:28px;padding-right:28px}
}
@media (max-width:860px){
  .topbar{padding:0 14px;gap:12px}
  .brand-text small{display:none}
  .layout,.layout.view-library,.layout.view-template{grid-template-columns:1fr}
  .app-sidebar{padding:12px 14px;background:#fff;box-shadow:0 4px 14px rgba(24,43,77,.04)}
  .sidebar-title{padding:0 5px 7px}
  .mainnav button{padding:9px 12px}
  .lib-head{padding:22px 18px 0}
  .lib-body{padding:18px 18px 34px}
  .lib-title{font-size:31px}
  .lib-list{grid-template-columns:1fr}
  .paper-wrap{padding:16px}
  .toast{right:16px;bottom:16px;max-width:calc(100vw - 32px)}
  .ai-chat-toggle,.ai-chat{right:16px;bottom:16px}
}


/* =====================================================================
   Print preview popup — รูปแบบหน้าพิมพ์แบบสองคอลัมน์ตามภาพอ้างอิง
   ===================================================================== */
.print-preview-modal{
  padding:0;
  background:rgba(12,18,30,.68);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.print-preview-modal[hidden]{display:none!important}
.print-preview-shell{
  width:100vw;
  height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1fr) 455px;
  overflow:hidden;
  background:#60646c;
}
.print-preview-stage{
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  background:#62666e;
}
.print-preview-stage-head{
  flex:0 0 auto;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  color:#f8fafc;
  background:rgba(44,48,56,.82);
  border-bottom:1px solid rgba(255,255,255,.12);
  font-size:14px;
}
.print-preview-stage-head span{color:#c8ced8;font-size:13px}
.print-preview-scroll{
  min-height:0;
  flex:1 1 auto;
  overflow:auto;
  padding:24px 22px 42px;
}
.print-preview-paper-frame{
  min-width:100%;
  min-height:100%;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.print-preview-paper{
  --print-preview-zoom:.85;
  flex:0 0 auto;
  zoom:var(--print-preview-zoom);
  margin:0 auto;
  box-shadow:0 2px 4px rgba(0,0,0,.24),0 18px 38px rgba(0,0,0,.2);
}
.print-options-panel{
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  background:#242628;
  color:#f4f6f8;
  border-left:1px solid rgba(255,255,255,.08);
}
.print-options-head{
  flex:0 0 auto;
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:30px 28px 24px;
}
.print-options-head h2{margin:0;font-size:20px;font-weight:600;letter-spacing:.01em}
.print-options-head p{margin:5px 0 0;color:#aab0b8;font-size:12px}
.print-options-pages{margin-left:auto;padding-top:4px;color:#e4e7eb;font-size:14px;white-space:nowrap}
.print-close-btn{
  display:none;
  border:0;background:transparent;color:#cbd0d8;font:inherit;font-size:18px;cursor:pointer;
}
.print-options-body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:0 28px 24px;
}
.print-option-field{display:block;margin:0 0 22px}
.print-option-field>span,.print-option-check>span{display:block;margin:0 0 8px;color:#e2e5e9;font-size:14px}
.print-option-field select{
  width:100%;
  height:46px;
  padding:0 38px 0 14px;
  border:1px solid #61656c;
  border-radius:10px;
  color:#eef0f3;
  background:#292b2e;
  font:inherit;
  font-size:14px;
  appearance:auto;
}
.print-option-field select:focus{outline:2px solid #89adff;outline-offset:1px;border-color:#89adff}
.print-option-field select option{color:#20242b;background:#fff}
.print-option-check{
  display:flex;
  align-items:center;
  gap:12px;
  margin:4px 0 26px;
  cursor:pointer;
}
.print-option-check>span{margin:0;color:#e2e5e9}
.print-option-check input{
  width:20px;
  height:20px;
  margin:0;
  accent-color:#8fb4ff;
}
.print-file-card{
  margin-top:4px;
  padding:13px 14px;
  border:1px solid #4d5259;
  border-radius:10px;
  background:#2b2e32;
}
.print-file-card span{display:block;color:#aab0b8;font-size:12px;margin-bottom:5px}
.print-file-card strong{display:block;color:#f4f6f8;font-size:14px;font-weight:500;overflow-wrap:anywhere}
.print-options-note{margin:18px 0 0;color:#9da4ae;font-size:12px;line-height:1.6}
.print-options-foot{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  padding:20px 28px 26px;
  border-top:1px solid rgba(255,255,255,.08);
}
.print-cancel-btn,.print-save-btn{
  min-width:88px;
  height:48px;
  padding:0 20px;
  border-radius:999px;
  font:inherit;
  font-size:14px;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.print-cancel-btn{border:1px solid #2076b8;background:transparent;color:#d6e9ff}
.print-cancel-btn:hover{background:rgba(32,118,184,.14)}
.print-save-btn{border:2px solid #9bbcff;background:#2c3035;color:#eaf2ff;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset}
.print-save-btn:hover{background:#3a414a}
.print-cancel-btn:active,.print-save-btn:active{transform:scale(.97)}

@media (max-width:1100px){
  .print-preview-shell{grid-template-columns:minmax(0,1fr) 380px}
  .print-preview-paper{--print-preview-zoom:.68}
  .print-options-head,.print-options-body{padding-left:24px;padding-right:24px}
  .print-options-foot{padding-left:24px;padding-right:24px}
}
@media (max-width:760px){
  .print-preview-shell{display:flex;flex-direction:column;overflow:auto}
  .print-preview-stage{height:58vh;min-height:380px;flex:0 0 58vh}
  .print-preview-stage-head{height:44px;padding:0 16px}
  .print-preview-scroll{padding:16px 12px 26px}
  .print-preview-paper{--print-preview-zoom:.49}
  .print-options-panel{min-height:42vh;flex:1 0 auto}
  .print-options-head{padding:18px 18px 16px}
  .print-options-head h2{font-size:18px}
  .print-close-btn{display:block;margin-left:0}
  .print-options-pages{margin-left:auto}
  .print-options-body{padding:0 18px 20px}
  .print-option-field{margin-bottom:15px}
  .print-options-foot{padding:14px 18px 18px}
}


/* ---------- Print popup refinement: ใกล้ภาพต้นแบบมากขึ้น ---------- */
.print-preview-shell{
  grid-template-columns:minmax(0,1fr) clamp(380px,38vw,520px);
  background:#62666e;
}
.print-preview-stage-head{display:none}
.print-preview-scroll{padding:8px 22px 28px}
.print-preview-paper{
  --print-preview-zoom:clamp(.48,calc((62vw - 48px) / 794px),.76);
  background-image:none;
  box-shadow:0 2px 4px rgba(0,0,0,.25),0 18px 38px rgba(0,0,0,.2);
}
.print-options-head{padding:36px 30px 24px}
.print-options-head h2{font-size:19px;font-weight:600}
.print-options-head p{display:none}
.print-options-body{padding:0 30px 24px}
.print-option-field{margin-bottom:24px}
.print-option-field>span,.print-option-check>span{font-size:14px}
.print-option-field select{height:48px;border-radius:10px;background:#292b2e;border-color:#5b6068}
.print-options-foot{padding:18px 30px 28px}

@media (max-width:1100px){
  .print-preview-shell{grid-template-columns:minmax(0,1fr) clamp(360px,38vw,430px)}
  .print-preview-paper{--print-preview-zoom:clamp(.48,calc((62vw - 48px) / 794px),.72)}
}
@media (max-width:760px){
  .print-preview-shell{display:flex;flex-direction:column;overflow:auto}
  .print-preview-stage{height:58vh;min-height:380px;flex:0 0 58vh}
  .print-preview-scroll{padding:8px 12px 24px}
  .print-preview-paper{--print-preview-zoom:.49}
  .print-options-panel{min-height:42vh;flex:1 0 auto}
  .print-options-head{padding:18px 18px 14px}
  .print-options-body{padding:0 18px 18px}
  .print-options-foot{padding:14px 18px 18px}
}


/* ป๊อปอัพพิมพ์อยู่เหนือทั้งหน้า — ไม่ให้ปุ่มแชตลอยมาทับปุ่มบันทึก */
.print-preview-modal:not([hidden]) ~ .ai-chat-toggle,
.print-preview-modal:not([hidden]) ~ .ai-chat{
  display:none !important;
}


/* ---------- Premium print popup palette ---------- */
.print-preview-modal{
  background:linear-gradient(135deg,rgba(12,30,58,.60),rgba(36,72,126,.44));
}
.print-preview-shell{
  background:#dfe8f5;
  box-shadow:0 30px 90px rgba(7,22,48,.34),0 8px 24px rgba(12,33,68,.18);
}
.print-preview-stage{
  background:
    radial-gradient(circle at 26% 12%,rgba(255,255,255,.72),transparent 32%),
    linear-gradient(145deg,#eef4fc 0%,#e4ecf7 48%,#d7e2f1 100%);
}
.print-preview-scroll{
  background:linear-gradient(180deg,rgba(226,235,247,.72),rgba(211,223,239,.86));
}
.print-preview-paper{
  box-shadow:0 3px 6px rgba(10,35,70,.18),0 24px 52px rgba(10,35,70,.19);
}
.print-options-panel{
  background:linear-gradient(160deg,#263f68 0%,#1d3458 48%,#162b4b 100%);
  border-left:1px solid rgba(202,222,255,.18);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.06),-18px 0 42px rgba(10,28,57,.12);
}
.print-options-head{
  padding-top:34px;
  border-bottom:1px solid rgba(203,221,249,.11);
}
.print-options-head h2{color:#f7fbff;letter-spacing:.015em}
.print-options-pages{color:#dce9fc}
.print-options-body{scrollbar-color:rgba(183,210,247,.48) transparent}
.print-option-field>span,.print-option-check>span{color:#e5efff}
.print-option-field select{
  color:#f2f7ff;
  background:rgba(9,26,52,.36);
  border-color:rgba(177,205,244,.40);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.13),0 2px 8px rgba(6,20,43,.08);
}
.print-option-field select:hover{background:rgba(9,26,52,.48);border-color:rgba(192,216,250,.58)}
.print-option-field select:focus{outline:2px solid rgba(151,190,255,.74);border-color:#9ec2ff}
.print-option-check input{accent-color:#8eb9ff;filter:drop-shadow(0 2px 3px rgba(0,0,0,.15))}
.print-file-card{
  background:rgba(7,22,45,.22);
  border-color:rgba(179,207,246,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 6px 16px rgba(7,21,45,.10);
}
.print-file-card span{color:#a9c0e1}
.print-file-card strong{color:#f6faff}
.print-options-note{color:#b7c8e0}
.print-options-foot{
  border-top-color:rgba(203,221,249,.13);
  background:linear-gradient(180deg,rgba(14,34,66,.04),rgba(9,25,50,.18));
}
.print-cancel-btn{
  border-color:#5da5dd;
  color:#dff0ff;
  background:rgba(16,47,86,.18);
}
.print-cancel-btn:hover{background:rgba(91,164,220,.16);border-color:#83c1f2}
.print-save-btn{
  border:1px solid #a8c8ff;
  background:linear-gradient(180deg,#507fc5 0%,#3768ad 100%);
  color:#fff;
  box-shadow:0 5px 14px rgba(5,25,60,.24),inset 0 1px 0 rgba(255,255,255,.25);
}
.print-save-btn:hover{background:linear-gradient(180deg,#5d8bd0 0%,#4074ba 100%);box-shadow:0 7px 18px rgba(5,25,60,.30),inset 0 1px 0 rgba(255,255,255,.28)}
.print-close-btn:hover{color:#fff}
@media (max-width:760px){
  .print-options-panel{box-shadow:0 -18px 38px rgba(10,28,57,.18)}
}


/* =====================================================================
   Royal Navy Premium — final palette for print popup
   ===================================================================== */
:root{
  --royal-ink:#14294b;
  --royal-deep:#0e2343;
  --royal-mid:#1b3d72;
  --royal-accent:#5d9af2;
  --royal-pale:#eaf2fc;
}
.print-preview-modal{
  background:rgba(8,20,42,.70);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.print-preview-shell{
  background:var(--royal-pale);
  box-shadow:0 34px 100px rgba(5,18,42,.38),0 10px 30px rgba(11,34,70,.22);
}
.print-preview-stage{
  background:
    radial-gradient(circle at 18% 8%,rgba(255,255,255,.88),transparent 30%),
    linear-gradient(145deg,#f4f8fe 0%,#e8f0fb 46%,#dce8f7 100%);
}
.print-preview-scroll{
  padding:10px 24px 32px;
  background:
    radial-gradient(circle at 50% 10%,rgba(255,255,255,.55),transparent 42%),
    linear-gradient(180deg,rgba(226,236,249,.84),rgba(211,225,243,.94));
}
.print-preview-paper{
  box-shadow:0 4px 8px rgba(8,32,66,.16),0 24px 54px rgba(8,32,66,.17);
}
.print-options-panel{
  position:relative;
  overflow:hidden;
  background:linear-gradient(155deg,var(--royal-ink) 0%,var(--royal-mid) 45%,var(--royal-deep) 100%);
  border-left:1px solid rgba(185,214,252,.24);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.08),-20px 0 44px rgba(8,29,61,.16);
}
.print-options-panel::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:190px;
  pointer-events:none;
  background:radial-gradient(circle at 82% 0%,rgba(125,181,255,.18),transparent 58%);
}
.print-options-head,.print-options-body,.print-options-foot{position:relative;z-index:1}
.print-options-head{
  padding:34px 30px 24px;
  border-bottom:1px solid rgba(204,225,253,.14);
}
.print-options-head h2{color:#f8fbff;font-size:21px;letter-spacing:.01em}
.print-options-pages{
  padding:5px 10px;
  border:1px solid rgba(184,214,250,.24);
  border-radius:999px;
  color:#dceaff;
  background:rgba(7,25,53,.20);
  font-size:13px;
}
.print-options-body{padding:0 30px 24px}
.print-option-field{margin-bottom:23px}
.print-option-field>span,.print-option-check>span{color:#e9f2ff;font-size:14px;font-weight:500}
.print-option-field select{
  height:50px;
  border-radius:12px;
  border-color:rgba(183,211,248,.42);
  color:#f6f9ff;
  background:rgba(7,25,53,.34);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.14),0 3px 10px rgba(5,20,44,.10);
}
.print-option-field select:hover{border-color:rgba(205,226,255,.68);background:rgba(7,25,53,.46)}
.print-option-field select:focus{outline:3px solid rgba(128,181,255,.34);outline-offset:1px;border-color:#a6cbff}
.print-option-check{margin:4px 0 28px}
.print-option-check input{width:19px;height:19px;accent-color:#82b3fb}
.print-file-card{
  padding:14px 15px;
  border-color:rgba(183,211,248,.28);
  border-radius:12px;
  background:rgba(6,23,49,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 7px 18px rgba(5,20,44,.12);
}
.print-file-card span{color:#aac1e0;font-size:11.5px;letter-spacing:.02em}
.print-file-card strong{color:#fff;font-size:14px}
.print-options-note{color:#b9cbe4}
.print-options-foot{
  padding:20px 30px 28px;
  border-top-color:rgba(204,225,253,.15);
  background:linear-gradient(180deg,rgba(11,30,60,.04),rgba(5,18,39,.20));
}
.print-cancel-btn,.print-save-btn{height:48px;min-width:92px}
.print-cancel-btn{
  border-color:rgba(111,179,246,.82);
  color:#e4f2ff;
  background:rgba(22,64,116,.18);
}
.print-cancel-btn:hover{border-color:#a4d2ff;background:rgba(91,163,228,.18)}
.print-save-btn{
  border:1px solid rgba(208,229,255,.88);
  background:linear-gradient(180deg,#659be0 0%,#4277bf 100%);
  box-shadow:0 7px 18px rgba(5,24,57,.28),inset 0 1px 0 rgba(255,255,255,.30);
}
.print-save-btn:hover{background:linear-gradient(180deg,#73a9ea 0%,#4f86cf 100%);box-shadow:0 9px 22px rgba(5,24,57,.34),inset 0 1px 0 rgba(255,255,255,.34)}
@media (max-width:760px){
  .print-preview-scroll{padding:8px 14px 24px}
  .print-options-panel{box-shadow:0 -20px 42px rgba(8,29,61,.22)}
  .print-options-head{padding:20px 18px 16px}
  .print-options-body{padding:0 18px 18px}
  .print-options-foot{padding:16px 18px 20px}
}


/* =====================================================================
   Settings modal — clean white card ตามภาพอ้างอิง
   ===================================================================== */
#settingsModal.modal{
  padding:20px;
  background:rgba(91,103,125,.38);
  backdrop-filter:blur(10px) saturate(1.04);
  -webkit-backdrop-filter:blur(10px) saturate(1.04);
}
#settingsModal .modal-card{
  width:min(700px,calc(100vw - 36px));
  max-height:calc(100vh - 40px);
  border:1px solid rgba(255,255,255,.92);
  border-radius:20px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 30px 80px rgba(25,42,71,.22),0 8px 24px rgba(25,42,71,.12),inset 0 1px 0 rgba(255,255,255,.9);
}
#settingsModal .modal-head{
  min-height:58px;
  padding:16px 20px;
  background:rgba(255,255,255,.98);
  border-bottom:1px solid #edf1f6;
}
#settingsModal .modal-head h3{font-size:16px;font-weight:700;color:#1c2a40}
#settingsModal .modal-head .iconbtn{
  width:32px;height:32px;padding:0;border-radius:9px;color:#8994a3;
  transition:background .16s ease,color .16s ease;
}
#settingsModal .modal-head .iconbtn:hover{background:#f0f4f9;color:#1e385e}
#settingsModal .modal-body{
  padding:18px 20px 22px;
  background:#fbfcfe;
  scrollbar-color:#c5d0df transparent;
}
#settingsModal .modal-body::-webkit-scrollbar{width:10px}
#settingsModal .modal-body::-webkit-scrollbar-thumb{background:#c5d0df;border:3px solid #fbfcfe;border-radius:999px}
#settingsModal .modal fieldset{
  margin:0 0 14px;
  padding:14px 14px 12px;
  border:1px solid #e2e8f0;
  border-radius:13px;
  background:#fff;
  box-shadow:0 2px 7px rgba(32,55,88,.025);
}
#settingsModal .modal fieldset:last-child{margin-bottom:0}
#settingsModal .modal legend{
  padding:0 7px;
  color:#2457b8;
  font-size:13px;
  font-weight:700;
  letter-spacing:.01em;
}
#settingsModal .fld{margin-bottom:12px}
#settingsModal .fld:last-child{margin-bottom:0}
#settingsModal .fld>span{color:#707d8e;font-size:12.5px;margin-bottom:5px}
#settingsModal .fld input[type=text],
#settingsModal .fld input[type=number],
#settingsModal .fld input[type=date],
#settingsModal .fld select,
#settingsModal .fld textarea,
#settingsModal input[type=text],
#settingsModal input[type=number],
#settingsModal input[type=date],
#settingsModal select,
#settingsModal textarea{
  min-height:38px;
  border:1px solid #dfe5ed;
  border-radius:10px;
  background:#fff;
  color:#25344b;
  box-shadow:0 1px 2px rgba(25,45,75,.025);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
#settingsModal input:focus,#settingsModal select:focus,#settingsModal textarea:focus{
  outline:none;
  border-color:#7ea4e8;
  box-shadow:0 0 0 3px rgba(45,103,218,.12),0 2px 7px rgba(30,67,130,.05);
}
#settingsModal .modal-foot{
  min-height:62px;
  padding:12px 20px 14px;
  background:#fff;
  border-top:1px solid #edf1f6;
}
#settingsModal .modal-foot .btn{min-height:38px;border-radius:10px;padding:8px 14px}
#settingsModal .modal-foot .btn.primary{
  min-width:82px;
  background:linear-gradient(135deg,#2d6ce8 0%,#1f55c4 100%);
  border-color:#2b64d7;
  box-shadow:0 6px 14px rgba(36,87,214,.18),inset 0 1px 0 rgba(255,255,255,.22);
}
#settingsModal .modal-foot .btn.primary:hover{background:linear-gradient(135deg,#3977ec 0%,#245dcc 100%);box-shadow:0 8px 18px rgba(36,87,214,.24)}
#settingsModal .modal-foot .btn:not(.primary){background:#fff;border-color:#dfe5ed;color:#526174}
#settingsModal .modal-foot .btn:not(.primary):hover{background:#f7f9fc;border-color:#cbd6e4}
@media (max-width:760px){
  #settingsModal.modal{padding:10px}
  #settingsModal .modal-card{width:100%;max-height:calc(100vh - 20px);border-radius:16px}
  #settingsModal .modal-head{min-height:54px;padding:14px 16px}
  #settingsModal .modal-body{padding:14px 14px 18px}
  #settingsModal .modal-foot{padding:11px 14px 13px}
}


/* =====================================================================
   Print popup as settings-style modal — ใช้หน้าต่างตั้งค่าเป็นต้นแบบ
   ===================================================================== */
.print-preview-modal{
  padding:18px;
  background:rgba(91,103,125,.38);
  backdrop-filter:blur(10px) saturate(1.04);
  -webkit-backdrop-filter:blur(10px) saturate(1.04);
}
.print-preview-shell{
  width:min(1180px,100%);
  height:min(790px,calc(100vh - 36px));
  max-height:calc(100vh - 36px);
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(360px,.85fr);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.92);
  border-radius:20px;
  background:#fff;
  box-shadow:0 30px 80px rgba(25,42,71,.24),0 8px 24px rgba(25,42,71,.13),inset 0 1px 0 rgba(255,255,255,.9);
}
.print-preview-stage{
  min-height:0;
  background:linear-gradient(145deg,#f3f6fb 0%,#e9eff7 100%);
  border-right:1px solid #e3e9f1;
}
.print-preview-scroll{
  padding:28px 24px 32px;
  background:
    radial-gradient(circle at 50% 4%,rgba(255,255,255,.9),transparent 44%),
    linear-gradient(180deg,#f1f5fa 0%,#e5edf7 100%);
}
.print-preview-paper{
  --print-preview-zoom:clamp(.42,calc((50vw - 64px) / 794px),.76);
  box-shadow:0 4px 8px rgba(25,48,83,.14),0 18px 38px rgba(25,48,83,.14);
}
.print-options-panel{
  min-width:0;
  background:#fff;
  color:#1f2b3d;
  border-left:0;
  box-shadow:none;
}
.print-options-panel::before{display:none}
.print-options-head{
  min-height:66px;
  padding:18px 20px 14px;
  align-items:center;
  gap:8px;
  background:#fff;
  border-bottom:1px solid #edf1f6;
}
.print-options-head h2{color:#1c2a40;font-size:16px;font-weight:700;letter-spacing:0}
.print-options-head p{display:none}
.print-options-pages{
  margin-left:auto;
  padding:4px 9px;
  border:1px solid #e0e7f0;
  border-radius:999px;
  color:#6b7788;
  background:#f8fafc;
  font-size:12px;
}
.print-close-btn{
  display:block;
  order:4;
  width:30px;
  height:30px;
  margin-left:4px;
  padding:0;
  border:0;
  border-radius:8px;
  color:#8994a3;
  background:transparent;
  font-size:18px;
  line-height:1;
}
.print-close-btn:hover{color:#1e385e;background:#f0f4f9}
.print-options-body{
  padding:16px 20px 20px;
  background:#fbfcfe;
  scrollbar-color:#c5d0df transparent;
}
.print-options-body::-webkit-scrollbar{width:10px}
.print-options-body::-webkit-scrollbar-thumb{background:#c5d0df;border:3px solid #fbfcfe;border-radius:999px}
.print-option-field{margin:0 0 15px}
.print-option-field>span,.print-option-check>span{margin-bottom:6px;color:#707d8e;font-size:12.5px;font-weight:400}
.print-option-field select{
  height:42px;
  padding:0 34px 0 12px;
  border:1px solid #dfe5ed;
  border-radius:10px;
  color:#25344b;
  background:#fff;
  box-shadow:0 1px 2px rgba(25,45,75,.025);
  font-size:14px;
}
.print-option-field select:hover{border-color:#cbd7e6;background:#fff}
.print-option-field select:focus{outline:none;border-color:#7ea4e8;box-shadow:0 0 0 3px rgba(45,103,218,.12),0 2px 7px rgba(30,67,130,.05)}
.print-option-field select option{color:#25344b;background:#fff}
.print-option-check{
  gap:9px;
  margin:3px 0 16px;
  padding:4px 0;
}
.print-option-check>span{margin:0;color:#526174}
.print-option-check input{width:17px;height:17px;accent-color:#2d6ce8}
.print-file-card{
  margin-top:3px;
  padding:12px 13px;
  border:1px solid #dfe7f0;
  border-radius:11px;
  background:#fff;
  box-shadow:0 2px 7px rgba(32,55,88,.025);
}
.print-file-card span{margin-bottom:4px;color:#8290a2;font-size:11.5px}
.print-file-card strong{color:#25344b;font-size:14px;font-weight:600}
.print-options-note{margin:13px 0 0;color:#7c8998;font-size:11.5px;line-height:1.55}
.print-options-foot{
  min-height:62px;
  padding:12px 20px 14px;
  background:#fff;
  border-top:1px solid #edf1f6;
}
.print-cancel-btn,.print-save-btn{
  min-width:82px;
  height:38px;
  border-radius:10px;
  font-size:14px;
}
.print-cancel-btn{
  border:1px solid #dfe5ed;
  color:#526174;
  background:#fff;
}
.print-cancel-btn:hover{border-color:#cbd6e4;background:#f7f9fc}
.print-save-btn{
  border:1px solid #2b64d7;
  color:#fff;
  background:linear-gradient(135deg,#2d6ce8 0%,#1f55c4 100%);
  box-shadow:0 6px 14px rgba(36,87,214,.18),inset 0 1px 0 rgba(255,255,255,.22);
}
.print-save-btn:hover{background:linear-gradient(135deg,#3977ec 0%,#245dcc 100%);box-shadow:0 8px 18px rgba(36,87,214,.24)}
@media (max-width:1100px){
  .print-preview-shell{grid-template-columns:minmax(0,1fr) minmax(340px,.85fr)}
  .print-options-head,.print-options-body{padding-left:18px;padding-right:18px}
  .print-options-foot{padding-left:18px;padding-right:18px}
}
@media (max-width:760px){
  .print-preview-modal{padding:10px}
  .print-preview-shell{
    width:100%;
    height:calc(100vh - 20px);
    max-height:calc(100vh - 20px);
    display:flex;
    flex-direction:column;
    border-radius:16px;
  }
  .print-preview-stage{height:52vh;min-height:320px;flex:0 0 52vh;border-right:0;border-bottom:1px solid #e3e9f1}
  .print-preview-scroll{padding:14px 12px 22px}
  .print-preview-paper{--print-preview-zoom:.47}
  .print-options-panel{min-height:48vh;flex:1 0 auto}
  .print-options-head{min-height:56px;padding:13px 16px 11px}
  .print-options-body{padding:14px 16px 16px}
  .print-options-foot{padding:11px 16px 13px}
}


/* จูนให้ print popup ใช้พื้นผิวเดียวกับ settings modal โดยตรง */
#printGuideModal .print-options-panel{background:#fbfcfe}
#printGuideModal .print-options-head{background:#fff}
#printGuideModal .print-options-body{background:#fbfcfe}
#printGuideModal .print-options-foot{background:#fff}
#printGuideModal .print-options-head h2{color:#1c2a40}


/* =====================================================================
   Mobile + tablet polish — ลดการเบียด เพิ่มพื้นที่สัมผัส และทำให้การเลื่อนเป็นธรรมชาติ
   ===================================================================== */
html{scroll-behavior:smooth}
button,input,select,textarea{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

@media (max-width:1180px) and (min-width:861px){
  .topbar{padding-left:16px;padding-right:16px}
  .layout{grid-template-columns:180px minmax(300px,34vw) minmax(0,1fr)}
  .form{padding-left:14px;padding-right:14px}
  .preview-bar{padding:8px 12px;flex-wrap:wrap}
  .word-ribbon-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin}
  .word-ribbon-panel{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin}
  .word-tool-group{flex:0 0 auto}
  .paper-wrap{padding:16px}
  .lib-head,.lib-body{padding-left:24px;padding-right:24px}
  .lib-headrow{gap:16px}
  .lib-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .lib-row{padding:12px}
}

@media (max-width:860px){
  body{overflow-x:hidden;overflow-y:auto}
  .topbar{
    height:auto;min-height:60px;padding:8px 12px;gap:8px;
    flex-wrap:wrap;align-content:center;position:sticky;top:0;z-index:40;
  }
  .brand{min-width:0;flex:1 1 auto}
  .brand-mark{width:34px;height:34px;flex:0 0 auto}
  .brand-text{min-width:0}
  .brand-text strong,.brand-text small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topactions{
    order:3;flex:1 0 100%;width:100%;gap:7px;padding:2px 0 1px;
    overflow-x:auto;scrollbar-width:none;
  }
  .topactions::-webkit-scrollbar{display:none}
  .topactions .btn{min-height:38px;padding:8px 12px}
  .layout,.layout.view-library,.layout.view-template{
    display:flex;flex-direction:column;grid-template-columns:none;
    width:100%;height:auto;min-height:calc(100vh - 60px);
  }
  .app-sidebar{
    flex:0 0 auto;width:100%;padding:10px 12px;
    border-right:0;border-bottom:1px solid #e4eaf2;
    background:rgba(255,255,255,.97);box-shadow:0 4px 16px rgba(24,43,77,.06);
  }
  .sidebar-title{padding:0 4px 6px;font-size:11px}
  .mainnav{flex-direction:row;gap:6px;overflow-x:auto;overflow-y:hidden;padding:1px 0 3px;scrollbar-width:thin}
  .mainnav button{width:auto;min-height:42px;padding:9px 13px;border-radius:10px;flex:0 0 auto}
  .panel{width:100%;flex:0 0 auto;border-right:0;border-bottom:1px solid #e4eaf2}
  .panel-head{padding:13px 14px 11px;align-items:flex-start;flex-wrap:wrap}
  .panel-head h2{font-size:16px}
  .panel-head-actions{width:100%;justify-content:flex-end}
  .preview-quick-actions{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .preview-quick-actions::-webkit-scrollbar{display:none}
  .preview-quick-actions .linkbtn{min-height:36px;padding:7px 10px}
  .form{width:100%;max-height:none;overflow:visible;padding:14px 14px 24px}
  .form .group{margin-bottom:17px}
  .fld{margin-bottom:13px}
  .fld input[type=text],.fld input[type=number],.fld input[type=date],.fld select,.fld textarea{min-height:42px;font-size:16px}
  .fld textarea{min-height:112px}
  .grid2{grid-template-columns:1fr;gap:0}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .preview{width:100%;min-height:72vh;flex:1 1 auto}
  .preview-bar{padding:9px 12px;flex-wrap:wrap;gap:8px;position:sticky;top:0;z-index:12}
  .preview-edit-actions{width:100%;justify-content:flex-end;overflow-x:auto;scrollbar-width:none}
  .preview-edit-actions::-webkit-scrollbar{display:none}
  .word-toolbar{width:100%;overflow:hidden;position:relative}
  .word-ribbon-tabs{padding:0 10px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .word-ribbon-tabs::-webkit-scrollbar{display:none}
  .word-ribbon-tab{min-height:40px;padding:10px 12px 7px;flex:0 0 auto}
  .word-ribbon-panel{padding:7px 10px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin;align-items:center}
  .word-tool-group{flex:0 0 auto}
  .word-tool,.word-size,.word-font,.word-search{min-height:38px}
  .word-font{max-width:125px}
  .word-search{width:120px}
  .paper-wrap{width:100%;overflow-x:auto;overflow-y:visible;justify-content:flex-start;padding:14px 10px 28px;scrollbar-width:thin}
  .paper-wrap .paper{flex:0 0 auto}
  .library{width:100%;min-height:calc(100vh - 60px)}
  .lib-head{padding:22px 18px 0}
  .lib-body{padding:18px 18px 34px}
  .lib-headrow{flex-direction:column;gap:15px}
  .lib-headbtns{width:100%;display:grid;grid-template-columns:1fr;gap:8px}
  .lib-headbtns .lib-cta,.lib-headbtns .ghostcta{width:100%;justify-content:center;min-height:44px}
  .lib-title{font-size:30px;line-height:1.18}
  .lib-sub{font-size:13px;line-height:1.55}
  .lib-actions{display:grid;grid-template-columns:1fr;gap:9px;margin-top:18px}
  .lib-search,.lib-input{width:100%;min-width:0;min-height:42px}
  .lib-actions .btn{width:100%;min-height:42px}
  .lib-list{grid-template-columns:1fr;gap:10px}
  .lib-row{min-height:68px;padding:12px;gap:10px}
  .lib-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35}
  .lib-meta{font-size:12px}
  .lib-side{gap:3px;flex-wrap:wrap;justify-content:flex-end}
  .lib-pill{max-width:96px;padding:6px 8px}
  .lib-ico{width:36px;height:36px}
  .template-library .tpl-groups .draft-list{grid-template-columns:1fr;gap:10px}
  .tpl-save-card{padding:13px 14px}
  .draft-new{flex-direction:column;gap:8px}
  .draft-new input,.draft-new .btn{width:100%;min-height:42px}
  .modal{padding:10px}
  .modal-card{width:100%;max-height:calc(100vh - 20px);border-radius:16px}
  .modal-head{padding:14px 16px}
  .modal-body{padding:14px 16px 18px}
  .modal-foot{padding:11px 16px 13px}
  .modal fieldset{padding:12px 12px 10px;margin-bottom:12px}
  .ai-chat-toggle{right:12px;bottom:12px;padding:11px 14px;min-height:42px}
  .ai-chat{right:10px;bottom:10px;width:calc(100vw - 20px);height:min(68vh,520px);border-radius:16px}
}

@media (max-width:420px){
  .brand-text strong{font-size:14px}
  .topactions .btn{padding-left:10px;padding-right:10px;font-size:13px}
  .form{padding-left:11px;padding-right:11px}
  .grid4{gap:6px}
  .paper-wrap{padding-left:6px;padding-right:6px}
  .lib-head{padding-left:14px;padding-right:14px}
  .lib-body{padding-left:14px;padding-right:14px}
  .lib-title{font-size:27px}
  .lib-row{align-items:flex-start}
  .lib-side{max-width:104px}
  .modal-body{padding-left:12px;padding-right:12px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}


/* =====================================================================
   Premium motion system — page transition และ interaction polish
   ===================================================================== */
:root{
  --motion-fast:160ms;
  --motion-base:230ms;
  --motion-slow:320ms;
  --ease-smooth:cubic-bezier(.22,.61,.36,1);
  --ease-enter:cubic-bezier(.16,1,.3,1);
}

/* เปลี่ยนหน้าแบบเบา ๆ: fade + ยกขึ้นเล็กน้อย ไม่ทำให้เนื้อหากระโดด */
@keyframes page-enter{
  from{opacity:0;transform:translate3d(0,8px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes panel-enter{
  from{opacity:0;transform:translate3d(0,5px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes backdrop-enter{
  from{opacity:0}
  to{opacity:1}
}
@keyframes chat-enter{
  from{opacity:0;transform:translate3d(0,10px,0) scale(.97)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

.layout:not([hidden]){animation:page-enter var(--motion-base) var(--ease-enter) both}
.library:not([hidden]){animation:page-enter var(--motion-base) var(--ease-enter) both}
.layout.view-library .library:not([hidden]),
.layout.view-template .library:not([hidden]){animation:page-enter var(--motion-base) var(--ease-enter) both}
.panel:not([hidden]),.preview:not([hidden]){animation:panel-enter var(--motion-base) var(--ease-enter) both}

.topbar{transition:box-shadow var(--motion-base) var(--ease-smooth),background-color var(--motion-base) var(--ease-smooth)}
.app-sidebar{transition:box-shadow var(--motion-base) var(--ease-smooth),background-color var(--motion-base) var(--ease-smooth)}
.mainnav button,.btn,.linkbtn,.iconbtn,.lib-cta,.lib-row,.lib-ico,.lib-pill,
.word-tool,.word-size,.word-ribbon-tab,.ai-chat-toggle{
  transition:background-color var(--motion-fast) var(--ease-smooth),
    background var(--motion-fast) var(--ease-smooth),
    color var(--motion-fast) var(--ease-smooth),
    border-color var(--motion-fast) var(--ease-smooth),
    box-shadow var(--motion-base) var(--ease-smooth),
    transform var(--motion-fast) var(--ease-smooth),
    opacity var(--motion-fast) var(--ease-smooth);
}
.mainnav button:hover,.btn:hover,.lib-cta:hover,.lib-row:hover,.lib-ico:hover,.lib-pill:hover,
.word-tool:hover,.word-size:hover,.word-ribbon-tab:hover{transform:translateY(-1px)}
.mainnav button:active,.btn:active,.lib-cta:active,.lib-row:active,.lib-ico:active,.lib-pill:active,
.word-tool:active,.word-size:active,.word-ribbon-tab:active{transform:translateY(0) scale(.985)}

.fld input,.fld select,.fld textarea,.lib-search,.lib-input,
.modal input,.modal select,.modal textarea{
  transition:border-color var(--motion-fast) var(--ease-smooth),
    box-shadow var(--motion-base) var(--ease-smooth),
    background-color var(--motion-base) var(--ease-smooth);
}

.modal{animation:backdrop-enter var(--motion-base) var(--ease-smooth) both}
.modal-card{animation:modal-pop var(--motion-slow) var(--ease-enter) both}
.ai-chat{animation:chat-enter var(--motion-base) var(--ease-enter) both}
.print-preview-shell{animation:modal-pop var(--motion-slow) var(--ease-enter) both}

/* ระหว่างป๊อปอัพเปิด ตัวพื้นหลังดูนิ่งลงและให้จุดสนใจอยู่ที่การ์ด */
.modal:not([hidden])~.topbar,
.print-preview-modal:not([hidden])~.topbar{filter:saturate(.92)}

@media (prefers-reduced-motion:reduce){
  .layout:not([hidden]),.library:not([hidden]),.panel:not([hidden]),.preview:not([hidden]),
  .modal,.modal-card,.ai-chat,.print-preview-shell{animation:none !important}
  .mainnav button,.btn,.linkbtn,.iconbtn,.lib-cta,.lib-row,.lib-ico,.lib-pill,
  .word-tool,.word-size,.word-ribbon-tab,.ai-chat-toggle,
  .fld input,.fld select,.fld textarea,.lib-search,.lib-input,
  .modal input,.modal select,.modal textarea{transition:none !important}
}


@media print{
  .layout:not([hidden]),.library:not([hidden]),.panel:not([hidden]),.preview:not([hidden]),
  .modal,.modal-card,.ai-chat,.print-preview-shell{animation:none !important;transform:none !important}
}


/* =====================================================================
   Dark Mode — premium navy theme; กระดาษเอกสารยังคงขาวเพื่อความถูกต้องในการอ่าน/พิมพ์
   ===================================================================== */
.theme-toggle{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  min-height:38px;padding:8px 12px;border:1px solid #dfe5ef;border-radius:10px;
  color:#42536b;background:#fff;font:600 13px var(--ui-font);cursor:pointer;
  box-shadow:0 2px 7px rgba(24,43,77,.05);
  transition:background var(--motion-fast) var(--ease-smooth),border-color var(--motion-fast) var(--ease-smooth),color var(--motion-fast) var(--ease-smooth),box-shadow var(--motion-base) var(--ease-smooth),transform var(--motion-fast) var(--ease-smooth);
}
.theme-toggle:hover{background:#f4f7fc;border-color:#cbd8ea;color:#1f447d;transform:translateY(-1px);box-shadow:0 5px 13px rgba(24,43,77,.08)}
.theme-toggle:active{transform:translateY(0) scale(.985)}
.theme-toggle-icon{display:grid;place-items:center;width:18px;height:18px;font-size:15px;line-height:1}

html[data-theme="dark"] body{background:#0d1728;color:#e7eef9}
html[data-theme="dark"] .topbar{background:rgba(17,31,53,.96);border-bottom-color:#263b5a;box-shadow:0 1px 14px rgba(0,0,0,.22)}
html[data-theme="dark"] .brand-text strong{color:#f3f7fd}
html[data-theme="dark"] .brand-text small{color:#9db0ca}
html[data-theme="dark"] .theme-toggle{border-color:#395579;background:#172945;color:#dceaff;box-shadow:0 3px 10px rgba(0,0,0,.18)}
html[data-theme="dark"] .theme-toggle:hover{background:#203858;border-color:#5579a8;color:#fff}
html[data-theme="dark"] .app-sidebar{background:#111f35;border-right-color:#263b5a;box-shadow:8px 0 26px rgba(0,0,0,.16)}
html[data-theme="dark"] .sidebar-title{color:#91a7c6}
html[data-theme="dark"] .mainnav button{color:#a9bbd2}
html[data-theme="dark"] .mainnav button:hover{background:#1b3150;color:#eff6ff}
html[data-theme="dark"] .mainnav button[aria-selected="true"]{background:linear-gradient(135deg,#3979ea 0%,#244fb9 100%);box-shadow:0 8px 18px rgba(38,96,211,.25)}
html[data-theme="dark"] .btn{background:#172945;border-color:#385473;color:#dce8f7}
html[data-theme="dark"] .btn:hover{background:#203858;border-color:#5579a8;color:#fff}
html[data-theme="dark"] .btn.primary{background:linear-gradient(135deg,#3c7bea 0%,#2454c4 100%);border-color:#4b83e9;color:#fff}
html[data-theme="dark"] .btn.ghost{background:#172945}
html[data-theme="dark"] .linkbtn{color:#8db8ff}
html[data-theme="dark"] .panel{background:#13223a;border-right-color:#263b5a}
html[data-theme="dark"] .panel-head{border-bottom-color:#263b5a}
html[data-theme="dark"] .panel-head h2{color:#eef5ff}
html[data-theme="dark"] .panel-foot{border-top-color:#263b5a;color:#9cb0ca}
html[data-theme="dark"] .form .group > legend,html[data-theme="dark"] .form .group > .group-title{color:#8db8ff;border-bottom-color:#2a4162}
html[data-theme="dark"] .fld>span{color:#9eb1c9}
html[data-theme="dark"] .fld input[type=text],html[data-theme="dark"] .fld input[type=number],html[data-theme="dark"] .fld input[type=date],html[data-theme="dark"] .fld select,html[data-theme="dark"] .fld textarea{background:#0f1d31;border-color:#355273;color:#e9f2fd;box-shadow:inset 0 1px 2px rgba(0,0,0,.16)}
html[data-theme="dark"] .fld input:focus,html[data-theme="dark"] .fld textarea:focus,html[data-theme="dark"] .fld select:focus{border-color:#74a6f4;box-shadow:0 0 0 3px rgba(93,154,242,.18)}
html[data-theme="dark"] .chk{color:#d6e3f3}
html[data-theme="dark"] .ai-draft{background:linear-gradient(180deg,#172e51 0%,#152640 100%);border-color:#2d4f7c;box-shadow:0 6px 18px rgba(0,0,0,.12)}
html[data-theme="dark"] .ai-draft-title{color:#a7c7ff}
html[data-theme="dark"] .ai-draft-note{color:#afc0d6}
html[data-theme="dark"] .ai-draft-input{background:#0f1d31;border-color:#355273;color:#e9f2fd}
html[data-theme="dark"] .preview{background:#0c1728}
html[data-theme="dark"] .preview-bar{background:rgba(17,31,53,.95);border-bottom-color:#263b5a;color:#a9bbd2}
html[data-theme="dark"] .preview-quick-actions{background:linear-gradient(180deg,#1a2c49 0%,#142640 100%);border-color:#2e486d;box-shadow:0 2px 8px rgba(0,0,0,.16)}
html[data-theme="dark"] .preview-quick-actions .linkbtn{color:#bdd4f4}
html[data-theme="dark"] .preview-quick-actions .linkbtn:hover{background:#233c61;border-color:#476a9e;color:#fff}
html[data-theme="dark"] .word-toolbar{background:#13223a;color:#dce8f7;border-bottom-color:#263b5a;box-shadow:0 3px 12px rgba(0,0,0,.18)}
html[data-theme="dark"] .word-ribbon-tabs{background:#172945;border-bottom-color:#2a4162}
html[data-theme="dark"] .word-ribbon-tab{color:#b7c8dd}
html[data-theme="dark"] .word-ribbon-tab:hover{background:#203858;color:#fff}
html[data-theme="dark"] .word-ribbon-tab.active{color:#9ec4ff;border-bottom-color:#72a5f7}
html[data-theme="dark"] .word-tool:hover,html[data-theme="dark"] .word-tool:focus,html[data-theme="dark"] .word-size:focus,html[data-theme="dark"] .word-font:focus,html[data-theme="dark"] .word-search:focus{background:#203858;border-color:#5279ac}
html[data-theme="dark"] .word-size,html[data-theme="dark"] .word-font,html[data-theme="dark"] .word-search{background:#0f1d31;border-color:#355273;color:#e9f2fd}
html[data-theme="dark"] .word-tool-group{border-right-color:#2a4162}
html[data-theme="dark"] .paper-wrap{background:linear-gradient(145deg,#0c1728 0%,#10213a 100%)}
/* กระดาษจริงต้องคงพื้นขาวและสีตัวอักษรเข้ม ไม่ว่าธีมแอปจะเป็นสีใด */
html[data-theme="dark"] .paper,html[data-theme="dark"] .print-preview-paper{background:#fff;color:#111827}
html[data-theme="dark"] .library{background:#0e192b}
html[data-theme="dark"] .lib-crumb{color:#9aacc4}
html[data-theme="dark"] .lib-crumb button{color:#9aacc4}
html[data-theme="dark"] .lib-crumb button:hover:not(:disabled){background:#1b3150;color:#eef5ff}
html[data-theme="dark"] .lib-crumb .here,html[data-theme="dark"] .lib-title{color:#eef5ff}
html[data-theme="dark"] .lib-sub{color:#a0b1c6}
html[data-theme="dark"] .lib-body .lib-group h3{color:#91a7c6}
html[data-theme="dark"] .lib-row{background:#13233b;border-color:#2a4264;box-shadow:0 3px 9px rgba(0,0,0,.14)}
html[data-theme="dark"] .lib-row:hover{background:#172c49;border-color:#4d75ad;box-shadow:0 10px 24px rgba(0,0,0,.2)}
html[data-theme="dark"] .lib-tile{background:#1b3760;color:#a9caff}
html[data-theme="dark"] .lib-row.folder .lib-tile{background:#4a3a1c;color:#ffd48c}
html[data-theme="dark"] .lib-name{color:#eef5ff}
html[data-theme="dark"] .lib-meta{color:#9db0c9}
html[data-theme="dark"] .lib-pill{background:#172945;border-color:#385473;color:#c9d9ec}
html[data-theme="dark"] .lib-pill:hover{background:#203858}
html[data-theme="dark"] .lib-ico{color:#a9bbd2}
html[data-theme="dark"] .lib-ico:hover{background:#203858;color:#fff}
html[data-theme="dark"] .lib-empty{background:#13233b;border-color:#385473;color:#a8bad0}
html[data-theme="dark"] .tpl-save-card,html[data-theme="dark"] .template-library .tpl-groups .draft-list li{background:#13233b;border-color:#2a4264;box-shadow:0 3px 9px rgba(0,0,0,.14)}
html[data-theme="dark"] .lib-search,html[data-theme="dark"] .lib-input{background:#0f1d31;border-color:#355273;color:#e9f2fd}
html[data-theme="dark"] .lib-search:focus-within,html[data-theme="dark"] .lib-input:focus{outline-color:#4c7ed4;border-color:#74a6f4}
html[data-theme="dark"] .lib-cta.ghostcta{background:#172945;border-color:#385473;color:#dceaff}
html[data-theme="dark"] .lib-cta.ghostcta:hover{background:#203858;border-color:#5579a8}
html[data-theme="dark"] .drive-knowledge-status{color:#9eb1c9}
html[data-theme="dark"] .drive-knowledge-status.has-files{color:#a9caff}
html[data-theme="dark"] .modal{background:rgba(3,10,22,.62)}
html[data-theme="dark"] .modal-card{background:#13233b;border-color:#2d496c;box-shadow:0 30px 80px rgba(0,0,0,.42),0 8px 24px rgba(0,0,0,.20)}
html[data-theme="dark"] .modal-head,html[data-theme="dark"] .modal-foot{background:#13233b;border-color:#2a4264}
html[data-theme="dark"] .modal-head h3{color:#eef5ff}
html[data-theme="dark"] .modal-body{background:#0f1d31;color:#dce8f7}
html[data-theme="dark"] .modal fieldset{background:#13233b;border-color:#2a4264;box-shadow:0 2px 8px rgba(0,0,0,.10)}
html[data-theme="dark"] .modal legend{color:#9ec4ff}
html[data-theme="dark"] .modal .orgnote{background:#172e51;border-color:#2d4f7c;color:#dce8f7}
html[data-theme="dark"] .modal .fld>span{color:#aabbd0}
html[data-theme="dark"] .modal input,html[data-theme="dark"] .modal select,html[data-theme="dark"] .modal textarea{background:#0f1d31;border-color:#355273;color:#e9f2fd}
html[data-theme="dark"] .modal .iconbtn{color:#a9bbd2}
html[data-theme="dark"] .modal .iconbtn:hover{background:#203858;color:#fff}
html[data-theme="dark"] .toast{background:rgba(8,20,42,.96);box-shadow:0 18px 48px rgba(0,0,0,.38)}
html[data-theme="dark"] .ai-chat{background:#13233b;border-color:#2a4264;box-shadow:0 18px 42px rgba(0,0,0,.34)}
html[data-theme="dark"] .ai-chat-messages{background:#0f1d31}
html[data-theme="dark"] .ai-chat-message.assistant{background:#172945;border-color:#355273;color:#dce8f7}
html[data-theme="dark"] .ai-chat-form,html[data-theme="dark"] .ai-chat-note{background:#13233b;border-color:#2a4264;color:#a9bbd2}
html[data-theme="dark"] .ai-chat-form textarea{background:#0f1d31;border-color:#355273;color:#e9f2fd}
html[data-theme="dark"] .ai-chat-toggle{background:linear-gradient(135deg,#3d7eed 0%,#2454c4 100%);box-shadow:0 9px 24px rgba(18,62,145,.35)}
html[data-theme="dark"] .ai-chat-head{background:linear-gradient(135deg,#315fae 0%,#193d79 100%)}

/* ป๊อปอัพพิมพ์: ใน dark mode แผงควบคุมเข้มขึ้น แต่กระดาษยังขาว */
html[data-theme="dark"] .print-preview-modal{background:rgba(3,10,22,.68)}
html[data-theme="dark"] .print-preview-shell{background:#10203a;border-color:#2d496c;box-shadow:0 34px 100px rgba(0,0,0,.48),0 10px 30px rgba(0,0,0,.26)}
html[data-theme="dark"] .print-preview-stage{background:linear-gradient(145deg,#172945 0%,#10213a 100%);border-color:#2a4264}
html[data-theme="dark"] .print-preview-scroll{background:linear-gradient(180deg,#172945 0%,#10213a 100%)}
html[data-theme="dark"] .print-options-panel{background:#13233b;color:#e9f2fd}
html[data-theme="dark"] .print-options-head,html[data-theme="dark"] .print-options-foot{background:#13233b;border-color:#2a4264}
html[data-theme="dark"] .print-options-head h2{color:#eef5ff}
html[data-theme="dark"] .print-options-pages{background:#172945;border-color:#385473;color:#bfd3ec}
html[data-theme="dark"] .print-options-body{background:#0f1d31}
html[data-theme="dark"] .print-option-field>span,html[data-theme="dark"] .print-option-check>span{color:#a9bbd2}
html[data-theme="dark"] .print-option-field select{background:#172945;border-color:#385473;color:#e9f2fd}
html[data-theme="dark"] .print-file-card{background:#13233b;border-color:#385473}
html[data-theme="dark"] .print-file-card span{color:#9eb1c9}
html[data-theme="dark"] .print-file-card strong{color:#eef5ff}
html[data-theme="dark"] .print-options-note{color:#9eb1c9}
html[data-theme="dark"] .print-cancel-btn{background:#172945;border-color:#5d9af2;color:#dceaff}
html[data-theme="dark"] .print-cancel-btn:hover{background:#203858}
html[data-theme="dark"] .print-save-btn{background:linear-gradient(135deg,#4d86e1 0%,#2c62bf 100%);border-color:#a6cbff}

/* เพิ่มประสิทธิภาพรายการจำนวนมาก: รายการนอก viewport ไม่ต้องคำนวณละเอียดทันที */
.lib-row,.template-library .draft-list li{content-visibility:auto;contain-intrinsic-size:72px}

@media (max-width:860px){
  .theme-toggle{min-height:40px;padding:8px 10px}
  .theme-toggle-label{display:none}
  html[data-theme="dark"] .app-sidebar{background:#111f35;border-bottom-color:#263b5a;box-shadow:0 4px 16px rgba(0,0,0,.18)}
  html[data-theme="dark"] .preview-bar{background:rgba(17,31,53,.97)}
  html[data-theme="dark"] .modal,.html[data-theme="dark"] .print-preview-modal{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
}


/* Final dark overrides for settings modal: keep the control surface readable even when
   legacy component rules or inline page styles have a stronger background declaration. */
html[data-theme="dark"] #settingsModal .modal-card,
html[data-theme="dark"] #sheetTemplatesModal .modal-card,
html[data-theme="dark"] #drivePreviewModal .modal-card,
html[data-theme="dark"] #sheetEditorModal .modal-card{background:#13233b !important;color:#e9f2fd}
html[data-theme="dark"] #settingsModal .modal-head,
html[data-theme="dark"] #settingsModal .modal-foot,
html[data-theme="dark"] #sheetTemplatesModal .modal-head,
html[data-theme="dark"] #sheetTemplatesModal .modal-foot,
html[data-theme="dark"] #drivePreviewModal .modal-head,
html[data-theme="dark"] #drivePreviewModal .modal-foot{background:#13233b !important;border-color:#2a4264}
html[data-theme="dark"] #settingsModal .modal-body,
html[data-theme="dark"] #sheetTemplatesModal .modal-body,
html[data-theme="dark"] #drivePreviewModal .modal-body{background:#0f1d31 !important;color:#dce8f7}
html[data-theme="dark"] #settingsModal input,
html[data-theme="dark"] #settingsModal select,
html[data-theme="dark"] #settingsModal textarea,
html[data-theme="dark"] #sheetTemplatesModal input,
html[data-theme="dark"] #sheetTemplatesModal select,
html[data-theme="dark"] #sheetTemplatesModal textarea,
html[data-theme="dark"] #drivePreviewModal input,
html[data-theme="dark"] #drivePreviewModal select,
html[data-theme="dark"] #drivePreviewModal textarea{background:#0f1d31 !important;border-color:#355273;color:#e9f2fd}
html[data-theme="dark"] #settingsModal fieldset{background:#13233b !important;border-color:#2a4264}
html[data-theme="dark"] #settingsModal .garuda-preview{background:#0f1d31;border-color:#355273}


html[data-theme="dark"] #settingsModal input,
html[data-theme="dark"] #settingsModal select,
html[data-theme="dark"] #settingsModal textarea,
html[data-theme="dark"] #sheetTemplatesModal input,
html[data-theme="dark"] #sheetTemplatesModal select,
html[data-theme="dark"] #sheetTemplatesModal textarea,
html[data-theme="dark"] #drivePreviewModal input,
html[data-theme="dark"] #drivePreviewModal select,
html[data-theme="dark"] #drivePreviewModal textarea{color:#e9f2fd !important;caret-color:#fff}
html[data-theme="dark"] #settingsModal input::placeholder,
html[data-theme="dark"] #settingsModal textarea::placeholder,
html[data-theme="dark"] #sheetTemplatesModal input::placeholder,
html[data-theme="dark"] #sheetTemplatesModal textarea::placeholder{color:#8195b0;opacity:1}
html[data-theme="dark"] #settingsModal option,
html[data-theme="dark"] #sheetTemplatesModal option,
html[data-theme="dark"] #drivePreviewModal option{background:#0f1d31;color:#e9f2fd}


/* Final dark overrides for the print popup, after all Royal Navy refinements. */
html[data-theme="dark"] #printGuideModal .print-preview-shell{background:#10203a !important}
html[data-theme="dark"] #printGuideModal .print-preview-stage{background:linear-gradient(145deg,#172945 0%,#10213a 100%) !important}
html[data-theme="dark"] #printGuideModal .print-preview-scroll{background:linear-gradient(180deg,#172945 0%,#10213a 100%) !important}
html[data-theme="dark"] #printGuideModal .print-options-panel{background:linear-gradient(155deg,#14294b 0%,#1b3d72 45%,#0e2343 100%) !important;border-left-color:rgba(185,214,252,.24);color:#e9f2ff}
html[data-theme="dark"] #printGuideModal .print-options-head,
html[data-theme="dark"] #printGuideModal .print-options-body,
html[data-theme="dark"] #printGuideModal .print-options-foot{background:transparent !important;color:#e9f2ff}
html[data-theme="dark"] #printGuideModal .print-options-head h2,
html[data-theme="dark"] #printGuideModal .print-option-field>span,
html[data-theme="dark"] #printGuideModal .print-option-check>span{color:#e9f2ff !important}
html[data-theme="dark"] #printGuideModal .print-option-field select{background:rgba(7,25,53,.58) !important;color:#f6f9ff !important;border-color:rgba(183,211,248,.52)}
html[data-theme="dark"] #printGuideModal .print-option-field select option{background:#10213a;color:#f6f9ff}
html[data-theme="dark"] #printGuideModal .print-file-card{background:rgba(6,23,49,.34) !important;border-color:rgba(183,211,248,.34)}
html[data-theme="dark"] #printGuideModal .print-options-note{color:#b9cbe4 !important}
html[data-theme="dark"] #printGuideModal .print-options-pages{background:rgba(7,25,53,.30) !important;color:#dceaff !important}

/* ---------- ตาราง Excel ฉบับพิมพ์ ----------
   ตัวแก้ตารางเป็น modal ที่มีคลาส no-print และช่องกรอกเป็น <input>
   สั่งพิมพ์ตรง ๆ จึงได้หน้าเปล่า จึงวาดตารางนิ่ง ๆ ขึ้นมาใหม่เฉพาะตอนพิมพ์

   แนวนอนตั้งที่ @page ผ่าน #pageStyle ใน printSheet() ไม่ได้ตั้งไว้ที่นี่
   เพราะ @page เปลี่ยนตามคลาสไม่ได้ ต้องสลับ CSS จริงตอนกดพิมพ์ */
/* เผื่อผู้ใช้ตั้งระยะขอบในกล่องพิมพ์เป็น ไม่มี จะได้ไม่ชิดขอบกระดาษจนอ่านยาก
   ระยะขอบจริงมาจาก @page sheetLandscape อยู่แล้ว อันนี้เป็นตัวสำรอง */
.sheet-print{display:none;padding:4mm}
/* กระดาษที่ได้เป็นตารางล้วน ไม่มีชื่อไฟล์ ไม่มีหัวคอลัมน์ A B C ไม่มีเลขแถว
   เหมือนพิมพ์จาก Excel ที่ปิดตัวเลือก Print Headings ไว้ */
.sheet-print table{border-collapse:collapse;width:100%;table-layout:fixed}
.sheet-print th,.sheet-print td{
  border:1px solid #444;padding:2mm 2.5mm;font-size:11pt;
  text-align:left;vertical-align:top;word-break:break-word;
}
.sheet-print .sheet-print-sheet + .sheet-print-sheet{break-before:page;page-break-before:always}

/* หน้ากระดาษของตาราง — ใช้ named page เพื่อไม่ต้องแข่ง cascade กับ @page ของ document.css
   ที่ประกาศ size:A4 (แนวตั้ง) ไว้ การมี @page สองตัวที่กำหนด size ต่างกันแล้วหวังให้ตัวหลังชนะ
   เป็นเรื่องที่เบราว์เซอร์แต่ละรุ่นตีความไม่เหมือนกัน named page ตัดปัญหานั้นทิ้งทั้งหมด
   เพราะเป็นคนละหน้ากระดาษกันโดยสิ้นเชิง ไม่ใช่การเขียนทับ */
@page sheetLandscape{
  size:A4 landscape;
  margin:10mm;
}

@media print{
  /* ตอนพิมพ์ตาราง ให้เหลือแต่ตารางฉบับพิมพ์ **ซ่อนลูกของ body ทุกตัวที่ไม่ใช่ตาราง**
     เดิมไล่ซ่อนทีละคลาส (.layout .topbar) แล้วพลาด เพราะมีของอื่นอยู่ใน body ด้วย
       - #mainContent ที่ห่อ .layout ไว้อีกชั้น
       - div ลอยสูง 378px ของ pxPerMm() ที่ค้างอยู่ใน body ตลอดอายุหน้าเว็บ
     ทั้งคู่ไม่มีคลาส no-print จึงถูกนับพื้นที่ตอนพิมพ์ แล้วดันเนื้อหาไปหน้าที่สอง
     กฎเดียวแบบนี้ครอบคลุมของที่จะถูกเพิ่มเข้ามาในอนาคตด้วย */
  body.printing-sheet > *:not(.sheet-print){display:none !important}
  body.printing-sheet .layout{display:none !important}
  body.printing-sheet .topbar{display:none !important}
  body.printing-sheet .sheet-print{display:block !important}
  body.printing-sheet .sheet-print[hidden]{display:block !important}
  /* ผูกตารางเข้ากับหน้ากระดาษแนวนอนที่ประกาศไว้ข้างบน
     ต้องประกาศที่ตัวที่อยู่บนสุดของสิ่งที่จะพิมพ์ ไม่ใช่ที่ table ข้างใน */
  body.printing-sheet .sheet-print{page:sheetLandscape}
  body.printing-sheet{page:sheetLandscape}
}


/* =====================================================================
   Accessibility polish — visible focus, skip navigation, and touch targets
   ===================================================================== */
.skip-link{
  position:fixed;top:12px;left:12px;z-index:100;
  padding:10px 14px;border-radius:10px;
  color:#fff;background:#173d84;border:2px solid #9fc5ff;
  box-shadow:0 8px 22px rgba(7,25,60,.28);
  font:700 14px var(--ui-font);text-decoration:none;
  transform:translateY(-180%);transition:transform var(--motion-fast) var(--ease-enter);
}
.skip-link:focus,.skip-link:focus-visible{transform:translateY(0);outline:3px solid #fff;outline-offset:2px}
:where(button,a[href],input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid #6fa9ff;outline-offset:2px;
}
html[data-theme="dark"] :where(button,a[href],input,select,textarea,[tabindex]):focus-visible{outline-color:#a9d0ff}
#mainContent{scroll-margin-top:18px}
.mainnav button,.btn,.linkbtn,.iconbtn,.lib-ico,.lib-pill,.word-tool,.word-size,.word-ribbon-tab,
.theme-toggle,.print-close-btn,.print-cancel-btn,.print-save-btn{min-height:40px}
.lib-ico{min-width:40px}
/* โฟลเดอร์เป็นทางลัด จึงใช้แถวกระชับกว่าการ์ดเอกสารโดยไม่ลดพื้นที่กดของปุ่ม */
.lib-row.folder{
  min-height:56px;
  gap:var(--space-4);
  padding:var(--space-3) var(--space-5);
  width:fit-content;
  max-width:100%;
  justify-self:start;
}
.lib-row.folder .lib-tile{width:38px;height:38px;border-radius:var(--radius-sm)}
.lib-row.folder .lib-text{gap:0}
.lib-row.folder .lib-name{line-height:18px}
.lib-row.folder .lib-meta{line-height:16px}
.lib-row.folder .lib-side{gap:var(--space-1)}
.lib-row.folder{position:relative}
.lib-row.folder .lib-side{
  display:none;
  position:absolute;
  right:var(--space-2);
  top:50%;
  z-index:4;
  padding:var(--space-1);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--panel-raised);
  box-shadow:var(--shadow-2);
  transform:translateY(-50%);
}
.lib-row.folder.context-open .lib-side{display:flex}
.lib-row.folder.context-open{border-color:var(--brand);box-shadow:var(--shadow-1),0 5px 14px color-mix(in srgb,var(--brand) 14%,transparent)}
.folder-list{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--space-3)}
.registry-docs-heading{display:flex;align-items:center;gap:var(--space-3)}
.registry-folder-back{
  display:inline-flex;align-items:center;gap:var(--space-2);
  min-height:34px;
  padding:var(--space-2) var(--space-4);
  border-color:var(--brand);
  background:var(--brand);
  color:var(--brand-ink);
  font-size:var(--text-sm);
  font-weight:750;
  letter-spacing:0;
  text-transform:none;
}
.registry-folder-back:hover:not(:disabled){background:var(--brand-strong);border-color:var(--brand-strong)}
.registry-folder-back .ui-icon{width:16px;height:16px}
.registry-folder-create-btn{
  display:inline-flex;align-items:center;gap:var(--space-2);
  min-height:34px;
  padding:var(--space-2) var(--space-4);
  border-color:var(--line-strong);
  background:var(--panel-raised);
  color:var(--ink);
  font-size:var(--text-sm);
  font-weight:750;
  letter-spacing:0;
  text-transform:none;
}
.registry-folder-create-btn:hover:not(:disabled){background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}
.registry-folder-create-btn .ui-icon{width:16px;height:16px}
#libraryView.folder-open .registry-filterbar .registry-folder-create{display:none}
.registry-subfolders{margin:var(--space-4) 0 var(--space-5)}
.registry-subfolders h4{margin:0 0 var(--space-3);color:var(--muted);font-size:var(--text-sm);font-weight:700}
@media (max-width:860px){
  .mainnav button,.btn,.linkbtn,.iconbtn,.lib-pill,.word-tool,.word-size,.word-ribbon-tab,
  .theme-toggle,.print-close-btn,.print-cancel-btn,.print-save-btn{min-height:44px}
  .lib-row.folder{min-height:60px;padding:var(--space-3) var(--space-4)}
}
@media (prefers-reduced-motion:reduce){.skip-link{transition:none}}
@media print{.skip-link{display:none !important}}


/* ---------- Keyboard shortcuts dialog ---------- */
.shortcuts-card{width:min(560px,100%)}
.shortcuts-intro{margin:0 0 16px;color:var(--muted);line-height:1.6}
.shortcut-list{display:grid;gap:8px}
.shortcut-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#f8faff;color:var(--ink);font-size:14px}
.shortcut-row>span{min-width:0}
.shortcut-row>div{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.shortcut-row b{color:var(--muted);font-weight:500}
kbd{display:inline-grid;place-items:center;min-width:30px;height:27px;padding:0 7px;border:1px solid #cbd5e1;border-bottom-width:2px;border-radius:6px;background:#fff;color:#243653;font:700 12px/1 var(--ui-font);box-shadow:0 1px 1px rgba(24,43,77,.06)}
html[data-theme="dark"] .shortcuts-intro{color:#a9bbd2}
html[data-theme="dark"] .shortcut-row{background:#13233b;border-color:#2a4264;color:#e9f2fd}
html[data-theme="dark"] .shortcut-row b{color:#9eb1c9}
html[data-theme="dark"] kbd{border-color:#52739e;background:#0f1d31;color:#e9f2fd;box-shadow:0 1px 2px rgba(0,0,0,.2)}
@media (max-width:520px){
  .shortcut-row{align-items:flex-start;flex-direction:column;gap:8px}
  .shortcut-row>div{align-self:flex-end}
}


/* =====================================================================
   Responsive extension — dashboard, navigation and dense controls
   ===================================================================== */
.dashboard-view{min-width:0;min-height:calc(100vh - 64px);background:var(--bg);color:var(--ink)}
.dashboard-scroll{height:100%;overflow:auto}
.dashboard-head{padding:30px 34px 0}
.dashboard-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-top:18px;padding:30px;border:1px solid rgba(93,154,242,.20);border-radius:20px;background:linear-gradient(135deg,#eff5ff 0%,#dfeaff 48%,#cbdcf7 100%);box-shadow:0 14px 34px rgba(33,72,133,.12)}
.dashboard-hero-copy{min-width:0;max-width:720px}
.dashboard-eyebrow,.dashboard-kicker{margin:0 0 7px;color:#4478c9;font-size:11px;font-weight:800;letter-spacing:.13em}
.dashboard-hero h1{margin:0;color:#14294b;font-size:clamp(26px,3vw,40px);line-height:1.15;letter-spacing:-.02em}
.dashboard-hero p:not(.dashboard-eyebrow){margin:12px 0 0;color:#48607f;font-size:15px;line-height:1.65}
.dashboard-hero-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px;flex:0 0 auto}
.dashboard-secondary{background:rgba(255,255,255,.68);border-color:rgba(65,112,182,.28);color:#214d8d}
.dashboard-secondary:hover{background:#fff;border-color:#6c9fe6;color:#173d78}
.dashboard-body{padding:20px 34px 38px}
.dashboard-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.dashboard-stat{display:flex;align-items:center;gap:13px;min-width:0;padding:16px 17px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:0 5px 16px rgba(24,43,77,.05)}
.dashboard-stat-icon{display:grid;place-items:center;width:40px;height:40px;flex:0 0 auto;border-radius:12px;background:#e9f1ff;color:#2864c6;font-size:18px}
.dashboard-stat strong{display:block;color:var(--ink);font-size:22px;line-height:1.1}
.dashboard-stat span{display:block;margin-top:3px;color:var(--muted);font-size:12px}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:16px}
.dashboard-card{min-width:0;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:0 6px 18px rgba(24,43,77,.05)}
.dashboard-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.dashboard-card-head h2,.dashboard-guide-card h2{margin:0;color:var(--ink);font-size:18px}
.dashboard-card-head .dashboard-kicker,.dashboard-guide-card .dashboard-kicker{margin-bottom:4px}
.dashboard-list,.dashboard-template-list{display:grid;gap:8px}
.dashboard-item,.dashboard-template-item{display:flex;align-items:center;gap:11px;min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:var(--panel-soft);cursor:pointer;transition:background var(--motion-fast) var(--ease-smooth),border-color var(--motion-fast) var(--ease-smooth),transform var(--motion-fast) var(--ease-smooth)}
.dashboard-item:hover,.dashboard-template-item:hover{background:#f1f6ff;border-color:#b9cdef;transform:translateY(-1px)}
.dashboard-item-icon{display:grid;place-items:center;width:32px;height:32px;flex:0 0 auto;border-radius:9px;background:#eaf2ff;color:#2d66c5}
.dashboard-item-copy{min-width:0;flex:1}
.dashboard-item-copy strong,.dashboard-item-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dashboard-item-copy strong{color:var(--ink);font-size:14px}
.dashboard-item-copy small{margin-top:3px;color:var(--muted);font-size:11px}
.dashboard-empty{padding:18px 12px;border:1px dashed var(--line);border-radius:11px;color:var(--muted);font-size:13px;line-height:1.55;text-align:center}
.dashboard-guide-card{display:flex;align-items:center;gap:14px;margin-top:16px;background:linear-gradient(135deg,#f7faff 0%,#edf4ff 100%)}
.dashboard-guide-card>div:nth-child(2){min-width:0;flex:1}
.dashboard-guide-card p:not(.dashboard-kicker){margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.55}
.dashboard-guide-icon{display:grid;place-items:center;width:46px;height:46px;flex:0 0 auto;border-radius:14px;background:linear-gradient(135deg,#3276df,#214db6);color:#fff;font-size:22px;box-shadow:0 8px 18px rgba(39,91,188,.24)}
html[data-theme="dark"] .dashboard-view{background:#0e192b;color:#e7eef9}
html[data-theme="dark"] .dashboard-hero{border-color:#31517c;background:linear-gradient(135deg,#1b3760 0%,#173052 48%,#132843 100%);box-shadow:0 14px 34px rgba(0,0,0,.18)}
html[data-theme="dark"] .dashboard-eyebrow,html[data-theme="dark"] .dashboard-kicker{color:#9ec4ff}
html[data-theme="dark"] .dashboard-hero h1{color:#f1f6ff}
html[data-theme="dark"] .dashboard-hero p:not(.dashboard-eyebrow){color:#bed0e7}
html[data-theme="dark"] .dashboard-secondary{background:#172945;border-color:#385473;color:#dceaff}
html[data-theme="dark"] .dashboard-secondary:hover{background:#203858;border-color:#5579a8}
html[data-theme="dark"] .dashboard-stat,html[data-theme="dark"] .dashboard-card{background:#13233b;border-color:#2a4264;box-shadow:0 6px 18px rgba(0,0,0,.14)}
html[data-theme="dark"] .dashboard-stat-icon,html[data-theme="dark"] .dashboard-item-icon{background:#1b3760;color:#a9caff}
html[data-theme="dark"] .dashboard-stat strong,html[data-theme="dark"] .dashboard-card-head h2,html[data-theme="dark"] .dashboard-guide-card h2,html[data-theme="dark"] .dashboard-item-copy strong{color:#eef5ff}
html[data-theme="dark"] .dashboard-stat span,html[data-theme="dark"] .dashboard-item-copy small,html[data-theme="dark"] .dashboard-guide-card p:not(.dashboard-kicker),html[data-theme="dark"] .dashboard-empty{color:#9eb1c9}
html[data-theme="dark"] .dashboard-item,html[data-theme="dark"] .dashboard-template-item{background:#0f1d31;border-color:#2a4264}
html[data-theme="dark"] .dashboard-item:hover,html[data-theme="dark"] .dashboard-template-item:hover{background:#172c49;border-color:#4d75ad}
html[data-theme="dark"] .dashboard-empty{border-color:#385473}
html[data-theme="dark"] .dashboard-guide-card{background:linear-gradient(135deg,#172945 0%,#13233b 100%)}

@media (max-width:1100px){
  .dashboard-head{padding-left:24px;padding-right:24px}
  .dashboard-body{padding-left:24px;padding-right:24px}
  .dashboard-hero{padding:24px}
  .dashboard-grid{grid-template-columns:1fr}
}
@media (max-width:860px){
  .dashboard-view{min-height:calc(100vh - 60px)}
  .dashboard-head{padding:22px 18px 0}
  .dashboard-hero{align-items:stretch;flex-direction:column;gap:18px;padding:22px;border-radius:16px}
  .dashboard-hero h1{font-size:28px}
  .dashboard-hero p:not(.dashboard-eyebrow){font-size:14px}
  .dashboard-hero-actions{justify-content:stretch}
  .dashboard-hero-actions .btn{flex:1 1 180px}
  .dashboard-body{padding:16px 18px 30px}
  .dashboard-stats{grid-template-columns:1fr;gap:9px}
  .dashboard-grid{gap:12px}
  .dashboard-card{padding:16px}
  .dashboard-guide-card{align-items:flex-start;flex-wrap:wrap}
  .dashboard-guide-card .btn{width:100%}
}
@media (max-width:420px){
  .dashboard-head{padding-left:14px;padding-right:14px}
  .dashboard-body{padding-left:14px;padding-right:14px}
  .dashboard-hero{padding:18px}
  .dashboard-hero h1{font-size:25px}
  .dashboard-hero-actions{flex-direction:column}
  .dashboard-hero-actions .btn{width:100%}
}


/* ---------- กล่องแก้ตาราง Excel ให้เป็นแนวนอน ----------
   `.sheet-editor-card{width:min(1280px,100%)}` ประกาศไว้ก่อน `.modal-card{width:min(620px,100%)}`
   ความเฉพาะเจาะจงเท่ากัน (0,1,0) ตัวที่อยู่ทีหลังจึงชนะ กล่องเลยกว้างแค่ 605 px
   ทั้งที่ตั้งใจให้กว้าง 1280 — ตารางเห็นแค่ 5 คอลัมน์ ต้องเลื่อนแนวนอนตลอด

   แก้ด้วยการเพิ่มความเฉพาะเจาะจงเป็น (0,2,0) และวางไว้ท้ายไฟล์
   ชนะทั้งด้วยความเฉพาะเจาะจงและลำดับ ไม่ต้องไปขยับโค้ดเดิมของใคร

   **ต้องอิง 100vw ไม่ใช่ 100%** เพราะ .modal เป็น grid ที่ place-items:center
   ความกว้างของช่อง grid มาจาก max-content ของกล่อง ซึ่งตารางข้างในดันให้กว้างเกินจอได้
   ใช้ 100% แล้วกล่องจะกว้าง 1021 px บนจอ 820 px (ล้นออกนอกจอ) */
.modal-card.sheet-editor-card{
  width:min(1500px,calc(100vw - 36px));
  height:min(880px,calc(100vh - 36px));
}

/* ---------- พื้นที่ Word แบบหน้าต่างลอย ----------
   หน้าแก้เอกสารไม่พาออกจากคลัง: ยก layout ที่มีฟอร์ม, ribbon และ A4 ขึ้นมาเป็น
   work window เดียวกันกับ Excel โดยมีฉากหลังคลังอยู่ด้านหลัง กด “× ปิด” จะบันทึก
   และกลับไปคลังตามพฤติกรรมเดิม */
body.word-editor-floating::before{
  content:"";position:fixed;inset:0;z-index:45;
  background:rgba(24,35,52,.45);backdrop-filter:blur(2px);
}
body.word-editor-floating .layout{
  position:fixed;z-index:50;top:18px;left:18px;
  width:calc(100vw - 36px);height:calc(100vh - 36px);
  overflow:hidden;border:1px solid #cbd6e4;border-radius:16px;
  background:#fff;box-shadow:0 22px 60px rgba(15,32,58,.32);
}
body.word-editor-floating .preview-float-actions{display:flex}
body.word-editor-floating .app-sidebar{background:#f7f9fc}
body.word-editor-floating .panel{background:#fff}
body.word-editor-floating .topbar{pointer-events:none}
html[data-theme="dark"] body.word-editor-floating .layout{border-color:#304867;background:#13223a}
html[data-theme="dark"] body.word-editor-floating .app-sidebar{background:#102139}
html[data-theme="dark"] body.word-editor-floating .panel{background:#13223a}

@media (max-width:860px){
  body.word-editor-floating::before{display:none}
  body.word-editor-floating .layout{
    top:0;left:0;width:100vw;height:100dvh;border:0;border-radius:0;
    box-shadow:none;overflow:auto;
  }
  body.word-editor-floating .preview-float-actions{width:100%;justify-content:flex-end}
  .ribbon-document-actions{margin-left:0}
}

/* ช่องในตารางแคบลงหน่อย จะได้เห็นคอลัมน์มากขึ้นในความกว้างเท่าเดิม
   112px เดิมกว้างเกินจำเป็นสำหรับข้อมูลอย่างเลขที่หนังสือหรือจำนวนเงิน */
.sheet-grid th,.sheet-grid td{min-width:96px}


/* Full-width view placement beside the left navigation */
.layout.view-library > .library,
.layout.view-template > .template-library,
.layout.view-dashboard > .dashboard-view{grid-column:2 / -1;min-width:0}
@media (max-width:860px){
  .layout.view-library > .library,
  .layout.view-template > .template-library,
  .layout.view-dashboard > .dashboard-view{grid-column:auto}
}


/* ---------- Help center and onboarding ---------- */
.modal-subtitle{margin:3px 0 0;color:var(--muted);font-size:12px}
.help-card{width:min(820px,100%)}
.help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.help-section{display:flex;align-items:flex-start;gap:11px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel-soft)}
.help-section-icon{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:#eaf2ff;color:#2e6bcf;font-size:17px}
.help-section h4{margin:1px 0 5px;color:var(--ink);font-size:14px}
.help-section p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.6}
.help-section p strong{color:var(--ink)}
.onboarding-modal{padding:18px}
.onboarding-card{width:min(620px,100%);overflow:hidden}
.onboarding-brand{display:flex;align-items:center;gap:10px;padding:20px 22px;background:linear-gradient(135deg,#173d84,#2869ca);color:#fff}
.onboarding-brand .brand-mark{background:rgba(255,255,255,.16);color:#fff}
.onboarding-brand>span:nth-child(2){display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.onboarding-brand strong{font-size:16px}
.onboarding-brand small{color:#cfe1ff;font-size:12px}
.onboarding-brand .iconbtn{color:#d9e8ff}
.onboarding-body{padding:26px 26px 20px}
.onboarding-eyebrow{margin:0 0 7px;color:var(--brand);font-size:11px;font-weight:800;letter-spacing:.14em}
.onboarding-body h2{margin:0;color:var(--ink);font-size:25px;line-height:1.25}
.onboarding-intro{margin:9px 0 20px;color:var(--muted);font-size:14px;line-height:1.65}
.onboarding-steps{display:grid;gap:10px}
.onboarding-step{display:flex;gap:12px;padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:var(--panel-soft)}
.onboarding-step>span{display:grid;place-items:center;width:32px;height:32px;flex:0 0 auto;border-radius:9px;background:#eaf2ff;color:#2b67c7;font-size:11px;font-weight:800}
.onboarding-step strong{display:block;color:var(--ink);font-size:14px}
.onboarding-step p{margin:3px 0 0;color:var(--muted);font-size:12.5px;line-height:1.55}
.onboarding-foot{align-items:center}
.onboarding-foot .chk{margin:0;flex:1;color:var(--muted);font-size:12px}
html[data-theme="dark"] .help-section,html[data-theme="dark"] .onboarding-step{background:#102139;border-color:#2c4568}
html[data-theme="dark"] .help-section-icon,html[data-theme="dark"] .onboarding-step>span{background:#1b3760;color:#a9caff}
html[data-theme="dark"] .help-section h4,html[data-theme="dark"] .help-section p strong,html[data-theme="dark"] .onboarding-body h2,html[data-theme="dark"] .onboarding-step strong{color:#eef5ff}
html[data-theme="dark"] .onboarding-brand{background:linear-gradient(135deg,#102c5f,#1e5aaf)}
@media (max-width:860px){
  .help-card{max-height:calc(100vh - 20px)}
  .help-grid{grid-template-columns:1fr}
  .onboarding-body{padding:22px 18px 16px}
  .onboarding-brand{padding:16px 18px}
  .onboarding-foot{align-items:stretch;flex-direction:column}
  .onboarding-foot .chk{width:100%}
  .onboarding-foot .btn{width:100%}
}
@media (max-width:520px){
  .help-section{padding:12px}
  .onboarding-body h2{font-size:22px}
}


/* ---------- สูตรและรูปแบบในตาราง Excel ---------- */
.sheet-tool-sep{display:inline-block;width:1px;height:18px;background:var(--line);margin:0 4px;vertical-align:middle}
/* ช่องที่เก็บสูตรไว้ ทำเครื่องหมายมุมซ้ายบนให้รู้ว่าค่าที่เห็นคือผลลัพธ์ ไม่ใช่ตัวเลขที่พิมพ์เอง */
.sheet-grid td.sheet-cell-formula{position:relative}
.sheet-grid td.sheet-cell-formula::before{
  content:'';position:absolute;top:0;left:0;
  border-top:6px solid var(--brand);border-right:6px solid transparent;
}
/* ค่าที่คิดจากสูตรแล้วผิด ให้เห็นชัดว่าต้องแก้ */
.sheet-grid td.sheet-cell-error input{color:#b4232a;font-weight:600}
.sheet-grid td.fmt-bold input{font-weight:700}
.sheet-grid td.fmt-left input{text-align:left}
.sheet-grid td.fmt-center input{text-align:center}
.sheet-grid td.fmt-right input{text-align:right}
/* ตัวเลขที่ใส่ตัวคั่นหลักพัน ชิดขวาเสมอตามธรรมเนียมบัญชี */
.sheet-grid td.fmt-comma input{text-align:right;font-variant-numeric:tabular-nums}
.sheet-print td.fmt-bold{font-weight:700}
.sheet-print td.fmt-center{text-align:center}
.sheet-print td.fmt-right,.sheet-print td.fmt-comma{text-align:right}

/* ---------- เลือกหลายช่องในตาราง ---------- */
.sheet-grid td.is-selected{background:#e8f0fb}
.sheet-grid td.is-selected input{background:transparent}
/* ตอนลากเลือก ห้ามให้เบราว์เซอร์ไปไฮไลต์ข้อความในช่องแทน */
.sheet-grid.is-dragging{user-select:none}


/* ---------- Electronic signature workflow ---------- */
.signature-status{display:flex;align-items:center;gap:7px;max-width:min(100%,520px);margin-left:10px;padding:5px 9px;border:1px solid #b9d3ff;border-radius:999px;background:#eef5ff;color:#234a87;font-size:11px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.signature-status strong{overflow:hidden;text-overflow:ellipsis}
.signature-badge,.signature-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:999px;background:#d9f4e4;color:#17683b;font-size:10px;font-weight:800;white-space:nowrap}
.document-signed .panel{opacity:.96}
.document-signed .panel-head{border-bottom-color:#a8c7ec}
.document-signed .preview-bar{background-image:linear-gradient(90deg,rgba(18,105,66,.08),transparent)}
.signed-document-row{border-color:#b9dfc8}
.signed-document-row .lib-name{padding-right:4px}
.signed-document-row .lib-meta{color:#28734d}
.signed-document-row .lib-side{gap:5px}
.signature-card{width:min(650px,100%)}
.signature-warning{display:flex;align-items:flex-start;gap:9px;margin-bottom:14px;padding:12px 13px;border:1px solid #f2d48b;border-radius:11px;background:#fff8e7;color:#76510b;font-size:12px;line-height:1.55}
.signature-warning:before{content:'!';display:grid;place-items:center;width:21px;height:21px;flex:0 0 auto;border-radius:50%;background:#f4c94e;color:#624300;font-weight:900}
.signature-summary{display:flex;flex-direction:column;gap:3px;margin-bottom:15px;padding:12px 13px;border:1px solid var(--line);border-radius:11px;background:var(--panel-soft)}
.signature-summary strong{color:var(--ink);font-size:14px}
.signature-summary span{color:var(--muted);font-size:12px}
.signature-consent{display:flex;align-items:flex-start;gap:9px;margin-top:5px;color:var(--muted);font-size:12px;line-height:1.55}
.signature-consent input{margin-top:3px;flex:0 0 auto}
.signature-history-status{display:flex;align-items:center;gap:9px;margin-bottom:15px;padding:12px 13px;border:1px solid #b9dfc8;border-radius:11px;background:#f0fbf4;color:#17683b;font-size:13px}
.signature-details{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 12px;margin:0 0 18px;padding:13px;border:1px solid var(--line);border-radius:11px;background:var(--panel-soft);font-size:12px}
.signature-details dt{color:var(--muted);font-weight:700}
.signature-details dd{margin:0;overflow-wrap:anywhere;color:var(--ink)}
.signature-audit-title{margin:0 0 8px;color:var(--ink);font-size:13px;font-weight:800}
.signature-audit-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.signature-audit-list li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 12px;border-left:3px solid #6c9fea;border-radius:0 9px 9px 0;background:var(--panel-soft)}
.signature-audit-list strong{color:var(--ink);font-size:12px}
.signature-audit-list small{color:var(--muted);font-size:10px;text-align:right}
.signature-audit-list p{grid-column:1/-1;margin:2px 0 0;color:var(--muted);font-size:11px;line-height:1.5}
.signature-verification{margin-top:14px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel-soft);color:var(--muted);font-size:11px;line-height:1.5;overflow-wrap:anywhere}
.signature-verification.valid{border-color:#9ed4b5;background:#effbf3;color:#17683b}
.signature-verification.invalid{border-color:#e7a3a3;background:#fff2f2;color:#9d3030}
.paper.paper-locked{position:relative}
.paper.paper-locked:after{content:'✓ ลงนามและล็อกแล้ว';position:absolute;right:10mm;bottom:8mm;padding:4px 8px;border:1px solid #a8d8ba;border-radius:5px;background:rgba(240,251,244,.92);color:#17683b;font-family:Sarabun,system-ui,sans-serif;font-size:10pt;line-height:1}
.signed-print-footer{display:flex;flex-direction:column;gap:2px;margin:12mm 0 0;padding:3mm 0 0;border-top:1px solid #b7c4d5;color:#43546b;font-family:Sarabun,system-ui,sans-serif;font-size:9pt;line-height:1.35}
.signed-print-footer strong{color:#17683b;font-size:10pt}
.signed-print-footer small{font-size:7pt;overflow-wrap:anywhere}
html[data-theme="dark"] .signature-status{border-color:#315d96;background:#142b4b;color:#cfe1ff}
html[data-theme="dark"] .signature-badge,html[data-theme="dark"] .signature-pill{background:#173f2b;color:#9ee0b8}
html[data-theme="dark"] .signature-warning{border-color:#775e28;background:#332b14;color:#f8d98a}
html[data-theme="dark"] .signature-warning:before{background:#bd942f;color:#211a07}
html[data-theme="dark"] .signature-history-status{border-color:#2e6c49;background:#123221;color:#9ee0b8}
html[data-theme="dark"] .signature-audit-list li{border-left-color:#538bdc}
html[data-theme="dark"] .paper.paper-locked:after{border-color:#4c9970;background:rgba(235,251,241,.94);color:#17683b}
html[data-theme="dark"] .signed-print-footer{border-top-color:#61718a;color:#64748b}
@media (max-width:900px){
  .signature-status{max-width:100%;margin:5px 0 0;white-space:normal;border-radius:10px}
  .signature-details{grid-template-columns:1fr}
  .signature-details dt{margin-top:3px}
}
@media (max-width:520px){
  .signature-card .modal-foot{flex-direction:column;align-items:stretch}
  .signature-card .modal-foot .btn{width:100%}
  .signature-history-status{align-items:flex-start;flex-direction:column;gap:6px}
  .signature-audit-list li{grid-template-columns:1fr}
  .signature-audit-list small{text-align:left}
}


/* ---------- ช่องที่ผสานกัน ---------- */
/* พื้นต่างจากช่องปกตินิดหน่อย ให้เห็นว่านี่คือช่องที่ผสานไว้ */
.sheet-grid td.is-merged{background:#fbfcfe}
.sheet-grid td.is-merged input{height:100%}
.sheet-print td[colspan],.sheet-print td[rowspan]{background:#fbfcfe}

/* ---------- ลากปรับขนาดช่องตาราง ---------- */
/* ต้องเป็น fixed ไม่งั้นความกว้างที่ตั้งใน colgroup จะถูกเนื้อหาในช่องดันจนเพี้ยน */
.sheet-grid{table-layout:fixed}
.sheet-grid th,.sheet-grid td{min-width:0}
.sheet-grid .sheet-col-head,.sheet-grid .sheet-row-head{position:relative;overflow:hidden}

/* แถบจับลาก กว้าง 6px คร่อมเส้นขอบ เล็งง่ายกว่าการเล็งเส้น 1px */
.sheet-grip{position:absolute;z-index:2}
.sheet-grip-col{top:0;right:-3px;width:6px;height:100%;cursor:col-resize}
.sheet-grip-row{left:0;bottom:-3px;height:6px;width:100%;cursor:row-resize}
.sheet-grip:hover{background:var(--brand);opacity:.35}

/* เคอร์เซอร์ให้ตรงกับสิ่งที่ทำได้ตรงนั้น
   บนช่อง = กากบาทแบบตาราง  กำลังพิมพ์อยู่ = ขีดพิมพ์  หัวแถว/คอลัมน์ = ลูกศรปกติ */
.sheet-grid td input{cursor:cell}
.sheet-grid td input:focus{cursor:text}
.sheet-grid .sheet-col-head,.sheet-grid .sheet-row-head,.sheet-grid .sheet-corner{cursor:default}


/* ---------- Quick local identity + signature history cards ---------- */
.signature-quick-identity{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 12px;align-items:center;margin:8px 0 15px;padding:12px 13px;border:1px solid #b9d3ff;border-radius:13px;background:linear-gradient(135deg,#f2f7ff,#f8fbff);box-shadow:0 7px 18px rgba(36,87,214,.06)}
.signature-quick-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.signature-quick-copy strong{color:var(--ink);font-size:13px}
.signature-quick-copy span,.signature-quick-identity small{color:var(--muted);font-size:11px;line-height:1.45}
.signature-quick-identity small{grid-column:1/-1}
.quick-identity-btn{min-height:38px;border-color:#9bbcff;background:#e9f1ff;color:#2457d6;font-size:12px;font-weight:800;white-space:nowrap}
.quick-identity-btn:hover,.quick-identity-btn.is-ready{border-color:#5b9cf6;background:#dceaff;color:#173f91}
.quick-identity-btn.is-ready:before{content:'✓ ';font-weight:900}
.signature-history-status{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;margin-bottom:15px;padding:14px 15px;border:1px solid #b9dfc8;border-radius:14px;background:linear-gradient(135deg,#f1fcf4,#fbfffc);box-shadow:0 8px 22px rgba(23,104,59,.07)}
.signature-status-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#d8f3e1;color:#17683b;font-size:18px;font-weight:900}
.signature-status-copy{display:flex;flex-direction:column;gap:1px;min-width:0}
.signature-status-copy strong{color:#17683b;font-size:14px}
.signature-status-copy span{overflow:hidden;color:#4b6a58;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.signature-status-date{color:#527161;font-size:10px;text-align:right;white-space:nowrap}
.signature-detail-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:19px;padding:0;border:0;background:transparent}
.signature-detail-card{display:flex;align-items:flex-start;gap:9px;min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel-soft);box-shadow:0 5px 15px rgba(22,48,89,.04);transition:transform var(--motion-fast) var(--ease-smooth),border-color var(--motion-fast) var(--ease-smooth)}
.signature-detail-card:hover{border-color:#9fbeef;transform:translateY(-1px)}
.signature-detail-icon{display:grid;place-items:center;width:27px;height:27px;flex:0 0 auto;border-radius:9px;background:#e8f0ff;color:#3568bd;font-size:13px;font-weight:900}
.signature-detail-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.signature-detail-copy small{color:var(--muted);font-size:10px;font-weight:700}
.signature-detail-copy strong{overflow-wrap:anywhere;color:var(--ink);font-size:12px;line-height:1.45}
.signature-history-cards{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.signature-history-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:11px 12px;border:1px solid var(--line);border-left:3px solid #6c9fea;border-radius:11px;background:var(--panel-soft);box-shadow:0 5px 15px rgba(22,48,89,.035);transition:transform var(--motion-fast) var(--ease-smooth),box-shadow var(--motion-fast) var(--ease-smooth)}
.signature-history-card:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(22,48,89,.08)}
.signature-event-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#edf4ff;color:#3568bd;font-size:13px;font-weight:900}
.signature-event-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.signature-event-copy strong{color:var(--ink);font-size:12px}
.signature-event-copy small{color:var(--muted);font-size:10px}
.signature-event-copy p{margin:3px 0 0;color:var(--muted);font-size:11px;line-height:1.45}
html[data-theme="dark"] .signature-quick-identity{border-color:#315d96;background:linear-gradient(135deg,#152b49,#17243a);box-shadow:0 8px 22px rgba(0,0,0,.12)}
html[data-theme="dark"] .quick-identity-btn{border-color:#315d96;background:#1a3860;color:#cfe1ff}
html[data-theme="dark"] .quick-identity-btn:hover,html[data-theme="dark"] .quick-identity-btn.is-ready{border-color:#5b9cf6;background:#234a7e;color:#fff}
html[data-theme="dark"] .signature-history-status{border-color:#2e6c49;background:linear-gradient(135deg,#123221,#152d24);box-shadow:0 8px 22px rgba(0,0,0,.12)}
html[data-theme="dark"] .signature-status-mark{background:#1b4a31;color:#9ee0b8}
html[data-theme="dark"] .signature-status-copy strong{color:#9ee0b8}
html[data-theme="dark"] .signature-status-copy span,html[data-theme="dark"] .signature-status-date{color:#a5c3b0}
html[data-theme="dark"] .signature-detail-icon,html[data-theme="dark"] .signature-event-icon{background:#1b365a;color:#b9d5ff}
@media (max-width:620px){
  .signature-quick-identity{grid-template-columns:1fr}
  .quick-identity-btn{width:100%}
  .signature-detail-cards{grid-template-columns:1fr}
  .signature-history-status{grid-template-columns:auto minmax(0,1fr)}
  .signature-status-date{grid-column:2;text-align:left}
}


/* ---------- ลดความจ้าของหน้าจอ ---------- */
/* ผู้ใช้แจ้งว่าแสบตาเมื่อ 22 ส.ค. 2569
   ต้นเหตุคือพื้นสีขาวล้วน (#fff) ผืนใหญ่หลายผืนพร้อมกัน — แถบบน แถบข้าง แผงฟอร์ม
   หน้าคลัง การ์ด และตาราง รวมแล้วเกินครึ่งจอเป็นขาว 100%

   ในไฟล์นี้เขียนสีขาวตรง ๆ ไว้ 121 จุด การไล่แก้ทีละจุดเสี่ยงชนกับงานที่แก้อยู่พร้อมกัน
   จึงเขียนทับเฉพาะ *พื้นผืนใหญ่* ไว้ท้ายไฟล์ ชนะด้วยลำดับ ของเล็ก ๆ ปล่อยไว้ตามเดิม

   **ทุกกฎในบล็อกนี้จำกัดไว้เฉพาะโหมดสว่างด้วย html:not([data-theme="dark"])**
   ตอนแรกเขียนเป็น .topbar เฉย ๆ แล้วไปทับกฎของโหมดมืดจนแถบบนกลายเป็นสีสว่าง
   การจำกัดแบบนี้ปลอดภัยกว่าการหวังว่าความเฉพาะเจาะจงของโหมดมืดจะสูงกว่าเสมอ
   เพราะกฎของโหมดมืดถูกแก้จากอีกที่อยู่ตลอด

   **กระดาษเอกสาร (.paper) ยังขาวล้วนโดยตั้งใจ** เพราะต้องเหมือนกระดาษจริงที่จะพิมพ์ออกมา
   ถ้าทำให้หม่นลง สิ่งที่เห็นบนจอจะไม่ตรงกับสิ่งที่ได้บนกระดาษ */
html:not([data-theme="dark"]){
  --bg:#e9edf5;        /* พื้นนอกสุด เทาอมฟ้า */
  --panel:#f7f9fc;     /* แถบบน แถบข้าง แผงฟอร์ม — ไม่ใช่ขาวล้วนอีกต่อไป */
  --surface:#fcfdff;   /* การ์ด กล่อง ตาราง — ขาวนวล ไม่จ้า */
  --line:#d3dbe8;      /* เส้นขอบเข้มขึ้นเล็กน้อย จะได้ไม่ต้องเพ่งหาโครงหน้าจอ */
  --ink:#242d3d;
  --muted:#65708a;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 6px 18px rgba(16,24,40,.06);
}

/* พื้นผืนใหญ่ */
html:not([data-theme="dark"]) .app-sidebar,
html:not([data-theme="dark"]) .topbar,
html:not([data-theme="dark"]) .library,
html:not([data-theme="dark"]) .template-library,
html:not([data-theme="dark"]) .panel{background:var(--panel)}

/* ผิวของกล่องและการ์ด
   .btn.ghost ถูกประกาศทับด้วยสีขาวอีกทีในไฟล์ ความเฉพาะเจาะจงสูงกว่า .btn
   จึงต้องเขียนถึงชื่อคลาสให้ครบ ไม่งั้นปุ่มบนแถบบนยังขาวล้วนอยู่

   **ต้องยกเว้น .primary และปุ่มพื้นสีอื่นทั้งหมด** ตัวเลือกนี้มีความเฉพาะเจาะจง (0,2,1)
   ซึ่งสูงกว่า .btn.primary (0,2,0) พอไม่ยกเว้น พื้นปุ่มสีน้ำเงินจะกลายเป็นขาว
   แล้วตัวหนังสือสีขาวบนปุ่มจะหายไปกับพื้น (คอนทราสต์เหลือ 1.02:1 — พลาดมาแล้ว) */
html:not([data-theme="dark"]) .modal-card,
html:not([data-theme="dark"]) .lib-row,
html:not([data-theme="dark"]) .lib-item,
html:not([data-theme="dark"]) .btn:not(.primary):not(.danger):not(.brand),
html:not([data-theme="dark"]) .btn.ghost:not(.primary),
html:not([data-theme="dark"]) .lib-input,
html:not([data-theme="dark"]) .sheet-grid,
html:not([data-theme="dark"]) .sheet-grid td input{background:var(--surface)}
html:not([data-theme="dark"]) .lib-empty{background:var(--panel)}

/* เงาที่แรงเกินไปทำให้ขอบภาพสั่นตา ลดลงทั้งชุด */
html:not([data-theme="dark"]) .modal-card{box-shadow:0 16px 44px rgba(15,23,42,.18),0 2px 8px rgba(15,23,42,.08)}
html:not([data-theme="dark"]) .lib-cta{box-shadow:0 1px 2px rgba(16,24,40,.08),0 4px 12px rgba(28,68,120,.14)}


/* =====================================================================
   SarabanAI Design System v1 — semantic theme tokens and primitives
   ---------------------------------------------------------------------
   ใช้ role ของสีแทนการผูกกับชื่อ component เพื่อให้หน้า Dashboard,
   คลังเอกสาร, editor, modal และสถานะต่าง ๆ ใช้ภาษาออกแบบเดียวกัน
   ===================================================================== */
html[data-theme="dark"]{
  --bg:#0f1828;
  --bg-subtle:#111f35;
  --panel:#13233b;
  --panel-soft:#0f1d31;
  --panel-raised:#172945;
  --line:#2a4264;
  --line-strong:#385473;
  --ink:#e9f2fd;
  --ink-strong:#f5f8ff;
  --muted:#9eb1c9;
  --brand:#5b9cf6;
  --brand-strong:#82b5ff;
  --brand-soft:#1b3760;
  --brand-ink:#071a35;
  --danger:#ff8e88;
  --danger-soft:#3b2025;
  --success:#77d99d;
  --success-soft:#123221;
  --warning:#f5cc70;
  --warning-soft:#332b14;
  --focus:#a9d0ff;
  --shadow-1:0 1px 2px rgba(0,0,0,.20);
  --shadow-2:0 8px 24px rgba(0,0,0,.18);
  --shadow-3:0 18px 48px rgba(0,0,0,.28);
}

:where(body,.btn,.linkbtn,.iconbtn,.fld input,.fld select,.fld textarea,.lib-input,
  .lib-search,.word-tool,.word-size,.word-ribbon-tab,.mainnav button){
  font-family:var(--ui-font);
}
body{font-size:var(--text-body);line-height:var(--leading-body)}

/* Typography roles */
:where(h1,h2,h3,h4,p){text-wrap:pretty}
:where(h1,h2,h3,h4){color:var(--ink-strong)}
:where(.panel-head h2,.lib-title,.dashboard-card-head h2,.dashboard-guide-card h2){font-weight:750;line-height:var(--leading-tight)}

/* Control primitive */
.btn{
  min-height:40px;padding:9px 15px;border-radius:var(--radius-md);
  border:1px solid var(--line);background:var(--panel-raised);color:var(--ink);
  box-shadow:var(--shadow-1);transition:transform var(--motion-fast) var(--ease-smooth),
    background-color var(--motion-fast) var(--ease-smooth),border-color var(--motion-fast) var(--ease-smooth),
    box-shadow var(--motion-fast) var(--ease-smooth),color var(--motion-fast) var(--ease-smooth);
}
.btn:hover:not(:disabled){background:var(--bg-subtle);border-color:var(--line-strong);box-shadow:var(--shadow-1),0 4px 10px rgba(30,59,104,.06)}
.btn:active:not(:disabled),.linkbtn:active:not(:disabled),.iconbtn:active:not(:disabled){transform:scale(.97)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);box-shadow:0 5px 14px rgba(29,78,137,.18)}
.btn.primary:hover:not(:disabled){background:var(--brand-strong);border-color:var(--brand-strong);color:var(--brand-ink);box-shadow:0 7px 18px rgba(29,78,137,.24)}
.btn.ghost{background:transparent;box-shadow:none}
.btn.tiny{min-height:36px;padding:6px 11px}
.btn:disabled,.linkbtn:disabled,.iconbtn:disabled{cursor:not-allowed;opacity:.55;transform:none;box-shadow:none}
.linkbtn,.iconbtn{transition:transform var(--motion-fast) var(--ease-smooth),color var(--motion-fast) var(--ease-smooth),background-color var(--motion-fast) var(--ease-smooth)}
.iconbtn{border-radius:var(--radius-sm)}

/* Form primitive */
:where(.fld input[type=text],.fld input[type=number],.fld input[type=date],.fld select,.fld textarea,.lib-input,.ai-draft-input){
  background:var(--panel-raised);border-color:var(--line);color:var(--ink);border-radius:var(--radius-md);
  transition:border-color var(--motion-fast) var(--ease-smooth),box-shadow var(--motion-fast) var(--ease-smooth),background-color var(--motion-fast) var(--ease-smooth);
}
:where(.fld input[type=text],.fld input[type=number],.fld input[type=date],.fld select,.fld textarea,.lib-input,.ai-draft-input):focus{
  border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent);outline:0;
}
.fld>span,.hint,.lib-sub,.lib-crumb,.panel-foot{line-height:var(--leading-body)}

/* Shared surfaces */
:where(.panel,.library,.dashboard-card,.dashboard-stat,.modal-card,.tpl-save-card,.signature-summary,.shortcut-row){
  border-color:var(--line);
}

/* Preserve document canvas as an immutable white paper surface in both themes. */
.paper,.paper-preview,.print-paper,.doc-paper{background:#fff;color:#1b1b1b}

@media (prefers-reduced-motion:reduce){
  .btn,.linkbtn,.iconbtn,.fld input,.fld select,.fld textarea,.lib-input,.ai-draft-input{transition:none}
}
@media print{
  .btn,.linkbtn,.iconbtn{transition:none !important;box-shadow:none !important}
}


/* =====================================================================
   SarabanAI Design System v1 — component recipes
   ===================================================================== */
/* Surface hierarchy */
.topbar,.panel,.library{background:var(--panel);color:var(--ink)}
.app-sidebar{background:var(--bg-subtle);border-color:var(--line)}
.preview,.dashboard-view{background:var(--bg);color:var(--ink)}
.modal-card{background:var(--panel-raised);border-color:var(--line);box-shadow:var(--shadow-3),var(--shadow-2)}
.modal-head,.modal-foot{border-color:var(--line);background:var(--panel-raised)}
.modal-body{background:var(--panel-raised);color:var(--ink)}
/* ครอบส่วนหัว เนื้อหา และท้ายกล่องให้อยู่ในมุมโค้งเดียวกันเสมอ */
.modal-card{border-radius:var(--radius-lg)!important;overflow:hidden;isolation:isolate}

/* Card recipes */
.ds-card{min-width:0;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);box-shadow:var(--shadow-1),0 6px 18px color-mix(in srgb,var(--brand) 6%,transparent)}
.ds-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--line)}
.ds-card-header h2,.ds-card-header h3{margin:0;color:var(--ink-strong);font-size:var(--text-lg);line-height:var(--leading-tight)}
.ds-card-body{padding:var(--space-5)}
.ds-card-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-top:1px solid var(--line)}
.ds-card.interactive{transition:transform var(--motion-fast) var(--ease-smooth),border-color var(--motion-fast) var(--ease-smooth),box-shadow var(--motion-fast) var(--ease-smooth)}
.ds-card.interactive:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand) 44%,var(--line));box-shadow:var(--shadow-2)}

/* Button variants */
.btn.secondary{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 24%,var(--line));color:var(--brand)}
.btn.secondary:hover:not(:disabled){background:color-mix(in srgb,var(--brand) 18%,var(--panel));border-color:var(--brand)}
.btn.success{background:var(--success-soft);border-color:color-mix(in srgb,var(--success) 34%,var(--line));color:var(--success)}
.btn.warning{background:var(--warning-soft);border-color:color-mix(in srgb,var(--warning) 34%,var(--line));color:var(--warning)}
.btn.danger{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 28%,var(--line));color:var(--danger)}
.btn.icon-only{display:inline-grid;place-items:center;width:40px;padding:8px}
.btn.block{display:flex;width:100%;justify-content:center}

/* Semantic status badges */
.ds-status{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:4px 9px;border:1px solid var(--line);border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:750;line-height:1.2;white-space:nowrap}
.ds-status:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.ds-status.draft,.ds-status.info{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 25%,var(--line));color:var(--brand)}
.ds-status.success{background:var(--success-soft);border-color:color-mix(in srgb,var(--success) 28%,var(--line));color:var(--success)}
.ds-status.warning{background:var(--warning-soft);border-color:color-mix(in srgb,var(--warning) 28%,var(--line));color:var(--warning)}
.ds-status.danger{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 28%,var(--line));color:var(--danger)}

/* Existing surfaces adopt the same card language */
:where(.dashboard-card,.dashboard-stat,.lib-row,.sheet-template-row,.shortcut-row,.signature-detail-card,.signature-history-card){
  border-radius:var(--radius-lg);background:var(--panel);box-shadow:var(--shadow-1);border-color:var(--line);
}
:where(.dashboard-item,.dashboard-template-item){border-radius:var(--radius-md);background:var(--panel-soft);border-color:var(--line)}
:where(.lib-pill,.lib-ico){border-radius:var(--radius-md)}
:where(.lib-search,.lib-input){border-radius:var(--radius-md);background:var(--panel-raised);color:var(--ink)}
:where(.word-toolbar,.word-ribbon-tabs,.sheet-editor-tools){background:var(--panel-raised);color:var(--ink);border-color:var(--line)}
:where(.word-tool,.word-size,.word-font,.word-search){border-color:var(--line);color:var(--ink)}
:where(.word-tool:hover,.word-tool:focus,.word-size:focus,.word-font:focus,.word-search:focus){background:var(--brand-soft);border-color:var(--brand)}

/* Consistent modal rhythm */
.modal-card>.modal-head{padding:var(--space-4) var(--space-6)}
.modal-card>.modal-body{padding:var(--space-5) var(--space-6)}
.modal-card>.modal-foot{padding:var(--space-3) var(--space-6)}
.modal-card .modal-subtitle{margin:3px 0 0;color:var(--muted);font-size:var(--text-sm);line-height:var(--leading-body)}

@media (max-width:620px){
  .ds-card-header{padding:var(--space-3) var(--space-4)}
  .ds-card-body{padding:var(--space-4)}
  .ds-card-footer{align-items:stretch;flex-direction:column;padding:var(--space-3) var(--space-4)}
  .ds-card-footer .btn{width:100%}
  .modal-card>.modal-head{padding:var(--space-3) var(--space-4)}
  .modal-card>.modal-body{padding:var(--space-4)}
  .modal-card>.modal-foot{padding:var(--space-3) var(--space-4)}
}

@media print{
  /* UI recipes never affect the A4 paper surface during print. */
  .ds-card,.btn,.modal-card{box-shadow:none !important;transition:none !important}
}

/* ---------- Template Management components ----------
   SarabanAI Design System: command bar, filter chips, template cards, empty state */
.template-library .lib-head{max-width:1600px}
.tpl-command-bar{display:flex;align-items:center;gap:12px;margin:18px 0 10px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel-soft);box-shadow:var(--shadow-1)}
.tpl-search-wrap{position:relative;flex:1 1 360px;min-width:220px}
.tpl-search-field{position:relative;width:100%;min-width:0;margin:0}
.tpl-search-field .lib-input{padding-right:42px}
.tpl-search-clear{position:absolute;right:8px;top:50%;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;transform:translateY(-50%);border:0;border-radius:var(--radius-sm);background:transparent;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;transition:color var(--motion-fast) var(--ease-smooth),background var(--motion-fast) var(--ease-smooth)}
.tpl-search-clear:hover{background:var(--brand-soft);color:var(--brand)}
.tpl-search-clear:focus-visible,.tpl-favorite:focus-visible,.tpl-filter-chip:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.tpl-command-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.tpl-select-label{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;white-space:nowrap}
.tpl-select{min-height:38px;border:1px solid var(--line);border-radius:var(--radius-md);padding:0 28px 0 10px;background:var(--panel);color:var(--ink);font:inherit;cursor:pointer}
.tpl-select:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-color:var(--brand)}
.tpl-current-filter{margin:0;min-height:38px;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--panel);white-space:nowrap}
.tpl-reset-btn{min-height:38px}
.tpl-filter-tabs{display:flex;gap:8px;overflow:auto;padding:2px 2px 8px;scrollbar-width:thin}
.tpl-filter-chip{min-height:36px;flex:0 0 auto;border:1px solid var(--line);border-radius:var(--radius-pill);padding:0 13px;background:var(--panel);color:var(--muted);font:600 12px/1.2 inherit;cursor:pointer;transition:background var(--motion-fast) var(--ease-smooth),border-color var(--motion-fast) var(--ease-smooth),color var(--motion-fast) var(--ease-smooth),transform var(--motion-fast) var(--ease-smooth)}
.tpl-filter-chip:hover{border-color:var(--line-strong);background:var(--brand-soft);color:var(--brand-strong);transform:translateY(-1px)}
.tpl-filter-chip.is-selected{border-color:var(--brand);background:var(--brand);color:var(--brand-ink);box-shadow:0 3px 10px color-mix(in srgb,var(--brand) 24%,transparent)}
.tpl-summary{min-height:20px;margin:0 0 12px;color:var(--muted);font-size:12px}
.tpl-group{margin:0 0 28px}
.tpl-group-head{display:flex;align-items:center;gap:12px;margin:0 0 13px;padding:13px 15px;border:1px solid var(--line);border-radius:18px;background:var(--panel-soft);box-shadow:var(--shadow-1)}
.tpl-group-mark{position:relative;display:grid;flex:0 0 auto;place-items:center;width:40px;height:40px;border-radius:13px;background:linear-gradient(145deg,var(--brand),var(--brand-strong));box-shadow:0 7px 14px color-mix(in srgb,var(--brand) 24%,transparent)}
.tpl-group-mark::before,.tpl-group-mark::after{position:absolute;display:block;width:15px;height:19px;border:2px solid var(--brand-ink);border-radius:2px;content:""}
.tpl-group-mark::before{transform:translate(-2px,-2px);opacity:.58}
.tpl-group-mark::after{transform:translate(2px,2px);background:linear-gradient(var(--brand-ink),var(--brand-ink)) 4px 5px/7px 2px no-repeat,linear-gradient(var(--brand-ink),var(--brand-ink)) 4px 10px/7px 2px no-repeat}
.tpl-group-titlebox{display:grid;flex:1;gap:1px;min-width:0}
.tpl-group-eyebrow{color:var(--brand);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.tpl-group-head .tpl-group-title{margin:0;padding:0;border:0;color:var(--ink-strong);font-size:19px;line-height:1.25;letter-spacing:-.01em}
.tpl-group-count{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:0 11px;border:1px solid color-mix(in srgb,var(--brand) 22%,var(--line));border-radius:var(--radius-pill);background:var(--panel);color:var(--brand-strong);font-size:12px;font-weight:700;white-space:nowrap}
.tpl-group--forms .tpl-group-head{border-color:color-mix(in srgb,var(--brand) 32%,var(--line));background:linear-gradient(105deg,color-mix(in srgb,var(--brand-soft) 75%,var(--panel)),var(--panel))}
.tpl-group--samples .tpl-group-mark{background:linear-gradient(145deg,#7758b8,#4d3a86)}
.tpl-group--mine .tpl-group-mark{background:linear-gradient(145deg,#1c8f6f,#126b53)}
html[data-theme="dark"] .tpl-group-head{background:#11223a;border-color:#2b476c}
html[data-theme="dark"] .tpl-group--forms .tpl-group-head{background:linear-gradient(105deg,#14345a,#11223a)}
.tpl-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px}
.tpl-card{display:flex;min-width:0;flex-direction:column;padding:16px;border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--panel);box-shadow:var(--shadow-1);transition:transform var(--motion-base) var(--ease-smooth),border-color var(--motion-base) var(--ease-smooth),box-shadow var(--motion-base) var(--ease-smooth)}
.tpl-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-2);transform:translateY(-2px)}
.tpl-card.is-favorite{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
.tpl-card-head{display:flex;align-items:center;gap:8px;min-height:28px}
.tpl-type-badge{display:inline-flex;align-items:center;min-height:24px;border-radius:var(--radius-pill);padding:0 9px;background:var(--brand-soft);color:var(--brand-strong);font-size:11px;font-weight:700;white-space:nowrap}
.tpl-source{overflow:hidden;color:var(--muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.tpl-favorite{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;margin:-6px -6px -6px auto;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--warning);font-size:22px;line-height:1;cursor:pointer;transition:background var(--motion-fast) var(--ease-smooth),transform var(--motion-fast) var(--ease-smooth)}
.tpl-favorite:hover{background:var(--warning-soft);transform:scale(1.06)}
.tpl-card-title{position:relative;display:flex;align-items:center;min-height:46px;margin:15px 0 8px;padding:8px 13px 8px 15px;overflow:hidden;border:1px solid color-mix(in srgb,var(--brand) 20%,var(--line));border-left:4px solid var(--brand);border-radius:12px;background:linear-gradient(105deg,color-mix(in srgb,var(--brand-soft) 78%,var(--panel)),var(--panel));color:var(--ink-strong);font-size:20px;font-weight:800;line-height:1.25;letter-spacing:-.02em}
.tpl-card-title::after{width:7px;height:7px;margin-left:auto;border-radius:50%;background:var(--brand);box-shadow:0 0 0 5px color-mix(in srgb,var(--brand) 11%,transparent);content:""}
.tpl-card:hover .tpl-card-title{border-color:color-mix(in srgb,var(--brand) 46%,var(--line));background:linear-gradient(105deg,var(--brand-soft),var(--panel))}
html[data-theme="dark"] .tpl-card-title{background:linear-gradient(105deg,#15365d,#13233b);border-color:#31527f;color:#f4f8ff}
.tpl-card-note{display:-webkit-box;min-height:42px;margin:0;color:var(--muted);font-size:13px;line-height:1.6;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.tpl-tags{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 12px}
.tpl-tag{display:inline-flex;align-items:center;min-height:24px;border:1px solid var(--line);border-radius:var(--radius-pill);padding:0 8px;background:var(--panel-soft);color:var(--muted);font-size:11px;line-height:1.2}
.tpl-card-meta{display:flex;justify-content:space-between;gap:8px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font-size:11px;line-height:1.4}
.tpl-card-meta span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tpl-card-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tpl-card-actions .tpl-action{flex:1 1 auto;min-width:72px}
.tpl-card-actions .tpl-action.primary{flex-basis:100%}
.tpl-empty-state{display:flex;align-items:center;flex-direction:column;margin:12px 0 22px;padding:40px 20px;border:1px dashed var(--line-strong);border-radius:var(--radius-xl);background:var(--panel-soft);text-align:center}
.tpl-empty-icon{display:grid;place-items:center;width:52px;height:52px;margin-bottom:12px;border-radius:16px;background:var(--brand-soft);color:var(--brand);font-size:25px}
.tpl-empty-state h2{margin:0 0 6px;color:var(--ink-strong);font-size:18px}
.tpl-empty-state p{max-width:460px;margin:0 0 16px;color:var(--muted);font-size:13px;line-height:1.6}
.tpl-save-card{border-color:var(--line);background:var(--panel-soft);box-shadow:var(--shadow-1)}
.tpl-save-card legend{color:var(--brand-strong)}
@media (max-width:860px){
  .tpl-command-bar{align-items:stretch;flex-direction:column;padding:10px}
  .tpl-command-actions{justify-content:stretch}
  .tpl-command-actions>*{flex:1 1 auto}
  .tpl-select-label{justify-content:space-between}
  .tpl-select{flex:1 1 auto}
  .tpl-current-filter{justify-content:center}
  .tpl-reset-btn{width:100%}
  .tpl-card-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}
@media (max-width:520px){
  .tpl-card-grid{grid-template-columns:1fr;gap:10px}
  .tpl-card{padding:14px;border-radius:var(--radius-lg)}
  .tpl-card-title{min-height:42px;margin-top:13px;font-size:18px}
  .tpl-card-actions .tpl-action{min-height:42px}
  .tpl-card-actions .tpl-action.primary{flex-basis:100%}
  .tpl-card-meta{font-size:10px}
  .tpl-group-head{gap:9px;padding:11px 12px;border-radius:15px}
  .tpl-group-mark{width:35px;height:35px;border-radius:11px}
  .tpl-group-head .tpl-group-title{font-size:16px}
  .tpl-group-count{min-height:27px;padding:0 8px;font-size:11px}
  .tpl-save-card .draft-new{align-items:stretch;flex-direction:column}
  .tpl-save-card .draft-new .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .tpl-card,.tpl-filter-chip,.tpl-favorite,.tpl-search-clear{transition:none}
}
@media print{
  .tpl-command-bar,.tpl-filter-tabs,.tpl-summary,.tpl-save-card,.tpl-card-actions{display:none!important}
  .tpl-card{box-shadow:none;break-inside:avoid}
}

/* =====================================================================
   Premium workspace refresh — navy, ivory and restrained gold
   ===================================================================== */
html:not([data-theme="dark"]){
  --bg:#f3f2ed;
  --bg-subtle:#f8f7f3;
  --panel:#fffdfa;
  --panel-soft:#f8f6f0;
  --panel-raised:#fffefa;
  --line:#e5e0d5;
  --line-strong:#d7cfbf;
  --ink:#1d2b3a;
  --ink-strong:#112538;
  --muted:#6e7781;
  --brand:#173b58;
  --brand-strong:#0d2a43;
  --brand-soft:#e9f0f2;
  --focus:#b78b40;
  --premium-gold:#c59a52;
  --premium-gold-soft:#f5ecd9;
  --shadow-1:0 1px 2px rgba(21,35,47,.05);
  --shadow-2:0 14px 36px rgba(25,42,54,.08);
  --shadow-3:0 26px 60px rgba(19,38,54,.16);
}
html:not([data-theme="dark"]) body{background:radial-gradient(circle at 85% -10%,#ece5d8 0,transparent 30%),var(--bg)}
html:not([data-theme="dark"]) .topbar{
  background:rgba(255,253,250,.88);border-bottom-color:rgba(205,194,174,.7);
  box-shadow:0 1px 0 rgba(255,255,255,.75),0 10px 30px rgba(25,42,54,.05);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
html:not([data-theme="dark"]) .brand-mark{
  background:linear-gradient(145deg,#1d4a6a,#102d46);border:1px solid rgba(255,255,255,.28);
  color:#f5dfaf;box-shadow:0 8px 20px rgba(19,48,73,.22);
}
html:not([data-theme="dark"]) .brand-text strong{color:#17334d}
html:not([data-theme="dark"]) .app-sidebar{
  background:linear-gradient(180deg,#143650 0%,#102b43 52%,#0c2337 100%);
  border-right:1px solid rgba(3,25,43,.38);box-shadow:10px 0 30px rgba(13,35,52,.10);
}
html:not([data-theme="dark"]) .sidebar-title{color:#aab9c5}
html:not([data-theme="dark"]) .mainnav button{color:#c6d3db}
html:not([data-theme="dark"]) .mainnav button:hover{background:rgba(255,255,255,.10);color:#fff}
html:not([data-theme="dark"]) .mainnav button[aria-selected="true"]{
  background:linear-gradient(135deg,#e4c784,#c69b50);color:#17334d;
  box-shadow:0 9px 20px rgba(0,0,0,.18);font-weight:800;
}
html:not([data-theme="dark"]) .mainnav button[aria-selected="true"] .nav-icon{color:#17334d}
html:not([data-theme="dark"]) .panel,html:not([data-theme="dark"]) .library{background:rgba(255,253,250,.85)}
html:not([data-theme="dark"]) .panel-head,html:not([data-theme="dark"]) .panel-foot{background:rgba(255,253,250,.70)}
html:not([data-theme="dark"]) .btn{border-color:#dcd4c5;background:#fffdfa;color:#26384a}
html:not([data-theme="dark"]) .btn:hover{background:#f8f4eb;border-color:#c8bda9}
html:not([data-theme="dark"]) .btn.primary{
  background:linear-gradient(135deg,#1d4a69,#12334e);border-color:#12334e;
  box-shadow:0 7px 16px rgba(16,45,69,.20);
}
html:not([data-theme="dark"]) .btn.primary:hover{background:linear-gradient(135deg,#255878,#102d46);box-shadow:0 10px 22px rgba(16,45,69,.26)}
html:not([data-theme="dark"]) .preview,html:not([data-theme="dark"]) .paper-wrap{background:#e8e8e4}
html:not([data-theme="dark"]) .preview-bar,html:not([data-theme="dark"]) .word-ribbon-tabs{background:rgba(255,253,250,.88)}
html:not([data-theme="dark"]) .word-ribbon-tab.active{color:#173b58;border-bottom-color:#c59a52}
html:not([data-theme="dark"]) .fld input[type=text],html:not([data-theme="dark"]) .fld input[type=number],html:not([data-theme="dark"]) .fld input[type=date],html:not([data-theme="dark"]) .fld select,html:not([data-theme="dark"]) .fld textarea{background:#fffefa;border-color:#dfd7c9}
html:not([data-theme="dark"]) .fld input:focus,html:not([data-theme="dark"]) .fld textarea:focus,html:not([data-theme="dark"]) .fld select:focus{border-color:#b78b40;box-shadow:0 0 0 3px rgba(197,154,82,.17)}
html:not([data-theme="dark"]) .dashboard-view{background:transparent}
html:not([data-theme="dark"]) .dashboard-hero{
  border-color:rgba(223,202,159,.48);background:linear-gradient(118deg,#112e47 0%,#1a4964 58%,#2a5c75 100%);
  box-shadow:0 22px 52px rgba(17,46,71,.18);position:relative;overflow:hidden;
}
html:not([data-theme="dark"]) .dashboard-hero::after{content:"";position:absolute;width:270px;height:270px;right:-100px;top:-145px;border:1px solid rgba(243,218,161,.45);border-radius:50%;box-shadow:0 0 0 26px rgba(243,218,161,.06),0 0 0 56px rgba(243,218,161,.04);pointer-events:none}
html:not([data-theme="dark"]) .dashboard-hero-copy,html:not([data-theme="dark"]) .dashboard-hero-actions{position:relative;z-index:1}
html:not([data-theme="dark"]) .dashboard-hero h1{color:#fffdf9}
html:not([data-theme="dark"]) .dashboard-hero p:not(.dashboard-eyebrow){color:#d7e3e8}
html:not([data-theme="dark"]) .dashboard-eyebrow,html:not([data-theme="dark"]) .dashboard-kicker{color:#cba65f}
html:not([data-theme="dark"]) .dashboard-secondary{background:rgba(255,253,249,.92);color:#173b58;border-color:rgba(255,255,255,.72)}
html:not([data-theme="dark"]) .dashboard-stat,html:not([data-theme="dark"]) .dashboard-card,html:not([data-theme="dark"]) .lib-row{
  background:rgba(255,254,251,.94);border-color:#e6dfd2;box-shadow:0 8px 22px rgba(30,43,53,.055);
}
html:not([data-theme="dark"]) .dashboard-card{border-radius:18px}
html:not([data-theme="dark"]) .dashboard-stat-icon{background:linear-gradient(145deg,#e8f0f1,#dae6e8);color:#173b58}
html:not([data-theme="dark"]) .dashboard-guide-card{background:linear-gradient(120deg,#fffdf9,#f5eee0)}
html:not([data-theme="dark"]) .dashboard-guide-icon{background:linear-gradient(145deg,#d8b36d,#b98943);box-shadow:0 9px 18px rgba(162,116,48,.24)}
html:not([data-theme="dark"]) .lib-title{color:#142f47}
html:not([data-theme="dark"]) .lib-row:hover{border-color:#d5bb80;box-shadow:0 12px 26px rgba(33,48,58,.10)}
html:not([data-theme="dark"]) .ai-chat-toggle,html:not([data-theme="dark"]) .ai-chat-head{background:linear-gradient(135deg,#1b4b69,#112f49)}

/* คลังเอกสารแบบระบบระเบียน: ลดบัตรใหญ่ แล้วให้ข้อมูลอยู่ในแนวตารางเดียว */
.registry-head-actions{align-items:center}
.registry-back-btn{white-space:nowrap}
.registry-back-btn .btn-icon{margin-right:3px}
.registry-tools,.registry-folder-create{position:relative;z-index:12}
.registry-tools summary,.registry-folder-create summary{
  display:flex;align-items:center;gap:8px;min-height:42px;padding:9px 13px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);
  font:650 14px var(--ui-font);cursor:pointer;list-style:none;box-shadow:var(--shadow-1);
}
.registry-tools summary::-webkit-details-marker,.registry-folder-create summary::-webkit-details-marker{display:none}
.registry-tools summary .ui-icon,.registry-folder-create summary .ui-icon{width:16px;height:16px;color:var(--brand)}
.registry-tools[open] summary,.registry-folder-create[open] summary{border-color:#c7a55e;box-shadow:0 0 0 3px rgba(197,154,82,.14)}
.registry-tools-menu{
  position:absolute;right:0;top:calc(100% + 8px);width:210px;padding:8px;
  display:grid;gap:3px;border:1px solid var(--line);border-radius:13px;background:var(--panel-raised);
  box-shadow:var(--shadow-3);
}
.registry-tools-menu .btn{width:100%;justify-content:flex-start;text-align:left;border-color:transparent;box-shadow:none}
.registry-tools-menu .btn:hover{border-color:var(--line)}
.registry-filterbar{align-items:center;margin-top:22px;padding:10px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.52);box-shadow:var(--shadow-1)}
.registry-filterbar .lib-search{flex:1 1 440px;max-width:600px;margin:0;box-shadow:none;background:var(--panel-raised)}
.registry-inline-filter{display:flex;align-items:center;gap:var(--space-3);flex:0 1 auto;min-width:0;margin:0;padding:0;border:0;background:transparent;box-shadow:none}
#libraryView .registry-filterbar.registry-inline-filter{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.registry-search-wrap{position:relative;flex:0 1 390px;width:390px;max-width:100%}
.registry-inline-filter .lib-search{flex:0 1 340px;width:340px;min-width:0;max-width:100%;padding:0 var(--space-4);background:var(--panel-raised)!important;border:1px solid var(--line)!important;border-radius:var(--radius-sm)!important;box-shadow:var(--shadow-token-1)!important}
.registry-inline-filter .lib-search:focus-within{outline:0;box-shadow:var(--shadow-token-1)!important;border-color:var(--line-strong)!important}
.lib-search{padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.lib-search .lib-input,.lib-search .lib-input:focus{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:0!important}
.lib-search:focus-within{outline:0!important;box-shadow:none!important;border-color:var(--line)!important}
.registry-inline-filter .registry-folder-create summary,.registry-inline-filter .registry-folder-create[open] summary{min-height:42px;padding:0 var(--space-4);border:1px solid var(--line)!important;border-radius:var(--radius-sm)!important;background:var(--panel-raised)!important;box-shadow:var(--shadow-token-1)!important}
.registry-search-history{position:absolute;z-index:30;top:calc(100% + var(--space-2));left:0;width:100%;padding:var(--space-2);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel-raised);box-shadow:var(--shadow-token-2)}
.registry-search-history-title{margin:var(--space-1) var(--space-3) var(--space-2);color:var(--muted);font-size:var(--font-size-sm);font-weight:700}
.registry-search-history-item{display:block;width:100%;padding:var(--space-2) var(--space-3);overflow:hidden;border:0;border-radius:var(--radius-xs);background:transparent;color:var(--ink);font:inherit;text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.registry-search-history-item:hover,.registry-search-history-item:focus-visible{background:var(--brand-soft);color:var(--brand);outline:none}
.registry-filterbar .lib-search>.ui-icon{width:16px;height:16px;color:var(--muted)}
.registry-folder-create>div{
  position:absolute;right:0;top:calc(100% + 8px);width:330px;padding:9px;display:flex;gap:7px;
  border:1px solid var(--line);border-radius:13px;background:var(--panel-raised);box-shadow:var(--shadow-3);
}
.registry-folder-create .lib-input{min-width:0;width:100%;padding:8px 10px}
.registry-folder-create .btn{flex:0 0 auto}
.registry-header{
  display:grid;grid-template-columns:52px minmax(260px,1.7fr) minmax(120px,.65fr) minmax(108px,.57fr) minmax(128px,.68fr) minmax(180px,.9fr);
  align-items:center;gap:10px;padding:0 14px;min-height:38px;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.055em;text-transform:uppercase;
}
.registry-header span:first-child{text-align:center}
.registry-list{display:grid;gap:0;border:1px solid var(--line);border-radius:15px;overflow:hidden;background:var(--panel-raised);box-shadow:var(--shadow-1)}
.registry-row{
  display:grid;grid-template-columns:52px minmax(260px,1.7fr) minmax(120px,.65fr) minmax(108px,.57fr) minmax(128px,.68fr) minmax(180px,.9fr);
  align-items:center;gap:10px;min-height:70px;margin:0!important;padding:9px 14px!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;transform:none!important;
}
.registry-row:last-child{border-bottom:0!important}
.registry-row:hover{background:linear-gradient(90deg,rgba(229,240,242,.72),rgba(255,253,250,.82))!important;box-shadow:none!important;transform:none!important}
.registry-row .lib-tile{grid-column:2;grid-row:1;width:38px;height:38px}
.registry-row .registry-no{grid-column:1;grid-row:1;color:var(--muted);font-size:12px;font-weight:700;text-align:center}
.registry-row .lib-text{grid-column:2;grid-row:1;min-width:0;padding-left:49px}
.registry-row .lib-name{font-size:14px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.registry-row .lib-meta{margin-top:2px;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.registry-type{grid-column:3;color:var(--ink);font-size:12px;line-height:1.35}
.registry-status{grid-column:4;justify-self:start;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:750;white-space:nowrap}
.registry-status.is-draft{background:#e8eff2;color:#27536a}
.registry-status.is-signed{background:#e4f5ea;color:#1f7145}
.registry-date{grid-column:5;color:var(--muted);font-size:12px;white-space:nowrap}
.registry-row .lib-side{grid-column:6;justify-content:flex-end;gap:5px;min-width:0;flex-wrap:nowrap}
.registry-row .lib-pill{max-width:112px;padding:6px 8px;font-size:11px}
.registry-row .lib-ico{width:32px;height:32px;min-width:32px;padding:0}
html:not([data-theme="dark"]) .registry-list{border-color:#dfd8cc;background:#fffefa}
html:not([data-theme="dark"]) .registry-header{color:#8b7a60}
html:not([data-theme="dark"]) .registry-filterbar{background:rgba(255,253,250,.72);border-color:#e3dacb}
@media (max-width:1120px){
  .registry-header,.registry-row{grid-template-columns:42px minmax(220px,1.45fr) minmax(110px,.62fr) minmax(96px,.55fr) minmax(112px,.65fr) minmax(130px,.75fr)}
  .registry-row .lib-side{gap:2px}.registry-row .lib-pill{display:none}
}
@media (max-width:860px){
  .registry-inline-filter{width:100%;min-width:0;order:3;padding:0}.registry-search-wrap{flex:1 1 auto;width:auto}
  .registry-head-actions{width:100%;justify-content:space-between}.registry-head-actions .lib-cta{width:auto!important;flex:1 1 auto}.registry-tools{flex:0 0 auto}
  .registry-filterbar{display:flex!important;align-items:center;padding:8px;margin-top:16px}.registry-filterbar .lib-search{flex:1 1 auto;min-width:0}.registry-folder-create>div{right:0;left:auto;width:min(330px,calc(100vw - 52px))}
  .registry-header{display:none}.registry-list{border-radius:13px}.registry-row{grid-template-columns:34px 40px minmax(0,1fr) auto;gap:9px;min-height:66px;padding:8px 10px!important}.registry-row .registry-no{grid-column:1}.registry-row .lib-tile{grid-column:2;width:34px;height:34px}.registry-row .lib-text{grid-column:3;padding-left:0}.registry-row .registry-type,.registry-row .registry-status,.registry-row .registry-date{display:none}.registry-row .lib-side{grid-column:4;gap:1px}.registry-row .lib-ico{width:30px;height:30px;min-width:30px}.registry-row .lib-pill{display:none}
}

/* Midnight Navy — dark mode premium redesign */
html[data-theme="dark"]{
  --bg:#09131f;
  --bg-subtle:#0d1a29;
  --panel:#101f30;
  --panel-soft:#13263a;
  --panel-raised:#162a3f;
  --line:#263c51;
  --line-strong:#35526b;
  --ink:#eef4f5;
  --ink-strong:#ffffff;
  --muted:#9eafbc;
  --brand:#7db8d0;
  --brand-strong:#a6d3df;
  --brand-soft:#18364a;
  --brand-ink:#092034;
  --focus:#d8b66d;
  --premium-gold:#d8b66d;
  --premium-gold-soft:#3f3522;
  --shadow-1:0 1px 2px rgba(0,0,0,.28);
  --shadow-2:0 16px 38px rgba(0,0,0,.28);
  --shadow-3:0 30px 70px rgba(0,0,0,.42);
}
html[data-theme="dark"] body{background:radial-gradient(circle at 88% -10%,#19354a 0,transparent 31%),#09131f}
html[data-theme="dark"] .topbar{background:rgba(11,25,39,.88);border-bottom-color:rgba(113,151,174,.22);box-shadow:0 1px 0 rgba(255,255,255,.025),0 12px 32px rgba(0,0,0,.24);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
html[data-theme="dark"] .brand-mark{background:linear-gradient(145deg,#254f69,#17354d);color:#ecd393;border-color:rgba(222,241,245,.13);box-shadow:0 8px 20px rgba(0,0,0,.26)}
html[data-theme="dark"] .brand-text strong{color:#f4f8f8}html[data-theme="dark"] .brand-text small{color:#9eb0bd}
html[data-theme="dark"] .app-sidebar{background:linear-gradient(180deg,#0c253a 0%,#091d30 58%,#071827 100%);border-right-color:#1c3b52;box-shadow:10px 0 28px rgba(0,0,0,.17)}
html[data-theme="dark"] .sidebar-title{color:#91a9b7}html[data-theme="dark"] .mainnav button{color:#b8c8d1}
html[data-theme="dark"] .mainnav button:hover{background:rgba(185,218,226,.10);color:#fff}
html[data-theme="dark"] .mainnav button[aria-selected="true"]{background:linear-gradient(135deg,#e1c47d,#bd934a);color:#142c40;box-shadow:0 9px 22px rgba(0,0,0,.28)}
html[data-theme="dark"] .mainnav button[aria-selected="true"] .nav-icon{color:#142c40}
html[data-theme="dark"] .panel,html[data-theme="dark"] .library{background:rgba(12,27,42,.92)}
html[data-theme="dark"] .panel-head,html[data-theme="dark"] .panel-foot{background:rgba(14,32,49,.72);border-color:#243e53}
html[data-theme="dark"] .btn{background:#14283b;border-color:#315067;color:#eaf1f3}
html[data-theme="dark"] .btn:hover{background:#1a3449;border-color:#4b7189}
html[data-theme="dark"] .btn.primary{background:linear-gradient(135deg,#28739a,#195271);border-color:#3d8aae;color:#fff;box-shadow:0 8px 18px rgba(0,0,0,.24)}
html[data-theme="dark"] .btn.primary:hover{background:linear-gradient(135deg,#3987ad,#22637f);color:#fff}
html[data-theme="dark"] .btn.primary .cta-icon,html[data-theme="dark"] .btn.primary .btn-icon{color:#fff}
html[data-theme="dark"] .preview,html[data-theme="dark"] .paper-wrap{background:#081521}
html[data-theme="dark"] .preview-bar,html[data-theme="dark"] .word-ribbon-tabs{background:rgba(14,31,47,.90);border-color:#263e53}
html[data-theme="dark"] .word-ribbon-tab.active{color:#dfc178;border-bottom-color:#dfc178}
html[data-theme="dark"] .fld input[type=text],html[data-theme="dark"] .fld input[type=number],html[data-theme="dark"] .fld input[type=date],html[data-theme="dark"] .fld select,html[data-theme="dark"] .fld textarea{background:#11263a;border-color:#2e4a60;color:#edf4f5}
html[data-theme="dark"] .fld input:focus,html[data-theme="dark"] .fld textarea:focus,html[data-theme="dark"] .fld select:focus{border-color:#d8b66d;box-shadow:0 0 0 3px rgba(216,182,109,.17)}
html[data-theme="dark"] .dashboard-view{background:transparent}
html[data-theme="dark"] .dashboard-hero{background:linear-gradient(120deg,#0f2e47 0%,#16465e 58%,#1e5669 100%);border-color:rgba(208,181,111,.32);box-shadow:0 24px 56px rgba(0,0,0,.32);position:relative;overflow:hidden}
html[data-theme="dark"] .dashboard-hero::after{content:"";position:absolute;width:270px;height:270px;right:-100px;top:-145px;border:1px solid rgba(226,197,127,.4);border-radius:50%;box-shadow:0 0 0 26px rgba(226,197,127,.055),0 0 0 56px rgba(226,197,127,.035)}
html[data-theme="dark"] .dashboard-hero-copy,html[data-theme="dark"] .dashboard-hero-actions{position:relative;z-index:1}
html[data-theme="dark"] .dashboard-eyebrow,html[data-theme="dark"] .dashboard-kicker{color:#e1c17a}
html[data-theme="dark"] .dashboard-hero h1{color:#fff}html[data-theme="dark"] .dashboard-hero p:not(.dashboard-eyebrow){color:#d0e1e5}
html[data-theme="dark"] .dashboard-secondary{background:rgba(232,244,244,.94);color:#17374c;border-color:rgba(255,255,255,.75)}
html[data-theme="dark"] .dashboard-stat,html[data-theme="dark"] .dashboard-card,html[data-theme="dark"] .lib-row{background:rgba(17,35,52,.92);border-color:#29465c;box-shadow:0 8px 22px rgba(0,0,0,.18)}
html[data-theme="dark"] .dashboard-card{border-radius:18px}html[data-theme="dark"] .dashboard-stat-icon{background:linear-gradient(145deg,#1b4358,#17364b);color:#a7d7e2}
html[data-theme="dark"] .dashboard-guide-card{background:linear-gradient(120deg,#132b40,#1c3b50)}html[data-theme="dark"] .dashboard-guide-icon{background:linear-gradient(145deg,#ddbd73,#b58a44);color:#132c42}
html[data-theme="dark"] .lib-title{color:#f2f7f7}html[data-theme="dark"] .lib-sub{color:#9eafbc}
html[data-theme="dark"] .lib-row:hover{border-color:#bfa064;box-shadow:0 12px 28px rgba(0,0,0,.25)}
html[data-theme="dark"] .registry-filterbar{background:rgba(15,34,51,.80);border-color:#28465c}
html[data-theme="dark"] .registry-filterbar .lib-search,html[data-theme="dark"] .registry-tools summary,html[data-theme="dark"] .registry-folder-create summary{background:#13293c;border-color:#315269;color:#e9f2f4}
html[data-theme="dark"] .registry-tools-menu,html[data-theme="dark"] .registry-folder-create>div,html[data-theme="dark"] .registry-list{background:#11263a;border-color:#2b4a60}
html[data-theme="dark"] .registry-header{color:#d0b878}html[data-theme="dark"] .registry-row{border-bottom-color:#29465c!important}
html[data-theme="dark"] .registry-row:hover{background:linear-gradient(90deg,rgba(25,59,76,.78),rgba(16,36,54,.90))!important}
html[data-theme="dark"] .registry-type{color:#dce7e9}html[data-theme="dark"] .registry-status.is-draft{background:#1c4255;color:#bfe3ed}html[data-theme="dark"] .registry-status.is-signed{background:#1a493b;color:#b9e9ce}
html[data-theme="dark"] .registry-date{color:#a9bac4}html[data-theme="dark"] .ai-chat-toggle,html[data-theme="dark"] .ai-chat-head{background:linear-gradient(135deg,#1a526d,#143c55)}

/* ปุ่มเริ่มต้นงานต้องอ่านได้ชัดเสมอ แม้มีชุดสไตล์เก่าถูกโหลดร่วมกัน */
#btnNewDoc,#btnDashboardNew{color:#fff!important;text-shadow:0 1px 1px rgba(0,0,0,.18)}
#btnNewDoc .cta-icon,#btnNewDoc .cta-icon .ui-icon,#btnDashboardNew .btn-icon,#btnDashboardNew .btn-icon .ui-icon{color:#fff!important}

/* =====================================================================
   Sarabun Registry Foundations — semantic tokens and accessible states
   ===================================================================== */
:root{
  --font-family-primary:"Kanit", "Kanit Fallback", "Noto Sans Thai", sans-serif;
  --font-size-xs:11px;--font-size-sm:12px;--font-size-md:14px;--font-size-lg:16px;
  --font-size-xl:18px;--font-size-2xl:20px;--font-size-3xl:24px;--font-size-4xl:30px;
  --font-weight-base:400;--font-line-base:20px;
  --space-1:4px;--space-2:6px;--space-3:8px;--space-4:10px;--space-5:12px;--space-6:14px;--space-7:16px;--space-8:20px;
  --radius-xs:16px;--radius-sm:22.4px;--radius-md:28.8px;--radius-lg:35.2px;--radius-pill:26843500px;
  --color-border-default:#3b2410;
  --color-text-secondary:#5b3a1e;
  --color-text-tertiary:oklab(0.380912 0.031715 0.0539423 / .85);
  --color-text-inverse:#8a6b3e;
  --color-surface-base:#000;
  --color-surface-muted:#fff;
  --color-surface-raised:oklab(0.742695 0.087365 0.150843 / .05);
  --color-surface-strong:oklab(0.980519 0.00153813 0.0210683 / .4);
  --color-border-strong:oklab(0.380912 0.031715 0.0539423 / .1);
  --color-focus-ring:oklab(0.832211 0.0271208 0.155282 / .5);
  --shadow-token-1:0 0 0 1px oklab(0.284598 0.0235679 0.0409928 / .1),0 1px 3px rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);
  --shadow-token-2:0 10px 15px -3px oklab(0.742695 0.087365 0.150843 / .25),0 4px 6px -4px oklab(0.742695 0.087365 0.150843 / .25);
  --motion-instant:150ms;--motion-fast:200ms;--motion-normal:300ms;
}
body{font-family:var(--font-family-primary);font-size:var(--font-size-md);font-weight:var(--font-weight-base);line-height:var(--font-line-base)}

/* Light registry surface keeps the required white muted surface and brown text hierarchy. */
html:not([data-theme="dark"]){
  --bg:#f6f1e9;--panel:var(--color-surface-muted);--panel-soft:#fffaf3;--panel-raised:#fff;
  --line:var(--color-border-default);--line-strong:#76512b;--ink:#231508;--ink-strong:#170e06;--muted:var(--color-text-secondary);
  --brand:#3b2410;--brand-strong:#201206;--brand-soft:#f1e2cb;--brand-ink:#fff;
}

/* Dark registry surface follows the supplied black foundation with gold emphasis. */
html[data-theme="dark"]{
  --bg:var(--color-surface-base);--bg-subtle:#0d0805;--panel:#000;--panel-soft:#120c07;--panel-raised:#171008;
  --line:var(--color-border-default);--line-strong:#795c35;--ink:#fff;--ink-strong:#fff;--muted:#d6bc94;
  --brand:#d9b46d;--brand-strong:#efd093;--brand-soft:#2f2111;--brand-ink:#1c1106;
  --focus:#f1cf8d;--shadow-1:var(--shadow-token-1);--shadow-2:var(--shadow-token-2);--shadow-3:0 18px 36px rgba(0,0,0,.55);
}

/* Shared interactive state contract: default, hover, focus-visible, active, disabled, loading and error. */
:is(.btn,.linkbtn,.iconbtn,.lib-ico,.mainnav button,.registry-tools summary,.registry-folder-create summary){
  transition:transform var(--motion-instant) ease,background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,color var(--motion-fast) ease,box-shadow var(--motion-fast) ease;
}
:is(.btn,.linkbtn,.iconbtn,.lib-ico,.mainnav button,.registry-tools summary,.registry-folder-create summary):focus-visible{
  outline:3px solid var(--color-focus-ring)!important;outline-offset:3px;box-shadow:0 0 0 5px color-mix(in srgb,var(--color-focus-ring) 25%,transparent)!important;
}
:is(.btn,.linkbtn,.iconbtn,.lib-ico,.mainnav button,.registry-tools summary,.registry-folder-create summary):active:not(:disabled){transform:translateY(1px) scale(.985)}
:is(.btn,.linkbtn,.iconbtn,.lib-ico,.mainnav button)[disabled],:is(.btn,.linkbtn,.iconbtn,.lib-ico,.mainnav button)[aria-disabled="true"]{opacity:.58;cursor:not-allowed;pointer-events:none}
.btn.is-loading,.btn[aria-busy="true"]{cursor:progress;pointer-events:none;opacity:.76}
.btn.is-loading::before,.btn[aria-busy="true"]::before{content:"";display:inline-block;width:12px;height:12px;margin-right:7px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-2px;animation:registry-spin 700ms linear infinite}
.btn.is-error{border-color:#c73535!important;background:#5a1717!important;color:#fff!important}
@keyframes registry-spin{to{transform:rotate(360deg)}}

/* Component treatment uses semantic tokens only. */
.btn{min-height:44px;border-radius:var(--radius-sm);padding:var(--space-4) var(--space-7);border-color:var(--line);background:var(--panel-raised);color:var(--ink);box-shadow:var(--shadow-token-1)}
.btn:hover:not(:disabled){background:var(--panel-soft);border-color:var(--line-strong)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);box-shadow:var(--shadow-token-2)}
.btn.primary:hover:not(:disabled){background:var(--brand-strong);border-color:var(--brand-strong);color:var(--brand-ink)}
.registry-header{font-size:var(--font-size-xs);letter-spacing:.06em}.registry-row .lib-name{font-size:var(--font-size-md)}.registry-row .lib-meta,.registry-date{font-size:var(--font-size-sm)}
.registry-list,.registry-filterbar,.registry-tools-menu,.registry-folder-create>div{border-color:var(--line);box-shadow:var(--shadow-token-1)}
.registry-row:hover{background:var(--color-surface-raised)!important}
html[data-theme="dark"] .topbar,html[data-theme="dark"] .library,html[data-theme="dark"] .panel{background:var(--panel)}
html[data-theme="dark"] .app-sidebar{background:linear-gradient(180deg,#160e07 0%,#090604 58%,#000 100%);border-right-color:var(--line)}
html[data-theme="dark"] .mainnav button[aria-selected="true"]{background:var(--brand);color:var(--brand-ink);box-shadow:var(--shadow-token-2)}
html[data-theme="dark"] .mainnav button[aria-selected="true"] .nav-icon{color:var(--brand-ink)}
html[data-theme="dark"] .registry-tools summary,html[data-theme="dark"] .registry-folder-create summary,html[data-theme="dark"] .registry-tools-menu,html[data-theme="dark"] .registry-folder-create>div,html[data-theme="dark"] .registry-list{background:var(--panel-raised);border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .registry-header{color:#efd093}html[data-theme="dark"] .registry-row{border-bottom-color:var(--line)!important}html[data-theme="dark"] .registry-row:hover{background:#171008!important}
html[data-theme="dark"] .btn.primary,#btnNewDoc,#btnDashboardNew{color:var(--brand-ink)!important;text-shadow:none}
html[data-theme="dark"] .btn.primary .cta-icon,html[data-theme="dark"] .btn.primary .btn-icon,#btnNewDoc .cta-icon,#btnDashboardNew .btn-icon{color:var(--brand-ink)!important}

/* ตัวแก้เอกสารลอยเคยล็อกโทนน้ำเงินไว้ จึงต้องใช้ selector เดียวกันเพื่อแทนที่ให้ครบ */
html:not([data-theme="dark"]) .app-sidebar,
html:not([data-theme="dark"]) body.word-editor-floating .app-sidebar{
  background:var(--color-surface-base)!important;border-right-color:var(--color-border-default)!important;box-shadow:10px 0 28px rgba(0,0,0,.18)!important;
}
html:not([data-theme="dark"]) .sidebar-title{color:var(--color-text-inverse)!important}
html:not([data-theme="dark"]) .mainnav button{color:var(--color-surface-muted)!important}
html:not([data-theme="dark"]) .mainnav button:hover{background:var(--color-surface-raised)!important;color:var(--color-surface-muted)!important}
html:not([data-theme="dark"]) .mainnav button[aria-selected="true"]{background:var(--color-text-inverse)!important;color:var(--color-surface-base)!important;box-shadow:var(--shadow-token-2)!important}
html:not([data-theme="dark"]) .mainnav button[aria-selected="true"] .nav-icon{color:var(--color-surface-base)!important}
html:not([data-theme="dark"]) .btn.primary{background:var(--brand)!important;border-color:var(--brand)!important;color:var(--brand-ink)!important;box-shadow:var(--shadow-token-2)!important}
html:not([data-theme="dark"]) .btn.primary:hover:not(:disabled){background:var(--brand-strong)!important;border-color:var(--brand-strong)!important;color:var(--brand-ink)!important}
html:not([data-theme="dark"]) .btn.primary .cta-icon,html:not([data-theme="dark"]) .btn.primary .btn-icon{color:var(--brand-ink)!important}
html:not([data-theme="dark"]) .preview{background:#15100b!important}
html:not([data-theme="dark"]) .preview-bar,html:not([data-theme="dark"]) .word-toolbar,html:not([data-theme="dark"]) .word-ribbon-tabs,html:not([data-theme="dark"]) .word-ribbon-panel{background:var(--color-surface-muted)!important;border-color:var(--color-border-default)!important}
html:not([data-theme="dark"]) .word-ribbon-tab.active{color:var(--brand)!important;border-bottom-color:var(--color-text-inverse)!important}
html:not([data-theme="dark"]) .word-tool:hover,html:not([data-theme="dark"]) .word-tool:focus{background:var(--brand-soft)!important;border-color:var(--color-text-inverse)!important}

/* Light premium correction: soften the Black–Gold tokens for a calm working surface. */
html:not([data-theme="dark"]){
  --bg:#f3f5f7;--bg-subtle:#eef2f6;--panel:#fffdf9;--panel-soft:#f8fafc;--panel-raised:#fff;
  --line:#dce4eb;--line-strong:#bdccd9;--ink:#1c2c3c;--ink-strong:#11263a;--muted:#647489;
  --brand:#173b58;--brand-strong:#102d46;--brand-soft:#e7f0f4;--brand-ink:#fff;
  --color-border-default:#dce4eb;--color-text-secondary:#647489;--color-text-tertiary:#647489;--color-text-inverse:#c89e59;
  --color-surface-raised:rgba(23,59,88,.045);--color-surface-strong:rgba(255,255,255,.78);--color-border-strong:rgba(23,59,88,.14);--color-focus-ring:rgba(66,133,177,.48);
}
html:not([data-theme="dark"]) body{background:radial-gradient(circle at 88% -12%,#e5edf1 0,transparent 34%),var(--bg)}
html:not([data-theme="dark"]) .app-sidebar,
html:not([data-theme="dark"]) body.word-editor-floating .app-sidebar{background:linear-gradient(180deg,#173b58 0%,#112d46 55%,#0d2438 100%)!important;border-right-color:#18354d!important}
html:not([data-theme="dark"]) .sidebar-title{color:#9fb2c0!important}
html:not([data-theme="dark"]) .mainnav button{color:#d6e1e7!important}
html:not([data-theme="dark"]) .mainnav button:hover{background:rgba(255,255,255,.10)!important;color:#fff!important}
html:not([data-theme="dark"]) .mainnav button[aria-selected="true"]{background:linear-gradient(135deg,#d8b66d,#bc8f4d)!important;color:#142c40!important;box-shadow:0 8px 18px rgba(0,0,0,.20)!important}
html:not([data-theme="dark"]) .mainnav button[aria-selected="true"] .nav-icon{color:#142c40!important}
html:not([data-theme="dark"]) .btn.primary{background:linear-gradient(135deg,#1c4a69,#143650)!important;border-color:#143650!important;color:#fff!important;box-shadow:0 7px 16px rgba(17,52,78,.20)!important}
html:not([data-theme="dark"]) .btn.primary:hover:not(:disabled){background:linear-gradient(135deg,#245878,#173d5a)!important;color:#fff!important}
html:not([data-theme="dark"]) .btn.primary .cta-icon,html:not([data-theme="dark"]) .btn.primary .btn-icon{color:#fff!important}
html:not([data-theme="dark"]) .preview{background:#e9eef2!important}
html:not([data-theme="dark"]) .preview-bar,html:not([data-theme="dark"]) .word-toolbar,html:not([data-theme="dark"]) .word-ribbon-tabs,html:not([data-theme="dark"]) .word-ribbon-panel{background:rgba(255,253,249,.94)!important;border-color:var(--line)!important}
html:not([data-theme="dark"]) .word-ribbon-tab.active{color:var(--brand)!important;border-bottom-color:#c89e59!important}
html:not([data-theme="dark"]) .word-tool:hover,html:not([data-theme="dark"]) .word-tool:focus{background:var(--brand-soft)!important;border-color:#89a9bb!important}
html:not([data-theme="dark"]) .tpl-card,html:not([data-theme="dark"]) .tpl-save-card,html:not([data-theme="dark"]) .registry-list{border-color:var(--line)!important;box-shadow:0 5px 16px rgba(24,43,61,.06)!important}
@media (max-width:860px){
  .btn{min-height:44px}.registry-row .lib-meta{white-space:nowrap}.registry-tools-menu{width:min(230px,calc(100vw - 28px))}
}
@media (prefers-reduced-motion:reduce){
  :is(.btn,.linkbtn,.iconbtn,.lib-ico,.mainnav button,.registry-tools summary,.registry-folder-create summary){transition:none!important}
  .btn.is-loading::before,.btn[aria-busy="true"]::before{animation:none}
}