/* app.css — reset + typography พื้นฐานเท่านั้น
   layout จริงเป็นงานของ P9 (ธีม) · ที่นี่แค่ทำให้หน้าเปล่าอ่านได้
   ห้าม JS · ห้าม asset นอกบ้าน · ใช้เฉพาะตัวแปรจาก tokens.css */

*, *::before, *::after { box-sizing: border-box; }

html { font-size: var(--bz-size); }

body {
  margin: 0;
  background: var(--bz-paper);
  color: var(--bz-ink);
  font-family: var(--bz-font);
  line-height: var(--bz-lh);
}

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  color: var(--bz-green-900);
  font-weight: 600;
  line-height: 1.35;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }

p { margin: 0 0 1em; }

a { color: var(--bz-green-700); }

table { border-collapse: collapse; }

th, td {
  padding: 0.4em 0.7em;
  border: 1px solid var(--bz-line);
  text-align: left;
}

/* ── โครงหน้าขั้นต่ำ ── */

.bz-wrap {
  max-width: var(--bz-maxw);
  margin: 0 auto;
  padding: 0 var(--bz-gap);
}

.bz-header { padding-top: var(--bz-gap); }

.bz-brand {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--bz-green-900);
}

/* เส้นทองใต้หัวเว็บ — ทองใช้กับเส้นคั่นได้ */
.bz-rule {
  height: 2px;
  margin-top: 0.75rem;
  background: var(--bz-gold-500);
}

main.bz-wrap { padding-top: var(--bz-gap); padding-bottom: var(--bz-gap); }

.bz-footer {
  margin-top: calc(var(--bz-gap) * 2);
  padding: var(--bz-gap) 0;
  border-top: 1px solid var(--bz-line);
  background: var(--bz-paper-2);
}

.bz-disclaimer {
  margin: 0;
  color: var(--bz-ink-2);
  font-size: 0.875rem;
  line-height: 1.65;
}

/* ══════════════════════════════════════════════════════════════
   P5/P6 — ฟอร์มและหน้าผลลัพธ์
   ใช้เฉพาะตัวแปรจาก tokens.css · ห้าม gradient ห้ามเงา ห้ามสีนอกชุด
   ทองใช้ได้เฉพาะเส้นคั่น/กรอบ/หัวข้อใหญ่ ห้ามใช้กับ body text
   ══════════════════════════════════════════════════════════════ */

.bz-lead { color: var(--bz-ink-2); }
.bz-note { color: var(--bz-ink-3); font-size: 0.9rem; }
.bz-cn { color: var(--bz-ink-3); font-size: 0.9em; font-weight: 400; }
.bz-hint { color: var(--bz-ink-3); font-size: 0.875rem; margin: 0.25rem 0 0.75rem; }

/* กว้างเกินจอให้เลื่อนในกล่องตัวเอง หน้าไม่เลื่อนแนวนอน */
.bz-scroll { overflow-x: auto; }

/* ── ฟอร์ม ── */
.bz-form fieldset {
  margin: 0 0 var(--bz-gap);
  padding: var(--bz-gap);
  border: 1px solid var(--bz-line);
  border-radius: var(--bz-radius);
  background: var(--bz-paper-2);
}
.bz-form legend { padding: 0 0.5em; color: var(--bz-green-900); font-weight: 600; }
.bz-row { display: flex; flex-wrap: wrap; gap: var(--bz-gap); }
.bz-field { display: flex; flex-direction: column; gap: 0.35rem; flex: 1 1 8rem; }
.bz-field > span { font-size: 0.9rem; color: var(--bz-ink-2); }
.bz-field input, .bz-field select {
  padding: 0.5em 0.6em;
  border: 1px solid var(--bz-line);
  border-radius: var(--bz-radius);
  background: var(--bz-paper);
  color: var(--bz-ink);
  font-family: inherit;
  font-size: 1rem;
}
.bz-field input:focus, .bz-field select:focus { outline: 2px solid var(--bz-green-500); }
.bz-check { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.5rem 1rem 0 0; }
.bz-submit {
  padding: 0.7em 2em;
  border: 1px solid var(--bz-green-900);
  border-radius: var(--bz-radius);
  background: var(--bz-green-700);
  color: var(--bz-paper);
  font-family: inherit;
  font-size: 1.05rem;
  cursor: pointer;
}
.bz-submit:hover { background: var(--bz-green-900); }

