/* สำเนาจาก CodexPHub/CodexPHub_Theme/CodexPHub_Theme.css — ห้ามแก้ที่นี่ (node scripts/sync-theme.ts) */
/* CodexPHub_Theme — v3 (2026-10-12 · ผู้ใช้อนุมัติ: จืด-มืดเป็นธีมหลัก) · ค่ากลาง + ชิ้นส่วนพื้นฐาน · ธีมกลาง macOS · 1 ธีม 2 สไตล์
   ฉบับอ่านง่าย: Obsisian/wiki/shared/rules-ui-theme.md · ตัวอย่าง 4 แบบ: prototype/theme-styles.html · ใช้: <link rel="stylesheet" href="CodexPHub_Theme.css">
   ค่าหลัก = สีจืด·มืด (ไม่ต้องใส่อะไร) · สไตล์: data-style="muted|vivid" · โหมด: data-theme="dark" (ค่าเริ่มต้น) | "light"
   ใส่ทั้งสองบน <html> (ใช้จริง) หรือบนกล่องใดก็ได้ (ใส่คู่กันบนกล่องเดียว เช่นหน้าตัวอย่างเทียบข้างกัน)
   ที่มา: จืด = Claude Design "Owner Console v2" · สด = "CodexPHub macOS" (2026-10-12) · ฟอนต์คงเดิม (ไม่ใช้ SF — ลิขสิทธิ์)
   ธีมตามโดเมน (ชั้น 2/3) override ได้เฉพาะกลุ่ม --p* ด้วย :root[data-tenant="…"][data-theme="light|dark"] วางต่อท้ายไฟล์นี้
   ห้ามใส่สี/ขนาดตายตัวในหน้า ให้ใช้ตัวแปรเหล่านี้ */

/* ไทยล็อก Noto Sans Thai Looped (หัวกลม) เฉพาะช่วงอักษรไทย · อังกฤษ/ตัวเลข Google Sans */
@import url("https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600;700&display=swap");
@font-face {
  font-family: "CodexPHub Thai"; font-weight: 400 700; font-display: swap;
  src: url("https://fonts.gstatic.com/s/notosansthailooped/v16/B50iF6pOpWTRcGrhOVJJ3-oPfY7WQuFu5R36MIjwurFMX_p0KVmQBWnPNGrg.woff2") format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

/* ══════════ ส่วนกลาง (เหมือนกันทุกสไตล์) ══════════ */
:root {
  /* ══ ฟอนต์ ══ ห้าม monospace (ยกเว้นคีย์) · ห้ามฟอนต์ Apple (SF) ตรงๆ — มีลิขสิทธิ์ */
  --font: "CodexPHub Thai", "Google Sans", "Noto Sans Thai", system-ui, sans-serif;
  --font-key: ui-monospace, Menlo, monospace;   /* เฉพาะแสดงคีย์/รหัส */
  --fs-title: 22px;     /* หัวหน้าในเนื้อหา        · 600 */
  --fs-h2: 17px;        /* หัวส่วน                 · 600 */
  --fs-bar: 16px;       /* ชื่อหน้าในแถบบน          · 600 */
  --fs-kpi: 21px;       /* ตัวเลขการ์ด             · 600 */
  --fs-body: 14px;      /* เนื้อหา                 · 400 */
  --fs-small: 12.5px;   /* ป้าย หมายเหตุ           · 400/500 */
  --fw-normal: 400; --fw-medium: 500; --fw-bold: 600;
  --lh: 1.55;           /* ไทยต้องโปร่ง กันสระ/วรรณยุกต์ชน */

  /* ══ รูปทรง ══ */
  --radius-card: 12px; --radius: 8px; --radius-pill: 999px;
  --side-w: 232px; --bar-h: 52px; --content-max: 1120px;

  /* ══ รหัสบริษัท c1–c4 (สีพาสเทล · ไม่ใช้สีชื่อจริง) · สไตล์กำหนดว่าเข้มแค่ไหน ══ */
  --c1: #F2B5C8; --c2: #A6DCCD; --c3: #F2D594; --c4: #B7CBF4; --on-c: #1A1B1E;
}

/* ══════════ สีจืด · มืด (ค่าเริ่มต้น = ธีมหลัก · ผู้ใช้เลือก 2026-10-12) ══════════ */
:root, [data-style="muted"], [data-theme="dark"] {
  --p: #D93B60; --p-hover: #E1506F; --p-active: #C3304F; --on-p: #FFFFFF;
  --tint: rgba(217,59,96,.18); --p-border: rgba(217,59,96,.5); --p-text: #F78CA5;
  --danger: #A80F2E; --on-danger: #FFFFFF;
  --bg: #0E0E10; --side: #18181B; --panel: #141416; --raised: #1A1A1D; --alt: rgba(255,255,255,.02);
  --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.14);
  --tx: #F5F5F7; --tx2: #C4C4CC; --tx3: #9A9AA2;
  --hover: rgba(255,255,255,.05); --seg: rgba(255,255,255,.07); --field: rgba(255,255,255,.06); --sel: rgba(255,255,255,.08);
  --in: #2EE59D; --out: #FF6666; --time: #4DA3FF; --ok: #2EE59D; --ok-tint: rgba(46,229,157,.22);
  --warn: #FFC02E; --warn-tint: rgba(255,192,46,.22); --warn-border: rgba(255,192,46,.45);
  --bad: #FF6666; --bad-tint: rgba(255,102,102,.22); --bad-border: rgba(255,102,102,.45);
  --test: #F08A24; --on-test: #1C1206;
  --glass: none;
  --shadow: inset 0 0 0 1px rgba(255,255,255,.09);
  --shadow-lg: 0 0 0 .5px rgba(0,0,0,.85), inset 0 0 0 .5px rgba(255,255,255,.12), 0 24px 64px rgba(0,0,0,.65);
  --code-mix: 26%; --code-tx: var(--tx);
  --bank-mix: 0%; --bank-base: var(--seg); --bank-tx: var(--tx2);
  color-scheme: dark;
}

