@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+Thai:wght@500;600&family=Noto+Sans+Thai:wght@400;500;600&family=Sarabun:wght@400;500;600;700&display=swap");
  :root {
    color-scheme: light;
    /* ---- ดีไซน์ v2 "วะ-โมเดิร์น" (docs/UX.md §4 · ผู้ใช้ตกลง 10 ก.ย. 2569) ---- */
    --bg: #F6F4EE; --surface: #FFFFFF; --ink: #1C1F23; --ink2: #5C6370; --ink3: #8A9099;
    --line: #E4E0D6; --line2: #EFECE4;
    --brand: #2F6B4F; --brand-ink: #24553F; --brand-soft: #EAF1EC;
    --gold: #B8933C; --gold-soft: #F6EFDD;
    --danger: #B3261E; --danger-soft: #F9E9E7; --info: #2B4C7E; --info-soft: #E9EEF6; --warn: #C48A1B; --warn-soft: #FBF3E1;
    --serif: "Noto Serif Thai", "Sarabun", serif;
    --display: "Noto Sans Thai", "Sarabun", "IBM Plex Sans Thai", system-ui, sans-serif;
    --body: "Sarabun", "Noto Sans Thai", "IBM Plex Sans Thai", system-ui, sans-serif;
    --radius: 6px; --radius-lg: 8px; --shadow-sm: none; --shadow: 0 12px 32px rgba(28,31,35,.12);
    /* ---- alias ชื่อเดิม (หน้าเก่าใช้ต่อได้ ไม่ต้องแก้) ---- */
    --ink-2: var(--ink2); --ink-3: var(--ink3); --line-2: var(--line2); --ground: var(--bg); --ground2: var(--bg); --muted: var(--ink2); --faint: var(--ink3); --line-soft: var(--line2); --grid: var(--line2);
    --teal: var(--info); --teal-ink: #1F3A63; --teal-soft: var(--info-soft);
    --amber: var(--warn); --amber-soft: var(--warn-soft); --red: var(--danger); --red-soft: var(--danger-soft); --green: var(--brand); --green-soft: var(--brand-soft);
    --seq3: #A9B9D8; --seq4: #6B84B5; --seq5: #2B4C7E;
    /* สีระดับ triage ตาม MOPH ED Triage (คงเดิม · ใช้เฉพาะระดับ triage) */
    --t1: #B3261E; --t1-soft: #F9E9E7; --t2: #C2185B; --t2-soft: #FBE6EE; --t3: #C48A1B; --t3-soft: #FBF3E1; --t4: #2F6B4F; --t4-soft: #EAF1EC; --t5: #8A9099; --t5-soft: #EFECE4;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: #14171B; --surface: #1C2026; --ink: #E8E6E1; --ink2: #A6ABB3; --ink3: #7C838C; --line: #2C3138; --line2: #23272D; --brand: #6FB893; --brand-ink: #93CDB0; --brand-soft: #1B3328; --gold: #D2B15E; --gold-soft: #33301F; --danger: #F08A75; --danger-soft: #3D1F19; --info: #8FB0E6; --info-soft: #1E2A3F; --warn: #E6B45A; --warn-soft: #3A2F12;
      --ground: #0E141F; --ground2: #121A2A; --surface: #171F2E; --ink: #E6EAF2; --muted: #A3ADC2; --faint: #7D889E;
      --line: #2C3648; --line-soft: #232C3D; --grid: #202A3B;
      --brand: #5FCB94; --brand-ink: #8EE0B6; --brand-soft: #123B29;
      --teal: #7B9BE8; --teal-ink: #A9BFF2; --teal-soft: #1B2747;
      --gold: #D9B95A; --gold-soft: #3A2F12;
      --amber: #EBA84E; --amber-soft: #3B2A12; --red: #F08A75; --red-soft: #3D1F19; --green: #6FC495; --green-soft: #123B29;
      --seq3: #2C3F7A; --seq4: #4A66B3; --seq5: #7B9BE8;
      --t1: #F07C6E; --t1-soft: #3D1F19; --t2: #F48FB1; --t2-soft: #3A1B2A; --t3: #F2C94C; --t3-soft: #3A2F12; --t4: #6FC495; --t4-soft: #123B29; --t5: #A3ADC2; --t5-soft: #232C3D;
      --shadow: 0 8px 24px rgba(0,0,0,.45);
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #14171B; --surface: #1C2026; --ink: #E8E6E1; --ink2: #A6ABB3; --ink3: #7C838C; --line: #2C3138; --line2: #23272D; --brand: #6FB893; --brand-ink: #93CDB0; --brand-soft: #1B3328; --gold: #D2B15E; --gold-soft: #33301F; --danger: #F08A75; --danger-soft: #3D1F19; --info: #8FB0E6; --info-soft: #1E2A3F; --warn: #E6B45A; --warn-soft: #3A2F12;
    --ground: #0E141F; --ground2: #121A2A; --surface: #171F2E; --ink: #E6EAF2; --muted: #A3ADC2; --faint: #7D889E;
    --line: #2C3648; --line-soft: #232C3D; --grid: #202A3B;
    --brand: #5FCB94; --brand-ink: #8EE0B6; --brand-soft: #123B29;
    --teal: #7B9BE8; --teal-ink: #A9BFF2; --teal-soft: #1B2747;
    --gold: #D9B95A; --gold-soft: #3A2F12;
    --amber: #EBA84E; --amber-soft: #3B2A12; --red: #F08A75; --red-soft: #3D1F19; --green: #6FC495; --green-soft: #123B29;
    --seq3: #2C3F7A; --seq4: #4A66B3; --seq5: #7B9BE8;
    --t1: #F07C6E; --t1-soft: #3D1F19; --t2: #F48FB1; --t2-soft: #3A1B2A; --t3: #F2C94C; --t3-soft: #3A2F12; --t4: #6FC495; --t4-soft: #123B29; --t5: #A3ADC2; --t5-soft: #232C3D;
    --shadow: 0 8px 24px rgba(0,0,0,.45);
  }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); min-height: 100vh; color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.55; }
  button { font: inherit; color: inherit; }
  .brandbar { display:flex; align-items:center; gap:12px; }
  .brandbar .logo { width:34px; height:34px; border-radius:50%; border:2px solid var(--danger); background:none; box-shadow:none; color:var(--danger); font-size:0; text-align:center; flex:none; }
  .brandbar .logo::after { content:"ทพ"; font:600 12px/30px var(--serif); letter-spacing:.02em; }
  h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: 0; }
  h1 { font-family: var(--serif); font-weight: 600; }
  .brandbar .site { font-family: var(--serif); font-weight:600; font-size:18px; color: var(--ink); letter-spacing:.01em; line-height:1.15; }
  .brandbar .site em { font-style: normal; color: var(--brand); }
  .brandbar .sub { font-family: var(--display); font-size:11px; color: var(--ink2); font-weight:400; letter-spacing:.04em; }
  :root[data-theme="dark"] .brandbar .site em, :root[data-theme="dark"] .brandbar .sub { color: var(--gold); }
  /* ---------- องค์ประกอบพื้นฐานร่วม (หน้าใดกำหนดเองจะทับค่าเหล่านี้) ---------- */
  .tp-btn, .btn { font-family: var(--body); }
  h1, h2, h3, h4 { letter-spacing: -.01em; }
  ::selection { background: var(--brand-soft); }
  a { color: var(--brand-ink); }
  input, select, textarea { font-family: var(--body); }
  /* ---------- กระดานสนทนากลาง (ลิ้นชักขวา) ---------- */
  .chatfab{position:fixed;right:18px;bottom:18px;z-index:70;border:0;border-radius:999px;padding:12px 18px;background:var(--brand);color:#fff;font-weight:700;font-size:15px;box-shadow:0 8px 24px rgba(0,0,0,.18);cursor:pointer;display:flex;gap:8px;align-items:center}
  .chatfab .bd{background:var(--red);color:#fff;border-radius:999px;padding:0 8px;font-size:12px;min-width:20px;text-align:center}
  .chatdrawer{position:fixed;top:0;right:0;height:100vh;width:min(420px,100vw);background:var(--surface);border-left:1px solid var(--line-soft);box-shadow:-8px 0 24px rgba(0,0,0,.12);z-index:80;transform:translateX(105%);transition:.25s;display:flex;flex-direction:column}
  .chatdrawer.open{transform:none}
  .chatdrawer .hd{padding:10px 14px;border-bottom:1px solid var(--line-soft);display:flex;gap:8px;align-items:center}.chatdrawer .hd b{font-family:var(--display);font-size:16px}
  .chatdrawer .chs{display:flex;gap:4px;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid var(--line-soft)}
  .chatdrawer .chs button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 10px;font-size:12.5px;cursor:pointer;display:flex;gap:4px;align-items:center}.chatdrawer .chs button.on{background:var(--brand);color:#fff;border-color:var(--brand)}
  .chatdrawer .chs .bd{background:var(--red);color:#fff;border-radius:999px;padding:0 6px;font-size:11px}
  .chatdrawer .log{flex:1;overflow:auto;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
  .cmsg{border-radius:12px;padding:6px 10px;font-size:13px;background:var(--ground);border:1px solid var(--line-soft)}.cmsg .who{font-size:11.5px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap}.cmsg .who b{color:var(--ink)}.cmsg.sys{background:var(--teal-soft);border-color:transparent}.cmsg.crit{background:var(--red-soft);border-color:var(--red)}.cmsg .at{background:var(--gold-soft);color:#7A5A0E;border-radius:6px;padding:0 5px;font-weight:600}.cmsg .mail{font-size:11px;color:var(--muted)}
  .chatdrawer .in{padding:8px 12px;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:6px}
  .chatdrawer .in .roles,.chatdrawer .in .ats{display:flex;gap:4px;flex-wrap:wrap}.chatdrawer .in .roles button,.chatdrawer .in .ats button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:3px 9px;font-size:12px;cursor:pointer}.chatdrawer .in .roles button.on{background:var(--teal);color:#fff;border-color:var(--teal)}.chatdrawer .in .ats button.on{background:var(--gold-soft);border-color:var(--gold)}
  .chatdrawer .in .row{display:flex;gap:6px}.chatdrawer .in input{flex:1;font:inherit;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--surface);color:var(--ink)}
  .chatdrawer .quick{display:flex;gap:4px;flex-wrap:wrap}.chatdrawer .quick button{border:1px solid var(--line-soft);background:var(--surface);border-radius:10px;padding:5px 8px;font-size:17px;cursor:pointer;line-height:1}
  .tabs button .nb{background:var(--red);color:#fff;border-radius:999px;padding:0 6px;font-size:11px;margin-left:4px}
  .notif{position:fixed;left:50%;top:14px;transform:translateX(-50%);background:var(--ink);color:var(--ground);padding:8px 14px;border-radius:10px;font-size:13.5px;z-index:90;box-shadow:0 8px 24px rgba(0,0,0,.25);display:flex;gap:10px;align-items:center;opacity:0;transition:.25s;pointer-events:none}.notif.show{opacity:1}

  /* ---- v2 ร่วม: ตัวเลข · ปุ่ม · ช่องกรอก ---- */
  .kpi b, .num, .big, [data-num] { font-variant-numeric: tabular-nums; font-family: var(--display); font-weight: 500; }
  .btn, .tp-btn, button.btn { border-radius: 4px; font-family: var(--display); font-weight: 500; }
  input, select, textarea { border-radius: 4px; }
  .card, .panel { box-shadow: none; border: 1px solid var(--line); }