/* ============================================================
   โทนสี: ชุดที่ผ่านการตรวจ contrast และตาบอดสีมาแล้ว
   สว่างเป็นค่าตั้งต้น มืดสลับด้วย prefers-color-scheme
   ============================================================ */
:root {
  color-scheme: light;
  --bg:        #f6f6f4;
  --panel:     #fcfcfb;
  --line:      #e3e2dd;
  --fg:        #0b0b0b;
  --fg-muted:  #52514e;
  --ok:        #1a7f4b;
  --bad:       #c0392f;
  --warn:      #a86a00;
  --grid:      #ebeae6;
  --axis:      #cdccc6;
  --muted-mark:#b8b7b1;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --s8: #e34948;
  --sans: 'IBM Plex Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'IBM Plex Serif', Georgia, serif;
  --r: 8px;
  --gap: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:        #141413;
    --panel:     #1a1a19;
    --line:      #333230;
    --fg:        #f0efec;
    --fg-muted:  #c3c2b7;
    --ok:        #4caf7d;
    --bad:       #ef6b63;
    --warn:      #d79a2b;
    --grid:      #272725;
    --axis:      #403f3c;
    --muted-mark:#55544f;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
    --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
[hidden] { display: none !important; }
button, select, input { font-family: inherit; }

/* ---------- ด่านเข้า ---------- */
.gate { min-height: 100svh; display: grid; place-items: center; padding: 24px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left)); }
.gate-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 32px 28px; max-width: 30rem; width: 100%; text-align: center; }
.gate-title { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; margin: 0 0 .5rem; }
.gate-sub { color: var(--fg-muted); font-size: .875rem; margin: 0 0 1.5rem; }
.gate-btn { display: flex; justify-content: center; min-height: 44px; }
.gate-msg { margin: 1.25rem 0 0; font-size: .875rem; color: var(--bad); }
.gate-cfg { margin: 1rem 0 0; font-size: .8125rem; color: var(--fg-muted); text-align: left; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; }
.gate-cfg code { font-size: .78rem; word-break: break-all; }

/* ---------- โครงหน้า ---------- */
.lx {
  max-width: 1200px; margin: 0 auto;
  padding: 24px max(16px, env(safe-area-inset-right)) 48px max(16px, env(safe-area-inset-left));
}
.head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 28px; }
.head-row { display: flex; gap: var(--gap); justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.title { font-family: var(--serif); font-weight: 400; font-size: 1.75rem; margin: 0 0 .25rem; text-wrap: balance; }
.take { margin: 0; max-width: 62ch; }
.take b { font-weight: 600; font-variant-numeric: tabular-nums; }
.asof, .stale { margin: 0; font-size: .8125rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.stale { color: var(--warn); }
.who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.viewer { font-size: .8125rem; color: var(--fg-muted); }
.btn { background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: var(--r); padding: .35rem .7rem; font-size: .8125rem; cursor: pointer; }
.btn:hover { border-color: var(--fg-muted); }
.btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

/* ---------- ตัวเลขนำ ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--gap); margin-bottom: 32px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.flag { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; color: var(--fg-muted); }
.dot { width: .4rem; height: .4rem; border-radius: 50%; display: inline-block; }
.bad .dot { background: var(--bad); }
.warn .dot { background: var(--warn); }
.kpi-cap { font-size: .8125rem; color: var(--fg-muted); }
.kpi-main { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.kpi-num { font-family: var(--serif); font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bad .kpi-num { color: var(--bad); }
.warn .kpi-num { color: var(--warn); }
.kpi-unit { font-size: .8125rem; color: var(--fg-muted); }
.kpi-sub { font-size: .8125rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; }

/* ---------- การ์ด ---------- */
.sec { margin-bottom: 32px; }
.sec-h { font-size: 1rem; font-weight: 600; margin: 0 0 var(--gap); }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--gap); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; position: relative; min-width: 0; }
.card-h { font-size: .95rem; font-weight: 600; margin: 0 0 2px; }
.card-n { font-size: .8125rem; color: var(--fg-muted); margin: 0 0 var(--gap); max-width: 64ch; }
.plot { min-height: 240px; }
.plot svg { display: block; overflow: visible; }
.lab { font-size: .75rem; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; font-size: .75rem; color: var(--fg-muted); }
.legend .k { display: inline-flex; align-items: center; gap: .3rem; }
.legend i { width: .8rem; height: 2px; border-radius: 1px; display: inline-block; }

