:root{
  --bg:#eef3f7; --card:#ffffff; --ink:#16232e; --muted:#5b7085; --line:#d7e2ea;
  --cold:#0e7490; --cold-soft:#e0f2f7; --hot:#c2410c; --hot-soft:#fdeadd;
  --accent:#0e7490; --ok:#15803d; --warn:#b45309; --warn-soft:#fdf3e3;
  --chip:#f2f7fa; --focus:#0ea5e9;
  --sh-1:0 1px 2px rgba(16,35,50,.06), 0 1px 3px rgba(16,35,50,.05);
  --sh-2:0 4px 12px rgba(16,35,50,.08), 0 2px 4px rgba(16,35,50,.05);
  --sh-3:0 12px 32px rgba(16,35,50,.14), 0 4px 8px rgba(16,35,50,.07);
  --bar:rgba(255,255,255,.86);
  --r-s:10px; --r-m:14px; --r-l:18px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0d1620; --card:#151f2b; --ink:#e8f0f7; --muted:#90a7ba; --line:#26394a;
    --cold:#43c6e8; --cold-soft:#0f2b36; --hot:#f59a63; --hot-soft:#37200f;
    --accent:#43c6e8; --ok:#4ade80; --warn:#fbbf24; --warn-soft:#2d2410;
    --chip:#1b2836; --focus:#38bdf8;
    --sh-1:0 1px 2px rgba(0,0,0,.35);
    --sh-2:0 6px 16px rgba(0,0,0,.42), 0 2px 4px rgba(0,0,0,.3);
    --sh-3:0 16px 40px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.4);
    --bar:rgba(13,22,32,.86);
  }
}
:root[data-theme="dark"]{
  --bg:#0d1620; --card:#151f2b; --ink:#e8f0f7; --muted:#90a7ba; --line:#26394a;
  --cold:#43c6e8; --cold-soft:#0f2b36; --hot:#f59a63; --hot-soft:#37200f;
  --accent:#43c6e8; --ok:#4ade80; --warn:#fbbf24; --warn-soft:#2d2410;
  --chip:#1b2836; --focus:#38bdf8;
    --sh-1:0 1px 2px rgba(0,0,0,.35);
    --sh-2:0 6px 16px rgba(0,0,0,.42), 0 2px 4px rgba(0,0,0,.3);
    --sh-3:0 16px 40px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.4);
    --bar:rgba(13,22,32,.86);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans Thai","Sukhumvit Set","Thonburi",sans-serif;
  line-height:1.55; font-size:16px;
}
.wrap{max-width:820px;margin:0 auto;padding:0 14px 84px}
header.top{padding:18px 2px 12px}
header.top h1{font-size:27px;margin:0;letter-spacing:1.2px;font-weight:800;line-height:1.15}
header.top h1 .snow{color:var(--cold)}
header.top p{margin:5px 0 0;color:var(--muted);font-size:13.5px;max-width:60ch}

/* ── แถบนำทางติดบน (แทนการเลื่อนกลับขึ้นไปหาปุ่ม) ── */
.appbar{
  position:sticky;top:0;z-index:40;margin:0 -14px;padding:6px 14px 0;
  background:var(--bar);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s, box-shadow .2s
}
.appbar.stuck{border-bottom-color:var(--line);box-shadow:var(--sh-1)}
.appbar-row{display:flex;align-items:center;gap:8px;height:0;overflow:hidden;opacity:0;transition:height .18s, opacity .18s}
.appbar.stuck .appbar-row{height:38px;opacity:1}
.appbar-mark{font-weight:800;font-size:15px;letter-spacing:.6px;white-space:nowrap}
.appbar-mark .snow{color:var(--cold)}
.appbar-sp{flex:1}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:34px;min-width:34px;padding:0 11px;border-radius:99px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer
}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.icon-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* แถบโหมด: เลื่อนแนวนอนแทนการตัดบรรทัด */
.modebar{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:8px 0 10px;scroll-snap-type:x proximity}
.modebar::-webkit-scrollbar{display:none}
.modebar button{
  flex:0 0 auto;scroll-snap-align:start;display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;border-radius:99px;border:1px solid var(--line);background:var(--card);
  color:var(--muted);font:inherit;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s,box-shadow .15s
}
.modebar button:hover{color:var(--ink);border-color:var(--accent)}
.modebar button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--card);box-shadow:var(--sh-2)}
.modebar button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.appbar.stuck .modebar{padding:5px 0 7px}
.appbar.stuck .modebar button{padding:6px 12px;font-size:13px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:16px;margin-bottom:14px;
  box-shadow:var(--sh-1);scroll-margin-top:104px}
