/* ============================================================
   NÜXGROW · ระบบออกแบบกลาง "Quiet Precision" v0.2.2 (9 ต.ค. 2569 · v0.2 = ป้ายเล็กไม่ถ่างตัวไทย · v0.2.1 = แก้คอมเมนต์หัวไฟล์ · v0.2.2 = ตัวหนังสือบนพื้นสีเต็ม --qp-on-accent: ธีมมืดเป็นตัวเข้ม · ค่าเดิมทุกตัว)
   ใช้ชุดเดียวทุกหน้าของ NÜXGROW
   ทันสมัย = กระเบื้อง bento · ตัวอักษรใหญ่ชัด · เคลื่อนไหวน้อยแต่มีความหมาย
   เทคโนโลยี = ข้อมูลจริงแบบสด · ตัวเลข mono เท่ากันทุกหลัก · เส้นบาง · โหมดมืด "ห้องควบคุม"
   พรีเมียม = นิ่ง · ช่องว่างเยอะ · สีน้อย (เขียว + ทองเดิมของแบรนด์) · ภาพจริง
   ใช้: <link rel="stylesheet" href="quiet-precision.css"> · โหมดมืด = ใส่ data-qp-theme="dark" ที่ <html> หรือกล่องใดก็ได้
   📐 ขนาด "compact ≠ ตัวเล็ก": ตัวเลขการ์ด ≥ 24px · หัวข้อรอง 18–20px+ · ตาราง ≥ 13px (ที่นี่ 15) · เนื้อหา 16px
   ⚠️ ทุกคลาสขึ้นต้น qp- (ไม่ชนของเดิม) · ห้ามแก้สีกระจายในหน้า — แก้ที่ตัวแปรในไฟล์นี้ที่เดียว
   ============================================================ */

:root {
  /* ── สี · โหมดสว่าง (หน้าร้าน + แอปทั่วไป) ── */
  --qp-bg: #f7f9f5;          /* พื้นหน้า (เดิมของ nuxgrow.com) */
  --qp-surface: #ffffff;     /* การ์ด/กระเบื้อง */
  --qp-surface-2: #f1f5ef;   /* พื้นรอง */
  --qp-wash: #eef4ee;
  --qp-line: #e2e8df;        /* เส้นบาง 1px */
  --qp-line-strong: #cbd5c8;
  --qp-ink: #18211c;         /* ตัวหนังสือหลัก */
  --qp-ink-2: #3d463f;
  --qp-muted: #6f776e;
  --qp-faint: #9aa197;

  --qp-green: #1c7d4d;       /* สีแบรนด์ (เดิม) */
  --qp-green-d: #15623c;
  --qp-green-t: #e9f3ec;
  --qp-gold: #b7842f;        /* ทองแบรนด์ (เดิม) — ใช้น้อยมาก ≤ 5% ของจอ = ความพรีเมียม */
  --qp-gold-t: #f6efe1;

  /* สถานะ · เตือน 3 ระดับ */
  --qp-ok: #1c7d4d;
  --qp-info: #2b6fa8;
  --qp-warn: #b7791f;
  --qp-crit: #c0392b;
  --qp-ok-t: #e9f3ec; --qp-info-t: #e7f0f8; --qp-warn-t: #fbf1df; --qp-crit-t: #fbe9e7;
  --qp-on-accent: #fff;      /* ตัวหนังสือบนพื้นสีเต็ม (ปุ่มหลัก · ปุ่มอันตราย · กระเบื้องเขียว) */

  /* ที่มาของข้อมูล (กฎ: ข้อมูลจำลองต้องติดป้ายทุกจุด) */
  --qp-src-live: #1c7d4d;    /* สด */
  --qp-src-stale: #b7791f;   /* ค้าง > 10 นาที */
  --qp-src-sim: #7a5ea8;     /* จำลอง */

  /* ชุดสีกราฟ (เรียงตามลำดับใช้) */
  --qp-data-1: #1c7d4d; --qp-data-2: #2b6fa8; --qp-data-3: #b7842f; --qp-data-4: #7a5ea8; --qp-data-5: #c2553a;

  /* ── ตัวอักษร (IBM Plex ทั้งตระกูล) ── */
  --qp-font-sans: "IBM Plex Sans Thai", "IBM Plex Sans", "Sukhumvit Set", "Thonburi", "Noto Sans Thai", "Leelawadee UI", system-ui, sans-serif;
  --qp-font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;   /* หัวเรื่องภาษาอังกฤษชิ้นใหญ่เท่านั้น (ไม่มีอักษรไทย) */
  --qp-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ตัวเลข/รหัส (ไม่มีอักษรไทย) */
  --qp-t-12: 12px; --qp-t-13: 13px; --qp-t-15: 15px; --qp-t-16: 16px; --qp-t-17: 17px; --qp-t-20: 20px;
  --qp-t-24: 24px; --qp-t-32: 32px; --qp-t-44: 44px; --qp-t-60: 60px; --qp-t-76: 76px;
  --qp-lh-th: 1.65;          /* ไทยต้องสูงกว่าปกติ (สระบน/วรรณยุกต์ไม่ชนบรรทัดบน) */
  --qp-lh-tight: 1.15;

  /* ── ระยะ · มุม · เงา · การเคลื่อนไหว ── */
  --qp-s-1: 4px; --qp-s-2: 8px; --qp-s-3: 12px; --qp-s-4: 16px; --qp-s-5: 24px; --qp-s-6: 32px; --qp-s-7: 48px; --qp-s-8: 64px; --qp-s-9: 96px;
  --qp-r-ctl: 8px; --qp-r-card: 14px; --qp-r-tile: 22px; --qp-r-pill: 999px;
  --qp-shadow: 0 1px 2px rgba(24, 33, 28, .04), 0 8px 24px rgba(24, 33, 28, .06);
  --qp-ease: cubic-bezier(.2, .7, .2, 1);
  --qp-d-1: 120ms; --qp-d-2: 200ms; --qp-d-3: 320ms;
  --qp-max: 1240px;          /* ความกว้างหน้าร้าน */
  color-scheme: light;
}