/* ══════════ สีสด · มืด ══════════ */
[data-style="vivid"], [data-style="vivid"] [data-theme="dark"] {
  --p: #FF453A; --p-hover: #FF5E55; --p-active: #E8392F; --on-p: #FFFFFF;
  --tint: rgba(255,69,58,.15); --p-border: rgba(255,69,58,.5); --p-text: #FF8A80;
  --danger: #C4001F; --on-danger: #FFFFFF;
  --bg: #1E1E20; --side: rgba(40,38,42,.6); --panel: #262628; --raised: #2E2E31; --alt: rgba(255,255,255,.028);
  --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.15);
  --tx: #EBEBF0; --tx2: #A1A1A8; --tx3: #8A8A90;
  --hover: rgba(255,255,255,.06); --seg: rgba(255,255,255,.07); --field: rgba(255,255,255,.07); --sel: rgba(255,255,255,.1);
  --in: #5BD27C; --out: #FF9F8F; --time: #6AAEFF; --ok: #5BD27C; --ok-tint: rgba(48,209,88,.15);
  --warn: #FFB84D; --warn-tint: rgba(255,159,10,.14); --warn-border: rgba(255,159,10,.4);
  --bad: #FF7A70; --bad-tint: rgba(255,69,58,.14); --bad-border: rgba(255,69,58,.4);
  --test: #FF9F0A; --on-test: #1C1206;
  --glass: blur(40px) saturate(180%);
  --shadow: inset 0 0 0 .5px rgba(255,255,255,.09);
  --shadow-lg: 0 0 0 .5px rgba(0,0,0,.7), inset 0 0 0 .5px rgba(255,255,255,.12), 0 24px 70px rgba(0,0,0,.6);
  --code-mix: 100%; --code-tx: var(--on-c);
  --bank-mix: 100%; --bank-base: transparent; --bank-tx: initial; /* ไม่ตั้ง = ใช้ --bank-on ของแต่ละธนาคาร (ขาว) */
  color-scheme: dark;
}