.bz-errors {
  margin: 0 0 var(--bz-gap);
  padding: var(--bz-gap);
  border: 1px solid var(--bz-bad);
  border-radius: var(--bz-radius);
  background: var(--bz-paper-2);
}
.bz-errors-head { margin: 0 0 0.5em; color: var(--bz-bad); font-weight: 600; }
.bz-errors ul { margin: 0; padding-left: 1.25rem; }

/* ── หัวผลลัพธ์ + แถบเตือน ── */
.bz-result-title { margin-bottom: 0.15em; }
.bz-birth { margin: 0 0 0.25em; color: var(--bz-ink-2); }
.bz-meta { margin: 0 0 var(--bz-gap); color: var(--bz-ink-3); font-size: 0.875rem; }
.bz-warn {
  margin: 0 0 0.75rem;
  padding: 0.75em 1em;
  border-left: 4px solid var(--bz-gold-500);
  background: var(--bz-gold-100);
  color: var(--bz-ink);
}

/* ── §7 กล่องสรุปสองระบบ = จุดขาย ── */
.bz-synth {
  margin: var(--bz-gap) 0 calc(var(--bz-gap) * 1.5);
  padding: calc(var(--bz-gap) * 1.2);
  border: 2px solid var(--bz-gold-500);
  border-radius: var(--bz-radius);
  background: var(--bz-green-900);
  color: var(--bz-paper);
}
.bz-synth h2 { margin-top: 0; color: var(--bz-gold-300); font-size: 1.5rem; }
.bz-synth-intro { color: var(--bz-paper-3); font-size: 0.95rem; }
.bz-synth-verdict { font-size: 1.05rem; }
.bz-synth-note { margin-bottom: 0; color: var(--bz-paper-3); font-size: 0.85rem; }
.bz-synth-picks {
  display: flex; flex-wrap: wrap; gap: var(--bz-gap);
  margin: var(--bz-gap) 0;
  padding: var(--bz-gap) 0;
  border-top: 1px solid var(--bz-gold-700);
  border-bottom: 1px solid var(--bz-gold-700);
}
.bz-synth-picks > div { flex: 1 1 8rem; }
.bz-synth-label { display: block; color: var(--bz-gold-300); font-size: 0.8rem; }

/* ── ตารางทั่วไป ── */
section { margin-bottom: calc(var(--bz-gap) * 1.5); }
section h2 {
  padding-bottom: 0.3em;
  border-bottom: 2px solid var(--bz-gold-500);
  font-size: 1.375rem;
}
.bz-kv, .bz-pillars, .bz-rooms, .bz-luck, .bz-bars { width: 100%; }
.bz-kv th { width: 30%; background: var(--bz-paper-2); vertical-align: top; }
.bz-pillars th, .bz-rooms th, .bz-luck th { background: var(--bz-paper-2); }
.bz-pillars thead th { background: var(--bz-green-100); }
.bz-gz { font-size: 1.15rem; font-weight: 600; color: var(--bz-green-900); }

/* ── §2 แท่งธาตุ: div ความกว้าง % ล้วน ── */
.bz-bars th { width: 3rem; text-align: center; }
.bz-bar-cell { width: auto; padding: 0.35em 0.5em; }
.bz-bar-num { width: 4rem; text-align: right; }
.bz-bar { height: 1.1rem; min-width: 2px; background: var(--bz-green-500); }
.bz-el-1 { background: var(--bz-green-700); }
.bz-el-2 { background: var(--bz-bad); }
.bz-el-3 { background: var(--bz-gold-500); }
.bz-el-4 { background: var(--bz-ink-3); }
.bz-el-5 { background: var(--bz-green-900); }

