/* ===== Pixel UI — ใช้กับหน้าเข้าสู่ระบบและหน้าผู้เช่า ===== */
:root{
  --p-bg:#e7e3d8;
  --p-ink:#1b1b23;
  --p-ink-soft:#5b5a68;
  --p-paper:#fffdf6;
  --p-accent:#2f6df0;
  --p-green:#1f9d63;
  --p-amber:#d98a00;
  --p-red:#d94646;
  --p-shadow:4px 4px 0 var(--p-ink);
}
*{box-sizing:border-box}
body{
  margin:0;padding:0;
  background:var(--p-bg);
  background-image:linear-gradient(rgba(27,27,35,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(27,27,35,.05) 1px,transparent 1px);
  background-size:8px 8px;
  color:var(--p-ink);
  font-family:Sarabun,system-ui,sans-serif;
  font-size:15px;
  -webkit-font-smoothing:none;
}
/* ใช้ฟอนต์พิกเซลกับข้อความอังกฤษ/ตัวเลขเท่านั้น — ภาษาไทยใช้ Sarabun หนา ๆ แทน */
.px-mono{font-family:'Press Start 2P',Sarabun,monospace;letter-spacing:.5px}
.px-th{font-family:Sarabun,sans-serif;font-weight:800;letter-spacing:0}
.px-card{background:var(--p-paper);border:3px solid var(--p-ink);box-shadow:var(--p-shadow);padding:22px}
.px-title{font-family:'Press Start 2P',Sarabun,monospace;font-size:15px;line-height:1.7;margin:0}
.px-label{display:block;font-weight:700;font-size:13px;margin:0 0 6px}
.px-input{
  width:100%;padding:12px 12px;border:3px solid var(--p-ink);background:#fff;
  font-family:Sarabun,sans-serif;font-size:15px;color:var(--p-ink);outline:none;
}
.px-input:focus{box-shadow:inset 0 0 0 2px var(--p-accent)}
.px-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 18px;border:3px solid var(--p-ink);background:var(--p-accent);color:#fff;
  font-family:Sarabun,sans-serif;font-weight:800;font-size:15px;line-height:1.5;
  box-shadow:var(--p-shadow);cursor:pointer;transition:none;
}
.px-btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--p-ink)}
.px-btn[disabled]{opacity:.55;cursor:not-allowed}
.px-btn.ghost{background:var(--p-paper);color:var(--p-ink)}
.px-btn.green{background:var(--p-green)}
.px-tag{display:inline-block;padding:5px 9px;border:2px solid var(--p-ink);font-weight:700;font-size:12px;background:#fff}
.px-tag.paid{background:#cdf0dd}
.px-tag.due{background:#fbe6c2}
.px-err{border:3px solid var(--p-red);background:#fbe7e7;padding:10px 12px;font-size:13px;font-weight:600}
.px-row{display:flex;align-items:center;gap:10px}
.px-stack{display:grid;gap:14px}
a{color:var(--p-accent)}
a:hover{color:var(--p-ink)}

/* ===== มือถือ ===== */
@media (max-width:640px){
  input,select,textarea,.px-input{font-size:16px!important}
  .px-btn{min-height:48px}
  body{padding-bottom:env(safe-area-inset-bottom)}
}