/* ══════════ สีจืด · สว่าง (เลือกเอง data-theme="light") ══════════ */
[data-theme="light"] {
  /* TENANT (สีแบรนด์) */
  --p: #C42A50; --p-hover: #AE2446; --p-active: #981F3D; --on-p: #FFFFFF;
  --tint: rgba(196,42,80,.08); --p-border: rgba(196,42,80,.4); --p-text: #B02648;
  --danger: #8A1026; --on-danger: #FFFFFF; /* ปุ่มฉุกเฉิน · ไม่เกิน 1–2 ปุ่มต่อหน้า */
  /* พื้นและตัวอักษร */
  --bg: #F6F6F8; --side: #EEEEF2; --panel: #FFFFFF; --raised: #FBFBFC; --alt: #F9F9FA;
  --line: rgba(0,0,0,.07); --line-2: rgba(0,0,0,.13);
  --tx: #1C1C1F; --tx2: #4E4E57; --tx3: #6A6A73;
  --hover: rgba(0,0,0,.04); --seg: rgba(0,0,0,.06); --field: rgba(0,0,0,.05); --sel: rgba(0,0,0,.06);
  /* สีความหมาย (ห้าม tenant เปลี่ยน) · ต้องมีคำคู่เสมอ */
  --in: #157A4B; --out: #A8452E; --time: #1C5FD0; --ok: #157A4B; --ok-tint: #E5F4EC;
  --warn: #8F580B; --warn-tint: #FBF2E2; --warn-border: #EDCF98;
  --bad: #B83A40; --bad-tint: #FBEBEC; --bad-border: #F0BCBF;
  --test: #F08A24; --on-test: #1C1206;   /* แถบเว็บทดสอบ */
  /* วัสดุ: ทึบ (ไม่เบลอ) */
  --glass: none;
  --shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  --shadow-lg: 0 0 0 .5px rgba(0,0,0,.2), 0 20px 56px rgba(0,0,0,.18);
  /* รหัสบริษัท: พื้นจาง ตัวปกติ · ป้ายธนาคาร: ขาวดำ */
  --code-mix: 26%; --code-tx: var(--tx);
  --bank-mix: 0%; --bank-base: var(--seg); --bank-tx: var(--tx2);
  color-scheme: light;
}

/* ══════════ สีสด · สว่าง ══════════ */
[data-style="vivid"][data-theme="light"], [data-style="vivid"] [data-theme="light"] {
  --p: #E0281E; --p-hover: #CC2219; --p-active: #B51D15; --on-p: #FFFFFF;
  --tint: rgba(224,40,30,.08); --p-border: rgba(224,40,30,.4); --p-text: #C41E15;
  --danger: #9E0016; --on-danger: #FFFFFF;
  --bg: #FFFFFF; --side: rgba(236,232,234,.62); --panel: #F5F5F7; --raised: #FFFFFF; --alt: #F7F7F9;
  --line: rgba(0,0,0,.08); --line-2: rgba(0,0,0,.15);
  --tx: #1D1D1F; --tx2: #6E6E73; --tx3: #8A8A8F;
  --hover: rgba(0,0,0,.04); --seg: rgba(0,0,0,.06); --field: rgba(0,0,0,.05); --sel: rgba(0,0,0,.075);
  --in: #1A8A3A; --out: #C2410C; --time: #0A64D2; --ok: #1A8A3A; --ok-tint: #E5F6EA;
  --warn: #A05A00; --warn-tint: #FFF3DF; --warn-border: #F3CF8F;
  --bad: #D1342B; --bad-tint: #FDECEB; --bad-border: #F2B8B4;
  --test: #FF9F0A; --on-test: #1C1206;
  /* วัสดุ: กระจกเบลอ */
  --glass: blur(40px) saturate(180%);
  --shadow: inset 0 0 0 .5px rgba(0,0,0,.08);
  --shadow-lg: 0 0 0 .5px rgba(0,0,0,.2), 0 22px 60px rgba(0,0,0,.22);
  /* รหัสบริษัท: พื้นเต็มสี · ป้ายธนาคาร: สีแบรนด์จริง */
  --code-mix: 100%; --code-tx: var(--on-c);
  --bank-mix: 100%; --bank-base: transparent; --bank-tx: initial; /* ไม่ตั้ง = ใช้ --bank-on ของแต่ละธนาคาร (ขาว) */
  color-scheme: light;
}


/* มือถือ ≤760px: แถบซ้ายหาย → แถบล่าง · ตัวเลขการ์ดเล็กลง */
@media (max-width: 760px) {
  :root { --fs-kpi: 18px; }
}

