:root{
  --ground:#f4f6f8;
  --surface:#fff;
  --ink:#141b24;
  --ink-2:#414e5e;
  --muted:#65717f;
  --line:#dce1e8;
  --accent:#8f620d;
  --accent-wash:#f7efdd;
  --danger:#9d2720;
  --danger-wash:#fbeceb;
  --ok:#156244;
  --ok-wash:#e4f1ea;
  --radius:10px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0e141a; --surface:#172029; --ink:#e6ebf1; --ink-2:#bcc7d4;
    --muted:#8d9aaa; --line:#27313d; --accent:#e0ad5c; --accent-wash:#2a2317;
    --danger:#e89189; --danger-wash:#2e1c1b; --ok:#6ac6a0; --ok-wash:#152922;
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"IBM Plex Sans Thai","Sarabun",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.7; -webkit-font-smoothing:antialiased;
}

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 20px; background:var(--surface); border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.brand-mark{
  width:30px; height:30px; display:grid; place-content:center; border-radius:8px;
  background:var(--accent-wash); color:var(--accent); font-weight:700; font-size:13px;
}
.brand-text{font-weight:600}
.topnav{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.who{color:var(--ink-2); font-size:14px}
.chip{
  margin-left:6px; padding:1px 7px; border-radius:4px; font-size:11px;
  background:var(--accent-wash); color:var(--accent);
}
.inline{display:inline}

.wrap{max-width:760px; margin:0 auto; padding-inline:20px; padding-block:32px 64px}

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; box-shadow:0 1px 2px rgba(20,27,36,.04), 0 10px 26px -20px rgba(20,27,36,.4);
}
.card-narrow{max-width:420px; margin:0 auto}
.center{text-align:center}

h1{font-size:23px; font-weight:700; margin:0 0 6px; letter-spacing:-.01em; text-wrap:balance}
.sub{margin:0 0 22px; color:var(--muted); font-size:14px}
.alt{margin:20px 0 0; font-size:14px; color:var(--muted)}
a{color:var(--accent)}

label{display:block; margin:16px 0 5px; font-size:14px; font-weight:500}
.hint{font-weight:400; color:var(--muted); font-size:12px}
input[type=text],input[type=email],input[type=password]{
  width:100%; padding:10px 12px; font:inherit; font-size:15px;
  color:var(--ink); background:var(--ground);
  border:1px solid var(--line); border-radius:8px;
}
input:focus-visible{outline:2px solid var(--accent); outline-offset:1px; background:var(--surface)}

.btn{
  font:inherit; font-size:15px; font-weight:500; cursor:pointer;
  border-radius:8px; padding:10px 18px; border:1px solid transparent;
}
.btn-primary{width:100%; margin-top:22px; background:var(--accent); color:#fff}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:none; border-color:var(--line); color:var(--ink-2); padding:6px 12px; font-size:14px}
.btn-ghost:hover{border-color:var(--muted)}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.err{margin:5px 0 0; font-size:13px; color:var(--danger)}

.flash{padding:11px 15px; border-radius:8px; margin-bottom:18px; font-size:14px}
.flash-success{background:var(--ok-wash); color:var(--ok)}
.flash-error{background:var(--danger-wash); color:var(--danger)}

.facts{display:grid; grid-template-columns:auto 1fr; gap:8px 20px; margin:0 0 22px; font-size:14px}
.facts dt{color:var(--muted)}
.facts dd{margin:0}
code{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13px;
  background:var(--ground); padding:1px 6px; border-radius:4px;
}
.next{
  margin:0; padding-top:18px; border-top:1px solid var(--line);
  color:var(--muted); font-size:14px;
}
.status{font-size:40px; font-weight:700; color:var(--accent); margin:0 0 4px; line-height:1}

.foot{text-align:center; color:var(--muted); font-size:13px; padding-bottom:32px}

@media (max-width:460px){
  .card{padding:22px 18px}
  .facts{grid-template-columns:1fr; gap:2px 0}
  .facts dd{margin-bottom:10px}
}