/* ── โหมดมืด "ห้องควบคุม" (แอป: ฟาร์มของฉัน · Lab) ── */
[data-qp-theme="dark"] {
  --qp-bg: #0e1116;
  --qp-surface: #12161c;
  --qp-surface-2: #171c24;
  --qp-wash: #141a20;
  --qp-line: #232a33;
  --qp-line-strong: #323b46;
  --qp-ink: #e8edf2;
  --qp-ink-2: #b9c2cc;
  --qp-muted: #7d8794;
  --qp-faint: #5b6470;
  --qp-green: #3fb57a;       /* เขียวสว่างขึ้นให้อ่านบนพื้นมืด */
  --qp-green-d: #2f9a63;
  --qp-green-t: rgba(63, 181, 122, .12);
  --qp-gold: #d8a64a;
  --qp-gold-t: rgba(216, 166, 74, .12);
  --qp-ok: #3fb57a; --qp-info: #5aa8e6; --qp-warn: #f0a63a; --qp-crit: #ff5d5d;
  --qp-ok-t: rgba(63, 181, 122, .12); --qp-info-t: rgba(90, 168, 230, .12); --qp-warn-t: rgba(240, 166, 58, .12); --qp-crit-t: rgba(255, 93, 93, .12);
  --qp-on-accent: #0e1116;   /* ขาวบนเขียว/แดงสว่างของธีมมืด = 2.6–3.0 → ตัวเข้ม (≥ 6.2) */
  --qp-src-live: #3fb57a; --qp-src-stale: #f0a63a; --qp-src-sim: #a990d8;
  --qp-data-1: #3fb57a; --qp-data-2: #5ad1e6; --qp-data-3: #d8a64a; --qp-data-4: #a990d8; --qp-data-5: #ff8a6b;
  --qp-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

/* ── พื้นฐาน ── */
.qp, .qp-root { background: var(--qp-bg); color: var(--qp-ink); font-family: var(--qp-font-sans); font-size: var(--qp-t-16); line-height: var(--qp-lh-th); -webkit-font-smoothing: antialiased; }
.qp *, .qp-root * { box-sizing: border-box; }
.qp-num { font-family: var(--qp-font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.qp-kicker { font-size: var(--qp-t-12); letter-spacing: 0; color: var(--qp-muted); font-weight: 600; }
.qp-display { font-family: var(--qp-font-serif); font-weight: 400; font-size: clamp(40px, 6vw, var(--qp-t-76)); line-height: 1.04; letter-spacing: -.02em; margin: 0; }
.qp-display em { font-style: italic; color: var(--qp-gold); }
.qp-h1 { font-size: clamp(28px, 4vw, var(--qp-t-44)); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.qp-h2 { font-size: var(--qp-t-24); line-height: 1.35; font-weight: 600; margin: 0; }
.qp-h3 { font-size: var(--qp-t-17); line-height: 1.45; font-weight: 600; margin: 0; }
.qp-lead { font-size: var(--qp-t-17); color: var(--qp-ink-2); max-width: 62ch; }
.qp-muted { color: var(--qp-muted); }
.qp-container { max-width: var(--qp-max); margin: 0 auto; padding: 0 var(--qp-s-5); }
.qp-hair { height: 1px; background: var(--qp-line); border: 0; margin: var(--qp-s-5) 0; }

/* ป้ายอังกฤษล้วน = ถ่าง + ตัวพิมพ์ใหญ่ (v0.2) · ค่าเริ่มต้นของป้ายเล็กทุกตัวไม่ถ่าง เพราะตัวไทยที่ถูกถ่างจะแตกเป็นตัว ๆ ("ร ะ ย ะ")
   ใช้: class="qp-kicker qp-caps" หรือใส่ lang="en" ที่ป้าย · ห้ามใส่กับข้อความที่มีตัวไทย */
.qp-caps,
.qp-kicker:lang(en), .qp-door:lang(en), .qp-panel__head:lang(en), .qp-table th:lang(en) { letter-spacing: .12em; text-transform: uppercase; }
.qp-door.qp-caps, .qp-door:lang(en) { letter-spacing: .06em; text-transform: none; }

/* ── ปุ่ม ── */
.qp-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--qp-r-ctl); border: 1px solid transparent; font: 600 var(--qp-t-15)/1 var(--qp-font-sans); cursor: pointer; text-decoration: none; transition: background var(--qp-d-2) var(--qp-ease), border-color var(--qp-d-2) var(--qp-ease), transform var(--qp-d-1) var(--qp-ease); }
.qp-btn:active { transform: translateY(1px); }
.qp-btn--primary { background: var(--qp-green); color: var(--qp-on-accent); }
.qp-btn--primary:hover { background: var(--qp-green-d); }
.qp-btn--secondary { background: transparent; color: var(--qp-ink); border-color: var(--qp-line-strong); }
.qp-btn--secondary:hover { border-color: var(--qp-ink-2); }
.qp-btn--ghost { background: transparent; color: var(--qp-green); padding: 0 8px; }
.qp-btn--danger { background: var(--qp-crit); color: var(--qp-on-accent); }
.qp-btn:focus-visible, .qp-tile:focus-visible { outline: 2px solid var(--qp-gold); outline-offset: 2px; }

/* ── ป้าย ── */
.qp-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--qp-r-pill); font-size: var(--qp-t-12); font-weight: 600; background: var(--qp-surface-2); color: var(--qp-ink-2); border: 1px solid var(--qp-line); white-space: nowrap; }
.qp-badge--ok { background: var(--qp-ok-t); color: var(--qp-ok); border-color: transparent; }
.qp-badge--info { background: var(--qp-info-t); color: var(--qp-info); border-color: transparent; }
.qp-badge--warn { background: var(--qp-warn-t); color: var(--qp-warn); border-color: transparent; }
.qp-badge--crit { background: var(--qp-crit-t); color: var(--qp-crit); border-color: transparent; }
.qp-badge--gold { background: var(--qp-gold-t); color: var(--qp-gold); border-color: transparent; }