/* ══════════ ชิ้นส่วนพื้นฐาน (ใช้ซ้ำทุกหน้า) ══════════ */
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--tx)}
[data-style],[data-theme]{color:var(--tx)}
body{font:var(--fs-body)/var(--lh) var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--p-text);text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--p);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums}.t{color:var(--time)}.up{color:var(--in)}.dn{color:var(--out)}

/* แถบซ้าย (แบบ Finder) + แถบบน — สีจืด = ทึบ · สีสด = กระจกเบลอ */
.cx-side{width:var(--side-w);flex:none;background:var(--side);-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);border-right:.5px solid var(--line-2);padding:12px 10px;display:flex;flex-direction:column;gap:2px}
.cx-side a{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:7px;color:var(--tx);font-size:13.5px}
.cx-side a:hover{background:var(--hover);text-decoration:none}
.cx-side a.on{background:var(--tint);color:var(--p-text);font-weight:500}
.cx-side small{display:block;padding:10px 10px 4px;font-size:11.5px;font-weight:600;color:var(--tx3)}
/* จุด 3 สีแบบ Mac (ตกแต่ง · aria-hidden) — บนสุดของแถบซ้าย หรือซ้ายสุดของแถบบนถ้าไม่มีแถบซ้าย · สีคงที่ทุกสไตล์ */
.cx-lights{display:inline-flex;gap:8px;align-items:center;padding:4px 2px;flex:none}
.cx-lights i{width:12px;height:12px;border-radius:50%;display:block;background:#FF5F57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.25)}
.cx-lights i:nth-child(2){background:#FEBC2E}.cx-lights i:nth-child(3){background:#28C840}
.cx-side .cx-lights{padding:2px 10px 14px}
.cx-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;height:var(--bar-h);padding:0 24px;
  background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);border-bottom:.5px solid var(--line-2)}
.cx-wrap{max-width:var(--content-max);margin:0 auto;padding:22px 24px 60px;display:flex;flex-direction:column;gap:18px}
.cx-sec{display:flex;align-items:baseline;gap:8px;margin:6px 0 -6px}
.cx-sec h2{font-size:var(--fs-h2);font-weight:600;margin:0}.cx-sec span{font-size:13px;color:var(--tx3)}

/* แถบเว็บทดสอบ */
.cx-test{background:var(--test);color:var(--on-test);font-size:12.5px;font-weight:600;text-align:center;padding:4px 12px}

/* การ์ด */
.cx-card{background:var(--panel);border:.5px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow)}
.cx-pad{padding:16px}

/* ปุ่ม: หลัก 1 ปุ่มต่อพื้นที่ */
.cx-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:var(--radius);padding:6px 14px;font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer}
.cx-btn.p{background:var(--p);color:var(--on-p)}.cx-btn.p:hover{background:var(--p-hover)}.cx-btn.p:active{background:var(--p-active)}
.cx-btn.s{background:var(--raised);border:.5px solid var(--line-2);box-shadow:var(--shadow)}.cx-btn.s:hover{background:var(--hover)}
.cx-btn.d{background:none;color:var(--out);border:.5px solid color-mix(in srgb,var(--out) 45%,transparent)}
.cx-btn.x{background:var(--danger);color:var(--on-danger);font-weight:700;box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--danger)} /* ฉุกเฉิน: login หมดอายุ, บอทหยุด, ยืนยันยอดเงิน */
.cx-ib{width:32px;height:32px;border:0;background:none;border-radius:8px;display:grid;place-items:center;color:var(--tx2);cursor:pointer}.cx-ib:hover{background:var(--hover)}

/* ช่องกรอก + ปุ่มแบ่งช่อง */
.cx-in{height:32px;padding:0 10px;border-radius:var(--radius);border:.5px solid var(--line-2);background:var(--field);color:var(--tx)}
.cx-in:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px var(--tint)}
.cx-seg{display:inline-flex;padding:2px;border-radius:8px;background:var(--seg)}
.cx-seg button{border:0;background:none;padding:3px 12px;border-radius:6px;font-size:12.5px;color:var(--tx2);cursor:pointer}
.cx-seg button.on{background:var(--raised);color:var(--tx);box-shadow:var(--shadow)}

