flare-ui/src/app/components/user-info/user-info.component.scss

.user-info-container {
  max-width: 500px;
  margin: 0 auto;

  h2 {
    margin-bottom: 24px;
    color: #333;
  }

  form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .full-width {
    width: 100%;
  }

  .password-strength {
    margin-top: -12px;
    margin-bottom: 8px;

    .strength-label {
      font-size: 12px;
      margin-bottom: 4px;
      color: #666;

      span {
        font-weight: 500;

        &.strength-warn {
          color: #f44336;
        }

        &.strength-accent {
          color: #ff9800;
        }

        &.strength-primary {
          color: #4caf50;
        }
      }
    }

    mat-progress-bar {
      height: 6px;
      border-radius: 3px;
    }
  }

  .form-actions {
    margin-top: 16px;
    text-align: right;

    button {
      min-width: 120px;
    }
  }
}