:root{
  --ink:#111218;--muted:#626979;--line:#e3e6ed;--canvas:#f7f8fb;--surface:#fff;
  --blue:#1468f5;--blue-pressed:#0953cd;--red:#c52b32;--green:#087a45;
  --shadow:0 18px 56px rgba(25,31,48,.09);--safe-top:env(safe-area-inset-top,0px);
  font-family:"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  color:var(--ink);background:var(--canvas);font-synthesis:none
}
*{box-sizing:border-box}
html,body{min-width:320px;min-height:100%;margin:0;background:var(--canvas)}
body{-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overflow-x:hidden}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible{outline:3px solid rgba(20,104,245,.28);outline-offset:2px}
.join-shell{width:min(100%,640px);min-height:100vh;min-height:100dvh;margin:0 auto;padding:calc(22px + var(--safe-top)) 20px calc(28px + env(safe-area-inset-bottom,0px))}
.brand-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:48px}
.brand{min-height:44px;display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.brand img{display:block;width:72px;height:42px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(35,34,94,.14))}
.brand span{display:flex;flex-direction:column;line-height:1.02}
.brand strong{font-size:17px;letter-spacing:.06em}.brand small{margin-top:5px;color:#5c6272;font-size:10px;font-weight:700;letter-spacing:.03em}
.secure-label{color:var(--muted);font-size:13px;font-weight:650;white-space:nowrap}
.join-card{width:100%;min-width:0;max-width:100%;padding:36px;border:1px solid var(--line);border-radius:24px;background:var(--surface);box-shadow:var(--shadow)}
.join-card[hidden]{display:none}
.eyebrow{margin:0 0 12px;color:var(--blue);font-size:14px;font-weight:780;letter-spacing:.08em}
h1{max-width:100%;margin:0;font-size:clamp(30px,7.5vw,46px);line-height:1.14;letter-spacing:-.045em;overflow-wrap:anywhere;word-break:break-word}
.lead{margin:16px 0 28px;color:var(--muted);font-size:17px;line-height:1.65}
form{display:grid;gap:10px}
label{display:block;margin:20px 0 8px;color:#3e4350;font-size:14px;font-weight:720}
input{width:100%;min-height:52px;padding:0 16px;border:1px solid #cfd4df;border-radius:13px;background:#fff;color:var(--ink);font-size:16px;appearance:none;-webkit-appearance:none}
input::placeholder{color:#9399a7}
input:focus{border-color:var(--blue)}
#joinCode{text-transform:uppercase;letter-spacing:.12em;font-weight:800}
.primary{width:100%;min-height:52px;margin-top:12px;padding:0 20px;border:1px solid var(--blue);border-radius:13px;background:var(--blue);color:#fff;font-weight:800}
.primary:active{background:var(--blue-pressed)}.primary:disabled{border-color:#a9b0bf;background:#a9b0bf;cursor:wait}
.text-button{min-width:44px;min-height:44px;padding:0;border:0;background:transparent;color:var(--blue);font-weight:720}
.back-button{margin:-14px 0 18px}
.training-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0 0}
.training-meta div{padding:14px 16px;border-radius:14px;background:#f5f6f9}
.training-meta dt{color:var(--muted);font-size:12px}.training-meta dd{min-width:0;margin:5px 0 0;font-size:15px;font-weight:720;line-height:1.45;overflow-wrap:anywhere}
.divider{height:1px;margin:28px 0 6px;background:var(--line)}
.scan-guidance{max-width:100%;margin:18px 0 4px;padding:14px 15px;border-radius:13px;background:#eef4ff;color:#34527f;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.person-list{display:grid;gap:8px;max-height:340px;margin-top:14px;overflow:auto;overscroll-behavior:contain}
.person-button{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;min-height:52px;padding:10px 14px;border:1px solid var(--line);border-radius:13px;background:#fff;color:var(--ink);text-align:left}
.person-button:hover,.person-button:focus-visible{border-color:#8bb1fc;background:#f3f7ff}
.person-button strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.person-button small{color:var(--muted)}
.empty-note{padding:16px;border-radius:12px;background:#f5f6f8;color:var(--muted);line-height:1.55}
.field-error{min-height:20px;margin:7px 0 0;color:var(--red);font-size:13px;line-height:1.5}
.personal-scan-note{margin:18px 0 0;padding:14px 15px;border-radius:13px;background:#eaf8f1;color:var(--green);font-size:14px;font-weight:700;line-height:1.55}
.team-reveal{margin:28px 0;padding:22px;border-radius:18px;background:linear-gradient(135deg,#f0f5ff,#fbf5ff)}
.team-reveal span,.success-team span{display:block;color:var(--muted);font-size:13px}.team-reveal strong,.success-team strong{display:block;margin-top:7px;color:#19336f;font-size:25px;line-height:1.25}
.claim-block{margin-bottom:24px;padding:20px;border:1px solid #d8e2f7;border-radius:16px;background:#f8faff}
.claim-block h2,.optional-block h2{margin:0 0 6px;font-size:18px}.claim-block p,.optional-block p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}
.claim-block label{margin-top:16px}.claim-block input{font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.18em}
.optional-block{padding-top:22px;border-top:1px solid var(--line)}
.optional-block h2{margin-top:0}
.success-card{text-align:center}.success-mark{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 22px;border-radius:50%;background:#e7f7ef;color:var(--green);font-size:28px;font-weight:900}
.success-team{margin:28px 0 20px;padding:20px;border-radius:16px;background:#f3f7ff}
.glasses-state{margin:0;color:var(--green);font-size:14px;line-height:1.6;font-weight:650}
footer{padding:28px 4px 0;color:#8a8f9c;font-size:12px;line-height:1.5;text-align:center}
@media(max-width:560px){
  .join-shell{padding-left:14px;padding-right:14px}.brand-header{margin-bottom:28px}.brand img{width:62px;height:36px}.secure-label{font-size:11px}
  .join-card{padding:25px 20px;border-radius:20px;box-shadow:0 10px 36px rgba(25,31,48,.07)}
  h1{font-size:clamp(28px,8.2vw,36px);letter-spacing:-.035em}
  .training-meta{grid-template-columns:1fr}.person-list{max-height:44vh;max-height:44dvh}
}
@media(max-width:350px){.brand small{display:none}.secure-label{max-width:96px;white-space:normal;text-align:right}.join-card{padding:22px 16px}}
@media(orientation:landscape) and (max-height:520px){.join-shell{width:min(100%,760px)}.brand-header{margin-bottom:20px}.join-card{padding:24px 30px}.training-meta{grid-template-columns:1fr 1fr}.person-list{max-height:180px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}