:root{
  --navy:#0b2b55;--blue:#1769aa;--red:#d6202a;--bg:#f3f7fb;
  --line:#dce6f0;--text:#172033;--muted:#6a7788;--green:#168456;--white:#fff;
}
*{box-sizing:border-box}
body{
  margin:0;font-family:system-ui,-apple-system,"Segoe UI","Noto Sans Thai",sans-serif;
  color:var(--text);background:linear-gradient(180deg,#f8fbff,#eef4fa);
}
.wrap{max-width:620px;margin:auto;padding:18px 15px 42px}
.brand{display:flex;align-items:center;gap:12px;margin:4px 0 18px}
.logo{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  font-weight:900;background:var(--navy);color:white
}
.brand h1{font-size:20px;color:var(--navy);margin:0}
.brand p{font-size:12px;color:var(--muted);margin:3px 0 0}
.card{
  padding:20px;background:white;border:1px solid var(--line);border-radius:20px;
  box-shadow:0 12px 34px rgba(20,43,75,.09);margin-bottom:15px
}
h2{color:var(--navy);font-size:22px;margin:0 0 7px}
p{line-height:1.5}
.label{display:block;font-size:13px;color:var(--muted);font-weight:700;margin:13px 0 7px}
input{
  width:100%;padding:14px;border:1px solid #cbd7e4;border-radius:12px;
  font-size:17px;background:#fff;outline:none
}
input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,105,170,.1)}
.btn{
  width:100%;padding:14px 15px;border:0;border-radius:12px;margin-top:12px;
  font-size:16px;font-weight:800;cursor:pointer
}
.btn:disabled{opacity:.5}
.btn-primary{background:var(--navy);color:#fff}
.btn-blue{background:var(--blue);color:#fff}
.btn-red{background:var(--red);color:#fff}
.btn-light{background:#edf3f9;color:var(--navy)}
.hidden{display:none!important}
.stepper{display:flex;gap:7px;margin:0 2px 17px}
.step{height:5px;flex:1;background:#d8e2ec;border-radius:10px}
.step.active{background:var(--red)}
.profile{
  display:grid;grid-template-columns:58px 1fr;gap:12px;align-items:center;
  padding:13px;border:1px solid var(--line);background:#f7faff;border-radius:15px
}
.avatar{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:#e6eef7;color:var(--navy);font-weight:900;font-size:18px
}
.small{font-size:12px;color:var(--muted)}
.kv{display:grid;grid-template-columns:115px 1fr;gap:8px;margin-top:14px;font-size:14px}
.kv div:nth-child(odd){color:var(--muted)}
.status{padding:12px 13px;border-radius:12px;margin-top:12px;font-size:14px}
.status.ok{background:#e9f8f1;border:1px solid #c3ead8;color:#116b49}
.status.err{background:#fff0f1;border:1px solid #ffc8cd;color:#a31e27}
.status.warn{background:#fff6e7;border:1px solid #ffdea6;color:#805300}
#reader{width:100%;overflow:hidden;border-radius:14px;margin-top:12px}
.center{text-align:center}
.check{
  width:76px;height:76px;border-radius:50%;background:#e8f8f1;color:var(--green);
  margin:5px auto 16px;display:grid;place-items:center;font-size:40px;font-weight:900
}
.note{
  padding:12px;border-radius:12px;background:#f7f9fc;border:1px solid var(--line);
  font-size:12px;color:var(--muted);margin-top:14px
}