:root{
  --bg:#eef0f4; --card:#fff; --ink:#222; --muted:#888; --line:#dcdfe6;
  --blue:#1a4ad1; --head:#3a4a6a; --accent:#6a4aa0;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Tahoma,"Microsoft YaHei",sans-serif;background:var(--bg);color:var(--ink);font-size:15px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:linear-gradient(135deg,#3a4a6a,#2a3550);color:#fff}
.topbar .brand{display:flex;align-items:center;gap:12px}
.topbar .logo{font-family:"Microsoft YaHei",serif;font-size:30px;font-weight:700;background:rgba(255,255,255,.13);padding:5px 11px;border-radius:10px}
.topbar h1{margin:0;font-size:1.35em} .topbar .sub{margin:2px 0 0;font-size:.74em;opacity:.85}
.setbtn{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3);padding:8px 12px;border-radius:8px;cursor:pointer;font-size:.9em}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;margin:10px;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.topinfo{padding:10px 14px;max-width:760px;margin:10px auto}
.ti-row{font-size:.9em;padding:2px 0} .ti-row b{color:var(--head);margin-right:6px}
.ti-row.zibai{color:var(--accent);font-weight:600}
.ti-row.zibai b{color:var(--accent)}
.ti-pillars{display:flex;gap:8px;margin-top:8px}
.pil{flex:1;text-align:center;border:1px solid var(--line);border-radius:8px;padding:5px;background:#fafbfc}
.pil-l{display:block;font-size:.7em;color:var(--muted)}
.pil-g,.pil-z{font-family:"Microsoft YaHei",serif;font-size:1.4em;font-weight:700;display:block;line-height:1.1}
/* layout — 4 คอลัมน์: 神煞 | ผัง | meta | คอลัมน์อ่าน(ดีร้าย+ตำรา)
   โครง 3 คอลัมน์แรก = ของเดิม (verify ตรง星僑 แล้ว ไม่แตะ) · คอลัมน์อ่าน = เพิ่มใหม่ทางขวาของผัง
   สไตล์คอลัมน์อ่าน ยืมธรรมเนียม NCC จาก horachin (กล่องขอบมน · ฟอนต์ 12px · หัวข้อ #556) */
/* ⚠ ห้ามใส่ align-items:start — แผง神煞/meta ต้องยืดเต็มความสูงแถว (.ss-row ใช้ flex:1)
   เคยใส่แล้วแผงยุบเหลือ 141px = อ่านไม่ออก (บั๊กจาก commit bdca1fc) */
.layout{display:grid;grid-template-columns:98px minmax(240px,300px) 116px minmax(300px,460px);gap:8px;padding:0 10px;max-width:1100px;margin:0 auto;justify-content:center}
/* ★ หัวใจ "สูงเท่าคอลัมน์ผัง": read-col ไม่มีความสูงในตัว (inner absolute)
   → ความสูงแถวถูกกำหนดโดยคอลัมน์ผังล้วน · เนื้อหาที่ยาวกว่าเลื่อนอ่านข้างใน ไม่ดันหน้ายาว */
.read-col{position:relative;align-self:stretch;min-height:100%}
.read-inner{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:8px;padding-right:2px}
.read-inner::-webkit-scrollbar{width:7px}
.read-inner::-webkit-scrollbar-thumb{background:#c6cad2;border-radius:4px}
.read-inner .card{margin:0;flex:0 0 auto}
/* จอแคบ (แท็บเล็ต/มือถือ) → คอลัมน์อ่านลงมาเต็มความกว้างใต้ผัง · ความสูงตามเนื้อหาจริง */
@media(max-width:1080px){
  .layout{grid-template-columns:98px minmax(0,1fr) 116px;max-width:780px}
  .read-col{grid-column:1/-1;position:static;min-height:0}
  .read-inner{position:static;overflow:visible;height:auto}
}
@media(max-width:560px){.layout{grid-template-columns:76px 1fr 98px}}
/* คอลัมน์อ่าน: ธรรมเนียม NCC (ลอกจาก horachin app-liuren) — กระชับ อ่านต่อเนื่องในคอลัมน์แคบ */
.read-inner .card{padding:7px 9px;font-size:12px}
.read-inner .bp-title,.read-inner .jd-title{font-size:12.5px}
.read-inner h4{margin:0 0 3px;font-size:12px;color:#556}
.read-inner .bp-li,.read-inner .jd-signals li{font-size:11.5px;line-height:1.5}
.read-inner .bp-opt,.read-inner .zs-opt{font-size:10.5px;padding:1px 7px}
.read-inner .bp-r,.read-inner .jd-reason{min-width:0}      /* กันข้อความจีนดันคอลัมน์บาน */
.read-inner .bp-zh{word-break:break-word}
.read-inner .jd-src,.read-inner .jd-zs{display:none}         /* คอลัมน์แคบ → ซ่อน meta ยาว (ยังอยู่ในหน้าเต็ม) */
.panel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:4px 3px;display:flex;flex-direction:column}
.center{display:flex;flex-direction:column;gap:8px}
.box{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.box-h{font-size:.8em;color:var(--head);font-weight:700;border-bottom:1px solid var(--line);padding-bottom:4px;margin-bottom:6px}
/* ═══ ผัง 三傳/四課/天地盤 = ตารางแบบ NCC (ลอกโครงจาก horachin/app-liuren + index.html) ═══
   คงของ daliuren ที่ horachin ไม่มี: สีตามบทบาท · กรอบ空亡 日空เขียว/時空ส้ม · สวิตช์ 遁干/天將 */
/* ═══ ผัง = ช่องจตุรัส (มาตรฐานเดิม daliuren · เจ้าสำนักยืนยัน 2026-07-17) ═══
   ★ ขนาดฟอนต์เดียวทั้งผัง = --gsize (ยึด "ราศีล่างบนซำท้วง" เป็นมาตรฐาน)
     天将/遁干/地盤/六親 = ขนาดเดียวกันหมด · เดิม 1.9em(28.5px) ใหญ่ไป → 22px กระชับ
   สีตามบทบาท: 六親เขียว · 遁干แดง(三傳/四課) / ทอง(天地盤) · 上神น้ำเงิน · 下神/地盤ทอง-เทา · 天将ม่วง */
:root{--gsize:22px}
/* ⚠ อย่าใส่ #plate ที่นี่ — id specificity สูงกว่า .plate จะทับ background/border/padding ของผังทิ้ง */
#sanchuan,#sike{background:none;border:none;padding:0;border-radius:0}
.sc-grid,.sk-grid{display:grid;grid-template-columns:repeat(4,1fr);width:52%;margin:0 auto;
  background:#9aa0aa;gap:1px;border:1px solid #9aa0aa;border-radius:2px}
.g-cell{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:#fff;
  font-family:"Microsoft YaHei",serif;font-weight:700;font-size:var(--gsize);line-height:1}
.g-lq{color:#1f7a33}   /* 六親 (ลักชิง) เขียว — คอลัมน์ซ้ายสุดของซำท้วง */
.g-dun{color:#c0392b}  /* 遁干 (ราศีฟ้า) แดง */
.g-zhi{color:#1a4ad1}  /* 地支/上神 (ราศีดิน) น้ำเงิน */
.g-di{color:#b8860b}   /* 下神 เหลืองทอง */
.g-jiang{color:#8e44ad} .g-jiang.zhu{color:#c0392b}   /* 天将 (เจียง) ม่วง · 朱雀 แดง */
/* ── 天地盘 square: 4 มุมต่อช่อง (天将 ซ้ายบน · 遁干 ขวาบน · 上神 ซ้ายล่าง · 地盤 ขวาล่าง) ── */
.plate{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:4px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px;position:relative;
  aspect-ratio:1/1;width:100%;max-width:290px;margin:0 auto}
.pl-cell{border:1px solid var(--line);border-radius:7px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;place-items:center;background:#fafbfc;padding:0}
.pl-c{font-family:"Microsoft YaHei",serif;font-size:var(--gsize);font-weight:700;line-height:1}
.pl-j{color:#8e44ad}          /* 天将 ม่วง (มุมซ้ายบน) */
.pl-j.zhu{color:#c0392b}      /* 朱雀 แดง */
.pl-dun{color:#b8860b}        /* 遁干 ราศีฟ้า ทอง (มุมขวาบน) */
.pl-up{color:#1a4ad1}         /* 天盤上神 เทียนปั๊ว น้ำเงิน (มุมซ้ายล่าง) */
.pl-di{color:#999}            /* 地盤 ตี่ปั๊ว เทา (มุมขวาล่าง) */
.pl-center{grid-row:2/4;grid-column:2/4;display:flex;align-items:center;justify-content:center}
.pl-kt{color:#c0392b;font-family:"Microsoft YaHei",serif;font-size:1.2em;font-weight:700;text-align:center}
/* ── กรอบ空亡 (คงบ้วง): 日空=เขียว · 時空=ส้ม (ตาม星僑) · ใช้ทั้ง 三傳/四課/天地盤 ── */
.kday{box-shadow:0 0 0 1.6px #1f9d55;border-radius:3px;padding:0 1px}
.kshi{box-shadow:0 0 0 1.6px #e08e0b;border-radius:3px;padding:0 1px}
@media(max-width:560px){:root{--gsize:17px}}   /* จอแคบ: ย่อทั้งผังพร้อมกันจากตัวแปรเดียว */
/* panels */
.ss-h,.rp b{font-size:.78em;color:var(--head);font-weight:700;flex:0 0 auto}
.ss-h2{margin-top:5px;border-top:2px solid var(--accent);padding-top:3px;color:var(--accent);flex:0 0 auto;font-size:.82em}
.ss-toggle{cursor:pointer;background:#eef0f6;border-radius:6px;padding:4px 2px;text-align:center;line-height:1.15}
.ss-toggle:hover{background:#e2e6f0}
.ss-school{display:block;color:var(--blue);font-size:.92em;margin-top:1px}
/* แถว神煞 ยืดเต็มความสูงแผง (= สูงเท่า 三傳+四課+plate)
   ⚠ ผังเป็นตารางกระชับแล้ว (สูง ~481px) · 神煞 27 แถว → ฟอนต์ต้องเล็กลง ไม่งั้นล้น (ต้นแบบใช้ 12px) */
/* flex-basis:auto (ไม่ใช่ 0) → แผงบอกความสูงที่ตัวเองต้องการได้ → แถวสูงพอ ไม่บีบตัวหนังสือ
   ถ้าคอลัมน์ผังสูงกว่า แถวจะยืดเติมเต็มเอง (flex-grow:1) */
.ss-row{flex:1 1 auto;display:flex;align-items:center;justify-content:space-between;gap:2px;font-size:.8em;padding:0 4px;border-bottom:1px solid #f0f0f0}
.ss-row>span:first-child{white-space:nowrap}
.ss-row b{font-family:"Microsoft YaHei",serif;font-size:1.25em}
.ss-note{font-size:.62em;color:var(--muted);margin-top:3px;padding:0 4px;flex:0 0 auto}
.ss-src{color:#c0392b;font-size:.68em;margin-left:1px}
.rp{flex:1 1 0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-bottom:1px solid #f0f0f0;padding:3px 2px;text-align:center}
.rp span{font-size:1.18em;color:var(--blue);font-family:"Microsoft YaHei",serif;line-height:1.15}
.rp .nm-sub{font-size:.72em!important}
.rp .kt{color:#c0392b;font-weight:700}
/* controls */
.controls{padding:10px 14px;max-width:760px;margin:10px auto}
.ctl-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:4px 0}
.ctl-row.adj{font-size:.82em;color:var(--muted)}
.ctl-row.adj span{display:inline-flex;align-items:center;gap:3px}
label{font-size:.82em;color:var(--muted);display:flex;flex-direction:column;gap:3px}
input{font:inherit;padding:7px 9px;border:1px solid var(--line);border-radius:7px}
button{font:inherit;cursor:pointer}
.adj button{width:28px;height:28px;border:1px solid var(--line);border-radius:6px;background:#fff;font-weight:700}
.ghost{background:#fff;color:var(--head);border:1px solid var(--head);padding:7px 13px;border-radius:7px;font-weight:600}
.ctl-row.qr{gap:10px;align-items:flex-end;margin-top:6px;padding-top:8px;border-top:1px dashed var(--line)}
.ctl-row.qr input{width:130px}
.nm-sub{font-size:.7em!important;color:var(--muted)!important;font-family:inherit!important}
/* saved charts */
.saved-row{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid #f0f0f0}
.saved-main{flex:1;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.saved-main:hover b{color:var(--blue)}
.saved-meta{font-size:.76em;color:var(--muted);font-family:"Microsoft YaHei",serif}
.saved-del{background:none;border:none;font-size:1.05em;padding:4px 6px;opacity:.6}
.saved-del:hover{opacity:1}
.saved-empty{text-align:center;color:var(--muted);padding:24px;font-size:.9em}
/* people picker (年命) */
.ppl-search{width:calc(100% - 32px);margin:8px 16px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font:inherit}
#peopleList{max-height:54vh;overflow:auto}
.ppl-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid #f0f0f0;cursor:pointer}
.ppl-row:hover{background:#f7f8fc} .ppl-row b{font-weight:600}
.ppl-row span{color:var(--muted);font-size:.85em;font-family:"Microsoft YaHei",serif;white-space:nowrap}
.foot{text-align:center;color:var(--muted);font-size:.74em;padding:14px}
/* tabs */
.tabs{display:flex;gap:6px;max-width:760px;margin:10px auto 0;padding:0 10px}
.tab{flex:1;padding:9px;border:1px solid var(--line);border-bottom:none;border-radius:9px 9px 0 0;background:#eceef3;color:var(--head);font-weight:600;font-size:.92em}
.tab.active{background:#fff;color:var(--blue);border-color:var(--blue)}
/* ตาราง神煞 อ้างอิง */
#viewRef{max-width:760px;margin:0 auto;padding:6px 10px 30px}
.ref-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0}
.ref-bar h2{font-size:1.05em;color:var(--head)}
.ref-h{font-size:.9em;color:var(--accent);margin:16px 0 5px;font-weight:700}
.ref-tbl{width:100%;border-collapse:collapse;font-size:.78em;background:#fff;table-layout:fixed}
.ref-tbl th,.ref-tbl td{border:1px solid var(--line);padding:4px 2px;text-align:center;font-family:"Microsoft YaHei",serif}
.ref-tbl thead th{background:#f3f4f8;color:var(--head);font-weight:700}
.ref-tbl .ref-zh{font-weight:700;white-space:nowrap;width:54px}
.ref-tbl .ref-th{font-family:"Segoe UI",Tahoma,sans-serif;color:var(--muted);font-size:.92em;white-space:nowrap;width:88px;text-align:left;padding-left:6px}
/* ตารางศัพท์: กว้างพอดีเนื้อหา · ชิดซ้ายทุกคอลัมน์ · ไม่ยืดเต็มจอ */
.gloss-tbl{width:auto;table-layout:auto;max-width:100%}
.gloss-tbl td,.gloss-tbl thead th{text-align:left;white-space:nowrap}
.gloss-tbl .ref-zh{width:auto;font-size:1.05em;padding-right:22px}
.gloss-tbl .ref-th{width:auto;padding-right:22px}
.gloss-tbl .gloss-m{white-space:normal;max-width:560px;font-family:"Segoe UI",Tahoma,sans-serif;color:var(--ink);padding:4px 8px}
@media print{
  .topbar,.tabs,.controls,.foot,.ref-bar,#setBtn{display:none!important}
  body{background:#fff;font-size:12px}
  /* พิมพ์เฉพาะ view ที่เปิดอยู่ (view อื่นมี [hidden] = ซ่อนเอง) */
  #viewRef,#viewGloss{max-width:none;padding:0}
  .ref-tbl{font-size:10px;page-break-inside:auto}
  .ref-h{page-break-after:avoid}
}
/* modals */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:50;align-items:center;justify-content:center;padding:16px}
.sheet{background:#fff;border-radius:14px;width:100%;max-width:440px;max-height:84vh;overflow:auto;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.sheet.sm{max-width:340px} .sheet.pop{max-width:380px}
.sheet-h{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff}
.sheet-h b{font-size:1.05em} .sheet-h button{background:none;border:none;font-size:1.2em;color:var(--muted)}
.sheet-b{padding:6px 0}
.set-sec{font-size:.78em;color:var(--muted);background:#f3f4f8;padding:6px 16px;font-weight:700}
.set-row{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid #f0f0f0;cursor:pointer}
.set-row:hover{background:#f7f8fc}
.set-ic{width:22px;text-align:center}.set-lbl{flex:1}
.set-info{background:none;border:none;font-size:1em;padding:2px 6px}
.set-val{color:var(--blue);font-weight:700;font-size:.9em}
.opt{padding:14px 18px;border-bottom:1px solid #f0f0f0;cursor:pointer;font-size:1.05em}
.opt.sel{color:#1f9d55;font-weight:700} .opt:hover{background:#f7f8fc}
.info{padding:16px 18px;line-height:1.7;font-size:.95em}
.info b{color:var(--accent)}