/* สีและตัวอักษรชุดเดียวกับ v54: steel + amber บนพื้นเทาฟ้าอ่อน */
:root {
  --ink: #14242E; --ink2: #4A5A66; --mu: #7A8892; --line: #DDE5EA; --line2: #EEF2F5;
  --steel: #1B3C50; --steel2: #244C63; --amber: #E0A32E; --amb2: #9A6A10; --ambbg: #FFF6DD;
  --up: #2E7D5B; --upbg: #E6F3EC; --dn: #C2472F; --dnbg: #FBEAE5; --bg: #F4F6F8; --card: #fff;
  --font: 'IBM Plex Sans Thai', 'Sarabun', system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); color: var(--ink); background: var(--bg); font-size: 14px; }
button, input, select, textarea { font: inherit; }
a { color: var(--steel); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.btn { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 8px; padding: 7px 12px; cursor: pointer; font-weight: 600; font-size: 13px; }
.btn:hover { border-color: var(--mu); }
.btn.pri { background: var(--steel); border-color: var(--steel); color: #fff; }
.btn.pri:hover { background: var(--steel2); }
.btn.amb { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.btn.warn { color: var(--dn); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.sm { padding: 3px 9px; font-size: 12px; }

.field { display: grid; gap: 4px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--ink2); }
.field input, .field select, .field textarea { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #fff; color: var(--ink); min-width: 0; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--steel); outline: none; box-shadow: 0 0 0 3px rgba(27,60,80,.12); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.mu { color: var(--mu); }
.err { color: var(--dn); font-size: 13px; min-height: 1.4em; }
.ok { color: var(--up); }

.pill { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 1px 8px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.pill.stable { background: var(--upbg); color: var(--up); }
.pill.beta { background: var(--ambbg); color: var(--amb2); }
.pill.old { background: var(--line2); color: var(--ink2); }
.pill.blocked { background: var(--dnbg); color: var(--dn); }
.pill.draft { background: var(--line2); color: var(--ink2); }
.pill.active { background: var(--upbg); color: var(--up); }

table.t { border-collapse: collapse; width: 100%; font-size: 13px; }
table.t th, table.t td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line2); vertical-align: top; }
table.t th { font-size: 12px; color: var(--ink2); font-weight: 600; border-bottom-color: var(--line); background: #FAFBFC; position: sticky; top: 0; }
table.t td.n { text-align: right; font-variant-numeric: tabular-nums; }
.scroll { overflow: auto; }

.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 13px; box-shadow: 0 6px 24px rgba(0,0,0,.18); z-index: 100; max-width: min(560px, calc(100vw - 32px)); }
.toast[hidden] { display: none; }