.auth { max-width:430px; margin:7vh auto 0; }
  .auth .card { padding:var(--sp-6); }
  .brand-center { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; margin-bottom:var(--sp-5); }
  .brand-center .brand-image { width:150px; height:150px; object-fit:contain; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--card); box-shadow:var(--sh-1); }
  .brand-center .brand-name { margin:0; color:var(--ink); font-size:22px; font-weight:700; line-height:1.4; }
  .brand-center .brand-tagline { max-width:330px; margin:0; color:var(--mute); font-size:12.5px; line-height:1.8; }
  .brand-center .mark { width:46px; height:46px; border-radius:14px; font-size:21px; }
  .brand-center .brand-video { width:min(100%, 320px); margin:2px 0 4px; }
  .brand-center .brand-video video { display:block; width:100%; aspect-ratio:16/9; border:0; outline:0;
                                     border-radius:var(--r-lg); background:var(--card); object-fit:contain; box-shadow:none; }
  .brand-center h1 { margin:0; font-size:19px; }
  .brand-center h1.brand-gap { margin-top:14px; }
  .brand-center .brand-video video::-webkit-media-controls-panel { background:var(--card); }
  .brand-center p { margin:0; color:var(--mute); font-size:13px; }
  @media (max-width:480px) { .auth { margin-top:3vh; } .brand-center .brand-image { width:120px; height:120px; } }
  #roles { display:grid; gap:6px; margin-top:6px; }
  #roles label { display:flex; gap:9px; align-items:flex-start; border:1px solid var(--line); border-radius:var(--r-md);
                 padding:9px 12px; margin:0; cursor:pointer; font-size:13px; color:var(--ink); }
  #roles label:has(input:checked) { border-color:var(--acc); background:var(--acc-s); }
  #roles input { width:auto; min-height:0; margin-top:3px; }
  #roles small { display:block; color:var(--mute); font-size:12px; }
  #profile-fields { display:grid; gap:10px; margin-top:4px; }
  #profile-fields label { margin:0; }
  #profile-fields select { width:100%; }
  #profile-fields .req { color:var(--bad); font-weight:700; }
  #profile-fields .opt { color:var(--mute); font-size:11px; font-style:normal;
                         border:1px solid var(--line); border-radius:999px; padding:1px 7px; }
  #profile-fields .opt::before { content:'— '; }
  form label.terms { display:flex; gap:9px; align-items:flex-start; margin:10px 0 2px; font-size:12.5px;
                     line-height:1.9; color:var(--ink); }
  form label.terms input { width:auto; min-height:0; margin-top:4px; }
  form label.terms a { color:var(--acc); }
  @media (min-width:560px) { .auth:has(#profile-fields:not([hidden])) { max-width:640px; } }