.tip { position: absolute; pointer-events: none; opacity: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 4px 16px rgba(0,0,0,.14); padding: 6px 10px; font-size: .75rem; font-variant-numeric: tabular-nums; z-index: 5; max-width: 18rem; transition: opacity .12s; }
.tip .t { color: var(--fg-muted); margin-bottom: 2px; }
.tip .v { display: flex; align-items: center; gap: .35rem; }

/* ---------- ตาราง ---------- */
.controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: var(--gap); }
.controls select, .controls input { font-size: .8125rem; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--fg); }
.controls input { min-width: 0; flex: 1 1 9rem; }
.count { font-size: .8125rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.scroll { max-height: 28rem; overflow: auto; border-radius: var(--r); }
.tbl { width: 100%; border-collapse: collapse; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.tbl th { position: sticky; top: 0; background: var(--panel); text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--fg-muted); white-space: nowrap; }
.tbl th button { all: unset; cursor: pointer; color: inherit; font: inherit; }
.tbl th button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.tbl td { padding: .45rem .5rem; border-bottom: 1px solid var(--line); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl .n { text-align: right; }
.tbl .nm { min-width: 11rem; }
.hot { color: var(--bad); font-weight: 600; }
.pill { display: inline-block; padding: .05rem .4rem; border-radius: var(--r); border: 1px solid var(--line); color: var(--fg-muted); white-space: nowrap; font-size: .75rem; }

/* ---------- ท้ายหน้า ---------- */
.notes { border-top: 1px solid var(--line); padding-top: var(--gap); font-size: .8125rem; color: var(--fg-muted); }
.notes h3 { font-size: .8125rem; font-weight: 600; color: var(--fg); margin: 0 0 8px; }
.notes ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 6px; }
.notes b { color: var(--fg); font-weight: 600; }
.notes span { font-variant-numeric: tabular-nums; color: var(--fg); }
.src { margin: var(--gap) 0 0; font-size: .75rem; }

.fail { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 240px; font-size: .8125rem; color: var(--fg-muted); }

/* ---------- ตัวเลือกช่องทาง ---------- */
.chbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.chbar-lab { font-size: .75rem; color: var(--fg-muted); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--line); background: var(--panel); color: var(--fg-muted); border-radius: 999px; padding: .2rem .65rem; font-size: .8125rem; cursor: pointer; font-family: inherit; }
.chip:hover { border-color: var(--fg-muted); }
.chip:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip .cdot { width: .45rem; height: .45rem; border-radius: 50%; display: inline-block; background: currentColor; }
.chip .cnote { font-size: .6875rem; opacity: .7; }

/* ---------- ป้ายบอกสภาพแวดล้อม กันสับสนว่ากำลังดูตัวไหน ---------- */
.env { display: inline-block; vertical-align: middle; font-family: var(--sans); font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: var(--warn); color: var(--bg); border-radius: 999px; padding: .15rem .55rem; }
.gate-env { display: inline-block; font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: var(--warn); color: var(--bg); border-radius: 999px; padding: .15rem .55rem; margin-bottom: .75rem; }

/* ---------- แถบสรุปสะสมของกราฟรายเดือน ---------- */
.ytd { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--gap); margin-bottom: var(--gap); padding-bottom: var(--gap); border-bottom: 1px solid var(--line); }
.ystat { display: flex; flex-direction: column; gap: 2px; }
.ystat .yv { font-family: var(--serif); font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.ystat .yl { font-size: .75rem; color: var(--fg-muted); }
.ystat .yd { font-size: .8125rem; font-variant-numeric: tabular-nums; }
.up { color: var(--ok); }
.down { color: var(--bad); }
.tnote { font-size: .75rem; color: var(--fg-muted); margin: .75rem 0 0; }

/* ---------- ส่วนข้อมูลจากตัวแทน ---------- */
.agent { border-color: var(--warn); }
.warnbar { margin: 0 0 var(--gap); font-size: .8125rem; color: var(--fg); background: color-mix(in srgb, var(--warn) 12%, transparent); border-left: 3px solid var(--warn); padding: 10px 12px; border-radius: 0 var(--r) var(--r) 0; }
.warnbar b { font-weight: 600; }
.agent-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--gap); }
.astat { display: flex; flex-direction: column; gap: 2px; }
.astat .av { font-family: var(--serif); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.astat .al { font-size: .75rem; color: var(--fg-muted); }

@media (max-width: 640px) {
  .title { font-size: 1.4rem; }
  .kpi-num { font-size: 1.6rem; }
  .head-row { flex-direction: column; }
}