:root {
  /* Kanit เสิร์ฟจากเครื่องเราเอง (public/fonts/) ไม่พึ่ง CDN */
  --font: 'Kanit', 'Leelawadee UI', 'Segoe UI', 'Tahoma', sans-serif;
  --brand: #1a4d8f;
  --brand-dark: #143d72;
  --brand-soft: #e8f0fa;
  --bg: #f5f7fa;
  --bg-muted: #eef1f6;
  --surface: #ffffff;
  --border: #dde3ec;
  --text: #1c2430;
  --text-muted: #6b7684;
  --success: #1b7f4b;
  --success-soft: #e6f5ed;
  --warning: #b06f00;
  --warning-soft: #fff4e0;
  --danger: #b3261e;
  --danger-soft: #fdecec;
  --info-soft: #e8f0fa;
  --shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 10px 30px rgba(16, 24, 40, 0.12);
  --radius: 10px;
  --sidebar-w: 232px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ให้ input/select/textarea/button ใช้ฟอนต์เดียวกับหน้าเว็บ (เบราว์เซอร์ตั้ง default เป็นฟอนต์ระบบ) */
input,
select,
textarea,
button {
  font-family: inherit;
}

h1, h2, h3, h4 {
  margin: 0 0 12px;
  font-weight: 600;
  line-height: 1.3;
}

h1 { font-size: 20px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }

a {
  color: var(--brand);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

p {
  margin: 0 0 10px;
}

small {
  font-size: 12px;
  color: var(--text-muted);
}

code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-muted);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 12px;
}

.muted { color: var(--text-muted); }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }

.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }

.stack > * + * { margin-top: 12px; }
.row-flex { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}