.card h2{font-size:16px;margin:0 0 13px;display:flex;align-items:center;gap:9px;color:var(--ink);letter-spacing:.2px;font-weight:800;line-height:1.35}
.card h2 .dot{width:9px;height:9px;border-radius:99px;background:var(--accent);display:inline-block;flex:0 0 auto;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent)}
.card h2 .sub{font-weight:400;font-size:12px;color:var(--muted)}
.hit{animation:hitflash 1.6s ease-out}
@keyframes hitflash{0%{box-shadow:0 0 0 3px var(--accent)}100%{box-shadow:var(--sh-1)}}
@media (prefers-reduced-motion: reduce){.hit{animation:none;outline:2px solid var(--accent)}}
.grid2{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:680px){.grid2{grid-template-columns:1fr 1fr}}
label.fld{display:block;font-size:13px;color:var(--muted);margin:12px 0 6px}
.seg{display:flex;flex-wrap:wrap;gap:5px;background:var(--chip);border:1px solid var(--line);
  border-radius:12px;padding:4px}
.seg button{
  flex:1 1 auto;min-width:84px;padding:9px 10px;border-radius:9px;border:1px solid transparent;
  background:transparent;color:var(--muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  transition:background .15s,color .15s,box-shadow .15s
}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--card);
  font-weight:800;box-shadow:var(--sh-1)}