/* ── §3/§4 ── */
.bz-state { font-size: 1.25rem; font-weight: 600; color: var(--bz-green-900); margin-bottom: 0.2em; }
.bz-why { margin-top: 0.75rem; }
.bz-why summary { color: var(--bz-green-700); cursor: pointer; font-size: 0.9rem; }
.bz-why ul { margin: 0.5rem 0 0; padding-left: 1.25rem; color: var(--bz-ink-2); font-size: 0.9rem; }
.bz-god {
  margin: var(--bz-gap) 0;
  padding: var(--bz-gap);
  border: 1px solid var(--bz-line);
  border-left: 3px solid var(--bz-green-500);
  border-radius: var(--bz-radius);
  background: var(--bz-paper-2);
}
.bz-god h3 { margin-bottom: 0.1em; }
.bz-god-group { margin-bottom: 0.75em; color: var(--bz-ink-3); font-size: 0.85rem; }
.bz-god-aspect {
  padding: 0.6em 0.8em;
  border-left: 3px solid var(--bz-gold-500);
  background: var(--bz-gold-100);
}
.bz-tag {
  padding: 0.15em 0.6em;
  border: 1px solid var(--bz-gold-500);
  border-radius: var(--bz-radius);
  background: var(--bz-gold-100);
  color: var(--bz-gold-700);
  font-size: 0.75rem;
  vertical-align: middle;
}

/* ── §7 ผังแปดทิศ 3×3 — table ล้วน ไม่มี JS/canvas ── */
.bz-compass { width: 100%; max-width: 34rem; margin: var(--bz-gap) auto; table-layout: fixed; }
.bz-compass td {
  height: 5.5rem;
  padding: 0.5em 0.35em;
  border: 1px solid var(--bz-line);
  text-align: center;
  vertical-align: middle;
}
.bz-c-dir { display: block; font-size: 0.8rem; color: var(--bz-ink-3); }
.bz-c-star { display: block; font-size: 1.2rem; font-weight: 600; }
.bz-c-th { display: block; font-size: 0.8rem; }
.bz-c-good { background: var(--bz-green-100); border-color: var(--bz-green-500); }
.bz-c-good .bz-c-star { color: var(--bz-green-900); }
.bz-c-bad { background: var(--bz-paper-3); }
.bz-c-bad .bz-c-star { color: var(--bz-ink-2); }
.bz-c-center { background: var(--bz-green-900); color: var(--bz-paper); }
.bz-c-center .bz-c-dir, .bz-c-center .bz-c-th { color: var(--bz-gold-300); }

/* ── §10 ── */
.bz-decor { margin: var(--bz-gap) 0; padding-left: var(--bz-gap); border-left: 3px solid var(--bz-gold-300); }
.bz-decor h3 { margin-bottom: 0.4em; }

.bz-disclaimer-block {
  padding: var(--bz-gap);
  border: 1px solid var(--bz-line);
  border-radius: var(--bz-radius);
  background: var(--bz-paper-2);
  color: var(--bz-ink-2);
}

/* ── หลังบ้าน (P8) ── */
.bz-adminnav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--bz-gap);
  margin-bottom: var(--bz-gap);
  padding: 0.6rem var(--bz-gap);
  border: 1px solid var(--bz-line);
  border-left: 3px solid var(--bz-green-700);
  border-radius: var(--bz-radius);
  background: var(--bz-paper-2);
}
.bz-adminnav ul { display: flex; flex-wrap: wrap; gap: var(--bz-gap); margin: 0; padding: 0; list-style: none; }
.bz-adminnav a { color: var(--bz-green-900); text-decoration: none; font-weight: 600; }
.bz-adminnav a:hover { text-decoration: underline; }
.bz-logout { display: flex; align-items: center; gap: 0.6rem; margin: 0; }
.bz-whoami { color: var(--bz-ink-3); font-size: 0.85rem; }
.bz-logout button, .bz-danger {
  padding: 0.3em 0.9em;
  border: 1px solid var(--bz-line);
  border-radius: var(--bz-radius);
  background: var(--bz-paper);
  color: var(--bz-ink-2);
  font-family: inherit;
  cursor: pointer;
}
.bz-danger { border-color: var(--bz-bad); color: var(--bz-bad); }
.bz-actions { display: flex; align-items: center; gap: 0.6rem; }
.bz-actions form { margin: 0; }
.bz-login { max-width: 22rem; }
.bz-token { font-size: 0.8rem; color: var(--bz-ink-3); word-break: break-all; }
.bz-pager { display: flex; gap: var(--bz-gap); align-items: center; margin-top: var(--bz-gap); }
.bz-delete-form { margin: var(--bz-gap) 0; }
.bz-sep { border: 0; border-top: 2px solid var(--bz-gold-500); margin: calc(var(--bz-gap) * 1.5) 0; }