/* ============================================================================
   ธีมกลางระบบทายผล — ชุดสี/ฟอนต์เดียวกับเว็บหลักบ้านสวนฟาร์ม (index.html)
   ============================================================================ */
:root{
  --bg:#15110d; --surface:#1f1813; --surface-2:#2a2017; --line:#3a2e22;
  --text:#f2e9dc; --muted:#b09a82;
  --gold:#e0a533; --gold-soft:#c8902a;
  --red:#b1342a; --red-deep:#7a221b;
  --green:#3f9d5a;
  --radius:14px; --maxw:860px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:"Noto Sans Thai",system-ui,sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit}
img{display:block;max-width:100%}
h1,h2,h3,.font-head{font-family:"Kanit","Noto Sans Thai",sans-serif}

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

/* ---------- แถบบนสุด ---------- */
.topbar{
  border-bottom:1px solid var(--line); background:var(--surface);
  position:sticky; top:0; z-index:20;
}
.topbar-in{
  max-width:var(--maxw); margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.brand{
  font-family:"Kanit",sans-serif; font-weight:700; font-size:17px;
  color:var(--gold); text-decoration:none; white-space:nowrap;
}
.brand small{color:var(--muted); font-weight:500; font-size:12px; margin-left:6px}
.nav{display:flex; gap:4px; flex-wrap:wrap; margin-left:auto}
.nav a{
  text-decoration:none; font-size:13.5px; color:var(--muted);
  padding:6px 10px; border-radius:9px;
}
.nav a:hover{color:var(--text); background:var(--surface-2)}
.nav a.active{color:var(--gold); background:var(--surface-2); font-weight:600}
.nav .who{font-size:13px; color:var(--muted); padding:6px 4px 6px 10px}
.nav .who b{color:var(--text); font-weight:600}

/* ---------- การ์ด / ฟอร์ม ---------- */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px;
}
.card + .card{margin-top:14px}
label{display:block; font-size:13.5px; color:var(--muted); margin:12px 0 5px}
input[type=text],input[type=password],input[type=datetime-local],select{
  width:100%; padding:10px 12px; border-radius:10px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--text);
  font-family:inherit; font-size:15px; outline:none;
}
input:focus,select:focus{border-color:var(--gold-soft)}
.btn{
  display:inline-block; border:none; cursor:pointer; text-decoration:none; text-align:center;
  font-family:"Kanit",sans-serif; font-weight:600; font-size:15px;
  padding:10px 18px; border-radius:11px;
  background:linear-gradient(180deg,var(--gold),var(--gold-soft)); color:#241a0d;
}
.btn:hover{filter:brightness(1.06)}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn.secondary{background:var(--surface-2); color:var(--text); border:1px solid var(--line)}
.btn.danger{background:linear-gradient(180deg,var(--red),var(--red-deep)); color:#ffe9e5}
.btn.block{display:block; width:100%}

/* ---------- ข้อความแจ้งผล ---------- */
.msg{border-radius:10px; padding:10px 13px; font-size:14px; margin-top:12px; display:none}
.msg.show{display:block}
.msg.err{background:rgba(177,52,42,.16); border:1px solid rgba(177,52,42,.45); color:#f0b7ae}
.msg.ok{background:rgba(63,157,90,.14); border:1px solid rgba(63,157,90,.4); color:#a8dcb6}
.msg.info{background:rgba(224,165,51,.1); border:1px solid rgba(224,165,51,.35); color:#e8c98a}

/* ---------- ตาราง ---------- */
table{width:100%; border-collapse:collapse; font-size:14.5px}
th,td{padding:9px 10px; text-align:left; border-bottom:1px solid var(--line)}
th{color:var(--muted); font-weight:600; font-size:12.5px}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}

/* ---------- อื่น ๆ ---------- */
.page-head{margin:26px 0 14px}
.page-head h1{margin:0; font-size:24px}
.page-head p{margin:4px 0 0; color:var(--muted); font-size:14px}
.eyebrow{
  display:inline-block; font-size:12px; letter-spacing:.6px; color:var(--gold);
  border:1px solid rgba(224,165,51,.4); border-radius:999px; padding:3px 11px; margin-bottom:8px;
}
.center{text-align:center}
.muted{color:var(--muted)}
.free-note{
  margin:26px 0 40px; text-align:center; font-size:12.5px; color:var(--muted);
}
.spinner{color:var(--muted); font-size:14px; padding:18px 0; text-align:center}