.seg button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.seg button small{display:block;font-weight:400;font-size:11px;opacity:.85}
.topseg{margin-bottom:14px}
.topseg button{font-size:15.5px;padding:12px 10px;font-weight:700}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
select,input[type=number]{
  width:100%;padding:10px;border-radius:10px;border:1px solid var(--line);
  background:var(--chip);color:var(--ink);font:inherit;font-size:16px
}
select:focus-visible,input:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.hint{font-size:12px;color:var(--muted);margin-top:6px}
input[type=range]{width:100%;accent-color:var(--accent)}
.slider-line{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.slider-line b{color:var(--ink);font-size:15px}

/* ── ไดอะแกรม ── */
.dwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dwrap svg{min-width:660px;width:100%;height:auto;display:block}
.pipe{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.pipe-hot{stroke:var(--hot)} .pipe-cold{stroke:var(--cold)}
.pipe-thin{stroke-width:3.5}
.coil{fill:none;stroke-width:3.2;stroke-linejoin:round}
.coil-hot{stroke:var(--hot)} .coil-cold{stroke:var(--cold)}
.coilbox-hot{fill:var(--hot-soft);stroke:var(--hot);stroke-width:1.6}
.coilbox-cold{fill:var(--cold-soft);stroke:var(--cold);stroke-width:1.6}
.g-hot1{stop-color:var(--hot)} .g-cold1{stop-color:var(--cold)}
.comp-body{fill:var(--chip);stroke:var(--ink);stroke-width:2.4}
.drier{fill:var(--chip);stroke:var(--hot);stroke-width:2}
.valve{fill:var(--card);stroke:var(--ink);stroke-width:1.8}
.unitbox{fill:var(--chip);stroke:var(--muted);stroke-width:1.6}
.ptbox{fill:var(--card);stroke:var(--line)}
.svg-name{font-size:12.5px;fill:var(--muted)}
.svg-val{font-size:15px;font-weight:700;fill:var(--ink);font-variant-numeric:tabular-nums}
.svg-val2{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.svg-lab{font-size:13px;fill:var(--ink);font-weight:700}
.svg-state{font-size:11px;fill:var(--muted)}
.numchip-hot{fill:var(--hot)} .numchip-cold{fill:var(--cold)}
.numtxt{fill:var(--card);font-size:12px;font-weight:800}
.flow{fill:none;stroke-width:2}
.flowline{fill:none;stroke:var(--card);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:4 9;opacity:.8;animation:flowmove 1s linear infinite}
@keyframes flowmove{to{stroke-dashoffset:-13}}
@media (prefers-reduced-motion: reduce){.flowline{animation:none}}

/* ── ตำนานใต้ภาพ ── */
.leg{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.leg .lrow{display:flex;gap:10px;align-items:flex-start;border-top:1px dashed var(--line);padding-top:8px}
.leg .n{flex:0 0 22px;height:22px;border-radius:99px;color:var(--card);font-size:12.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center;margin-top:2px}
.n.hot{background:var(--hot)} .n.cold{background:var(--cold)}
.leg .body{font-size:13.5px}
.leg .body b.t{font-size:14px}
.leg .exp{color:var(--ink)}
.leg .bad{color:var(--muted);font-size:12.5px}
.leg .bad em{font-style:normal;color:var(--warn);font-weight:700}

/* ── การ์ดผลลัพธ์ ── */
.big{font-size:26px;font-weight:800;letter-spacing:.2px;font-variant-numeric:tabular-nums}
.big small{font-size:14px;font-weight:600;color:var(--muted)}
.sub{color:var(--muted);font-size:13.5px;margin-top:2px}
.altchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.altchips span{background:var(--chip);border:1px solid var(--line);border-radius:99px;padding:4px 10px;font-size:13px;
  font-variant-numeric:tabular-nums}
.note{font-size:13px;color:var(--muted);margin-top:10px;border-top:1px dashed var(--line);padding-top:8px}
.warnbox{background:var(--warn-soft);border:1px solid var(--warn);color:var(--ink);border-radius:10px;
  padding:8px 10px;font-size:13.5px;margin-top:10px;display:none}
.kv{display:flex;flex-direction:column;gap:7px;font-size:14.5px}
.kv .r{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.kv .r .k{color:var(--muted);font-size:13.5px}
.kv .r .v{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.kv .r .v small{font-weight:500;color:var(--muted)}
.v.cold{color:var(--cold)} .v.hot{color:var(--hot)}
.gaugerow{display:flex;gap:10px;margin-bottom:10px}
.gauge{flex:1;border-radius:12px;padding:10px 12px;text-align:center}
.gauge .gl{font-size:11.5px;font-weight:800;letter-spacing:1.5px}
.gauge .gv{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.gauge .gs{font-size:12px;color:var(--muted)}
.gauge.low{background:var(--cold-soft);color:var(--cold)}
.gauge.high{background:var(--hot-soft);color:var(--hot)}

details{border:1px solid var(--line);border-radius:14px;background:var(--card);margin-bottom:14px;overflow:hidden}
details summary{cursor:pointer;padding:13px 16px;font-weight:700;font-size:14.5px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:8px}
details summary::-webkit-details-marker{display:none}
details summary:after{content:"▾";color:var(--muted);transition:transform .15s}
@media (prefers-reduced-motion: reduce){details summary:after{transition:none}}
details[open] summary:after{transform:rotate(180deg)}
details .inner{padding:0 16px 14px}
table.pt{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
table.pt th{color:var(--muted);font-weight:600;text-align:right;padding:4px 8px;border-bottom:1px solid var(--line)}
table.pt td{text-align:right;padding:3px 8px;border-bottom:1px solid var(--line)}
table.pt th:first-child,table.pt td:first-child{text-align:left}
tr.hl-cold td{background:var(--cold-soft);font-weight:700}
tr.hl-hot td{background:var(--hot-soft);font-weight:700}
table.ref{width:100%;border-collapse:collapse;font-size:13px}
table.ref th{color:var(--muted);font-weight:700;text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
table.ref td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.tblwrap{overflow-x:auto}
ul.tips{margin:0;padding-left:20px;font-size:13.5px;display:flex;flex-direction:column;gap:6px}
ul.tips b{color:var(--ink)}
ul.src{margin:0;padding-left:20px;font-size:12.5px;display:flex;flex-direction:column;gap:5px;color:var(--muted)}
ul.src a{color:var(--accent);word-break:break-all}
.checklist{display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.checklist .c{display:flex;gap:8px}
.checklist .c:before{content:"✓";color:var(--ok);font-weight:800}
.sharebanner{display:none;background:var(--cold-soft);border:1px solid var(--cold);border-radius:12px;
  padding:10px 12px;margin-bottom:12px;font-size:13.5px}
.sharebanner a{color:var(--accent)}
.sharebox{display:none;margin-top:10px;background:var(--chip);border:1px solid var(--line);border-radius:10px;
  padding:10px;font-size:13px;word-break:break-all}
.sharebox a{color:var(--accent)}
.btn-copy{margin-top:8px;padding:7px 12px;border-radius:8px;border:1px solid var(--accent);background:transparent;
  color:var(--accent);font:inherit;font-size:13px;cursor:pointer}
.btn-copy.sm{margin-top:4px;padding:3px 9px;font-size:12px}
.btn-copy:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.joblink{color:var(--accent);font-size:12.5px}
.btn-save{width:100%;margin-top:10px;padding:11px;border-radius:10px;border:none;background:var(--accent);
  color:var(--card);font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.btn-save:disabled{opacity:.6;cursor:default}
.btn-save:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
#job-box input{margin-top:6px}
.jobrow{border-left:3px solid var(--accent);background:var(--chip);border-radius:8px;padding:8px 10px;font-size:13.5px}
.jobsum{font-variant-numeric:tabular-nums;color:var(--ink)}
.powered{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:13px}
.powered a{color:var(--accent);font-weight:700;text-decoration:none}
.powered a:hover{text-decoration:underline}
footer{color:var(--muted);font-size:12.5px;text-align:center;padding:8px 20px;line-height:1.6}
/* ── รายงาน PDF ── */
#print-report{display:none}
@media print{
  @page{margin:14mm}
  body{background:#fff !important;color:#000 !important;font-size:12pt}
  .wrap>*{display:none !important}
  .wrap>#print-report{display:block !important}
  #print-report{color:#000}
  .rp-head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid #000;padding-bottom:8px;margin-bottom:14px}
  .rp-head h1{margin:0;font-size:20pt;letter-spacing:1px}
  .rp-sub{font-size:11pt;color:#333}
  .rp-meta{font-size:10pt;color:#333;text-align:right}
  .rp-site{font-size:13pt;margin-bottom:4px}
  .rp-note{font-size:11pt;color:#333;margin-bottom:10px}
  .rp-sum{font-size:12pt;font-weight:700;background:#eee;padding:7px 10px;border-radius:4px;margin-bottom:12px}
  .rp-table{width:100%;border-collapse:collapse;font-size:11pt}
  .rp-table th{text-align:left;width:42%;padding:5px 8px;border-bottom:1px solid #ccc;font-weight:400;color:#333;vertical-align:top}
  .rp-table td{padding:5px 8px;border-bottom:1px solid #ccc;font-weight:700}
  .rp-foot{margin-top:18px;padding-top:8px;border-top:1px solid #999;font-size:9pt;color:#444;line-height:1.5}
}

/* ── หัวหมวด (จัดหมวดหมู่ใหม่ 2026-08-19) ── */
.sechead{display:flex;align-items:center;gap:10px;margin:34px 0 12px;font-weight:800;
  font-size:16px;letter-spacing:.3px;color:var(--ink);scroll-margin-top:104px}
.sechead::after{content:"";flex:1;height:2px;border-radius:2px;background:var(--line)}
.sechead .em{font-size:19px}
.sechead .sub{font-weight:400;font-size:12px;color:var(--muted)}
[id^="sec-"]{scroll-margin-top:104px}
.toc{display:flex;gap:7px;margin:10px -14px 4px;padding:8px 14px 8px;overflow-x:auto;scrollbar-width:none;
  position:sticky;top:88px;z-index:30;background:var(--bar);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px)}
.toc::-webkit-scrollbar{display:none}
.toc a{flex:0 0 auto;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);
  color:var(--muted);text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap;transition:.15s}
.toc a:hover{border-color:var(--accent);color:var(--accent)}
.toc a.here{background:var(--accent);border-color:var(--accent);color:var(--card);font-weight:800}

/* ── ค้นหาทั้งแอป ── */
.sheet{position:fixed;inset:0;z-index:80;display:none;background:rgba(8,16,24,.55);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.sheet.open{display:block}
.sheet-panel{position:absolute;left:0;right:0;top:0;background:var(--card);border-bottom:1px solid var(--line);
  border-radius:0 0 var(--r-l) var(--r-l);box-shadow:var(--sh-3);max-height:86vh;display:flex;flex-direction:column}
@media(min-width:700px){.sheet-panel{left:50%;transform:translateX(-50%);width:640px;top:6vh;border-radius:var(--r-l)}}
.sheet-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.sheet-head input{flex:1;font-size:16px;padding:11px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--chip);color:var(--ink)}
.sheet-list{overflow-y:auto;padding:6px}
.sheet-list button{display:block;width:100%;text-align:left;padding:11px 12px;border:none;background:transparent;
  color:var(--ink);font:inherit;font-size:14.5px;border-radius:10px;cursor:pointer}
.sheet-list button:hover,.sheet-list button.sel{background:var(--chip)}
.sheet-list .where{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.sheet-list mark{background:color-mix(in srgb, var(--accent) 28%, transparent);color:inherit;border-radius:3px;padding:0 1px}
.sheet-empty{padding:22px 14px;color:var(--muted);font-size:14px;text-align:center}

/* ── ปุ่มลอยกลับขึ้นบน ── */
.fab{position:fixed;right:14px;bottom:16px;z-index:35;width:46px;height:46px;border-radius:99px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);box-shadow:var(--sh-2);
  font-size:19px;cursor:pointer;display:none;align-items:center;justify-content:center}
.fab.show{display:flex}
.fab:focus-visible{outline:2px solid var(--focus);outline-offset:2px}


/* ── คลังอาการเสีย ── */
#fl-q{width:100%;padding:12px;border-radius:11px;border:1px solid var(--line);background:var(--chip);
  color:var(--ink);font:inherit;font-size:16px}
#fl-q:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.fl-item{border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:var(--card);overflow:hidden}
.fl-head{display:flex;gap:9px;align-items:flex-start;width:100%;text-align:left;padding:11px 12px;
  border:none;background:transparent;color:var(--ink);font:inherit;font-size:14.5px;font-weight:700;cursor:pointer}
.fl-head:hover{background:var(--chip)}
.fl-head .tag{flex:0 0 auto;font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:99px;
  background:var(--chip);color:var(--muted);border:1px solid var(--line);white-space:nowrap;margin-top:1px}
.fl-body{display:none;padding:0 12px 12px;font-size:13.5px}
.fl-item.open .fl-body{display:block}
.fl-item.open .fl-head{background:var(--chip)}
.fl-row{display:flex;gap:8px;padding:7px 0;border-top:1px dashed var(--line)}
.fl-row .lab{flex:0 0 76px;color:var(--muted);font-size:12.5px;font-weight:700}
.fl-row .val{flex:1}
.fl-row.sig .val{font-variant-numeric:tabular-nums}
.fl-row.fix .lab{color:var(--ok)}
.fl-row.vs .lab{color:var(--warn)}
.fl-src{margin-top:8px;font-size:11.5px}
.fl-src a{color:var(--accent);word-break:break-all}
#fl-list mark{background:color-mix(in srgb, var(--accent) 28%, transparent);color:inherit;border-radius:3px;padding:0 1px}
.fl-empty{padding:18px;text-align:center;color:var(--muted);font-size:14px}