/* ที่มาของข้อมูล: สด / ค้าง / จำลอง — ใส่ทุกตัวเลขที่มาจากอุปกรณ์หรือการคำนวณ */
.qp-src { display: inline-flex; align-items: center; gap: 6px; font-size: var(--qp-t-12); font-weight: 600; letter-spacing: .02em; }
.qp-src::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.qp-src--live { color: var(--qp-src-live); }
.qp-src--live::before { box-shadow: 0 0 0 0 currentColor; animation: qp-ping 2.4s var(--qp-ease) infinite; }
.qp-src--stale { color: var(--qp-src-stale); }
.qp-src--sim { color: var(--qp-src-sim); }
.qp-src--sim::before { background: transparent; border: 1.5px dashed currentColor; width: 7px; height: 7px; }
@keyframes qp-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.qp-sim-ribbon { border: 1px dashed var(--qp-src-sim); }   /* กรอบทั้งการ์ดเมื่อทั้งก้อนเป็นข้อมูลจำลอง */

/* ── การ์ด · กระเบื้อง bento ── */
.qp-card { background: var(--qp-surface); border: 1px solid var(--qp-line); border-radius: var(--qp-r-card); padding: var(--qp-s-5); box-shadow: var(--qp-shadow); }
.qp-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); gap: var(--qp-s-4); }
.qp-tile { position: relative; background: var(--qp-surface); border: 1px solid var(--qp-line); border-radius: var(--qp-r-tile); padding: var(--qp-s-5); box-shadow: var(--qp-shadow); overflow: hidden; text-decoration: none; color: inherit; transition: transform var(--qp-d-2) var(--qp-ease), border-color var(--qp-d-2) var(--qp-ease); display: flex; flex-direction: column; gap: 6px; }
a.qp-tile:hover { transform: translateY(-2px); border-color: var(--qp-line-strong); }
.qp-tile--w2 { grid-column: span 2; } .qp-tile--h2 { grid-row: span 2; } .qp-tile--w4 { grid-column: 1 / -1; }
.qp-tile--ink { background: var(--qp-ink); color: #f3f6f2; border-color: transparent; }
.qp-tile--ink .qp-muted, .qp-tile--ink .qp-kicker { color: #a7b0a8; }
.qp-tile--green { background: var(--qp-green); color: var(--qp-on-accent); border-color: transparent; }
.qp-tile__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qp-door { font-family: var(--qp-font-mono); font-size: var(--qp-t-12); color: var(--qp-gold); font-weight: 500; letter-spacing: 0; }

/* ── ตัวเลขใหญ่ ── */
.qp-stat { display: flex; flex-direction: column; gap: 2px; }
.qp-stat__v { font-family: var(--qp-font-mono); font-variant-numeric: tabular-nums; font-size: var(--qp-t-44); line-height: 1; letter-spacing: -.03em; }
.qp-stat__v small { font-size: .42em; color: var(--qp-muted); margin-left: 4px; letter-spacing: 0; }
.qp-stat__l { font-size: var(--qp-t-13); color: var(--qp-muted); }
.qp-stat--sm .qp-stat__v { font-size: var(--qp-t-24); }

/* ── แผงห้องควบคุม (ใช้คู่ data-qp-theme="dark") ── */
.qp-panel { position: relative; background: var(--qp-surface); border: 1px solid var(--qp-line); border-radius: 10px; padding: var(--qp-s-4); }
.qp-panel::before, .qp-panel::after { content: ""; position: absolute; width: 10px; height: 10px; border-color: var(--qp-gold); border-style: solid; opacity: .8; }
.qp-panel::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-top-left-radius: 10px; }
.qp-panel::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-bottom-right-radius: 10px; }
.qp-panel__head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--qp-s-3); font-size: var(--qp-t-12); letter-spacing: 0; color: var(--qp-muted); font-weight: 600; }
.qp-panel__no { font-family: var(--qp-font-mono); color: var(--qp-gold); letter-spacing: 0; }
.qp-panel__head .qp-src { margin-left: auto; text-transform: none; letter-spacing: .02em; }
.qp-grid-bg { background-image: linear-gradient(var(--qp-line) 1px, transparent 1px), linear-gradient(90deg, var(--qp-line) 1px, transparent 1px); background-size: 32px 32px; background-position: -1px -1px; }

