.manual-layout{display:flex;gap:1.5rem;align-items:flex-start}
.manual-toc{position:sticky;top:72px;width:270px;flex-shrink:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem;max-height:calc(100vh - 90px);overflow-y:auto}
.manual-toc h3{margin:0 0 .75rem;font-size:.95rem;color:var(--brand);font-weight:700}
.toc-group{margin-bottom:.75rem}
.toc-group-title{font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.3rem}
.toc-link{display:flex;align-items:center;gap:.45rem;padding:.35rem .6rem;border-radius:8px;text-decoration:none;color:var(--text);font-size:.83rem;transition:all .15s}
.toc-link:hover,.toc-link.active{background:var(--surface-soft);color:var(--brand)}
.toc-link .ti{font-size:.95rem;flex-shrink:0;width:1.4rem;text-align:center}
.toc-link .tn{font-size:.68rem;color:var(--muted);font-weight:600;min-width:1.4rem}
.manual-content{flex:1;min-width:0}
.ss{scroll-margin-top:80px}
.sh{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}
.sn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;font-weight:700;font-size:.95rem;background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;flex-shrink:0}
.st{margin:0;font-size:1.25rem;color:var(--brand);font-weight:700}
.sr{display:inline-block;padding:.2rem .6rem;border-radius:6px;font-size:.75rem;background:#f3f4f6;color:var(--muted);font-weight:600;font-family:monospace}
.pb{background:linear-gradient(135deg,#fef2f2,#fff5f5);border-left:4px solid var(--brand);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:.85rem 1.1rem;margin-bottom:1rem;font-size:.95rem}
.rb{background:#ecfdf5;border-left:4px solid #16a34a;border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:.85rem 1.1rem;margin-top:1rem;font-size:.95rem}
.rb strong{color:#16a34a}
.subh{display:flex;align-items:center;gap:.5rem;margin:1.25rem 0 .6rem;font-size:1rem;font-weight:600;color:var(--text)}
.subh .si{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;font-size:.85rem;background:var(--surface-soft);color:var(--brand)}
.sf{counter-reset:step;padding:0;margin:0 0 1rem;list-style:none}
.sf li{counter-increment:step;position:relative;padding:.5rem 0 .5rem 2.8rem;border-left:2px solid #e5e7eb;margin-left:14px;font-size:.92rem}
.sf li:last-child{border-left-color:transparent}
.sf li::before{content:counter(step);position:absolute;left:-14px;top:.4rem;width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700}
.stbl{width:100%;border-collapse:collapse;margin:.75rem 0;font-size:.87rem}
.stbl th,.stbl td{padding:.55rem .7rem;border:1px solid var(--border);text-align:left;vertical-align:top}
.stbl th{background:var(--surface-soft);color:var(--brand-dark);font-weight:600;white-space:nowrap}
.stbl code{background:#f3f4f6;padding:2px 6px;border-radius:4px;font-size:.82rem}
.badge{display:inline-block;padding:2px 8px;border-radius:6px;font-size:.76rem;font-weight:600}
.bg{background:#d1fae5;color:#065f46}.by{background:#fef3c7;color:#92400e}.bb{background:#dbeafe;color:#1e40af}.br{background:#fee2e2;color:#991b1b}.bgr{background:#f3f4f6;color:#4b5563}
kbd{background:#f3f4f6;padding:2px 8px;border-radius:4px;font-size:.82rem;border:1px solid var(--border);font-family:inherit}
.help-shot{margin:1rem 0 1.35rem;padding:0;border:1px solid var(--border);border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 2px 10px rgba(15,23,42,.05)}
.help-shot-head{display:flex;align-items:center;gap:.55rem;padding:.65rem .9rem;background:#f8fafc;border-bottom:1px solid #eef2f7}
.help-shot-n{display:inline-flex;align-items:center;justify-content:center;min-width:3.4rem;padding:2px 8px;border-radius:999px;background:#d62828;color:#fff;font-size:.72rem;font-weight:700}
.help-shot-title{font-weight:700;font-size:.92rem;color:#1e293b}
.help-shot-who{margin:0;padding:.35rem .9rem 0;font-size:.8rem;color:#64748b}
.help-shot-frame{position:relative;min-height:140px;background:repeating-linear-gradient(-45deg,#f8fafc,#f8fafc 10px,#f1f5f9 10px,#f1f5f9 20px)}
.help-shot-frame img{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;background:#fff}
.help-shot-frame img.is-missing{display:none}
.help-shot-ph{display:none;padding:2.2rem 1.2rem;text-align:center;color:#64748b;font-size:.88rem;line-height:1.55}
.help-shot-frame:not(:has(img)) .help-shot-ph,
.help-shot-frame:has(img.is-missing) .help-shot-ph{display:block}
.help-shot figcaption{padding:.65rem .9rem .8rem;font-size:.86rem;color:#334155;line-height:1.5;border-top:1px solid #f1f5f9}
@media(max-width:960px){.manual-layout{flex-direction:column}.manual-toc{position:static;width:100%;max-height:none}}
@media print{.help-nav,.manual-toc{display:none!important}.manual-content{max-width:100%}.help-section{break-inside:avoid;box-shadow:none;border:1px solid #ddd}}

/* คู่มือ + Mermaid — พื้นที่กว้าง ตัวอักษรชัด */
.help-page.help-page--manual-wide{
  max-width:min(1650px,98vw);
}
.manual-mermaid{
  margin:1rem 0 1.5rem;
  padding:1.25rem 1rem 1.5rem;
  background:linear-gradient(180deg,#fff 0%,#fafbfc 100%);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 4px 18px rgba(15,23,42,.07);
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
.manual-mermaid .mermaid{
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.manual-mermaid svg{
  max-width:none!important;
  width:auto!important;
  height:auto!important;
  shape-rendering:geometricPrecision;
  text-rendering:geometricPrecision;
}

/* QA checklist + scope status badges */
.qa-chk{list-style:none;padding:0;margin:0 0 1.25rem}
.qa-chk li{padding:.45rem 0;border-bottom:1px solid #f1f5f9;font-size:.9rem}
.qa-chk label{display:flex;gap:.55rem;align-items:flex-start;cursor:pointer;line-height:1.45}
.qa-chk input[type=checkbox]{margin-top:.2rem;flex-shrink:0;width:16px;height:16px;accent-color:var(--brand)}
.qa-chk label:has(input:checked) span{color:#64748b;text-decoration:line-through;text-decoration-color:#94a3b8}
.scope-legend{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0 1rem}
.scope-tag{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .65rem;border-radius:999px;font-size:.78rem;font-weight:600}
.scope-done{background:#d1fae5;color:#065f46}
.scope-partial{background:#fef3c7;color:#92400e}
.scope-missing{background:#fee2e2;color:#991b1b}
.scope-improve{background:#dbeafe;color:#1e40af}