/* Trang phụ Aura Pass: /join/, /p/, /staff/, /privacy/. Dùng chung font của style.css và biến của tokens.css. */
.sub{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  /* L1: dải G2 phía trên và một vệt sáng ấm tĩnh ở góc phải; vùng form/QR giữ Deep Purple */
  background:
    radial-gradient(46% 300px at 100% 0%,rgb(var(--orange-rgb) / var(--glow-l1)) 0%,transparent 70%) top/100% 420px no-repeat,
    linear-gradient(180deg,rgb(var(--deep-rgb) / 0) 120px,var(--deep) 420px) top/100% 420px no-repeat,
    var(--g2) top/100% 420px no-repeat,
    var(--ground);
}
.sub-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-4);
  padding:var(--space-7) var(--space-6) 0;
}
.sub-tag{
  font-size:var(--text-label);
  font-weight:900;
  letter-spacing:.18em;
  color:var(--ink);
  padding:var(--space-2) 0;
}
.sub-body{
  width:100%;
  max-width:var(--container-form);
  margin:0 auto;
  padding:var(--space-10) var(--space-5) var(--space-16);
  flex:1;
}
.sub-body.wide{max-width:var(--container-wide)}
.sub h1{
  margin:var(--space-3) 0 var(--space-4);
  font-family:var(--font-display);
  font-size:clamp(34px,8vw,52px);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.01em;
}
.sub h2{
  margin:var(--space-9) 0 var(--space-3);
  font-family:var(--font-display);
  font-size:var(--text-h3);
  font-weight:900;
  letter-spacing:-.025em;
}
.sub p,.sub li{color:var(--ink-muted);font-size:var(--text-body);line-height:1.6;text-wrap:pretty}
.sub p strong,.sub li strong{color:var(--ink)}
.sub a.inline{color:var(--yellow);text-decoration:underline;text-underline-offset:3px}
.lead{font-size:var(--text-lead)!important}
.sub .kicker{margin:0;font-size:var(--text-label);line-height:1.5;letter-spacing:.18em;color:var(--yellow)}
/* <button> không tự kế thừa màu/font như <a> */
.sub button.btn{font-family:inherit;color:var(--ink);border:var(--border-ui) solid var(--line-bold);background:var(--fill-soft);cursor:pointer}
.sub button.btn-primary{color:var(--on-accent);border-color:transparent;background:var(--yellow)}

/* ---------- form ---------- */
.form{display:grid;gap:var(--space-5);margin-top:var(--space-7)}
.field{display:grid;gap:var(--space-2)}
.field label,.field-label{font-size:var(--text-field-label);font-weight:800;letter-spacing:.04em;color:var(--ink)}
.input{
  width:100%;
  min-height:var(--control-height);
  padding:0 var(--space-4);
  border:var(--border-hair) solid var(--line-strong);
  border-radius:var(--radius-card);
  background:var(--glass-field);
  color:var(--ink);
  font:inherit;
  font-size:var(--text-lead); /* >=16px để iOS không tự phóng to */
}
.input[aria-invalid="true"]{border-color:var(--state-error)}
/* focus đứng sau để ô đang sửa vẫn có viền focus nhìn thấy */
.input:focus{outline:none;border-color:var(--yellow)}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-muted) 50%),linear-gradient(135deg,var(--ink-muted) 50%,transparent 50%);background-position:calc(100% - 22px) 23px,calc(100% - 16px) 23px;background-size:6px 6px;background-repeat:no-repeat}
select.input option{color:var(--black)}
.input.code-input{text-transform:uppercase;letter-spacing:.12em;font-weight:800}
.field-error{margin:0;color:var(--state-error)!important;font-size:var(--text-note)!important}
.check{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--text-note);line-height:1.5;color:var(--ink-muted)}
.check input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--yellow)}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.btn[disabled]{opacity:.55;pointer-events:none}
.sub button.btn[disabled]{background:transparent;border-style:dashed;color:var(--ink-muted);box-shadow:none}
.btn-block{width:100%}
.msg{
  margin:0;
  padding:var(--space-4) var(--space-4);
  border-radius:var(--radius-card);
  border:var(--border-hair) solid var(--line);
  background:var(--glass-field);
  color:var(--ink)!important;
  font-size:var(--text-note)!important;
}
.msg.ok{border-color:rgb(var(--yellow-rgb) / .6);background:rgb(var(--yellow-rgb) / .12)}
.msg.err{border-color:rgb(var(--state-error-rgb) / .5);background:rgb(var(--state-error-rgb) / .08)}

/* ---------- pass ---------- */
.pass-card{
  margin-top:var(--space-2);
  padding:var(--space-5);
  border:var(--border-hair) solid var(--line);
  /* container chức năng như QR stand: bo radius-ui, kính chàm, bóng night */
  border-radius:var(--radius-ui);
  background:var(--g-glass-indigo);
  box-shadow:var(--shadow-night);
  text-align:center;
}
.pass-card img{display:block;width:100%;max-width:var(--pass-card-max);height:auto;margin:0 auto;border-radius:var(--radius-ui)}
.pass-code{
  margin:var(--space-4) 0 0;
  font-family:var(--font-display);
  font-size:var(--text-code)!important;
  font-weight:800;
  letter-spacing:.14em;
  color:var(--ink)!important;
}
.pass-facts{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;margin:var(--space-4) 0 0;padding:0;list-style:none}
.pass-facts li{
  padding:var(--space-2) var(--space-3);
  border:var(--border-hair) solid var(--line);
  border-radius:var(--radius-sharp);
  font-size:var(--text-caption);
  color:var(--ink-muted);
}
.pass-facts li.on{border-color:rgb(var(--yellow-rgb) / .6);color:var(--state-ok)}

/* ---------- nhân viên ---------- */
.staff-box{
  margin:0 0 var(--space-6);
  padding:var(--space-5);
  border:var(--border-hair) solid rgb(var(--yellow-rgb) / .55);
  border-radius:var(--radius-card);
  background:rgb(var(--yellow-rgb) / .08);
}
.staff-box h2{margin:0 0 var(--space-1)}
.staff-who{margin:0 0 var(--space-4);font-size:var(--text-h3)!important;font-weight:800;color:var(--ink)!important}
.staff-actions{display:grid;gap:var(--space-3);margin-top:var(--space-4)}
.staff-row{display:flex;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) 0;border-top:var(--border-hair) solid var(--line);font-size:var(--text-note);color:var(--ink-muted)}
.staff-row b{color:var(--ink);text-align:right}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);margin:var(--space-5) 0}
.stat{padding:var(--space-4);border:var(--border-hair) solid var(--line);border-radius:var(--radius-card);text-align:center;background:var(--glass)}
.stat b{display:block;font-family:var(--font-display);font-size:var(--text-stat);font-weight:800;color:var(--ink)}
.stat span{font-size:var(--text-caption);color:var(--ink-muted)}

.sub-foot{padding:var(--space-6) var(--space-6);border-top:var(--border-hair) solid var(--line);font-size:var(--text-caption);color:var(--ink-muted);display:flex;gap:var(--space-5);flex-wrap:wrap}
.sub-foot a{text-decoration:underline;text-underline-offset:3px}