/*
 * ยึด design system เดิมของเจ้าของ (LIve/portfolio/CLAUDE.md):
 * ห้าม gradient · ห้าม glassmorphism · ห้าม box-shadow บนการ์ด · border-radius ≤ 2px ·
 * ห้าม emoji แทนไอคอน · ห้าม framework/bundler/npm — ใช้เส้น 1px solid var(--rule) เท่านั้น
 *
 * ไม่ก๊อปฟอนต์มา (โฟลเดอร์ฟอนต์ของ portfolio หนัก 16MB ยัดใส่ Edge Function ไม่ได้)
 * หน้ากรอกของในห้องสต๊อกต้องการความเร็วกับตัวอักษรใหญ่ ไม่ได้ต้องการฟอนต์สวย
 */

:root {
  --paper: #FAF8F4;
  --ink: #15130F;
  --rule: #DCD6CC;
  --accent: #6E1F2A;
  --err: #8A1F1F;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  padding: 24px 16px;
}

.card {
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 20px;
  max-width: 420px;
  margin: 40px auto 0;
}

h1 {
  font-size: 20px;
  margin: 0 0 12px;
}

.lead {
  margin: 0 0 16px;
  color: var(--ink);
  opacity: 0.8;
  font-size: 15px;
}

.status {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 15px;
}

.status.ok {
  color: var(--accent);
}

.status.err {
  color: var(--err);
}