/* สไตล์เฉพาะระบบกราฟ — ต่อท้ายธีมกลาง template.css
   🔴 ห้ามเลขสีดิบ ใช้ตัวแปรธีม · ห้ามทับคลาสที่ธีมมี (เช็คลิสต์ sync theme) */
#main { display: flex; flex-direction: column; gap: var(--s3); }
[hidden] { display: none !important; }

/* ---------- ตัวกราฟ ---------- */
.chart-scroll { overflow-x: auto; }
svg .ax { font-size: 11px; fill: var(--ink-soft); }
svg .lbl { font-size: 10.5px; font-weight: 700; }
.legend { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s2); font-size: 13px; }
.legend .lg { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- ตัวแก้ไข ---------- */
.sctl { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.sctl .inline { display: inline-flex; align-items: center; gap: var(--s1); font-size: 13px; color: var(--ink-soft); }
.sctl input[type="color"] { width: 40px; height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.mgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s2); margin-top: var(--s3); }
.mgrid label { font-size: 11px; color: var(--ink-soft); display: flex; flex-direction: column; gap: 2px; }
.mgrid .num { text-align: right; padding: 4px 6px; min-height: 32px; font-size: 13px; }
@media (max-width: 720px) { .mgrid { grid-template-columns: repeat(3, 1fr); } }
.rowlink:hover td { background: var(--tint); }
.muted { color: var(--ink-soft); font-size: 13px; }