.sam-login {
  display      : block; 
  padding      : 16px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  background   : linear-gradient(90deg, rgba(255,255,255,0.98), rgba(245,249,255,0.98));
}

.sam-login .sa-row {
  display    : flex;
  gap        : 12px;
  align-items: end;
  flex-wrap  : wrap;
}

.sam-login .sa-token {
  flex     : 1 1 420px;
  min-width: 220px;
}

.sam-login .sa-token label { display:block; margin:0; }
.sam-login #saTokenInput {
  width        : 100%;
  padding      : 10px 12px;
  height       : 40px;
  border-radius: 8px;
  border       : 1px solid rgba(15,23,42,0.06);
  box-sizing   : border-box;
  font-size    : 13px;
  line-height  : 1;
}

.sam-login .sa-remember {
  display    : flex;
  align-items: center;
  gap        : 8px;
  flex       : 0 0 auto;
  margin-left: 0;
}

.sam-login .sa-remember input[type="checkbox"] {
  width    : 18px;
  height   : 18px;
  margin   : 0;
  transform: translateY(0);
}

.sam-login .sa-actions {
  margin-left: auto;
  display    : flex;
  gap        : 8px;
  align-items: center;
  flex       : 0 0 auto;
}

.sam-login .sa-actions .btn,
.sam-login .sa-actions .btn.btn-primary {
  padding        : 8px 12px;
  height         : 38px;
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  border-radius  : 6px;
  box-sizing     : border-box;
}

/* small message under the row */
#saLoginMsg {
  margin-top: 10px;
  color     : var(--sam-muted, #6b7280);
  font-size : 13px;
}

@media (max-width: 640px) {
  .sam-login .sa-row {
    align-items: stretch;
  }
  .sam-login .sa-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
  }
  .sam-login .sa-token {
    flex-basis: 100%;
  }
  .sam-login .sa-remember {
    order: 2;
    width: 100%;
    justify-content: flex-start;
  }
  .sam-login .sa-actions { order: 3; margin-top: 8px; }
}