:root{
  --ivory:#F7F5EF;
  --paper:#ffffff;
  --ink:#2b2b27;
  --muted:#7a756a;
  --seal-red:#9c1c1c;
  --gold:#b8912f;
  --line:#e4ded0;
  --shadow:0 6px 24px rgba(60,50,20,.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"TH Sarabun New","Sarabun","Noto Sans Thai",-apple-system,"Segoe UI",Tahoma,sans-serif;
  background:var(--ivory);
  color:var(--ink);
  font-size:18px;
  line-height:1.55;
}
.topbar{
  display:flex;align-items:center;gap:12px;
  padding:10px 20px;background:var(--paper);
  border-bottom:2px solid var(--gold);
  box-shadow:var(--shadow);
}
.topbar-seal{height:34px;width:auto;display:block}
.wordmark{
  font-weight:700;letter-spacing:.14em;font-size:20px;color:var(--seal-red);
}
.content{max-width:820px;margin:0 auto;padding:32px 20px}

/* ---- cards / home ---- */
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:28px 30px;box-shadow:var(--shadow);
}
.home h1{margin:.1em 0 .2em;font-size:28px}
.lead{font-size:20px;margin:.2em 0}
.phase-tag{
  display:inline-block;margin:.6em 0;padding:.2em .7em;border-radius:999px;
  background:var(--ivory);border:1px solid var(--gold);color:var(--gold);
  font-size:15px;letter-spacing:.05em;
}
.muted{color:var(--muted);font-size:16px}
.inline{display:inline}
.linkbtn{background:none;border:none;color:var(--seal-red);cursor:pointer;
  font:inherit;text-decoration:underline;padding:0}

/* ---- login ---- */
.login-wrap{
  max-width:380px;margin:6vh auto 0;text-align:center;
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:34px 30px 30px;box-shadow:var(--shadow);
}
.login-seal{width:120px;height:120px;object-fit:contain;margin:0 auto 6px}
.login-title{margin:.1em 0 0;letter-spacing:.16em;color:var(--seal-red);font-size:26px}
.login-sub{margin:.1em 0 1.2em;color:var(--muted)}
.login-form{display:flex;flex-direction:column;gap:14px;text-align:left}
.login-form label{display:flex;flex-direction:column;gap:5px;font-size:16px;color:var(--muted)}
.login-form input{
  padding:10px 12px;font:inherit;border:1px solid var(--line);border-radius:9px;
  background:#fcfbf7;
}
.login-form input:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.login-form button{
  margin-top:6px;padding:11px;font:inherit;font-weight:700;cursor:pointer;
  color:#fff;background:var(--seal-red);border:none;border-radius:9px;letter-spacing:.06em;
}
.login-form button:hover{background:#821616}
.alert{
  background:#fbeaea;border:1px solid #e6b8b8;color:#8a1f1f;
  padding:9px 12px;border-radius:9px;margin-bottom:14px;font-size:16px;
}