/* สถานะ: จุด + คำเสมอ */
.cx-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.cx-dot.ok{background:var(--ok)}.cx-dot.warn{background:var(--warn)}.cx-dot.bad{background:var(--bad)}
.cx-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:2px 9px;border-radius:var(--radius-pill);white-space:nowrap}
.cx-pill.ok{background:var(--ok-tint);color:var(--in)}.cx-pill.warn{background:var(--warn-tint);color:var(--warn)}.cx-pill.bad{background:var(--bad-tint);color:var(--bad)}
.cx-chip{font-size:12px;padding:2px 9px;border-radius:var(--radius-pill);white-space:nowrap;border:.5px solid var(--line-2);color:var(--tx2)}

/* แถบเตือนในหน้า */
.cx-alert{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;border:.5px solid}
.cx-alert.bad{background:var(--bad-tint);border-color:var(--bad-border)}.cx-alert.warn{background:var(--warn-tint);border-color:var(--warn-border)}

/* ตาราง */
.cx-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.cx-tbl th{font-weight:500;font-size:12px;color:var(--tx3);text-align:left;padding:9px 14px;border-bottom:.5px solid var(--line-2);white-space:nowrap}
.cx-tbl td{padding:10px 14px;border-bottom:.5px solid var(--line);vertical-align:middle}
.cx-tbl tr:last-child td{border-bottom:0}.cx-tbl tbody tr:hover{background:var(--hover)}
.cx-tbl td small{display:block;color:var(--tx3);font-size:12px}
.cx-scroll{overflow-x:auto}

/* รหัสบริษัท (ไม่ใช้สีชื่อจริง) — สีจืด = พื้นจาง · สีสด = พื้นเต็มสี */
.cx-code{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;font-weight:600;font-size:12px;flex:none;
  background:color-mix(in srgb,var(--c) var(--code-mix),transparent);color:var(--code-tx)}
.cx-code.c1{--c:var(--c1)}.cx-code.c2{--c:var(--c2)}.cx-code.c3{--c:var(--c3)}.cx-code.c4{--c:var(--c4)}

/* ป้ายธนาคาร 20/28/40px — สีจืด = ขาวดำ · สีสด = พื้นสีแบรนด์ (สีจาก tools/make_logo_preview.py BRAND) · ใส่ <img> โลโก้ขาวข้างในได้ */
.cx-bank{--bank:#8E8E93;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:7px;flex:none;font-size:9.5px;font-weight:700;letter-spacing:.02em;
  background:color-mix(in srgb,var(--bank) var(--bank-mix),var(--bank-base));color:var(--bank-tx,var(--bank-on,#FFFFFF));border:.5px solid var(--line)}
.cx-bank.sm{width:20px;height:20px;border-radius:5px;font-size:7.5px}.cx-bank.lg{width:40px;height:40px;border-radius:10px;font-size:12px}
.cx-bank img{width:70%;height:70%;object-fit:contain}
.cx-bank.kbank{--bank:#138F2D}.cx-bank.scb{--bank:#4E2E7F}.cx-bank.bbl{--bank:#1E4598}.cx-bank.ktb{--bank:#1BA5E1}
.cx-bank.bay{--bank:#FEC43B;--bank-on:#1C1206}.cx-bank.gsb{--bank:#EB198D}.cx-bank.ttb{--bank:#0A4FA8}.cx-bank.baac{--bank:#4B9B3E}
.cx-bank.ghb{--bank:#F57D23}.cx-bank.uob{--bank:#0B3A8B}.cx-bank.cimb{--bank:#7E2F36}.cx-bank.kk{--bank:#199ED8}
.cx-bank.tisco{--bank:#0B4EA2}.cx-bank.lhb{--bank:#6D6E71}.cx-bank.icbc{--bank:#C4001D}

@media (max-width:760px){
  .cx-bar{padding:0 16px}.cx-wrap{padding:16px 16px 90px}
  .cx-side{display:none}
  .cx-hide-m{display:none}.cx-pill{white-space:normal}
  .cx-tbl th,.cx-tbl td{padding:9px 10px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}