/* ── แจ้งเตือน 3 ระดับ ── */
.qp-alert { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--qp-r-ctl); border: 1px solid var(--qp-line); background: var(--qp-surface); font-size: var(--qp-t-15); }
.qp-alert__dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; flex: 0 0 10px; }
.qp-alert--info .qp-alert__dot { background: var(--qp-info); }
.qp-alert--warn { border-color: color-mix(in srgb, var(--qp-warn) 40%, transparent); background: var(--qp-warn-t); }
.qp-alert--warn .qp-alert__dot { background: var(--qp-warn); }
.qp-alert--crit { border-color: color-mix(in srgb, var(--qp-crit) 45%, transparent); background: var(--qp-crit-t); }
.qp-alert--crit .qp-alert__dot { background: var(--qp-crit); }

/* ── ตาราง ── */
.qp-table { width: 100%; border-collapse: collapse; font-size: var(--qp-t-15); }
.qp-table th { text-align: left; font-size: var(--qp-t-12); letter-spacing: 0; color: var(--qp-muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--qp-line-strong); }
.qp-table td { padding: 10px; border-bottom: 1px solid var(--qp-line); }
.qp-table td.qp-num, .qp-table th.qp-num { text-align: right; }

/* ── กราฟเส้นเล็ก (SVG ห้ามมีตัวหนังสือไทยข้างใน — Safari เพี้ยน) ── */
.qp-spark { width: 100%; height: 48px; display: block; }
.qp-spark path { fill: none; stroke: var(--qp-data-1); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.qp-spark .qp-spark__band { fill: var(--qp-green-t); stroke: none; }

/* ── มือถือ ── */
@media (max-width: 900px) {
  .qp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qp-tile--w2 { grid-column: span 2; }
}
@media (max-width: 560px) {
  .qp-bento { grid-template-columns: minmax(0, 1fr); }
  .qp-tile--w2, .qp-tile--h2 { grid-column: auto; grid-row: auto; }
  .qp-stat__v { font-size: var(--qp-t-32); }
  .qp-container { padding: 0 var(--qp-s-4); }
}

/* ── เคารพ "ลดการเคลื่อนไหว" ของเครื่อง ── */
@media (prefers-reduced-motion: reduce) {
  .qp *, .qp-root * { animation: none !important; transition: none !important; }
}